@windward/games 0.0.4 → 0.0.6

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

@@ -118,6 +118,7 @@
                             >
                                 <v-card-text>
                                     <draggable
+                                        v-if="mainPrompt['file']"
                                         class="dragArea list-group"
                                         :key="mainPrompt['prompt']"
                                         v-bind="dragOptions"
@@ -393,7 +394,17 @@ export default {
             solvedQuestions: [],
             status: 'default',
             allowDrag: true,
-            mainPrompt: {},
+            mainPrompt: {
+                altText: '',
+                answer: {},
+                file: {
+                    asset: {
+                        public_url: '',
+                    },
+                    name: '',
+                },
+                prompt: '',
+            },
             editedPrompt: {},
             startingIndex: 0,
         }

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

@@ -11,19 +11,16 @@
                 <v-carousel height="600">
                     <v-container>
                         <v-carousel-item
-                            v-for="(question, index) in block.metadata.config
-                                .questions"
-                            :key="index"
+                            v-for="question in block.metadata.config.questions"
+                            :key="question.id"
                         >
                             <v-col class="d-flex justify-center">
                                 <p class="questionBody">{{ question.body }}</p>
                             </v-col>
                             <v-container :key="updateKey">
                                 <v-row
-                                    v-for="(
-                                        answer, answerIndex
-                                    ) in question.answer_options"
-                                    :key="answerIndex"
+                                    v-for="answer in question.answer_options"
+                                    :key="answer.id"
                                     class="mb-2"
                                 >
                                     <v-col
@@ -32,37 +29,15 @@
                                         class="d-flex justify-end"
                                     >
                                         <v-icon
-                                            class="isCorrect"
-                                            v-if="
-                                                studentResponses[index] &&
-                                                answer.correctAnswer === true &&
-                                                studentResponses[index]
-                                                    .answer_options[answerIndex]
-                                                    .chosen === true
-                                            "
-                                            >mdi-check-circle</v-icon
-                                        >
-                                        <v-icon
-                                            class="isCorrect"
-                                            v-if="
-                                                studentResponses[index] &&
-                                                answer.correctAnswer === true &&
-                                                studentResponses[index]
-                                                    .answer_options[answerIndex]
-                                                    .chosen !== true
-                                            "
-                                            >mdi-check-circle-outline</v-icon
-                                        >
-                                        <v-icon
-                                            class="isIncorrect"
-                                            v-if="
-                                                studentResponses[index] &&
-                                                answer.correctAnswer !== true &&
-                                                studentResponses[index]
-                                                    .answer_options[answerIndex]
-                                                    .chosen === true
+                                            :class="
+                                                handleIconClass(
+                                                    question,
+                                                    answer
+                                                )
                                             "
-                                            >mdi-alpha-x-circle</v-icon
+                                            >{{
+                                                handleIcon(question, answer)
+                                            }}</v-icon
                                         >
                                     </v-col>
                                     <v-col cols="12" md="8" class="pa-0">
@@ -70,12 +45,15 @@
                                             class="optionOutline pa-2"
                                             :disabled="answer.disabled"
                                             :class="
-                                                onIsThisCorrect(answer, index)
+                                                onIsThisCorrect(
+                                                    answer,
+                                                    question
+                                                )
                                             "
                                             outlined
                                             tile
                                             @click="
-                                                onChooseAnswer(answer, index)
+                                                onChooseAnswer(answer, question)
                                             "
                                         >
                                             <div
@@ -93,50 +71,24 @@
                                                 </p>
                                                 <div>
                                                     <v-icon
-                                                        class="isCorrect"
-                                                        v-if="
-                                                            studentResponses[
-                                                                index
-                                                            ] &&
-                                                            answer.correctAnswer ===
-                                                                true &&
-                                                            studentResponses[
-                                                                index
-                                                            ].answer_options[
-                                                                answerIndex
-                                                            ].chosen !== true
-                                                        "
-                                                        @click="
-                                                            onAnswerDescription(
-                                                                question
+                                                        :class="
+                                                            handleInformationClass(
+                                                                question,
+                                                                answer
                                                             )
                                                         "
-                                                        >mdi-information</v-icon
-                                                    >
-                                                    <v-icon
-                                                        right
-                                                        dark
-                                                        nontranslate
-                                                        v-if="
-                                                            studentResponses[
-                                                                index
-                                                            ] &&
-                                                            answer.correctAnswer ==
-                                                                true &&
-                                                            studentResponses[
-                                                                index
-                                                            ].answer_options[
-                                                                answerIndex
-                                                            ].chosen === true
-                                                        "
                                                         @click="
                                                             onAnswerDescription(
                                                                 question
                                                             )
                                                         "
+                                                        >{{
+                                                            handleInformationOutline(
+                                                                question,
+                                                                answer
+                                                            )
+                                                        }}</v-icon
                                                     >
-                                                        mdi-information-outline
-                                                    </v-icon>
                                                 </div>
                                             </div>
                                         </v-card>
@@ -188,7 +140,7 @@
                                             )
                                         }}
                                         <v-progress-linear
-                                            color="primary"
+                                            color="success"
                                             outlined
                                             v-model="completedPercent"
                                             rounded
@@ -198,10 +150,10 @@
                                 </v-flex>
                                 <v-flex xs4></v-flex>
                             </v-layout>
-                            <v-layout class="mt-2" v-if="updateTotals !== 1">
+                            <v-layout class="mt-2" v-if="mountCourseCounter">
                                 <v-flex xs8></v-flex>
                                 <v-flex xs4>
-                                    <v-col :key="updateTotals">
+                                    <v-col>
                                         <p>
                                             {{
                                                 $t(
@@ -240,7 +192,7 @@
                                 <div v-if="answerDescriptionModal">
                                     {{
                                         $t(
-                                            'plugin.games.components.content.blocks.multiple_choice.answer_description'
+                                            'plugin.games.components.content.blocks.multiple_choice.answer_feedback'
                                         )
                                     }}
                                 </div>
@@ -295,7 +247,6 @@ export default {
         if (_.isEmpty(this.block.metadata.config.questions)) {
             this.block.metadata.config.questions = []
         }
-        this.updateTotals = 1
     },
     data() {
         return {
@@ -308,14 +259,15 @@ export default {
             answerDescription: '',
             studentAmountCorrect: null,
             totalQuestionsMultipleChoice: null,
-            updateTotals: 1,
             studentResponses: [],
+            mountCourseCounter: false,
         }
     },
     computed: {
         ...mapGetters({
             organization: 'organization/get',
             course: 'course/get',
+            enrollment: 'enrollment/get',
         }),
         completedAmount() {
             if (this.completedItems) {
@@ -337,8 +289,15 @@ export default {
             return 0
         },
     },
+    watch: {
+        render(newValue) {
+            if (newValue) {
+                this.onTotalAmountOfQuestions()
+            }
+        },
+    },
     mounted() {
-        this.studentAmountCorrect = 0
+        this.mountCourseCounter = false
         this.onAmountCorrect()
         this.onTotalAmountOfQuestions()
     },
@@ -348,6 +307,7 @@ export default {
             // grabs user state to get the total amount of questions a studentanswered correctly
             let userState = await UserContentBlockState.where({
                 'metadata->block->tag': 'plugin-games-multiple-choice',
+                course_user_id: this.enrollment.id,
             }).get()
             userState.forEach((state) => {
                 state.metadata.studentResponses.forEach((element) => {
@@ -356,12 +316,12 @@ export default {
                     }
                 })
             })
-
-            // sets total
-            this.studentAmountCorrect = correct
-            // updates display area of totals
-            this.updateTotals = Crypto.id()
-            this.updateKey = Crypto.id()
+            // need to wait till correct has the new value to set the var
+            setTimeout(() => {
+                // sets total
+                this.studentAmountCorrect = correct
+                this.mountCourseCounter = true
+            }, 1000)
         },
         async onTotalAmountOfQuestions() {
             let multipleChoiceTotalQuestions = 0
@@ -388,27 +348,28 @@ export default {
             this.answerDescriptionModal = true
             this.answerDescription = question.answer_description
         },
-        onChooseAnswer(answer, questionIndex) {
-            const answerIndex =
-                this.block.metadata.config.questions[
-                    questionIndex
-                ].answer_options.indexOf(answer)
-            // set answer,chosen and student_response on block state
-            if (_.isEmpty(this.studentResponses[questionIndex])) {
-                // clones question block into the correct index in the studentResponses araay
-                this.studentResponses[questionIndex] = _.cloneDeep(
-                    this.block.metadata.config.questions[questionIndex]
-                )
+        onChooseAnswer(answer, question) {
+            let studRep
+            this.studentResponses.find((obj) => {
+                if (obj.id === question.id) {
+                    studRep = obj
+                }
+            })
+            if (_.isEmpty(this.studentResponses) || _.isEmpty(studRep)) {
                 // lets html side know whish answer was chosen, this is important in determine css
-                // used on the displayed side
-                this.studentResponses[questionIndex].answer_options[
-                    answerIndex
-                ].chosen = true
-                this.studentResponses[questionIndex].student_response = answer
+                answer.chosen = true
+                // clones question block into the correct index in the studentResponses araay
+                const clonedQuestion = _.cloneDeep(question)
+                clonedQuestion.student_response = answer
+
+                if (answer.correctAnswer === true) {
+                    this.studentAmountCorrect = this.studentAmountCorrect + 1
+                    clonedQuestion.isStudentCorrect = true
+                } else {
+                    clonedQuestion.isStudentCorrect = false
+                }
 
-                // get question by index
-                const question =
-                    this.block.metadata.config.questions[questionIndex]
+                this.studentResponses.push(clonedQuestion)
                 // ensure the object is not already in the completed items array if not push into the array
                 const questionDone = this.completedItems.find(
                     (item) => item === question
@@ -417,26 +378,24 @@ export default {
                 if (!questionDone) {
                     this.completedItems.push(question)
                 }
-                if (answer.correctAnswer === true) {
-                    this.studentAmountCorrect = this.studentAmountCorrect + 1
-                    this.studentResponses[questionIndex].isStudentCorrect = true
-                }
 
                 this.updateKey = Crypto.id()
             }
         },
-        onIsThisCorrect(answer, questionIndex) {
+        onIsThisCorrect(answer, question) {
+            const studentsQuestionResponse = this.studentResponses.find(
+                (obj) => {
+                    if (obj.id === question.id) {
+                        return obj
+                    }
+                }
+            )
             // check if student already responded
-            if (
-                !_.isEmpty(
-                    this.studentResponses[questionIndex] &&
-                        this.studentResponses[questionIndex].student_response
-                )
-            ) {
+            if (studentsQuestionResponse) {
                 // checks if answer is correct and applies class
                 if (
-                    this.studentResponses[questionIndex].student_response
-                        .correctAnswer === true
+                    studentsQuestionResponse.student_response.correctAnswer ===
+                    true
                 ) {
                     if (answer.correctAnswer === true) {
                         return 'studentAnswerCorrect'
@@ -444,17 +403,115 @@ export default {
                         return ''
                     }
                 } else if (
-                    this.studentResponses[questionIndex].student_response
-                        .correctAnswer !== true
+                    studentsQuestionResponse.student_response.correctAnswer !==
+                        true &&
+                    studentsQuestionResponse.student_response.id === answer.id
                 ) {
-                    if (answer.correctAnswer === true) {
-                        return 'correctBorder'
-                    } else if (
-                        this.studentResponses[questionIndex].student_response
+                    if (
+                        studentsQuestionResponse.student_response
                             .correctAnswer !== true
                     ) {
                         return 'incorrectBorder'
                     }
+                } else if (
+                    studentsQuestionResponse.student_response.correctAnswer !==
+                    true
+                ) {
+                    if (answer.correctAnswer === true) {
+                        return 'correctBorder'
+                    }
+                }
+            }
+        },
+        handleIcon(question, answer) {
+            const studentsQuestionResponse = this.studentResponses.find(
+                (obj) => {
+                    if (obj.id === question.id) {
+                        return obj
+                    }
+                }
+            )
+            if (studentsQuestionResponse) {
+                // requirements for correct and chosen
+                if (
+                    answer.id ===
+                        studentsQuestionResponse.student_response.id &&
+                    answer.correctAnswer === true &&
+                    studentsQuestionResponse.student_response.chosen === true
+                ) {
+                    return 'mdi-check-circle'
+                }
+                //requirements for correct and unchosen
+                if (answer.correctAnswer === true && answer.chosen === false) {
+                    return 'mdi-check-circle-outline'
+                }
+                // requirements for wrong and chosen
+                if (answer.correctAnswer !== true && answer.chosen === true) {
+                    return 'mdi-alpha-x-circle'
+                }
+            }
+        },
+        handleIconClass(question, answer) {
+            const studentsQuestionResponse = this.studentResponses.find(
+                (obj) => {
+                    return obj.id === question.id
+                }
+            )
+            if (studentsQuestionResponse) {
+                // requirements for correct and chosen
+                if (
+                    answer.id ===
+                        studentsQuestionResponse.student_response.id &&
+                    answer.correctAnswer === true &&
+                    studentsQuestionResponse.student_response.chosen === true
+                ) {
+                    return 'isCorrect'
+                }
+                //requirements for correct and unchosen
+                if (answer.correctAnswer === true && answer.chosen === false) {
+                    return 'isCorrect'
+                }
+                // requirements for wrong and chosen
+                if (answer.correctAnswer !== true && answer.chosen === true) {
+                    return 'isIncorrect'
+                }
+            }
+        },
+        handleInformationOutline(question, answer) {
+            const studentsQuestionResponse = this.studentResponses.find(
+                (obj) => {
+                    if (obj.id === question.id) {
+                        return obj
+                    }
+                }
+            )
+            if (studentsQuestionResponse) {
+                if (answer.correctAnswer === true && answer.chosen === true) {
+                    return 'mdi-information'
+                } else if (
+                    answer.correctAnswer === true &&
+                    answer.chosen === false
+                ) {
+                    return 'mdi-information-outline'
+                }
+            }
+        },
+        handleInformationClass(question, answer) {
+            const studentsQuestionResponse = this.studentResponses.find(
+                (obj) => {
+                    if (obj.id === question.id) {
+                        return obj
+                    }
+                }
+            )
+            if (studentsQuestionResponse) {
+                if (answer.correctAnswer === true && answer.chosen === true) {
+                    return 'informationCorrect'
+                } else if (
+                    answer.correctAnswer === true &&
+                    answer.chosen === false
+                ) {
+                    return 'isCorrect'
                 }
             }
         },
@@ -475,7 +532,7 @@ export default {
             this.hint = true
             // sets text for modal, cannot just reference question.hint in html because
             // the carousel loads all elements regardless of if they are on a different slide or not
-            // when mounted so it always shows the last question if referenced question.hint
+            // when mountCourseCounter so it always shows the last question if referenced question.hint
             this.hintText = question.hint
         },
         onFifty(question) {
@@ -549,6 +606,9 @@ export default {
 .isIncorrect {
     color: var(--v-error-base);
 }
+.informationCorrect {
+    color: white;
+}
 .iconStudentCorrect {
     color: var(--v-success-base);
     border-radius: 25px;

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

@@ -29,20 +29,21 @@
                     v-model="question.answer_description"
                     :label="
                         $t(
-                            'plugin.games.components.settings.multiple_choice.answer_description'
+                            'plugin.games.components.settings.multiple_choice.answer_feedback'
                         )
                     "
                     rows="2"
                     :rules="validation.textRules"
                     prepend-inner-icon="mdi-comment"
                 ></v-textarea>
-                <h3>
+                <br />
+                <h4 class="pb-2">
                     {{
                         $t(
                             'plugin.games.components.settings.multiple_choice.answer_options'
                         )
                     }}
-                </h3>
+                </h4>
                 <p>
                     {{
                         $t(
@@ -63,16 +64,20 @@
                         @mouseover="onHover"
                         @mouseleave="onHoverLeave"
                     >
-                        <v-checkbox
-                            v-model="answer.correctAnswer"
-                            :ref="'checkbox' + index"
-                            @click="onSetAnswer(answer)"
-                        ></v-checkbox>
+                        <v-radio-group v-model="question.correctAnswer">
+                            <v-radio
+                                :ref="'checkbox' + index"
+                                v-on:keydown.enter="onSetAnswer(answer, true)"
+                                :value="answer.id"
+                                @click="onSetAnswer(answer)"
+                            ></v-radio>
+                        </v-radio-group>
                     </v-col>
                     <v-col cols="12" md="10">
                         <v-textarea
                             flat
                             solo
+                            :autofocus="answer.focus"
                             v-model="answer.value"
                             :outlined="setOutline(answer)"
                             hide-details
@@ -142,23 +147,32 @@ export default {
                     this.question = {
                         answer_options: [
                             {
-                                id: 1,
+                                id: Crypto.id(),
                                 value: '',
                                 correctAnswer: true,
                                 disabled: false,
+                                chosen: false,
+                                focus: false,
                             },
                             {
-                                id: 2,
+                                id: Crypto.id(),
                                 value: '',
                                 correctAnswer: false,
                                 disabled: false,
+                                chosen: false,
+                                focus: false,
                             },
                         ],
+                        // needed to add this bc radio group needs the id of the answer to set correct
+                        correctAnswer: 1,
                         body: '',
                         hint: '',
                         answer_description: '',
                     }
                 }
+                if (newValue && newValue.body === '') {
+                    this.$refs.form.resetValidation()
+                }
             },
         },
     },
@@ -198,7 +212,10 @@ export default {
         }
     },
     mounted() {
-        if (!_.isEmpty(this.value)) {
+        if (this.value.body === '') {
+            this.$refs.form.resetValidation()
+            this.question = _.cloneDeep(this.value)
+        } else if (!_.isEmpty(this.value)) {
             this.question = _.cloneDeep(this.value)
         }
         // refreshes data for modal on mount
@@ -218,9 +235,14 @@ export default {
             this.$emit('input', emittedQuestion)
             this.$emit('saveAndNew')
         },
-        onSetAnswer(answer) {
+        onSetAnswer(answer, onEnter = null) {
+            if (onEnter) {
+                this.question.correctAnswer = answer.id
+            }
             // changes all inputs that aren't the choosen correct answer to be unchecked
             const index = this.question.answer_options.indexOf(answer)
+            // programatically set to true here, was orginally set up as checkboxs so that was previously happening in the html
+            this.question.answer_options[index].correctAnswer = true
             this.question.answer_options.forEach((element) => {
                 const loopIndex = this.question.answer_options.indexOf(element)
                 if (loopIndex !== index) {
@@ -234,10 +256,12 @@ export default {
         onAddAnswer() {
             // pushes new answer object into answer options
             const answerObject = {
-                id: this.question.answer_options.length + 1,
+                id: Crypto.id(),
                 value: '',
                 correctAnswer: false,
                 disabled: false,
+                chosen: false,
+                focus: true,
             }
             this.question.answer_options.push(answerObject)
         },