@windward/games 0.16.0 → 0.17.0

package/CHANGELOG.md

@@ -1,5 +1,8 @@
 # Changelog
 
+### Release [0.17.0] created - 2025-05-13
+
+
 ### Release [0.16.0] created - 2025-04-29
 
 

package/components/content/blocks/flashcards/CardFace.vue

@@ -8,7 +8,8 @@
             </v-row>
             <v-row
                 v-if="
-                    settings.fileConfig.asset && settings.fileConfig.asset.file_asset_id
+                    settings.fileConfig.asset &&
+                    settings.fileConfig.asset.file_asset_id
                 "
             >
                 <v-col>

package/components/content/blocks/flashcards/Flashcard.vue

@@ -1,15 +1,17 @@
 <template>
     <v-container
+        :key="updateCardKey"
         style="height: 100%"
         class="div-container"
-        :key="updateCardKey"
     >
         <v-card
-            outlined
-            @click="toggleCard"
+            ref="cardFront"
             v-show="side"
+            outlined
             :class="cardClass"
             style="height: 90%"
+            @keyup.enter="toggleCard"
+            @click="toggleCard"
         >
             <v-card-text class="fill-height">
                 <CardFace
@@ -20,11 +22,13 @@
             </v-card-text>
         </v-card>
         <v-card
-            outlined
-            @click="toggleCard"
+            ref="cardBack"
             v-show="!side"
+            outlined
             :class="cardClass"
             style="height: 90%"
+            @keyup.enter="toggleCard"
+            @click="toggleCard"
         >
             <v-card-title class="card-title">
                 <v-row align="center" justify="center">{{
@@ -118,6 +122,12 @@ export default {
             this.side = !this.side
             // update container with correct side
             this.updateCardKey = Crypto.id()
+            this.$nextTick(() => {
+                const target = this.side
+                    ? this.$refs.cardFront
+                    : this.$refs.cardBack
+                target.$el.focus()
+            })
         },
     },
 }

package/components/content/blocks/multipleChoice/MultipleChoice.vue

@@ -71,7 +71,10 @@
                                 @keyup.enter="onChooseAnswer(answer, question)"
                             >
                                 <div class="d-flex justify-space-between">
-                                    <p class="mb-0">
+                                    <p
+                                        class="mb-0"
+                                        :aria-labelledby="answer.value"
+                                    >
                                         {{
                                             getCharacter(question, answer) +
                                             '. ' +
@@ -86,6 +89,18 @@
                                                     answer
                                                 ) !== undefined
                                             "
+                                            :ref="
+                                                'icon-information-' +
+                                                question.id +
+                                                '-' +
+                                                answer.id
+                                            "
+                                            tabindex="0"
+                                            :aria-label="
+                                                $t(
+                                                    'windward.games.components.content.blocks.multiple_choice.information'
+                                                )
+                                            "
                                             :class="
                                                 handleInformationClass(
                                                     question,
@@ -93,7 +108,10 @@
                                                 )
                                             "
                                             @click="
-                                                onAnswerDescription(question)
+                                                onAnswerDescription(
+                                                    question,
+                                                    answer
+                                                )
                                             "
                                             >{{
                                                 handleInformationOutline(
@@ -112,6 +130,7 @@
                 <v-col cols="12" md="12">
                     <v-row class="d-flex justify-center">
                         <v-btn
+                            :ref="'btn-hint-' + question.id"
                             color="primary"
                             text
                             elevation="0"
@@ -179,7 +198,6 @@
                 :trigger="false"
                 @click:outside="close"
                 @click:close="close"
-                @keydown.esc="close"
             >
                 <template #title>
                     <div v-if="hint">
@@ -253,6 +271,8 @@ export default {
             answerDescriptionModal: false,
             answerDescription: '',
             studentResponses: [],
+            activeQuestion: '',
+            activeAnswer: '',
         }
     },
     computed: {
@@ -282,7 +302,9 @@ export default {
         },
     },
     methods: {
-        onAnswerDescription(question) {
+        onAnswerDescription(question, answer) {
+            this.activeQuestion = question
+            this.activeAnswer = answer
             //launches modal and displays anwer description
             this.dialog = true
             this.answerDescriptionModal = true
@@ -471,6 +493,7 @@ export default {
             return letters[answerIndex]
         },
         onHint(question) {
+            this.activeQuestion = question
             // launches dialog modal
             this.dialog = true
             this.hint = true
@@ -514,11 +537,28 @@ export default {
             return array
         },
         close() {
+            if (this.answerDescriptionModal) {
+                this.answerDescriptionModal = false
+                this.answerDescription = ''
+                const iconButton =
+                    this.$refs[
+                        'icon-information-' +
+                            this.activeQuestion.id +
+                            '-' +
+                            this.activeAnswer.id
+                    ][0].$el
+                iconButton.focus()
+                this.activeAnswer = ''
+                this.activeQuestion = ''
+            } else if (this.hint) {
+                this.hint = false
+                this.hintText = ''
+                const hintButton =
+                    this.$refs['btn-hint-' + this.activeQuestion.id][0].$el
+                hintButton.focus()
+                this.activeQuestion = ''
+            }
             this.dialog = false
-            this.hint = false
-            this.answerDescriptionModal = false
-            this.hintText = ''
-            this.answerDescription = ''
         },
     },
 }

package/components/settings/FlashCardSlidesManager.vue

@@ -277,15 +277,31 @@
                 indeterminate
             ></v-progress-circular>
         </div>
+        <v-container class="pa-4 mb-6">
+            <v-row>
+                <v-col cols="12">
+                    <GenerateAIQuestionButton
+                        :course="course"
+                        :content="content"
+                        :block="block"
+                        question-type="flashcard"
+                        :replace-existing-mode="replaceExisting"
+                        @click:generate="onGeneratedFlashcards"
+                    ></GenerateAIQuestionButton>
+                </v-col>
+            </v-row>
+        </v-container>
     </div>
 </template>
 
 <script>
 import _ from 'lodash'
+import { mapGetters } from 'vuex'
 import {
     MathExpressionEditor,
     MathLiveWrapper,
     ContentViewer,
+    GenerateAIQuestionButton
 } from '@windward/core/utils'
 import BaseContentSettings from '~/components/Content/Settings/BaseContentSettings.js'
 import ContentBlockAsset from '~/components/Content/ContentBlockAsset.vue'
@@ -305,11 +321,13 @@ export default {
         TextEditor,
         SortableExpansionPanel,
         ImageAssetSettings,
+        GenerateAIQuestionButton,
     },
     data() {
         return {
             loading: false,
             valid: true,
+            replaceExisting: false,
         }
     },
     beforeMount() {
@@ -342,6 +360,10 @@ export default {
     },
 
     computed: {
+        ...mapGetters({
+            course: 'course/get',
+            content: 'content/get',
+        }),
         defaultCard() {
             return {
                 front: {
@@ -440,6 +462,72 @@ export default {
             }
             return htmlString.replace(/(<([^>]+)>)/gi, '')
         },
+        // Handler for receiving flashcards from GenerateAIQuestionButton
+        onGeneratedFlashcards(activityData, replaceCards) {
+            this.loading = true
+            try {
+                // Now process the activity data
+                if (activityData && activityData.metadata &&
+                    activityData.metadata.config &&
+                    activityData.metadata.config.cards &&
+                    Array.isArray(activityData.metadata.config.cards)) {
+
+                    // Save new cards
+                    const newCards = activityData.metadata.config.cards.map(card => ({
+                        front: { ...card.front },
+                        back: { ...card.back },
+                        side: card.side !== undefined ? card.side : true,
+                        expand: false
+                    }))
+
+                    if (replaceCards) {
+                        // Replace mode: Clear existing cards
+                        this.block.metadata.config.cards.splice(0, this.block.metadata.config.cards.length)
+
+                        // Add all new cards
+                        newCards.forEach(card => {
+                            this.block.metadata.config.cards.push(card)
+                        })
+                    } else {
+                        // Merge mode: Add new cards to existing ones
+                        newCards.forEach(card => {
+                            this.block.metadata.config.cards.push(card)
+                        })
+                    }
+
+                    // Update title and instructions if provided and we're in replace mode
+                    if (replaceCards) {
+                        if (activityData.metadata.config.title) {
+                            this.block.metadata.config.title = activityData.metadata.config.title
+                        }
+
+                        if (activityData.metadata.config.instructions) {
+                            this.block.metadata.config.instructions = activityData.metadata.config.instructions
+                        }
+                    }
+
+                    this.$toast.success(
+                        replaceCards
+                            ? this.$t('windward.games.components.settings.flashcard.form.replaced_successfully')
+                            : this.$t('windward.games.components.settings.flashcard.form.added_successfully'),
+                        { duration: 3000 }
+                    )
+                } else {
+                    this.$toast.error(this.$t('windward.games.components.settings.flashcard.form.invalid_response'), {
+                        duration: 5000
+                    })
+                }
+            } catch (error) {
+                // Extract error message from the response
+                const errorMessage = error.message || 'Unknown error occurred'
+                this.$toast.error(`${this.$t('windward.games.components.settings.flashcard.form.failed_to_process')}: ${errorMessage}`, {
+                    duration: 5000
+                })
+            } finally {
+                this.loading = false
+            }
+        }
     },
 }
 </script>
+

package/i18n/en-US/components/content/blocks/multiple_choice.ts

@@ -5,4 +5,5 @@ export default {
     hint_title: 'Hint',
     answer_feedback: 'Answer Feedback',
     total_points: 'Total Points for Course',
+    information: 'Answer Information',
 }

package/i18n/en-US/components/settings/flashcard.ts

@@ -26,5 +26,10 @@ export default {
                 'The character count for this field must be less than',
         },
         instructions:"Click on each card to reveal the term's definition. Use the arrows to move through the deck.",
+        replace_existing: 'Replace existing flashcards',
+        replaced_successfully: 'Flashcards replaced successfully',
+        added_successfully: 'New flashcards added successfully',
+        invalid_response: 'Invalid response from flashcard generation',
+        failed_to_process: 'Failed to process generated flashcards'
     },
 }

package/i18n/es-ES/components/content/blocks/flashcard.ts

@@ -5,4 +5,5 @@ export default {
     flip_card: 'Haga clic para ver atras',
     click_to_show_front: 'Haga clic para mostrar el frente',
     click_to_show_back: 'Haga clic para mostrar Atrás',
+    replace_existing: 'Reemplazar tarjetas existentes'
 }

package/i18n/es-ES/components/content/blocks/multiple_choice.ts

@@ -5,4 +5,5 @@ export default {
     hint_title: 'Pista',
     answer_feedback: 'Comentarios de respuesta',
     total_points: 'Puntos totales por Curso',
+    information: 'Información de respuesta',
 }

package/i18n/es-ES/components/settings/flashcard.ts

@@ -26,5 +26,10 @@ export default {
                 'El número de caracteres para este campo debe ser menor que',
         },
         instructions:"Haga clic en cada tarjeta para revelar la definición del término. Usa las flechas para moverte por el mazo.",
+        replace_existing: 'Reemplazar tarjetas existentes',
+        replaced_successfully: 'Tarjetas reemplazadas con éxito',
+        added_successfully: 'Nuevas tarjetas agregadas con éxito',
+        invalid_response: 'Respuesta inválida de la generación de tarjetas',
+        failed_to_process: 'Error al procesar las tarjetas generadas'
     },
 }

package/i18n/sv-SE/components/content/blocks/flashcard.ts

@@ -5,4 +5,5 @@ export default {
     flip_card: 'Klicka för att vända kortet',
     click_to_show_front: 'Klicka för att visa fronten',
     click_to_show_back: 'Klicka för att visa tillbaka',
+    replace_existing: 'Ersätt befintliga flashcards'
 }

package/i18n/sv-SE/components/content/blocks/multiple_choice.ts

@@ -5,4 +5,5 @@ export default {
     hint_title: 'Tips',
     answer_feedback: 'Svara feedback',
     total_points: 'Totala poäng för Kurs',
+    information: 'Svarsinformation',
 }

package/i18n/sv-SE/components/settings/flashcard.ts

@@ -26,5 +26,10 @@ export default {
                 'Teckenantalet för detta fält måste vara mindre än',
         },
         instructions:"Klicka på varje kort för att avslöja termens definition. Använd pilarna för att flytta genom däcket.",
+        replace_existing: 'Ersätt befintliga flashcards',
+        replaced_successfully: 'Flashkort har ersatts framgångsrikt',
+        added_successfully: 'Nya flashkort har lagts till',
+        invalid_response: 'Ogiltigt svar från genereringen av flashkort',
+        failed_to_process: 'Kunde inte bearbeta genererade flashkort'
     },
 }

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@windward/games",
-    "version": "0.16.0",
+    "version": "0.17.0",
     "description": "Windward UI Plugin Games",
     "main": "plugin.js",
     "scripts": {