@windward/games 0.0.1 → 0.0.3

package/components/content/blocks/dragDrop/BucketGame.vue

@@ -1,20 +1,20 @@
 <template>
     <div>
         <div>
-            <h1 class="title" aria-label="bucket game title" tabindex="0">
+            <h3 class="title" aria-label="bucket game title" tabindex="0">
                 {{ block.metadata.config.title }}
-            </h1>
+            </h3>
 
             <p tabindex="0">
                 {{ block.metadata.config.instructions }}
             </p>
-            <h3 v-if="!render" class="d-flex justify-center align-center">
+            <h4 v-if="!render" class="d-flex justify-center align-center">
                 {{
                     $t(
                         'plugin.games.components.content.blocks.bucket_game.cannot'
                     )
                 }}
-            </h3>
+            </h4>
             <v-container fluid :class="status" class="pa-0">
                 <br />
                 <v-row>

package/components/content/blocks/dragDrop/SortingGame.vue

@@ -1,6 +1,6 @@
 <template>
     <div>
-        <h2>{{ block.metadata.config.title }}</h2>
+        <h3>{{ block.metadata.config.title }}</h3>
 
         <p>
             {{ block.metadata.config.instructions }}

package/components/content/blocks/flashcards/FlashcardSlides.vue

@@ -1,8 +1,8 @@
 <template>
     <div>
-        <h2 v-if="block.metadata.config.title">
+        <h3 v-if="block.metadata.config.title">
             {{ block.metadata.config.title }}
-        </h2>
+        </h3>
 
         <p v-if="block.metadata.config.instructions">
             {{ block.metadata.config.instructions }}

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

@@ -1,7 +1,7 @@
 <template>
     <div class="background">
         <div>
-            <h1
+            <h3
                 :aria-label="
                     $t(
                         'plugin.games.components.content.blocks.matching_game.match_game_title'
@@ -10,7 +10,7 @@
                 tabindex="0"
             >
                 {{ block.metadata.config.title }}
-            </h1>
+            </h3>
 
             <p tabindex="0">
                 {{ block.metadata.config.instructions }}

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

@@ -0,0 +1,565 @@
+<template>
+    <v-container>
+        <v-row>
+            <v-col>
+                <h3>{{ block.metadata.config.title }}</h3>
+                <p>{{ block.metadata.config.instructions }}</p>
+            </v-col>
+        </v-row>
+        <v-row>
+            <v-col class="pa-0">
+                <v-carousel height="600">
+                    <v-container>
+                        <v-carousel-item
+                            v-for="(question, index) in block.metadata.config
+                                .questions"
+                            :key="index"
+                        >
+                            <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"
+                                    class="mb-2"
+                                >
+                                    <v-col
+                                        cols="12"
+                                        md="2"
+                                        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
+                                            "
+                                            >mdi-alpha-x-circle</v-icon
+                                        >
+                                    </v-col>
+                                    <v-col cols="12" md="8" class="pa-0">
+                                        <v-card
+                                            class="optionOutline pa-2"
+                                            :disabled="answer.disabled"
+                                            :class="
+                                                onIsThisCorrect(answer, index)
+                                            "
+                                            outlined
+                                            tile
+                                            @click="
+                                                onChooseAnswer(answer, index)
+                                            "
+                                        >
+                                            <div
+                                                class="d-flex justify-space-between"
+                                            >
+                                                <p class="mb-0">
+                                                    {{
+                                                        getCharacter(
+                                                            question,
+                                                            answer
+                                                        ) +
+                                                        ': ' +
+                                                        answer.value
+                                                    }}
+                                                </p>
+                                                <div>
+                                                    <v-icon
+                                                        class="isCorrect"
+                                                        v-if="
+                                                            studentResponses[
+                                                                index
+                                                            ] &&
+                                                            answer.correctAnswer ===
+                                                                true &&
+                                                            studentResponses[
+                                                                index
+                                                            ].answer_options[
+                                                                answerIndex
+                                                            ].chosen !== true
+                                                        "
+                                                        @click="
+                                                            onAnswerDescription(
+                                                                question
+                                                            )
+                                                        "
+                                                        >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
+                                                            )
+                                                        "
+                                                    >
+                                                        mdi-information-outline
+                                                    </v-icon>
+                                                </div>
+                                            </div>
+                                        </v-card>
+                                    </v-col>
+                                    <v-col cols="12" md="2"></v-col>
+                                </v-row>
+                            </v-container>
+                            <v-col cols="12" md="12">
+                                <v-row class="d-flex justify-center">
+                                    <v-btn
+                                        color="primary"
+                                        outlined
+                                        class="mr-4 hintButton"
+                                        @click="onHint(question)"
+                                        >{{
+                                            $t(
+                                                'plugin.games.components.content.blocks.multiple_choice.hint'
+                                            )
+                                        }}</v-btn
+                                    >
+                                    <v-btn
+                                        color="primary fiftyButton"
+                                        outlined
+                                        :disabled="
+                                            question.answer_options.length !==
+                                                4 || question.fiftyFifty
+                                        "
+                                        class="ml-4 fiftyButton"
+                                        @click="onFifty(question)"
+                                        >{{
+                                            $t(
+                                                'plugin.games.components.content.blocks.multiple_choice.fifty'
+                                            )
+                                        }}</v-btn
+                                    >
+                                </v-row>
+                            </v-col>
+                            <v-layout class="mt-2">
+                                <v-flex xs4></v-flex>
+                                <v-flex xs4>
+                                    <v-col align="center" tabindex="0">
+                                        {{
+                                            $t(
+                                                'plugin.games.components.content.blocks.matching_game.of_complete_text_area',
+                                                [
+                                                    completedAmount,
+                                                    totalAmountQuestions,
+                                                ]
+                                            )
+                                        }}
+                                        <v-progress-linear
+                                            color="primary"
+                                            outlined
+                                            v-model="completedPercent"
+                                            rounded
+                                            height="15"
+                                        ></v-progress-linear>
+                                    </v-col>
+                                </v-flex>
+                                <v-flex xs4></v-flex>
+                            </v-layout>
+                            <v-layout class="mt-2" v-if="updateTotals !== 1">
+                                <v-flex xs8></v-flex>
+                                <v-flex xs4>
+                                    <v-col :key="updateTotals">
+                                        <p>
+                                            {{
+                                                $t(
+                                                    'plugin.games.components.content.blocks.multiple_choice.total_points'
+                                                )
+                                            }}
+                                        </p>
+                                        <p>
+                                            {{ studentAmountCorrect }}
+                                            {{
+                                                $t(
+                                                    'plugin.games.components.content.blocks.multiple_choice.out_of'
+                                                )
+                                            }}
+                                            {{ totalQuestionsMultipleChoice }}
+                                        </p>
+                                    </v-col>
+                                </v-flex>
+                            </v-layout>
+                        </v-carousel-item>
+                        <Dialog
+                            v-model="dialog"
+                            :trigger="false"
+                            @click:outside="close"
+                            @click:close="close"
+                            @keydown.esc="close"
+                        >
+                            <template #title>
+                                <div v-if="hint">
+                                    {{
+                                        $t(
+                                            'plugin.games.components.content.blocks.multiple_choice.hint_title'
+                                        )
+                                    }}
+                                </div>
+                                <div v-if="answerDescriptionModal">
+                                    {{
+                                        $t(
+                                            'plugin.games.components.content.blocks.multiple_choice.answer_description'
+                                        )
+                                    }}
+                                </div>
+                            </template>
+                            <template #form="{ on, attrs }">
+                                <div v-bind="attrs" v-on="on">
+                                    <div v-if="hint">
+                                        {{ hintText }}
+                                    </div>
+                                    <div v-if="answerDescriptionModal">
+                                        {{ answerDescription }}
+                                    </div>
+                                </div>
+                            </template>
+                        </Dialog>
+                    </v-container>
+                </v-carousel>
+            </v-col>
+        </v-row>
+    </v-container>
+</template>
+<script>
+import BaseContentBlock from '~/components/Content/Blocks/BaseContentBlock'
+import Dialog from '~/components/Dialog.vue'
+import _ from 'lodash'
+import Crypto from '~/helpers/Crypto'
+import { mapGetters } from 'vuex'
+import UserContentBlockState from '~/models/UserContentBlockState'
+import ContentBlock from '~/models/ContentBlock'
+import Course from '~/models/Course'
+
+export default {
+    name: 'MultipleChoice',
+    extends: BaseContentBlock,
+    components: { Dialog },
+    beforeMount() {
+        if (_.isEmpty(this.block)) {
+            this.block = {}
+        }
+        if (_.isEmpty(this.block.metadata)) {
+            this.block.metadata = {}
+        }
+        if (_.isEmpty(this.block.metadata.config)) {
+            this.block.metadata.config = {}
+        }
+        if (_.isEmpty(this.block.metadata.config.title)) {
+            this.block.metadata.config.title = ''
+        }
+        if (_.isEmpty(this.block.metadata.config.instructions)) {
+            this.block.metadata.config.instructions = ''
+        }
+        if (_.isEmpty(this.block.metadata.config.questions)) {
+            this.block.metadata.config.questions = []
+        }
+        this.updateTotals = 1
+    },
+    data() {
+        return {
+            updateKey: 0,
+            completedItems: [],
+            dialog: false,
+            hint: false,
+            hintText: '',
+            answerDescriptionModal: false,
+            answerDescription: '',
+            studentAmountCorrect: null,
+            totalQuestionsMultipleChoice: null,
+            updateTotals: 1,
+            studentResponses: [],
+        }
+    },
+    computed: {
+        ...mapGetters({
+            organization: 'organization/get',
+            course: 'course/get',
+        }),
+        completedAmount() {
+            if (this.completedItems) {
+                return _.flatten(this.completedItems).length
+            }
+        },
+        totalAmountQuestions() {
+            if (this.block.metadata.config.questions) {
+                return _.flatten(this.block.metadata.config.questions).length
+            }
+        },
+        completedPercent() {
+            if (
+                this.block.metadata.config.questions.length > 0 &&
+                this.completedItems.length > 0
+            ) {
+                return (this.completedAmount / this.totalAmountQuestions) * 100
+            }
+            return 0
+        },
+    },
+    mounted() {
+        this.studentAmountCorrect = 0
+        this.onAmountCorrect()
+        this.onTotalAmountOfQuestions()
+    },
+    methods: {
+        async onAmountCorrect() {
+            let correct = 0
+            // 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',
+            }).get()
+            userState.forEach((state) => {
+                state.metadata.studentResponses.forEach((element) => {
+                    if (element.isStudentCorrect === true) {
+                        correct = correct + 1
+                    }
+                })
+            })
+
+            // sets total
+            this.studentAmountCorrect = correct
+            // updates display area of totals
+            this.updateTotals = Crypto.id()
+            this.updateKey = Crypto.id()
+        },
+        async onTotalAmountOfQuestions() {
+            let multipleChoiceTotalQuestions = 0
+            // get total amount of questions via content block route
+            let multipleChoiceBlocks = await ContentBlock.where(
+                'tag',
+                'plugin-games-multiple-choice'
+            )
+                .for(new Course({ id: this.course.id }))
+                .get()
+
+            multipleChoiceBlocks.forEach((element) => {
+                element.block.metadata.config.questions.forEach((question) => {
+                    multipleChoiceTotalQuestions =
+                        multipleChoiceTotalQuestions + 1
+                })
+            })
+
+            this.totalQuestionsMultipleChoice = multipleChoiceTotalQuestions
+        },
+        onAnswerDescription(question) {
+            //launches modal and displays anwer description
+            this.dialog = true
+            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]
+                )
+                // 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
+
+                // get question by index
+                const question =
+                    this.block.metadata.config.questions[questionIndex]
+                // 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
+                )
+
+                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) {
+            // check if student already responded
+            if (
+                !_.isEmpty(
+                    this.studentResponses[questionIndex] &&
+                        this.studentResponses[questionIndex].student_response
+                )
+            ) {
+                // checks if answer is correct and applies class
+                if (
+                    this.studentResponses[questionIndex].student_response
+                        .correctAnswer === true
+                ) {
+                    if (answer.correctAnswer === true) {
+                        return 'studentAnswerCorrect'
+                    } else {
+                        return ''
+                    }
+                } else if (
+                    this.studentResponses[questionIndex].student_response
+                        .correctAnswer !== true
+                ) {
+                    if (answer.correctAnswer === true) {
+                        return 'correctBorder'
+                    } else if (
+                        this.studentResponses[questionIndex].student_response
+                            .correctAnswer !== true
+                    ) {
+                        return 'incorrectBorder'
+                    }
+                }
+            }
+        },
+        getCharacter(question, answer) {
+            //gets a letter to preface each answer option
+            const letters = ['A', 'B', 'C', 'D']
+            const questionIndex =
+                this.block.metadata.config.questions.indexOf(question)
+            const answerIndex =
+                this.block.metadata.config.questions[
+                    questionIndex
+                ].answer_options.indexOf(answer)
+            return letters[answerIndex]
+        },
+        onHint(question) {
+            // launches dialog modal
+            this.dialog = true
+            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
+            this.hintText = question.hint
+        },
+        onFifty(question) {
+            // disables button so user can't click twice
+            question.fiftyFifty = true
+            // shuffles array so that the first too answers that are incorrect are not the ones disabled every time
+            const shuffledArray = this.shuffle(question.answer_options)
+            let counter = 0
+            shuffledArray.forEach((element) => {
+                if (element.correctAnswer !== true && counter < 2) {
+                    counter = counter + 1
+                    element.disabled = true
+                }
+            })
+            // resort array back in order based on id
+            shuffledArray.sort((a, b) => a.id - b.id)
+            this.updateKey = Crypto.id()
+        },
+        shuffle(array) {
+            let currentIndex = array.length,
+                randomIndex
+
+            // While there remain elements to shuffle.
+            while (currentIndex != 0) {
+                // Pick a remaining element.
+                randomIndex = Math.floor(Math.random() * currentIndex)
+                currentIndex--
+
+                // And swap it with the current element.
+                ;[array[currentIndex], array[randomIndex]] = [
+                    array[randomIndex],
+                    array[currentIndex],
+                ]
+            }
+
+            return array
+        },
+        close() {
+            this.dialog = false
+            this.hint = false
+            this.answerDescriptionModal = false
+            this.hintText = ''
+            this.answerDescription = ''
+        },
+    },
+}
+</script>
+<style scoped>
+.questionBody {
+    font-size: 18px;
+}
+.optionOutline {
+    border: 2px solid var(--v-primary-base);
+    border-radius: 3px;
+}
+.correctBorder {
+    border: 3px solid var(--v-success-base);
+}
+.incorrectBorder {
+    background-color: var(--v-error-base);
+    border: 2px solid var(--v-error-base);
+    color: white;
+}
+.studentAnswerCorrect {
+    background-color: var(--v-success-base);
+    color: white;
+}
+.isCorrect {
+    color: var(--v-success-base);
+}
+.isIncorrect {
+    color: var(--v-error-base);
+}
+.iconStudentCorrect {
+    color: var(--v-success-base);
+    border-radius: 25px;
+}
+/* need important below to override vuetify preset width for buttons */
+.hintButton {
+    min-width: 20% !important;
+    margin-right: 16px;
+}
+.fiftyButton {
+    min-width: 20% !important;
+    margin-right: 16px;
+}
+</style>