@windward/games 0.17.1 → 0.19.0

package/components/content/blocks/multipleChoice/QuestionDialog.vue

@@ -1,20 +1,40 @@
 <template>
-    <v-form ref="form" v-model="formValid" :key="updateKey">
-        <v-row>
-            <v-col cols="12">
-                <v-textarea
-                    v-model="question.body"
-                    :label="
+    <v-container>
+        <v-row :key="updateKey">
+            <v-col xl="12" lg="12" md="12" sm="12" cols="12">
+                <p class="font-weight-bold p-bold-text">
+                    {{
                         $t(
-                            'windward.games.components.settings.multiple_choice.question'
+                            'components.content.blocks.assessment.questions.question'
                         )
-                    "
-                    :autofocus="true"
-                    rows="2"
-                    :rules="$Validation.getRule('exists')"
-                    prepend-inner-icon="mdi-help"
-                    :disabled="disabled"
-                ></v-textarea>
+                    }}
+                </p>
+                <TextEditor
+                    id="question-body"
+                    :key="'question-body-' + updateKey"
+                    v-model="question.body"
+                    :height="200"
+                    lazy-load
+                    @input="onCheckValidation"
+                ></TextEditor>
+            </v-col>
+            <v-col xl="3" lg="3" md="4" sm="12" cols="12" v-if="false">
+                <GenerateAIQuestionButton
+                    :course="course"
+                    :content="content"
+                    :block="block"
+                    :question-type="questionType"
+                    @click:generate="onQuestionGenerated"
+                ></GenerateAIQuestionButton>
+            </v-col>
+            <v-col cols="12">
+                <ImageAssetSettings
+                    v-model="question.question_metadata.body_asset"
+                    :assets.sync="question.assets"
+                    hide-background
+                    hide-decorative
+                    hide-modal
+                ></ImageAssetSettings>
                 <v-textarea
                     v-model="question.hint"
                     :label="
@@ -22,120 +42,233 @@
                             'windward.games.components.settings.multiple_choice.question_hint'
                         )
                     "
+                    outlined
                     rows="2"
-                    :rules="$Validation.getRule('exists')"
                     prepend-inner-icon="mdi-lightbulb-on-10"
                     :disabled="disabled"
                 ></v-textarea>
-                <v-textarea
-                    v-model="question.answer_description"
-                    :label="
-                        $t(
-                            'windward.games.components.settings.multiple_choice.answer_feedback'
-                        )
-                    "
-                    rows="2"
-                    :rules="$Validation.getRule('exists')"
-                    prepend-inner-icon="mdi-comment"
-                    :disabled="disabled"
-                ></v-textarea>
-                <br />
+            </v-col>
+            <br />
+            <v-col cols="12">
                 <h4 class="pb-2">
                     {{
                         $t(
-                            'windward.games.components.settings.multiple_choice.answer_options'
+                            'windward.games.components.settings.multiple_choice.answer'
                         )
                     }}
                 </h4>
-                <p>
+                <v-radio-group
+                    :key="updateKey"
+                    v-model="question.correctAnswer"
+                    :rules="validation.optionRules"
+                >
+                    <draggable
+                        :list="question.answer_options"
+                        tag="tbody"
+                        v-bind="dragOptions"
+                        handle=".question-drag-handle"
+                        @change="onDragChange"
+                    >
+                        <div
+                            v-for="(answer, index) in question.answer_options"
+                            :key="index"
+                        >
+                            <v-alert outlined elevation="2">
+                                <v-row>
+                                    <v-col
+                                        cols="1"
+                                        lg="1"
+                                        md="1"
+                                        class="d-flex justify-center align-center pa-0"
+                                    >
+                                        <v-btn
+                                            elevation="0"
+                                            text
+                                            class="question-drag-handle"
+                                        >
+                                            <v-icon>mdi-drag-vertical</v-icon>
+                                        </v-btn>
+                                    </v-col>
+                                    <v-col
+                                        cols="10"
+                                        lg="10"
+                                        md="10"
+                                        class="pl-0 pr-0"
+                                    >
+                                        <v-row>
+                                            <v-col cols="12">
+                                                <v-radio
+                                                    color="success"
+                                                    :value="answer.id"
+                                                    :disabled="disabled"
+                                                    v-on:keydown.enter="
+                                                        onSetAnswer(
+                                                            answer,
+                                                            true
+                                                        )
+                                                    "
+                                                    @click="onSetAnswer(answer)"
+                                                >
+                                                    <template #label>
+                                                        <div
+                                                            :class="
+                                                                onContainerLabel(
+                                                                    answer
+                                                                )
+                                                            "
+                                                        >
+                                                            {{
+                                                                answer.correctAnswer
+                                                                    ? $t(
+                                                                          'components.content.blocks.assessment.questions.correct'
+                                                                      )
+                                                                    : $t(
+                                                                          'components.content.blocks.assessment.questions.incorrect'
+                                                                      )
+                                                            }}
+                                                        </div>
+                                                    </template>
+                                                </v-radio>
+                                            </v-col>
+                                        </v-row>
+                                        <v-row>
+                                            <v-col cols="12" md="6">
+                                                <TextEditor
+                                                    :id="'option-' + answer.id"
+                                                    :key="
+                                                        'option-' +
+                                                        answer.id +
+                                                        '-' +
+                                                        updateKey
+                                                    "
+                                                    v-model="answer.value"
+                                                    :label="
+                                                        $t(
+                                                            'components.content.blocks.assessment.answer_option'
+                                                        )
+                                                    "
+                                                    :height="200"
+                                                    lazy-load
+                                                    @input="onCheckValidation"
+                                                ></TextEditor>
+                                            </v-col>
+                                            <v-col cols="12" md="6">
+                                                <TextEditor
+                                                    :id="
+                                                        'feedback-' + answer.id
+                                                    "
+                                                    :key="
+                                                        'feedback-' +
+                                                        answer.id +
+                                                        '-' +
+                                                        updateKey
+                                                    "
+                                                    v-model="
+                                                        question.answer_options[
+                                                            index
+                                                        ].feedback
+                                                    "
+                                                    :label="
+                                                        $t(
+                                                            'components.content.blocks.assessment.answer_explanation'
+                                                        )
+                                                    "
+                                                    :height="200"
+                                                    lazy-load
+                                                ></TextEditor>
+                                            </v-col>
+                                        </v-row>
+                                    </v-col>
+                                    <v-col
+                                        cols="1"
+                                        lg="1"
+                                        md="1"
+                                        class="d-flex justify-center align-center pa-0"
+                                    >
+                                        <v-btn
+                                            elevation="0"
+                                            text
+                                            class="pa-0 ma-0"
+                                            color="error"
+                                            :disabled="removeDisabled"
+                                            @click="onDelete(index)"
+                                        >
+                                            <span class="sr-only">{{
+                                                $t(
+                                                    'components.content.blocks.assessment.questions.types.multi_choice_single_answer.add_option'
+                                                )
+                                            }}</span>
+                                            <v-icon>mdi-delete-outline</v-icon>
+                                        </v-btn>
+                                    </v-col>
+                                </v-row>
+                            </v-alert>
+                        </div>
+                    </draggable>
+                </v-radio-group>
+                <v-container class="d-flex justify-center" v-if="overLength">
+                    <v-btn
+                        :class="cursor"
+                        color="primary"
+                        elevation="0"
+                        :disabled="disabled"
+                        @click="onAddAnswer"
+                    >
+                        <v-icon>mdi-plus</v-icon>
+                        {{
+                            $t(
+                                'windward.games.components.settings.multiple_choice.add_answer'
+                            )
+                        }}
+                    </v-btn>
+                </v-container>
+            </v-col>
+            <v-col cols="12">
+                <p class="font-weight-bold p-bold-text">
                     {{
                         $t(
-                            'windward.games.components.settings.multiple_choice.correct_answer'
+                            'components.content.blocks.assessment.questions.question_feedback'
                         )
                     }}
                 </p>
-            </v-col>
-            <v-container
-                v-for="(answer, index) in question.answer_options"
-                :key="index"
-            >
-                <v-row>
-                    <v-col
-                        cols="12"
-                        md="1"
-                        class="d-flex justify-center"
-                        @mouseover="onHover"
-                        @mouseleave="onHoverLeave"
-                    >
-                        <v-radio-group v-model="question.correctAnswer">
-                            <v-radio
-                                :ref="'checkbox' + index"
-                                :value="answer.id"
-                                :disabled="disabled"
-                                v-on:keydown.enter="onSetAnswer(answer, true)"
-                                @click="onSetAnswer(answer)"
-                            ></v-radio>
-                        </v-radio-group>
-                    </v-col>
-                    <v-col cols="12" md="10">
-                        <v-textarea
-                            v-model="answer.value"
-                            flat
-                            solo
-                            :autofocus="answer.focus"
-                            :outlined="setOutline(answer)"
-                            hide-details
-                            :class="getCorrectAnswer(answer)"
-                            :label="
-                                $t(
-                                    'windward.games.components.settings.multiple_choice.answer_option'
-                                )
-                            "
-                            rows="2"
-                            :rules="$Validation.getRule('exists')"
-                            :disabled="disabled"
-                        ></v-textarea>
-                    </v-col>
-                    <v-col cols="12" md="1" class="d-flex justify-center">
-                        <v-btn
-                            text
-                            elevation="0"
-                            :disabled="disabled"
-                            @click="onDelete(index)"
-                        >
-                            <v-icon color="error">mdi-delete-outline</v-icon>
-                            <span class="d-sr-only">{{
-                                $t('shared.forms.delete')
-                            }}</span>
-                        </v-btn>
-                    </v-col>
-                </v-row>
-            </v-container>
-            <v-container class="d-flex justify-center" v-if="overLength">
-                <v-btn
-                    :class="cursor"
-                    color="primary"
-                    elevation="0"
-                    :disabled="disabled"
-                    @click="onAddAnswer"
-                >
-                    <v-icon>mdi-plus</v-icon>
-                    {{
+                <v-switch
+                    v-model="question.metadata.config.single_feedback"
+                    :label="
                         $t(
-                            'windward.games.components.settings.multiple_choice.add_answer'
+                            'components.content.blocks.assessment.single_feedback_label'
                         )
-                    }}
-                </v-btn>
-            </v-container>
+                    "
+                ></v-switch>
+                <TextEditor
+                    v-if="question.metadata.config.single_feedback"
+                    id="question-feedback"
+                    :key="'question-feedback-' + updateKey"
+                    v-model="question.answer_description"
+                    :height="200"
+                    lazy-load
+                ></TextEditor>
+            </v-col>
+            <v-col cols="12" md="12" v-if="false">
+                <QuestionSkills></QuestionSkills>
+            </v-col>
         </v-row>
-    </v-form>
+    </v-container>
 </template>
 <script>
 import Form from '~/components/Core/Form'
 import _ from 'lodash'
+import draggable from 'vuedraggable'
 import Crypto from '~/helpers/Crypto'
+import ImageAssetSettings from '~/components/Content/Settings/ImageAssetSettings.vue'
+import TextEditor from '~/components/Text/TextEditor.vue'
+
 export default {
     name: 'QuestionDialog',
+    components: {
+        TextEditor,
+        ImageAssetSettings,
+        draggable,
+    },
     extends: Form,
     layout: 'authenticated',
     middleware: ['auth', 'course'],
@@ -159,6 +292,7 @@ export default {
                                 disabled: false,
                                 chosen: false,
                                 focus: false,
+                                feedback: '',
                             },
                             {
                                 id: Crypto.id(),
@@ -167,8 +301,17 @@ export default {
                                 disabled: false,
                                 chosen: false,
                                 focus: false,
+                                feedback: '',
                             },
                         ],
+                        question_metadata: {
+                            body_asset: null,
+                        },
+                        metadata: {
+                            config: {
+                                single_feedback: false,
+                            },
+                        },
                         // needed to add this bc radio group needs the id of the answer to set correct
                         correctAnswer: 1,
                         body: '',
@@ -177,8 +320,9 @@ export default {
                         id: Crypto.id(),
                     }
                 }
+                // resets form if brand new question was created
                 if (newValue && newValue.body === '') {
-                    this.$refs.form.resetValidation()
+                    this.updateKey = Crypto.id()
                 }
             },
         },
@@ -195,6 +339,14 @@ export default {
                 return false
             }
         },
+        dragOptions() {
+            return {
+                animation: 200,
+            }
+        },
+        removeDisabled() {
+            return this.question.answer_options.length <= 2
+        },
     },
     data() {
         return {
@@ -213,19 +365,81 @@ export default {
             },
             cursor: null,
             updateKey: 0,
+            formValid: false,
         }
     },
-    mounted() {
+    beforeMount() {
         if (this.value.body === '') {
-            this.$refs.form.resetValidation()
+            // this.$refs.form.resetValidation()
             this.question = _.cloneDeep(this.value)
         } else if (!_.isEmpty(this.value)) {
             this.question = _.cloneDeep(this.value)
+            if (_.isEmpty(this.question.question_metadata)) {
+                this.question.question_metadata = {
+                    body_asset: null,
+                }
+            }
+            if (_.isEmpty(this.question.metadata)) {
+                // if legacy has no feedback than set toggle to false
+                if (_.isEmpty(this.question.answer_description)) {
+                    this.question.metadata = {
+                        config: {
+                            single_feedback: false,
+                        },
+                    }
+                } else {
+                    this.question.metadata = {
+                        config: {
+                            single_feedback: true,
+                        },
+                    }
+                }
+            }
         }
-        // refreshes data for modal on mount
-        this.updateKey = Crypto.id()
     },
     methods: {
+        onContainerLabel(answer) {
+            if (answer.correctAnswer) {
+                return 'container-label-correct'
+            } else {
+                return ''
+            }
+        },
+        onDragChange() {
+            this.updateKey = Crypto.id()
+        },
+        onCheckValidation() {
+            let questionValid = true
+            const condition1 = '<div>&nbsp;</div><div>&nbsp;</div>'
+            const condition2 = '<div>&nbsp;</div>'
+            const condition3 = '<div>&nbsp;</div>\n<div>&nbsp;</div>'
+            if (
+                _.isEmpty(this.question.body) ||
+                this.question.body === condition1 ||
+                this.question.body === condition2 ||
+                this.question.body === condition3
+            ) {
+                questionValid = false
+            }
+            let correctAnswerChosen = false
+            this.question.answer_options.forEach((answer) => {
+                if (
+                    _.isEmpty(answer.value) ||
+                    answer.value === condition1 ||
+                    answer.value === condition2 ||
+                    answer.value === condition3
+                ) {
+                    questionValid = false
+                }
+                if (answer.correctAnswer) {
+                    correctAnswerChosen = true
+                }
+            })
+            if (!correctAnswerChosen) {
+                questionValid = false
+            }
+            this.$emit('change:valid', questionValid)
+        },
         onSave() {
             // clones questions so that input areas aren't linked when reset
             const emittedQuestion = _.cloneDeep(this.question)
@@ -253,9 +467,11 @@ export default {
                     element.correctAnswer = false
                 }
             })
+            this.onCheckValidation()
         },
         onDelete(index) {
             this.question.answer_options.splice(index, 1)
+            this.onCheckValidation()
         },
         onAddAnswer() {
             // pushes new answer object into answer options
@@ -268,11 +484,12 @@ export default {
                 focus: true,
             }
             this.question.answer_options.push(answerObject)
+            this.onCheckValidation()
         },
         getCorrectAnswer(answer) {
             // if input area is the correct answer adds a green border
             if (answer.correctAnswer === true) {
-                return 'successOutline'
+                return 'container-success-outline'
             } else {
                 return ''
             }
@@ -285,7 +502,7 @@ export default {
             }
         },
         onHover() {
-            this.cursor = 'changePointer'
+            this.cursor = 'cursor-pointer'
         },
         onHoverLeave() {
             this.cursor = ''
@@ -294,11 +511,17 @@ export default {
 }
 </script>
 <style lang="scss" scoped>
-.successOutline {
+.container-success-outline {
     border: 4px solid var(--v-success-base);
     color: var(--v-success-base);
 }
-.changePointer {
+.cursor-pointer {
     cursor: pointer !important;
 }
+.p-bold-text {
+    color: var(--v-primary-base);
+}
+.container-label-correct {
+    color: var(--v-success-base) !important;
+}
 </style>

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

@@ -13,6 +13,10 @@
         <div v-if="!tableMode">
             <div>
                 <h2
+                    v-if="
+                        block.metadata.config.title &&
+                        block.metadata.config.display_title
+                    "
                     :aria-label="
                         $t(
                             'windward.games.components.content.blocks.quizshow_game.title'
@@ -231,6 +235,9 @@ export default {
         if (this.answerStates.length === 0) {
             this.initAnswersStates()
         }
+        if (!_.isBoolean(this.block.metadata.config.display_title)) {
+            this.$set(this.block.metadata.config, 'display_title', true)
+        }
     },
     mounted() {},
     updated() {},

package/components/content/blocks/sevenStrikes/SevenStikes.vue

@@ -1,7 +1,12 @@
 <template>
     <div>
         <v-col class="pa-0">
-            <h2>
+            <h2
+                v-if="
+                    block.metadata.config.title &&
+                    block.metadata.config.display_title
+                "
+            >
                 {{
                     block.metadata.config.title
                         ? block.metadata.config.title
@@ -253,6 +258,9 @@ export default {
                 'windward.games.components.settings.seven_strikes.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.metadata.config.instructions = this.$t(
                 'windward.games.components.settings.seven_strikes.instructions'

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

@@ -2,7 +2,10 @@
     <div>
         <div>
             <h2
-                v-if="block.metadata.config.title"
+                v-if="
+                    block.metadata.config.title &&
+                    block.metadata.config.display_title
+                "
                 :aria-label="
                     $t(
                         'windward.games.components.content.blocks.slideshow.slideshow_title'
@@ -128,7 +131,9 @@ export default {
                 'windward.games.components.settings.slideshow.form.slideshow_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.metadata.config.instructions = ''
         }

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

@@ -1,7 +1,12 @@
 <template>
     <v-container class="pa-0">
         <v-col class="pa-0">
-            <h2>
+            <h2
+                v-if="
+                    block.metadata.config.title &&
+                    block.metadata.config.display_title
+                "
+            >
                 {{
                     block.metadata.config.title
                         ? block.metadata.config.title
@@ -211,6 +216,9 @@ export default {
                 'windward.games.components.settings.word_jumble.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 &&