@windward/games 0.15.0 → 0.17.0

package/CHANGELOG.md

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

package/components/content/blocks/crosswordPuzzle/CrosswordPuzzle.vue

@@ -33,7 +33,15 @@
                     )
                 }}
             </p>
-            <p>{{ error }}</p>
+            <p>
+                {{
+                    render
+                        ? $t(
+                              'windward.games.components.content.blocks.crossword.error.unable_to_load_student'
+                          )
+                        : error
+                }}
+            </p>
         </v-alert>
         <div
             v-if="!error"
@@ -284,7 +292,6 @@ export default {
                     )
                 }
             }
-
             // this is true if render is toggled back to true
             if (generate && this.error === '') {
                 this.generateGrid(this.wordMap)
@@ -443,7 +450,7 @@ export default {
 
             if (grid.length > MATRIX_LENGTH) {
                 this.error = this.$t(
-                    'windward.games.components.content.blocks.crossword.error.could_not_generate'
+                    'windward.games.components.content.blocks.crossword.error.unable_to_load_editor'
                 )
                 return false
             }

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

@@ -68,9 +68,13 @@
                                 outlined
                                 tile
                                 @click="onChooseAnswer(answer, question)"
+                                @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) +
                                             '. ' +
@@ -79,6 +83,24 @@
                                     </p>
                                     <div>
                                         <v-icon
+                                            v-if="
+                                                handleInformationOutline(
+                                                    question,
+                                                    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,
@@ -86,7 +108,10 @@
                                                 )
                                             "
                                             @click="
-                                                onAnswerDescription(question)
+                                                onAnswerDescription(
+                                                    question,
+                                                    answer
+                                                )
                                             "
                                             >{{
                                                 handleInformationOutline(
@@ -105,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"
@@ -172,7 +198,6 @@
                 :trigger="false"
                 @click:outside="close"
                 @click:close="close"
-                @keydown.esc="close"
             >
                 <template #title>
                     <div v-if="hint">
@@ -240,14 +265,14 @@ export default {
     data() {
         return {
             updateKey: 0,
-            completedItems: [],
             dialog: false,
             hint: false,
             hintText: '',
             answerDescriptionModal: false,
             answerDescription: '',
             studentResponses: [],
-            mountCourseCounter: false,
+            activeQuestion: '',
+            activeAnswer: '',
         }
     },
     computed: {
@@ -257,8 +282,8 @@ export default {
             enrollment: 'enrollment/get',
         }),
         completedAmount() {
-            if (this.completedItems) {
-                return _.flatten(this.completedItems).length
+            if (this.studentResponses) {
+                return _.flatten(this.studentResponses).length
             }
         },
         totalAmountQuestions() {
@@ -269,7 +294,7 @@ export default {
         completedPercent() {
             if (
                 this.block.metadata.config.questions.length > 0 &&
-                this.completedItems.length > 0
+                this.studentResponses.length > 0
             ) {
                 return (this.completedAmount / this.totalAmountQuestions) * 100
             }
@@ -277,41 +302,42 @@ 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
             this.answerDescription = question.answer_description
         },
         onChooseAnswer(answer, question) {
-            let studRep
-            this.studentResponses.find((obj) => {
-                if (obj.id === question.id) {
-                    studRep = obj
-                }
-            })
-            if (_.isEmpty(this.studentResponses) || _.isEmpty(studRep)) {
-                // lets html side know whish answer was chosen, this is important in determine css
-                answer.chosen = true
-                // clones question block into the correct index in the studentResponses araay
+            // check to see if student already answered this question
+            let studentResponse = this.studentResponses.find(
+                (obj) => obj.id === question.id
+            )
+            // if there is no student response for this question or there no student responses to any of the questions
+            if (
+                _.isEmpty(this.studentResponses) ||
+                _.isEmpty(studentResponse)
+            ) {
+                // get question and answer index to update the answer directly
+                // on block.metadata.config.questions to prevent buggy behavior
+                const questionIndex =
+                    this.block.metadata.config.questions.findIndex(
+                        (q) => q.id === question.id
+                    )
+                const answerIndex = this.block.metadata.config.questions[
+                    questionIndex
+                ].answer_options.findIndex((a) => a.id === answer.id)
+                // lets html side know which answer was chosen, this is important in determine css
+                this.block.metadata.config.questions[
+                    questionIndex
+                ].answer_options[answerIndex].chosen = true
+                // clones question block to break reference
                 const clonedQuestion = _.cloneDeep(question)
                 clonedQuestion.student_response = answer
 
-                if (answer.correctAnswer === true) {
-                    clonedQuestion.isStudentCorrect = true
-                } else {
-                    clonedQuestion.isStudentCorrect = false
-                }
-
                 this.studentResponses.push(clonedQuestion)
-                // ensure the object is not already in the completed items array if not push into the array
-                const questionDone = this.completedItems.find(
-                    (item) => item === question
-                )
-
-                if (!questionDone) {
-                    this.completedItems.push(question)
-                }
 
                 this.updateKey = Crypto.id()
             }
@@ -365,6 +391,7 @@ export default {
                     }
                 }
             )
+            // check if student already responded
             if (studentsQuestionResponse) {
                 // requirements for correct and chosen
                 if (
@@ -380,7 +407,12 @@ export default {
                     return 'mdi-check-circle-outline'
                 }
                 // requirements for wrong and chosen
-                if (answer.correctAnswer !== true && answer.chosen === true) {
+                if (
+                    answer.id ===
+                        studentsQuestionResponse.student_response.id &&
+                    answer.correctAnswer !== true &&
+                    answer.chosen === true
+                ) {
                     return 'mdi-close-circle'
                 }
             }
@@ -461,12 +493,12 @@ export default {
             return letters[answerIndex]
         },
         onHint(question) {
+            this.activeQuestion = question
             // launches dialog modal
             this.dialog = true
             this.hint = true
-            // sets text for modal, cannot just reference question.hint in html because
-            // the carousel loads all elements regardless of if they are on a different slide or not
-            // when mountCourseCounter so it always shows the last question if referenced question.hint
+            // sets text for modal, cannot just reference question.hint in html because the carousel loads
+            //  all elements regardless of if they are on a different slide so it always shows the last question
             this.hintText = question.hint
         },
         onFifty(question) {
@@ -505,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/crossword.ts

@@ -14,6 +14,10 @@ export default {
         could_not_generate:
             'Could not generate a {0} by {0} crossword with the supplied words',
         unknown: 'An unknown error occurred during the crossword creation',
+        unable_to_load_editor:
+            'Unable to generate crossword puzzle. Your current word list may have too many words, words that are too short/long, or insufficient shared letters for crossings. You can edit your word list and try again.',
+        unable_to_load_student:
+            'Unable to generate crossword puzzle with these words. Please try refreshing the page until it loads successfully or contact support if the issue persists.',
     },
 
     play_again: 'Randomize Crossword and Play Again',

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/crossword.ts

@@ -17,6 +17,10 @@ export default {
             'No se pudo generar un crucigrama {0} por {0} con las palabras proporcionadas',
         unknown:
             'Se produjo un error desconocido durante la creación del crucigrama',
+        unable_to_load_editor:
+            'No se puede generar el crucigrama. Tu lista de palabras actual puede tener demasiadas palabras, palabras demasiado cortas o largas, o suficientes letras compartidas para los cruces. Puedes editar tu lista de palabras e intentarlo de nuevo.',
+        unable_to_load_student:
+            'No se puede generar un crucigrama con estas palabras. Actualice la página hasta que se cargue correctamente o contacte con el soporte si el problema persiste.',
     },
 
     play_again: 'Aleatorizar crucigramas y jugar de nuevo',

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/crossword.ts

@@ -12,6 +12,10 @@ export default {
         could_not_generate:
             'Det gick inte att skapa ett {0} gånger {0} korsord med de angivna orden',
         unknown: 'Ett okänt fel inträffade under korsordsskapandet',
+        unable_to_load_editor:
+            'Det går inte att skapa korsord. Din nuvarande ordlista kan ha för många ord, ord som är för korta/långa eller otillräckliga delade bokstäver för korsningar. Du kan redigera din ordlista och försöka igen.',
+        unable_to_load_student:
+            'Det går inte att skapa korsord med dessa ord. Försök att uppdatera sidan tills den läses in eller kontakta supporten om problemet kvarstår.',
     },
 
     play_again: 'Randomisera korsord och spela igen',

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.15.0",
+    "version": "0.17.0",
     "description": "Windward UI Plugin Games",
     "main": "plugin.js",
     "scripts": {