@windward/games 0.17.1 → 0.19.0

package/components/settings/BucketGameSettingsManager.vue

@@ -1,35 +1,10 @@
 <template>
     <div>
         <v-container class="pa-0">
-            <v-text-field
-                ref="title"
-                id="block-settings-title"
-                v-model="block.metadata.config.title"
-                :rules="$Validation.getRule('block.title')"
-                :counter="$Validation.getLimit('block.title')"
-                outlined
-                :autofocus="true"
-                :label="
-                    $t(
-                        'windward.games.components.settings.bucket_game.form.title'
-                    )
-                "
+            <BaseContentBlockSettings
+                v-model="block.metadata.config"
                 :disabled="render"
-            ></v-text-field>
-            <v-textarea
-                id="block-settings-instructions"
-                v-model="block.metadata.config.instructions"
-                outlined
-                auto-grow
-                :rules="$Validation.getRule('block.instructions')"
-                :counter="$Validation.getLimit('block.instructions')"
-                :label="
-                    $t(
-                        'windward.games.components.settings.bucket_game.form.instructions'
-                    )
-                "
-                :disabled="render"
-            ></v-textarea>
+            ></BaseContentBlockSettings>
         </v-container>
         <v-divider class="my-4 primary"></v-divider>
         <v-container class="pa-0">
@@ -218,18 +193,35 @@
                 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="bucket_game"
+                        :replace-existing-mode="replaceExisting"
+                        @click:generate="onGeneratedBucketGame"
+                    ></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 colors from 'vuetify/lib/util/colors'
 import TextEditor from '~/components/Text/TextEditor'
+import BaseContentBlockSettings from '~/components/Content/Settings/BaseContentBlockSettings.vue'
 import Crypto from '~/helpers/Crypto'
 import BaseContentSettings from '~/components/Content/Settings/BaseContentSettings.js'
 import SortableExpansionPanel from '~/components/Core/SortableExpansionPanel.vue'
@@ -243,7 +235,9 @@ export default {
         MathLiveWrapper,
         ContentViewer,
         SortableExpansionPanel,
+        BaseContentBlockSettings,
         TextEditor,
+        GenerateAIQuestionButton,
     },
     beforeMount() {
         if (_.isEmpty(this.block)) {
@@ -264,6 +258,9 @@ export default {
                 'windward.games.components.content.blocks.bucket_game.game_title'
             )
         }
+        if (!_.isBoolean(this.block.metadata.config.display_title)) {
+            this.$set(this.block.metadata.config, 'display_title', true)
+        }
         if (
             _.isEmpty(this.block.metadata.config.instructions) &&
             this.block.id &&
@@ -291,6 +288,7 @@ export default {
             loading: false,
             panel: 0,
             expansionPanelKey: '0',
+            replaceExisting: false,
             swatches: [
                 [colors.grey.lighten1, colors.blueGrey.lighten5],
                 [colors.brown.lighten3, colors.red.lighten3],
@@ -300,6 +298,12 @@ export default {
             ],
         }
     },
+    computed: {
+        ...mapGetters({
+            course: 'course/get',
+            content: 'content/get',
+        }),
+    },
     methods: {
         onDragged(panels, oldPanelOrder) {
             const oldAnswerArray = _.cloneDeep(
@@ -420,6 +424,125 @@ export default {
                 return htmlString.replace(/(<([^>]+)>)/gi, '')
             }
         },
+        // Handler for receiving bucket game data from GenerateAIQuestionButton
+        onGeneratedBucketGame(activityData, replaceMode) {
+            this.loading = true
+            try {
+                // Process the activity data
+                if (activityData && activityData.metadata &&
+                    activityData.metadata.config &&
+                    activityData.metadata.config.bucket_titles &&
+                    activityData.metadata.config.bucket_answers &&
+                    Array.isArray(activityData.metadata.config.bucket_titles) &&
+                    Array.isArray(activityData.metadata.config.bucket_answers)) {
+
+                    // Save new buckets and answers
+                    const newBuckets = activityData.metadata.config.bucket_titles
+                    const newAnswers = activityData.metadata.config.bucket_answers
+
+                    if (replaceMode) {
+                        // Replace mode: Clear existing buckets and answers
+                        this.block.metadata.config.bucket_titles.splice(0, this.block.metadata.config.bucket_titles.length)
+                        this.block.metadata.config.bucket_answers.splice(0, this.block.metadata.config.bucket_answers.length)
+
+                        // Add all new buckets
+                        newBuckets.forEach(bucket => {
+                            this.block.metadata.config.bucket_titles.push({
+                                title: bucket.title || '',
+                                color: bucket.color || colors.blueGrey.lighten5,
+                                expand: false
+                            })
+                        })
+
+                        // Add all new answers
+                        newAnswers.forEach((bucketAnswers, index) => {
+                            this.block.metadata.config.bucket_answers[index] = []
+                            if (Array.isArray(bucketAnswers)) {
+                                bucketAnswers.forEach(answer => {
+                                    this.block.metadata.config.bucket_answers[index].push({
+                                        bucket_index: index,
+                                        display: answer.display || '',
+                                        feedback: answer.feedback || '',
+                                        expand: false,
+                                        id: Crypto.id()
+                                    })
+                                })
+                            }
+                        })
+                    } else {
+                        // Merge mode: Add new buckets and answers to existing ones
+                        const existingBucketCount = this.block.metadata.config.bucket_titles.length
+
+                        // Add new buckets
+                        newBuckets.forEach(bucket => {
+                            this.block.metadata.config.bucket_titles.push({
+                                title: bucket.title || '',
+                                color: bucket.color || colors.blueGrey.lighten5,
+                                expand: false
+                            })
+                        })
+
+                        // Add new answers with adjusted bucket indices
+                        newAnswers.forEach((bucketAnswers, index) => {
+                            const adjustedIndex = existingBucketCount + index
+                            if (!this.block.metadata.config.bucket_answers[adjustedIndex]) {
+                                this.block.metadata.config.bucket_answers[adjustedIndex] = []
+                            }
+                            if (Array.isArray(bucketAnswers)) {
+                                bucketAnswers.forEach(answer => {
+                                    this.block.metadata.config.bucket_answers[adjustedIndex].push({
+                                        bucket_index: adjustedIndex,
+                                        display: answer.display || '',
+                                        feedback: answer.feedback || '',
+                                        expand: false,
+                                        id: Crypto.id()
+                                    })
+                                })
+                            }
+                        })
+                    }
+
+                    // 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 messages if provided
+                        if (activityData.metadata.config.feedback_correct) {
+                            this.block.metadata.config.feedback_correct = activityData.metadata.config.feedback_correct
+                        }
+
+                        if (activityData.metadata.config.feedback_incorrect) {
+                            this.block.metadata.config.feedback_incorrect = activityData.metadata.config.feedback_incorrect
+                        }
+                    }
+
+                    this.$toast.success(
+                        replaceMode
+                            ? this.$t('windward.games.components.settings.bucket_game.form.replaced_successfully')
+                            : this.$t('windward.games.components.settings.bucket_game.form.added_successfully'),
+                        { duration: 3000 }
+                    )
+                } else {
+                    this.$toast.error(this.$t('windward.games.components.settings.bucket_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.bucket_game.form.failed_to_process')}: ${errorMessage}`, {
+                    duration: 5000
+                })
+            } finally {
+                this.loading = false
+            }
+        }
     },
 }
 </script>

package/components/settings/CrosswordPuzzleSettingsManager.vue

@@ -1,35 +1,10 @@
 <template>
     <div>
         <v-container class="pa-0">
-            <v-text-field
-                ref="title"
-                id="block-settings-title"
-                v-model="block.metadata.config.title"
-                :rules="$Validation.getRule('block.title')"
-                :counter="$Validation.getLimit('block.title')"
-                outlined
-                :autofocus="true"
-                :label="
-                    $t(
-                        'windward.games.components.settings.bucket_game.form.title'
-                    )
-                "
-                :disabled="render"
-            ></v-text-field>
-            <v-textarea
-                id="block-settings-instructions"
-                outlined
-                auto-grow
-                v-model="block.metadata.config.instructions"
-                :rules="$Validation.getRule('block.instructions')"
-                :counter="$Validation.getLimit('block.instructions')"
-                :label="
-                    $t(
-                        'windward.games.components.settings.bucket_game.form.instructions'
-                    )
-                "
+            <BaseContentBlockSettings
+                v-model="block.metadata.config"
                 :disabled="render"
-            ></v-textarea>
+            ></BaseContentBlockSettings>
         </v-container>
         <v-divider class="my-4 primary"></v-divider>
         <v-container class="pa-0">
@@ -128,6 +103,7 @@
 
 <script>
 import _ from 'lodash'
+import BaseContentBlockSettings from '~/components/Content/Settings/BaseContentBlockSettings.vue'
 import BaseContentSettings from '~/components/Content/Settings/BaseContentSettings.js'
 import SortableExpansionPanel from '~/components/Core/SortableExpansionPanel.vue'
 import Uuid from '~/helpers/Uuid'
@@ -135,7 +111,7 @@ import Uuid from '~/helpers/Uuid'
 export default {
     name: 'CrosswordPuzzleSettingsManager',
     extends: BaseContentSettings,
-    components: { SortableExpansionPanel },
+    components: { SortableExpansionPanel, BaseContentBlockSettings },
     beforeMount() {
         if (_.isEmpty(this.block)) {
             this.block = {}
@@ -151,6 +127,9 @@ export default {
                 'windward.games.components.content.blocks.crossword.crossword'
             )
         }
+        if (!_.isBoolean(this.block.metadata.config.display_title)) {
+            this.$set(this.block.metadata.config, 'display_title', true)
+        }
         if (
             _.isEmpty(this.block.metadata.config.instructions) &&
             this.block.id &&

package/components/settings/FlashCardSlidesManager.vue

@@ -1,34 +1,10 @@
 <template>
     <div>
         <v-container class="pa-0">
-            <v-text-field
-                ref="title"
-                id="block-settings-title"
-                v-model="block.metadata.config.title"
-                :rules="$Validation.getRule('block.title')"
-                :counter="$Validation.getLimit('block.title')"
-                outlined
-                :label="
-                    $t(
-                        'windward.games.components.settings.bucket_game.form.title'
-                    )
-                "
-                :disabled="render"
-            ></v-text-field>
-            <v-textarea
-                id="block-settings-instructions"
-                v-model="block.metadata.config.instructions"
-                :rules="$Validation.getRule('block.instructions')"
-                :counter="$Validation.getLimit('block.instructions')"
-                outlined
-                auto-grow
-                :label="
-                    $t(
-                        'windward.games.components.settings.bucket_game.form.instructions'
-                    )
-                "
+            <BaseContentBlockSettings
+                v-model="block.metadata.config"
                 :disabled="render"
-            ></v-textarea>
+            ></BaseContentBlockSettings>
         </v-container>
         <v-divider class="my-4 primary"></v-divider>
         <v-container class="pa-0">
@@ -308,6 +284,7 @@ import ContentBlockAsset from '~/components/Content/ContentBlockAsset.vue'
 import TextEditor from '~/components/Text/TextEditor.vue'
 import SortableExpansionPanel from '~/components/Core/SortableExpansionPanel.vue'
 import Uuid from '~/helpers/Uuid'
+import BaseContentBlockSettings from '~/components/Content/Settings/BaseContentBlockSettings.vue'
 import ImageAssetSettings from '~/components/Content/Settings/ImageAssetSettings.vue'
 
 export default {
@@ -320,6 +297,7 @@ export default {
         ContentBlockAsset,
         TextEditor,
         SortableExpansionPanel,
+        BaseContentBlockSettings,
         ImageAssetSettings,
         GenerateAIQuestionButton,
     },
@@ -345,6 +323,9 @@ export default {
                 'windward.games.components.content.blocks.flashcard.title'
             )
         }
+        if (!_.isBoolean(this.block.metadata.config.display_title)) {
+            this.$set(this.block.metadata.config, 'display_title', true)
+        }
         if (
             _.isEmpty(this.block.metadata.config.instructions) &&
             this.block.id &&

package/components/settings/MatchingGameManager.vue

@@ -1,35 +1,10 @@
 <template>
     <div>
         <v-container class="pa-0">
-            <v-text-field
-                ref="title"
-                id="block-settings-title"
-                v-model="block.metadata.config.title"
-                :rules="$Validation.getRule('block.title')"
-                :counter="$Validation.getLimit('block.title')"
-                :autofocus="true"
-                outlined
-                :label="
-                    $t(
-                        'windward.games.components.settings.matching_game.form.title'
-                    )
-                "
+            <BaseContentBlockSettings
+                v-model="block.metadata.config"
                 :disabled="render"
-            ></v-text-field>
-            <v-textarea
-                id="block-settings-instructions"
-                v-model="block.metadata.config.instructions"
-                :rules="$Validation.getRule('block.instructions')"
-                :counter="$Validation.getLimit('block.instructions')"
-                outlined
-                auto-grow
-                :label="
-                    $t(
-                        'windward.games.components.settings.matching_game.form.instructions'
-                    )
-                "
-                :disabled="render"
-            ></v-textarea>
+            ></BaseContentBlockSettings>
         </v-container>
         <v-divider class="my-4 primary"></v-divider>
         <v-container class="pa-0">
@@ -279,6 +254,7 @@
 <script>
 import BaseContentSettings from '~/components/Content/Settings/BaseContentSettings.js'
 import _ from 'lodash'
+import BaseContentBlockSettings from '~/components/Content/Settings/BaseContentBlockSettings.vue'
 import SortableExpansionPanel from '~/components/Core/SortableExpansionPanel.vue'
 import Uuid from '~/helpers/Uuid'
 import ImageAssetSettings from '~/components/Content/Settings/ImageAssetSettings.vue'
@@ -286,7 +262,11 @@ import ImageAssetSettings from '~/components/Content/Settings/ImageAssetSettings
 export default {
     name: 'MatchingGameManager',
     extends: BaseContentSettings,
-    components: { SortableExpansionPanel, ImageAssetSettings },
+    components: {
+        SortableExpansionPanel,
+        ImageAssetSettings,
+        BaseContentBlockSettings,
+    },
     beforeMount() {
         if (_.isEmpty(this.block)) {
             this.block = {}
@@ -307,6 +287,9 @@ export default {
                 'windward.games.components.settings.matching_game.form.title'
             )
         }
+        if (!_.isBoolean(this.block.metadata.config.display_title)) {
+            this.$set(this.block.metadata.config, 'display_title', true)
+        }
         if (
             _.isEmpty(this.block.metadata.config.instructions) &&
             this.block.id &&

package/components/settings/MultipleChoiceSettingsManager.vue

@@ -1,34 +1,10 @@
 <template>
     <div>
         <v-container class="pa-0">
-            <v-text-field
-                id="block-settings-title"
-                v-model="block.metadata.config.title"
-                outlined
-                :autofocus="true"
-                :rules="$Validation.getRule('block.title')"
-                :counter="$Validation.getLimit('block.title')"
-                :label="
-                    $t(
-                        'windward.games.components.settings.multiple_choice.title_placeholder'
-                    )
-                "
+            <BaseContentBlockSettings
+                v-model="block.metadata.config"
                 :disabled="render"
-            ></v-text-field>
-            <v-textarea
-                id="block-settings-instructions"
-                v-model="block.metadata.config.instructions"
-                outlined
-                :rules="$Validation.getRule('block.instructions')"
-                :counter="$Validation.getLimit('block.instructions')"
-                auto-grow
-                :label="
-                    $t(
-                        'windward.games.components.settings.multiple_choice.instructions'
-                    )
-                "
-                :disabled="render"
-            ></v-textarea>
+            ></BaseContentBlockSettings>
         </v-container>
         <v-divider class="my-4 primary"></v-divider>
         <v-container class="pa-0">
@@ -48,8 +24,8 @@
             >
                 <template #header="{ item }">
                     {{
-                        item.body
-                            ? item.body
+                        stripHtml(item.body)
+                            ? stripHtml(item.body)
                             : $t(
                                   'windward.games.components.settings.bucket_game.form.enter_text'
                               )
@@ -92,6 +68,7 @@
                     v-bind="attrs"
                     v-on="on"
                     v-model="block.metadata.config.questions[editingIndex]"
+                    :block="block"
                     :disabled="render"
                     @saveAndNew="saveAndNewCalled"
                 ></QuestionDialog>
@@ -116,12 +93,18 @@ import SortableExpansionPanel from '~/components/Core/SortableExpansionPanel.vue
 import DialogBox from '~/components/Core/DialogBox.vue'
 import QuestionDialog from '../content/blocks/multipleChoice/QuestionDialog.vue'
 import Crypto from '~/helpers/Crypto'
+import BaseContentBlockSettings from '~/components/Content/Settings/BaseContentBlockSettings.vue'
 import Uuid from '~/helpers/Uuid'
 
 export default {
     name: 'MultipleChoiceSettingsManager',
     extends: BaseContentSettings,
-    components: { SortableExpansionPanel, QuestionDialog, DialogBox },
+    components: {
+        SortableExpansionPanel,
+        QuestionDialog,
+        DialogBox,
+        BaseContentBlockSettings,
+    },
     beforeMount() {
         if (_.isEmpty(this.block)) {
             this.block = {}
@@ -137,6 +120,9 @@ export default {
                 'windward.games.components.content.blocks.multiple_choice.game_title'
             )
         }
+        if (!_.isBoolean(this.block.metadata.config.display_title)) {
+            this.$set(this.block.metadata.config, 'display_title', true)
+        }
         if (
             _.isEmpty(this.block.metadata.config.instructions) &&
             this.block.id &&
@@ -165,6 +151,11 @@ export default {
         this.emittedQuestion = {}
     },
     methods: {
+        stripHtml(htmlString) {
+            if (htmlString) {
+                return htmlString.replace(/(<([^>]+)>)/gi, '')
+            }
+        },
         onOpenModal(e, questionIndex = null) {
             //checks if modal is opening to edit or create new
             if (questionIndex !== null) {
@@ -194,6 +185,14 @@ export default {
                             focus: false,
                         },
                     ],
+                    question_metadata: {
+                        body_asset: null,
+                    },
+                    metadata: {
+                        config: {
+                            single_feedback: false,
+                        },
+                    },
                     correctAnswer: firstAnswerId,
                     body: '',
                     hint: '',
@@ -226,6 +225,14 @@ export default {
                         chosen: false,
                     },
                 ],
+                question_metadata: {
+                    body_asset: null,
+                },
+                metadata: {
+                    config: {
+                        single_feedback: false,
+                    },
+                },
                 // needed to add this bc radio group needs the id of the answer in answerobjects array to set correct value
                 correctAnswer: firstAnswerId,
                 body: '',

package/components/settings/QuizShowSettingsManager.vue

@@ -1,18 +1,11 @@
 <template>
     <div>
-        <v-text-field
-            id="block-settings-title"
-            v-model="block.metadata.config.title"
-            :rules="$Validation.getRule('block.title')"
-            :counter="$Validation.getLimit('block.title')"
-            outlined
-            :label="
-                $t(
-                    'windward.games.components.settings.quizshow_game.form.title'
-                )
-            "
-            :disabled="render"
-        ></v-text-field>
+        <v-container class="pa-0">
+            <BaseContentBlockSettings
+                v-model="block.metadata.config"
+                :disabled="render"
+            ></BaseContentBlockSettings>
+        </v-container>
         <br />
         <v-checkbox
             v-model="block.metadata.config.responsive"
@@ -24,21 +17,6 @@
             :disabled="render"
         ></v-checkbox>
         <br />
-        <v-textarea
-            id="block-settings-instructions"
-            outlined
-            auto-grow
-            v-model="block.metadata.config.instructions"
-            :rules="$Validation.getRule('block.instructions')"
-            :counter="$Validation.getLimit('block.instructions')"
-            :label="
-                $t(
-                    'windward.games.components.settings.multiple_choice.instructions'
-                )
-            "
-            :disabled="render"
-        ></v-textarea>
-        <br />
         <v-expansion-panels outlined tile flat>
             <v-divider class="cardOutline primary"></v-divider>
             <v-expansion-panel>
@@ -221,6 +199,7 @@
 </template>
 
 <script>
+import BaseContentBlockSettings from '~/components/Content/Settings/BaseContentBlockSettings.vue'
 import TextEditor from '~/components/Text/TextEditor.vue'
 import BaseContentSettings from '~/components/Content/Settings/BaseContentSettings.js'
 export default {
@@ -228,6 +207,7 @@ export default {
     extends: BaseContentSettings,
     components: {
         TextEditor,
+        BaseContentBlockSettings,
     },
     watch: {
         'block.metadata.config.maxCategories'(newValue, oldValue) {
@@ -290,6 +270,9 @@ export default {
         if (_.isEmpty(this.block.metadata.config)) {
             this.block.metadata.config = _.cloneDeep(this.quizShowSettings)
         }
+        if (!_.isBoolean(this.block.metadata.config.display_title)) {
+            this.$set(this.block.metadata.config, 'display_title', true)
+        }
     },
     methods: {
         changeMaxCategories() {