@windward/games 0.0.8 → 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,55 +22,63 @@
             </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"
-                maxlength="255"
-                :label="
-                    $t(
-                        'plugin.games.components.content.blocks.quizshow_game.form.question'
-                    )
-                "
-                @input=""
-            ></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"
             justify="center"
             class="pa-4 mb-4 font-weight-bold text-capitalize"
         >
-            <v-text-field
+            <v-textarea
                 v-if="editMode"
                 v-model="question.feedback"
                 :counter="255"
-                maxlength="255"
                 :label="
                     $t(
-                        'plugin.games.components.content.blocks.quizshow_game.feedback.feedback'
+                        'plugin.games.components.content.blocks.quizshow_game.feedback.answer'
                     )
                 "
-            ></v-text-field>
+                rows="2"
+                prepend-inner-icon="mdi-comment"
+            ></v-textarea>
         </v-row>
 
         <div class="d-flex flex-column">
             <v-row
                 v-for="(choice, choice_index) in question.choices"
                 :key="choice_index"
+                :class="!editMode ? 'pb-4' : ''"
             >
-                <v-card
-                    v-ripple
-                    v-if="!editMode"
-                    @click="getUserInput(choice_index)"
-                    class="ma-1 pa-5 justify-start flex-fill"
-                    :class="generateButtonColor(choice_index)"
-                    :outlined="generateButtonOutline(choice_index)"
+                <v-col
+                    cols="12"
+                    md="2"
+                    class="d-flex justify-end"
+                    align-self="center"
                 >
                     <v-icon
                         color="success"
@@ -81,8 +89,8 @@
                             choice_index === userInput
                         "
                     >
-                        mdi-check-circle-outline</v-icon
-                    >
+                        mdi-check-circle
+                    </v-icon>
                     <v-icon
                         color="error"
                         v-if="
@@ -92,42 +100,52 @@
                             choice_index === userInput
                         "
                     >
-                        mdi-close-circle-outline</v-icon
+                        mdi-close-circle
+                    </v-icon>
+                    <v-radio-group v-if="editMode" v-model="question.answer">
+                        <v-radio
+                            :ref="'checkbox' + choice_index"
+                            :value="choice_index"
+                            @click="onSetAnswer(choice_index)"
+                        ></v-radio>
+                    </v-radio-group>
+                </v-col>
+                <v-col cols="12" md="8" class="pa-0">
+                    <v-card
+                        v-ripple
+                        v-if="!editMode"
+                        @click="getUserInput(choice_index)"
+                        class="pa-2 answer_display"
+                        :class="generateButtonColor(choice_index)"
+                        outlined
                     >
-                    <span v-html="mathToHtml(choice.text)"></span>
-                    <v-icon
-                        class="info-icon"
-                        v-if="generateButtonColor(choice_index) === 'success'"
-                        @click="onFeedback"
-                        >mdi-information</v-icon
+                        <span v-html="mathToHtml(choice.text)"></span>
+                        <v-icon
+                            class="info-icon"
+                            v-if="
+                                generateButtonColor(choice_index) === 'success'
+                            "
+                            @click="onFeedback"
+                            >mdi-information
+                        </v-icon>
+                    </v-card>
+                    <v-text-field
+                        class="pa-0"
+                        v-if="editMode"
+                        v-model="question.choices[choice_index].text"
+                        :label="
+                            $t(
+                                'plugin.games.components.content.blocks.quizshow_game.form.choice'
+                            )
+                        "
+                        outlined
+                        @input=""
+                        append-icon="mdi-delete-outline"
+                        color="primary"
+                        @click:append="deleteItem(choice)"
                     >
-                </v-card>
-                <v-text-field
-                    v-if="editMode"
-                    v-model="question.choices[choice_index].text"
-                    :counter="255"
-                    maxlength="255"
-                    :label="
-                        $t(
-                            'plugin.games.components.content.blocks.quizshow_game.form.choice'
-                        )
-                    "
-                    outlined
-                    @input=""
-                ></v-text-field>
-                <v-switch
-                    v-if="editMode"
-                    :disabled="
-                        !question.choices[choice_index].is_answer &&
-                        question.answer !== null
-                    "
-                    v-model="question.choices[choice_index].is_answer"
-                    :label="`is answer`"
-                    @click="setAnswer(choice_index)"
-                ></v-switch>
-                <v-icon v-if="editMode" @click="deleteItem(choice)">
-                    mdi-delete
-                </v-icon>
+                    </v-text-field>
+                </v-col>
             </v-row>
         </div>
         <v-row
@@ -139,7 +157,7 @@
                 v-if="editMode"
                 @click="addChoice"
                 class="ma-1 pa-5 justify-start"
-                color="secondary"
+                color="primary"
                 outlined
             >
                 {{
@@ -196,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: () => {} },
@@ -227,7 +246,7 @@ export default {
             deep: true,
         },
     },
-    mounted() {
+    beforeMount() {
         if (!_.isEmpty(this.value)) {
             this.question = _.cloneDeep(this.value)
         }
@@ -247,25 +266,9 @@ export default {
                 userInput: this.userInput,
             })
         },
-        generateButtonOutline(index) {
-            if (this.userInput === null) {
-                return true
-            }
-            if (this.question.choices[index].is_answer) {
-                return false
-            }
-            if (
-                this.userInput !== this.question.answer &&
-                index === this.userInput
-            ) {
-                return false
-            } else {
-                return true
-            }
-        },
         generateButtonColor(index) {
             if (this.userInput === null) {
-                return 'answer_display'
+                return ''
             }
             if (this.question.choices[index].is_answer) {
                 return 'success'
@@ -276,7 +279,7 @@ export default {
             ) {
                 return 'error'
             } else {
-                return 'answer_display'
+                return ''
             }
         },
         click() {
@@ -294,12 +297,12 @@ export default {
                 this.emitUserInput()
             }
         },
-        setAnswer(index) {
-            if (this.question.answer === null) {
-                this.question.answer = index
-            } else if (this.question.answer === index) {
-                this.question.answer = null
-            }
+        onSetAnswer(answerIndex) {
+            const context = this
+            this.question.choices.forEach(function (value, index) {
+                context.question.choices[index].is_answer = false
+            })
+            this.question.choices[answerIndex].is_answer = true
         },
         addChoice() {
             this.question.choices.push({ text: '', is_answer: false })
@@ -319,20 +322,14 @@ export default {
 </script>
 
 <style scoped>
-.bucket {
-    box-shadow: 0px 2px 3px #0000004a;
-    color: black;
-    cursor: pointer;
-    padding: 0.3em;
-    margin: 0.3em;
-    vertical-align: middle;
-    display: inline-block;
-}
 .answer_display {
-    outline: var(--v-secondary-base) solid 2px;
+    outline: var(--v-primary-base) solid 2px;
 }
 .info-icon {
     position: relative;
     float: right;
 }
+.clickable {
+    cursor: pointer !important;
+}
 </style>