@windward/games 0.0.9 → 0.0.10

package/components/content/blocks/matchingGame/MatchingGame.vue

@@ -1,5 +1,5 @@
 <template>
-    <div class="background">
+    <div>
         <div>
             <h3
                 :aria-label="
@@ -40,8 +40,16 @@
                             class="success mr-5"
                             @click="onContinueGame"
                             >{{ $t('shared.forms.continue') }}
-                        </v-btn></v-col
-                    >
+                        </v-btn>
+                        <v-container
+                            v-if="status === 'errorOutline'"
+                            class="d-flex justify-end"
+                            @click="onExitFeedback"
+                            ><v-icon class="icon--error"
+                                >mdi-close-circle</v-icon
+                            >
+                        </v-container>
+                    </v-col>
                 </v-row>
                 <br />
             </v-container>
@@ -49,8 +57,8 @@
                 <v-container>
                     <v-row>
                         <draggable
-                            class="d-flex justify-space-between flex-wrap col-md-12"
                             v-bind="dragOptions"
+                            class="d-flex justify-space-between flex-wrap col-md-12"
                             :list="block.metadata.config.answerObjects"
                             :disabled="!allowDrag"
                             :group="{
@@ -69,7 +77,7 @@
                                 tile
                                 color="primary"
                             >
-                                <v-icon>mdi-gesture-tap-hold</v-icon>
+                                <v-icon>mdi-drag-vertical</v-icon>
                                 <span>
                                     {{ answer.display }}
                                 </span>
@@ -77,8 +85,8 @@
                         </draggable>
                     </v-row>
                     <v-row
-                        class="d-flex flex-wrap flex-row justify-center flex-fill"
                         v-if="render"
+                        class="d-flex flex-wrap flex-row justify-center flex-fill"
                     >
                         <v-row align="center" class="col-md-12">
                             <v-card
@@ -154,17 +162,17 @@
                         </v-row>
                     </v-row>
                     <v-row
-                        class="d-flex flex-wrap flex-row justify-center flex-fill"
                         v-if="
                             !render && block.metadata.config.prompts.length > 0
                         "
+                        class="d-flex flex-wrap flex-row justify-center flex-fill"
                     >
                         <v-row align="center" class="col-md-12">
                             <v-card
                                 v-if="
                                     !block.metadata.config.prompts[
                                         startingIndex
-                                    ]['toggle']
+                                    ][startingIndex].toggle
                                 "
                                 class="pa-2 flex-fill bucket"
                                 min-height="5em"
@@ -174,13 +182,8 @@
                             >
                                 <v-card-text class="text-center">
                                     <draggable
-                                        class="dragArea list-group"
-                                        :key="
-                                            block.metadata.config.prompts[
-                                                startingIndex
-                                            ]['prompt']
-                                        "
                                         v-bind="dragOptions"
+                                        class="dragArea list-group"
                                         disabled
                                         group="people"
                                         tabindex="0"
@@ -192,7 +195,7 @@
                                             {{
                                                 block.metadata.config.prompts[
                                                     startingIndex
-                                                ]['prompt']
+                                                ][startingIndex].prompt
                                             }}
                                         </div>
                                     </draggable>
@@ -204,7 +207,10 @@
                                 v-if="
                                     block.metadata.config.prompts[
                                         startingIndex
-                                    ]['file']
+                                    ][startingIndex].toggle &&
+                                    block.metadata.config.prompts[
+                                        startingIndex
+                                    ][startingIndex].file
                                 "
                                 class="pa-2 flex-fill bucket"
                                 min-height="5em"
@@ -213,13 +219,13 @@
                             >
                                 <v-card-text>
                                     <draggable
+                                        v-bind="dragOptions"
                                         class="dragArea list-group"
                                         :key="
                                             block.metadata.config.prompts[
                                                 startingIndex
                                             ]['prompt']
                                         "
-                                        v-bind="dragOptions"
                                         disabled
                                         group="people"
                                         tabindex="0"
@@ -228,33 +234,36 @@
                                             :id="
                                                 block.metadata.config.prompts[
                                                     startingIndex
-                                                ]['file']['asset']['public_url']
+                                                ][startingIndex].file.asset
+                                                    .public_url
                                             "
                                         >
                                             <v-img
                                                 v-if="
                                                     block.metadata.config
                                                         .prompts[startingIndex][
-                                                        'file'
-                                                    ]
+                                                        startingIndex
+                                                    ]['file']
                                                 "
                                                 :aria-describedby="
                                                     block.metadata.config
                                                         .prompts[startingIndex][
-                                                        'ariaDescribedBy'
-                                                    ]
+                                                        startingIndex
+                                                    ]['ariaDescribedBy']
                                                 "
                                                 :alt="
                                                     block.metadata.config
                                                         .prompts[startingIndex][
-                                                        'altText'
-                                                    ]
+                                                        startingIndex
+                                                    ]['altText']
                                                 "
                                                 :src="
                                                     block.metadata.config
                                                         .prompts[startingIndex][
-                                                        'file'
-                                                    ]['asset']['public_url']
+                                                        startingIndex
+                                                    ]['file']['asset'][
+                                                        'public_url'
+                                                    ]
                                                 "
                                             ></v-img>
                                         </div>
@@ -294,9 +303,9 @@
                                             )
                                         }}
                                         <v-progress-linear
+                                            v-model="completedPercent"
                                             color="primary"
                                             outlined
-                                            v-model="completedPercent"
                                             rounded
                                             height="15"
                                         ></v-progress-linear>
@@ -342,16 +351,22 @@ export default {
             this.block.metadata.config = {}
         }
         if (_.isEmpty(this.block.metadata.config.title)) {
-            this.block.metadata.config.title = ''
+            this.block.metadata.config.title = this.$t(
+                'plugin.games.components.settings.matching_game.form.title'
+            )
         }
         if (_.isEmpty(this.block.metadata.config.instructions)) {
             this.block.metadata.config.instructions = ''
         }
         if (_.isEmpty(this.block.metadata.config.feedback_correct)) {
-            this.block.metadata.config.feedback_correct = ''
+            this.block.metadata.config.feedback_correct = this.$t(
+                'plugin.games.components.settings.bucket_game.form.feedback.correct_default'
+            )
         }
         if (_.isEmpty(this.block.metadata.config.feedback_incorrect)) {
-            this.block.metadata.config.feedback_incorrect = ''
+            this.block.metadata.config.feedback_incorrect = this.$t(
+                'plugin.games.components.settings.bucket_game.form.feedback.incorrect_default'
+            )
         }
         if (_.isEmpty(this.block.metadata.config.prompts)) {
             this.block.metadata.config.prompts = []
@@ -370,10 +385,10 @@ export default {
             return _.flatten(this.solvedQuestions).length
         },
         completedPercent() {
-            if (this.block.metadata.config.prompts.length > 0) {
+            if (this.flattenedPrompts.length > 0) {
                 return (
                     (this.solvedQuestions.length /
-                        this.block.metadata.config.prompts.length) *
+                        this.flattenedPrompts.length) *
                     100
                 )
             }
@@ -388,7 +403,6 @@ export default {
             feedback: this.$t(
                 'plugin.games.components.content.blocks.matching_game.default_feedback'
             ),
-            toggle: false,
             gameCompleted: false,
             shufflePrompts: [],
             solvedQuestions: [],
@@ -404,9 +418,10 @@ export default {
                     name: '',
                 },
                 prompt: '',
+                toggle: false,
             },
-            editedPrompt: {},
             startingIndex: 0,
+            flattenedPrompts: '',
         }
     },
     watch: {
@@ -415,8 +430,13 @@ export default {
                 this.onReset()
             }
         },
+        value(newValue) {
+            this.flattenedPrompts = _.flatten(newValue.metadata.config.prompts)
+        },
     },
     mounted() {
+        // flatten nested prompts
+        this.flattenedPrompts = _.flatten(this.block.metadata.config.prompts)
         this.setMainPrompt()
     },
     methods: {
@@ -437,10 +457,9 @@ export default {
             return array
         },
         setMainPrompt() {
-            if (this.block.metadata.config.prompts.length !== 0) {
-                this.shufflePrompts = _.cloneDeep(
-                    this.block.metadata.config.prompts
-                )
+            const holder = this.block.metadata.config.prompts.flat(1)
+            if (holder !== 0 && !_.isEmpty(holder)) {
+                this.shufflePrompts = _.cloneDeep(holder)
                 this.shufflePrompts = this.shuffle(this.shufflePrompts)
                 this.mainPrompt = this.shufflePrompts.shift()
             }
@@ -452,25 +471,40 @@ export default {
             }
             let draggedElement = ''
             let target = ''
-            if (this.mainPrompt.toggle === false) {
+            if (
+                this.mainPrompt.toggle === false ||
+                !_.isBoolean(this.mainPrompt.toggle)
+            ) {
                 draggedElement =
                     this.block.metadata.config.answerObjects[evt.oldIndex]
-                target = this.block.metadata.config.prompts.find((element) => {
-                    return (
-                        element.prompt == evt.to.firstChild.textContent.trim()
-                    )
+                this.block.metadata.config.prompts.forEach((outerElement) => {
+                    const getMain = outerElement.find((element) => {
+                        return (
+                            element.prompt ==
+                            evt.to.firstChild.textContent.trim()
+                        )
+                    })
+                    if (getMain) {
+                        target = getMain
+                    }
                 })
             } else {
                 draggedElement =
                     this.block.metadata.config.answerObjects[evt.oldIndex]
-                target = this.block.metadata.config.prompts.find((element) => {
-                    return (
-                        element.file?.asset.public_url ==
-                        evt.to.firstElementChild.id
-                    )
+                this.block.metadata.config.prompts.forEach((outerElement) => {
+                    const mainElement = outerElement.find((element) => {
+                        return (
+                            element.file?.asset.public_url ==
+                            evt.to.firstElementChild.id
+                        )
+                    })
+                    if (mainElement) {
+                        target = mainElement
+                    }
                 })
             }
-            if (_.isUndefined(target)) {
+            if (_.isUndefined(target) || _.isEmpty(target)) {
+                console.log('dragged to nowhere')
             } else if (draggedElement.id !== target.answer.id) {
                 this.feedback = this.block.metadata.config.feedback_incorrect
                 this.status = 'errorOutline'
@@ -480,8 +514,7 @@ export default {
                 this.status = 'successOutline'
                 this.allowDrag = false
                 if (
-                    this.solvedQuestions.length ===
-                    this.block.metadata.config.prompts.length
+                    this.solvedQuestions.length === this.flattenedPrompts.length
                 ) {
                     this.feedback = this.$t(
                         'plugin.games.components.content.blocks.matching_game.congratulations_feedback'
@@ -491,6 +524,13 @@ export default {
                 }
             }
         },
+        onExitFeedback() {
+            this.status = 'default'
+            this.allowDrag = true
+            this.feedback = this.$t(
+                'plugin.games.components.content.blocks.matching_game.default_feedback'
+            )
+        },
         onContinueGame() {
             if (!this.render) {
                 this.startingIndex = this.startingIndex + 1
@@ -538,6 +578,9 @@ export default {
 .answerCard {
     min-width: 23%;
 }
+.icon--error {
+    color: var(--v-error-base);
+}
 @media (max-width: 1270px) {
     .answerCard {
         min-width: 30%;

package/components/content/blocks/quizshowGame/AnswerPanel.vue

@@ -22,26 +22,32 @@
             </div>
         </v-row>
         <br />
+        <v-row v-if="editMode">
+            <v-icon>mdi-help</v-icon>
+            <div>
+                {{
+                    $t(
+                        'plugin.games.components.content.blocks.quizshow_game.form.question'
+                    )
+                }}
+            </div></v-row
+        >
         <v-row
             align="center"
             justify="center"
             class="pa-4 mb-4 font-weight-bold text-capitalize"
         >
-            <v-textarea
+            <TextEditor
                 v-if="editMode"
                 v-model="question.text"
-                :counter="255"
-                :label="
-                    $t(
-                        'plugin.games.components.content.blocks.quizshow_game.form.question'
-                    )
-                "
-                @input=""
-                prepend-inner-icon="mdi-help"
-                :autofocus="true"
-                rows="2"
-            ></v-textarea>
-            <v-card flat v-if="!editMode" v-html="question.text"></v-card>
+                class="col-md-12"
+                menubar="edit insert format"
+                toolbar="undo redo | italic underline strikethrough removeformat | mathButton "
+                :height="250"
+                lazy-load
+                auto-grow
+            ></TextEditor>
+            <TextViewer v-if="!editMode" v-model="question.text"></TextViewer>
         </v-row>
         <v-row
             align="center"
@@ -208,10 +214,11 @@
 <script>
 import Dialog from '~/components/Dialog.vue'
 import { MathHelper } from '@windward/core/utils'
-
+import TextEditor from '~/components/Text/TextEditor.vue'
+import TextViewer from '~/components/Text/TextViewer.vue'
 export default {
     name: 'AnswerPanel',
-    components: { Dialog },
+    components: { Dialog, TextEditor, TextViewer },
     props: {
         editMode: { type: Boolean, required: false, default: false },
         value: { type: Object, required: true, default: () => {} },
@@ -239,7 +246,7 @@ export default {
             deep: true,
         },
     },
-    mounted() {
+    beforeMount() {
         if (!_.isEmpty(this.value)) {
             this.question = _.cloneDeep(this.value)
         }

package/components/content/blocks/quizshowGame/QuizShow.vue

@@ -20,7 +20,7 @@
                     "
                     tabindex="0"
                 >
-                    {{ block.metadata.config.title }}
+                    {{ title }}
                 </h3>
 
                 <p tabindex="0">
@@ -43,7 +43,7 @@
                             .categories"
                         :key="cat_index"
                         class="flex-fill"
-                    elevation="0"
+                        elevation="0"
                         tile
                         :max-width="
                             block.metadata.config.responsive
@@ -74,10 +74,16 @@
                                     @click="quizshow(cat_index, point_index)"
                                 >
                                     <v-row justify="space-between">
-                                        <v-col  md="1"    v-if="!render || (     render &&
+                                        <v-col
+                                            v-if="
+                                                !render ||
+                                                (render &&
                                                     options.answers[cat_index][
                                                         point_index
-                                                    ] !== null)">
+                                                    ] !== null)
+                                            "
+                                            md="1"
+                                        >
                                             <feedback-icons
                                                 v-if="!render"
                                                 :success="
@@ -233,6 +239,13 @@ export default {
     mounted() {},
     updated() {},
     computed: {
+        title() {
+            return this.block.metadata.config.title
+                ? this.block.metadata.config.title
+                : this.$t(
+                      'plugin.games.components.settings.quizshow_game.title'
+                  )
+        },
         editorFeedbackIcons() {
             if (this.render) {
                 return {

package/components/content/blocks/slideshow/SlideShow.vue

@@ -103,7 +103,9 @@ export default {
             this.block.metadata.config = {}
         }
         if (_.isEmpty(this.block.metadata.config.title)) {
-            this.block.metadata.config.title = ''
+            this.block.metadata.config.title = this.$t(
+                'plugin.games.components.settings.slideshow.form.slideshow_title'
+            )
         }
 
         if (_.isEmpty(this.block.metadata.config.instructions)) {

package/components/content/blocks/wordJumble/Jumble.vue

@@ -29,8 +29,10 @@ export default {
                 // reveals correct answer in input areas
                 if (newValue === true) {
                     for (let i = 0; i < this.value.value.length; i++) {
-                        const letter = this.answer.charAt(i)
-                        this.letterArray[i].value = letter
+                        if (this.answer.length > 0) {
+                            const letter = this.answer.charAt(i)
+                            this.letterArray[i].value = letter
+                        }
                     }
                 } else {
                     this.splitUpWord()

package/components/content/blocks/wordJumble/WordJumble.vue

@@ -1,7 +1,7 @@
 <template>
     <v-container>
         <v-col class="pa-0">
-            <h1>
+            <h3>
                 {{
                     block.metadata.config.title
                         ? block.metadata.config.title
@@ -9,7 +9,7 @@
                               'plugin.games.components.content.blocks.word_jumble.title'
                           )
                 }}
-            </h1>
+            </h3>
             <p>{{ block.metadata.config.instructions }}</p>
         </v-col>
         <v-col class="pa-0">
@@ -55,6 +55,7 @@
                         </v-container>
                         <v-row class="justify-center mt-4">
                             <Jumble
+                                :key="updateJumble"
                                 :value="word"
                                 :reveal="showAnswer"
                                 :reset="resetValue"
@@ -91,6 +92,7 @@
 import _ from 'lodash'
 import Jumble from './Jumble.vue'
 import BaseContentBlock from '~/components/Content/Blocks/BaseContentBlock'
+import Crypto from '~/helpers/Crypto'
 
 export default {
     name: 'WordJumble',
@@ -141,8 +143,14 @@ export default {
             resetValue: false,
             studentResponse: '',
             feedbackStatus: '',
+            updateJumble: 0,
         }
     },
+    watch: {
+        render(newValue) {
+            this.updateJumble = Crypto.id()
+        },
+    },
     mounted() {
         this.showAnswer = false
     },
@@ -224,6 +232,7 @@ export default {
             // that components do not remount on slides each time the slide is revisited
             // updates class
             this.feedbackStatus = ''
+            this.showFeedback = false
             this.feedback = this.$t(
                 'plugin.games.components.content.blocks.word_jumble.feedback'
             )