@windward/games 0.20.0 → 0.21.0

package/CHANGELOG.md

@@ -1,5 +1,14 @@
 # Changelog
 
+## Release [0.21.0] - 2025-07-29
+
+* Merged in feature/LE-1912/sorting-game-generation (pull request #246)
+* Merged in feature/LE-1913/matching-block (pull request #245)
+* Merge branch 'release/0.21.0' into feature/LE-1913/matching-block
+* Merge branch 'develop' into Feature/LE-1913/matching-block
+* Merge branch 'develop' into feature/LE-1882/bucket-games
+
+
 ## Release [0.20.0] - 2025-06-25
 
 * Merged in feature/LE-1948/empty-bucket (pull request #242)

package/components/settings/MatchingGameManager.vue

@@ -248,12 +248,28 @@
                 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="matching_game"
+                        :replace-existing-mode="replaceExisting"
+                        @click:generate="onGeneratedMatchingGame"
+                    ></GenerateAIQuestionButton>
+                </v-col>
+            </v-row>
+        </v-container>
     </div>
 </template>
 
 <script>
 import BaseContentSettings from '~/components/Content/Settings/BaseContentSettings.js'
 import _ from 'lodash'
+import { mapGetters } from 'vuex'
+import { GenerateAIQuestionButton } from '@windward/core/utils'
 import BaseContentBlockSettings from '~/components/Content/Settings/BaseContentBlockSettings.vue'
 import SortableExpansionPanel from '~/components/Core/SortableExpansionPanel.vue'
 import Uuid from '~/helpers/Uuid'
@@ -266,6 +282,7 @@ export default {
         SortableExpansionPanel,
         ImageAssetSettings,
         BaseContentBlockSettings,
+        GenerateAIQuestionButton
     },
     beforeMount() {
         if (_.isEmpty(this.block)) {
@@ -326,8 +343,15 @@ export default {
         return {
             valid: true,
             loading: false,
+            replaceExisting: false,
         }
     },
+    computed: {
+        ...mapGetters({
+            course: 'course/get',
+            content: 'content/get',
+        }),
+    },
     mounted() {},
     methods: {
         onAddPrompt(index = 0) {
@@ -464,6 +488,129 @@ export default {
             // holder array now has new answer positions
             this.block.metadata.config.prompts = holderArray
         },
+        // Handler for receiving matching game data from GenerateAIQuestionButton
+        onGeneratedMatchingGame(activityData, replaceMode) {
+
+            this.loading = true
+            try {
+                // Process the activity data
+                if (activityData && activityData.metadata &&
+                    activityData.metadata.config &&
+                    activityData.metadata.config.answerObjects &&
+                    activityData.metadata.config.prompts &&
+                    Array.isArray(activityData.metadata.config.answerObjects) &&
+                    Array.isArray(activityData.metadata.config.prompts)) {
+
+                    if (replaceMode) {
+                        // Replace mode: Clear existing answers and prompts
+                        this.block.metadata.config.answerObjects.splice(0, this.block.metadata.config.answerObjects.length)
+                        this.block.metadata.config.prompts.splice(0, this.block.metadata.config.prompts.length)
+
+                        // Add all new answer objects and prompts
+                        activityData.metadata.config.answerObjects.forEach((answerObj, index) => {
+                            this.block.metadata.config.answerObjects.push({
+                                id: index.toString(),  // string id
+                                display: answerObj.display || ''
+                            })
+                        })
+
+                        // Add all prompts - following the exact pattern from BucketGameSettingsManager
+                        activityData.metadata.config.prompts.forEach((promptArray, index) => {
+                            this.block.metadata.config.prompts[index] = []
+                            if (Array.isArray(promptArray)) {
+                                promptArray.forEach(prompt => {
+                                    // Ensure the answer object reference is correct
+                                    const answerObj = this.block.metadata.config.answerObjects[index]
+                                    this.block.metadata.config.prompts[index].push({
+                                        id: index.toString(),  // string id
+                                        textOrImage: prompt.textOrImage || 'text',
+                                        prompt: prompt.prompt || '',
+                                        matchExplanation: prompt.matchExplanation || this.$t('windward.games.components.settings.matching_game.form.correct_match'),
+                                        fileConfig: prompt.fileConfig || {
+                                            hideBackground: true,
+                                        },
+                                        answer: answerObj
+                                    })
+                                })
+                            }
+                        })
+                    } else {
+                        // Merge mode: Add new terms and prompts to existing ones
+                        // Check if there's only one empty answer (the default one created on init)
+                        const hasOnlyEmptyAnswer = this.block.metadata.config.answerObjects.length === 1 && 
+                                                   this.block.metadata.config.answerObjects[0].display === '';
+                        
+                        if (hasOnlyEmptyAnswer) {
+                            // If there's only one empty answer, replace it instead of merging
+                            this.block.metadata.config.answerObjects.splice(0, 1);
+                            this.block.metadata.config.prompts.splice(0, 1);
+                        }
+                        
+                        const existingAnswerCount = this.block.metadata.config.answerObjects.length
+
+                        // Add new answer objects
+                        activityData.metadata.config.answerObjects.forEach((answerObj, index) => {
+                            const newIndex = existingAnswerCount + index
+                            this.block.metadata.config.answerObjects.push({
+                                id: newIndex.toString(),  // string id
+                                display: answerObj.display || ''
+                            })
+                        })
+
+                        // Add new prompts
+                        activityData.metadata.config.prompts.forEach((promptArray, index) => {
+                            const adjustedIndex = existingAnswerCount + index
+                            this.block.metadata.config.prompts[adjustedIndex] = []
+                            if (Array.isArray(promptArray)) {
+                                promptArray.forEach(prompt => {
+                                    const answerObj = this.block.metadata.config.answerObjects[adjustedIndex]
+                                    this.block.metadata.config.prompts[adjustedIndex].push({
+                                        id: adjustedIndex.toString(),  // string id
+                                        textOrImage: prompt.textOrImage || 'text',
+                                        prompt: prompt.prompt || '',
+                                        matchExplanation: prompt.matchExplanation || this.$t('windward.games.components.settings.matching_game.form.correct_match'),
+                                        fileConfig: prompt.fileConfig || {
+                                            hideBackground: true,
+                                        },
+                                        answer: answerObj
+                                    })
+                                })
+                            }
+                        })
+                    }
+
+                    // Update title and instructions if provided and we're in replace mode
+                    if (replaceMode) {
+                        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(
+                        replaceMode
+                            ? this.$t('windward.games.components.settings.matching_game.form.replaced_successfully')
+                            : this.$t('windward.games.components.settings.matching_game.form.added_successfully'),
+                        { duration: 3000 }
+                    )
+                } else {
+                    this.$toast.error(this.$t('windward.games.components.settings.matching_game.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.matching_game.form.failed_to_process')}: ${errorMessage}`, {
+                    duration: 5000
+                })
+            } finally {
+                this.loading = false
+            }
+        }
     },
 }
 </script>

package/components/settings/SortingGameSettingsManager.vue

@@ -79,6 +79,20 @@
                 :disabled="render"
             ></v-textarea>
         </v-container>
+        <v-container class="pa-4 mb-6">
+            <v-row>
+                <v-col cols="12">
+                    <GenerateAIQuestionButton
+                        :course="course"
+                        :content="currentContent"
+                        :block="block"
+                        question-type="sorting_game"
+                        :replace-existing-mode="replaceExisting"
+                        @click:generate="onGeneratedSortingGame"
+                    ></GenerateAIQuestionButton>
+                </v-col>
+            </v-row>
+        </v-container>
         <div v-if="loading" class="text-center">
             <v-progress-circular
                 :size="70"
@@ -92,6 +106,8 @@
 
 <script>
 import _ from 'lodash'
+import { mapGetters } from 'vuex'
+import { GenerateAIQuestionButton } from '@windward/core/utils'
 import BaseContentSettings from '~/components/Content/Settings/BaseContentSettings.js'
 import BaseContentBlockSettings from '~/components/Content/Settings/BaseContentBlockSettings.vue'
 import SortableExpansionPanel from '~/components/Core/SortableExpansionPanel.vue'
@@ -100,7 +116,7 @@ import Uuid from '~/helpers/Uuid'
 export default {
     name: 'SortingGameSettingsManager',
     extends: BaseContentSettings,
-    components: { SortableExpansionPanel, BaseContentBlockSettings },
+    components: { SortableExpansionPanel, BaseContentBlockSettings, GenerateAIQuestionButton },
     beforeMount() {
         if (_.isEmpty(this.block)) {
             this.block = {}
@@ -148,6 +164,7 @@ export default {
             valid: true,
             dialog: false,
             loading: false,
+            replaceExisting: false,
             headers: [
                 {
                     text: 'Bucket Text',
@@ -159,6 +176,12 @@ export default {
             cursor: null,
         }
     },
+    computed: {
+        ...mapGetters({
+            course: 'course/get',
+            currentContent: 'content/get',
+        }),
+    },
     methods: {
         onAddElement() {
             this.block.metadata.config.answer.forEach((element) => {
@@ -179,6 +202,84 @@ export default {
                 return (element.id = startingIndex)
             })
         },
+        onGeneratedSortingGame(activityData, replaceMode) {     
+            this.loading = true
+            try {
+                // Process the activity data
+                if (activityData && activityData.metadata &&
+                    activityData.metadata.config &&
+                    activityData.metadata.config.answer &&
+                    Array.isArray(activityData.metadata.config.answer)) {
+                    
+                    // Save new items
+                    const newItems = activityData.metadata.config.answer
+
+                    if (replaceMode) {
+                        // Replace mode: Clear existing items
+                        this.block.metadata.config.answer.splice(0, this.block.metadata.config.answer.length)
+
+                        // Add all new items - ensure they have the correct structure
+                        newItems.forEach((item, index) => {
+                            this.block.metadata.config.answer.push({
+                                id: index,
+                                value: item.value || '',
+                                expand: false,
+                            })
+                        })
+                    } else {
+                        // Merge mode: Add new items to existing ones
+                        const hasOnlyEmptyAnswer = this.block.metadata.config.answer.length === 1 && 
+                                                   this.block.metadata.config.answer[0].value === ''
+                        
+                        if (hasOnlyEmptyAnswer) {
+                            // If there's only one empty answer, replace it instead of merging
+                            this.block.metadata.config.answer.splice(0, 1)
+                        }
+
+                        let currentId = this.block.metadata.config.answer.length
+
+                        newItems.forEach((item) => {
+                            this.block.metadata.config.answer.push({
+                                id: currentId,
+                                value: item.value || '',
+                                expand: false,
+                            })
+                            currentId += 1
+                        })
+                    }
+
+                    // Update title and instructions if provided and we're in replace mode
+                    if (replaceMode) {
+                        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
+                        }
+
+                        // Update feedback if provided
+                        if (activityData.metadata.config.feedback_correct) {
+                            this.block.metadata.config.feedback_correct = activityData.metadata.config.feedback_correct
+                        }
+                    }
+
+                    this.$toast.success(
+                        replaceMode
+                            ? this.$t('windward.games.components.settings.sorting_game.form.replaced_successfully')
+                            : this.$t('windward.games.components.settings.sorting_game.form.added_successfully'),
+                        { duration: 3000 }
+                    )
+                } else {
+                    throw new Error('activity.error.technical')
+                }
+            } catch (error) {
+                // Let the error bubble up to GenerateAIQuestionButton with proper error type
+                throw error
+            } finally {
+                this.loading = false
+            }
+        },
     },
 }
 </script>

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

@@ -7,6 +7,11 @@ export default {
         correct_match: 'This match is correct.',
         incorrect_match: 'That’s an incorrect match. Try again.',
         correct_match_label: 'Explanation of the correct match',
+        replace_existing: 'Replace Existing Matches',
+        added_successfully: 'Matches added successfully',
+        replaced_successfully: 'Matches replaced successfully',
+        invalid_response: 'Invalid response from AI generation',
+        failed_to_process: 'Failed to process AI response',
         feedback: {
             correct: 'feedback when correct',
             incorrect: 'feedback when incorrect',

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

@@ -5,4 +5,11 @@ export default {
     instructions: 'Drag each statement into the correct order. When you are finished, click the Check Your Answers button. Statements in the correct order will appear green, while statements not in the correct order will appear red.',
     feedback_correct_label: 'Explanation of the correct order',
     default_feedback_correct: 'That is the correct order.',
+    form: {
+        replace_existing: 'Replace existing items',
+        replaced_successfully: 'Items replaced successfully',
+        added_successfully: 'New items added successfully',
+        invalid_response: 'Invalid response from sorting game generation',
+        failed_to_process: 'Failed to process generated sorting game'
+    }
 }

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

@@ -16,5 +16,10 @@ export default {
             char_count_less_then:
                 'El número de caracteres para este campo debe ser menor que',
         },
+        replace_existing: 'Reemplazar coincidencias existentes',
+        added_successfully: 'Coincidencias añadidas correctamente',
+        replaced_successfully: 'Coincidencias reemplazadas correctamente',
+        invalid_response: 'Respuesta inválida de la generación de IA',
+        failed_to_process: 'Error al procesar la respuesta de IA'
     },
 }

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

@@ -5,4 +5,11 @@ export default {
     instructions: 'Arrastre cada declaración al orden correcto. Cuando haya terminado, haga clic en el botón Verifique sus respuestas. Las declaraciones en el orden correcto aparecerán en verde, mientras que las declaraciones que no estén en el orden correcto aparecerán en rojo.',
     feedback_correct_label: 'Explicación del orden correcto.',
     default_feedback_correct: 'Ese es el orden correcto.',
+    form: {
+        replace_existing: 'Reemplazar elementos existentes',
+        replaced_successfully: 'Elementos reemplazados exitosamente',
+        added_successfully: 'Nuevos elementos agregados exitosamente',
+        invalid_response: 'Respuesta inválida de la generación de juego de ordenamiento',
+        failed_to_process: 'Error al procesar el juego de ordenamiento generado'
+    }
 }

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

@@ -16,5 +16,10 @@ export default {
             char_count_less_then:
                 'Teckenantalet för detta fält måste vara mindre än',
         },
+        replace_existing: 'Ersätt befintliga matchningar',
+        added_successfully: 'Matchningar har lagts till',
+        replaced_successfully: 'Matchningar har ersatts',
+        invalid_response: 'Ogiltigt svar från AI-generering',
+        failed_to_process: 'Misslyckades med att bearbeta AI-svar'
     },
 }

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

@@ -5,4 +5,11 @@ export default {
     instructions: 'Dra varje påstående i rätt ordning. När du är klar klickar du på knappen Kontrollera dina svar. Påståenden i rätt ordning visas i grönt, medan påståenden som inte är i rätt ordning visas röda.',
     feedback_correct_label: 'Förklaring av rätt ordning',
     default_feedback_correct: 'Det är rätt ordning.',
+    form: {
+        replace_existing: 'Ersätt befintliga objekt',
+        replaced_successfully: 'Objekt ersatta framgångsrikt',
+        added_successfully: 'Nya objekt tillagda framgångsrikt',
+        invalid_response: 'Ogiltigt svar från sorteringsspelsgenerering',
+        failed_to_process: 'Misslyckades med att bearbeta genererat sorteringsspel'
+    }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@windward/games",
-    "version": "0.20.0",
+    "version": "0.21.0",
     "description": "Windward UI Plugin Games",
     "main": "plugin.js",
     "scripts": {
@@ -21,7 +21,7 @@
     "license": "MIT",
     "homepage": "https://bitbucket.org/mindedge/windward-ui-plugin-games#readme",
     "dependencies": {
-        "@windward/core": "^0.20.0",
+        "@windward/core": "^0.21.0",
         "eslint": "^8.11.0",
         "lodash": "^4.17.21",
         "prettier": "^2.6.0",