@windward/games 0.0.1 → 0.0.3

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

@@ -0,0 +1,276 @@
+<template>
+    <v-form ref="form" v-model="formValid" :key="updateKey">
+        <v-row>
+            <v-col cols="12">
+                <v-textarea
+                    v-model="question.body"
+                    :label="
+                        $t(
+                            'plugin.games.components.settings.multiple_choice.question'
+                        )
+                    "
+                    :autofocus="true"
+                    rows="2"
+                    :rules="validation.textRules"
+                    prepend-inner-icon="mdi-help"
+                ></v-textarea>
+                <v-textarea
+                    v-model="question.hint"
+                    :label="
+                        $t(
+                            'plugin.games.components.settings.multiple_choice.question_hint'
+                        )
+                    "
+                    rows="2"
+                    :rules="validation.textRules"
+                    prepend-inner-icon="mdi-lightbulb-on-10"
+                ></v-textarea>
+                <v-textarea
+                    v-model="question.answer_description"
+                    :label="
+                        $t(
+                            'plugin.games.components.settings.multiple_choice.answer_description'
+                        )
+                    "
+                    rows="2"
+                    :rules="validation.textRules"
+                    prepend-inner-icon="mdi-comment"
+                ></v-textarea>
+                <h3>
+                    {{
+                        $t(
+                            'plugin.games.components.settings.multiple_choice.answer_options'
+                        )
+                    }}
+                </h3>
+                <p>
+                    {{
+                        $t(
+                            'plugin.games.components.settings.multiple_choice.correct_answer'
+                        )
+                    }}
+                </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-checkbox
+                            v-model="answer.correctAnswer"
+                            :ref="'checkbox' + index"
+                            @click="onSetAnswer(answer)"
+                        ></v-checkbox>
+                    </v-col>
+                    <v-col cols="12" md="10">
+                        <v-textarea
+                            flat
+                            solo
+                            v-model="answer.value"
+                            :outlined="setOutline(answer)"
+                            hide-details
+                            :class="getCorrectAnswer(answer)"
+                            :label="
+                                $t(
+                                    'plugin.games.components.settings.multiple_choice.answer_option'
+                                )
+                            "
+                            rows="2"
+                            :rules="validation.textRules"
+                        ></v-textarea>
+                    </v-col>
+                    <v-col
+                        cols="12"
+                        md="1"
+                        class="d-flex justify-center"
+                        @mouseover="onHover"
+                        @mouseleave="onHoverLeave"
+                        @click="onDelete(index)"
+                    >
+                        <v-icon>mdi-delete</v-icon>
+                    </v-col>
+                </v-row>
+            </v-container>
+            <v-container class="d-flex justify-center" v-if="overLength">
+                <p
+                    @mouseover="onHover"
+                    @mouseleave="onHoverLeave"
+                    @click="onAddAnswer"
+                    v-on:keyup.enter="onAddAnswer"
+                    class="fullWidth"
+                    :class="cursor"
+                    tabindex="0"
+                >
+                    <v-icon class="primary addIcon">mdi-plus</v-icon>
+                    {{
+                        $t(
+                            'plugin.games.components.settings.multiple_choice.add_answer'
+                        )
+                    }}
+                </p>
+            </v-container>
+        </v-row>
+    </v-form>
+</template>
+<script>
+import Form from '~/components/Form'
+import _ from 'lodash'
+import Crypto from '~/helpers/Crypto'
+export default {
+    name: 'QuestionDialog',
+    extends: Form,
+    layout: 'authenticated',
+    middleware: ['auth', 'course'],
+    props: {
+        value: { type: Object, required: false },
+    },
+    watch: {
+        value: {
+            deep: true,
+            handler(newValue) {
+                // clone so that the modal isn't opening with filled in outputs each time
+                // if we wrote directly to value it would save on settings side and populate modal when opened
+                this.question = _.cloneDeep(newValue)
+                if (_.get(this.question, 'answer_options', null) === null) {
+                    this.question = {
+                        answer_options: [
+                            {
+                                id: 1,
+                                value: '',
+                                correctAnswer: true,
+                                disabled: false,
+                            },
+                            {
+                                id: 2,
+                                value: '',
+                                correctAnswer: false,
+                                disabled: false,
+                            },
+                        ],
+                        body: '',
+                        hint: '',
+                        answer_description: '',
+                    }
+                }
+            },
+        },
+    },
+    computed: {
+        // won't allow more than four answers to be input
+        overLength() {
+            if (
+                this.question.answer_options &&
+                this.question.answer_options.length < 4
+            ) {
+                return true
+            } else {
+                return false
+            }
+        },
+    },
+    data() {
+        return {
+            question: {},
+            validation: {
+                textRules: [
+                    (v) => !!v || this.$t('shared.forms.errors.required'),
+                ],
+                optionRules: [
+                    (v) => {
+                        return (
+                            !!v ||
+                            this.$t(
+                                'components.content.blocks.assessment.questions.types.multi_choice_single_answer.correct_required'
+                            )
+                        )
+                    },
+                ],
+            },
+            cursor: null,
+            updateKey: 0,
+        }
+    },
+    mounted() {
+        if (!_.isEmpty(this.value)) {
+            this.question = _.cloneDeep(this.value)
+        }
+        // refreshes data for modal on mount
+        this.updateKey = Crypto.id()
+    },
+    methods: {
+        onSave() {
+            // clones questions so that input areas aren't linked when reset
+            const emittedQuestion = _.cloneDeep(this.question)
+            // // emit value from inputs to parent components of the settings manager
+            this.$emit('input', emittedQuestion)
+        },
+        onSaveAndNew() {
+            // clones questions so that input areas aren't linked when reset
+            const emittedQuestion = _.cloneDeep(this.question)
+            // // emit value from inputs to parent components of the settings manager
+            this.$emit('input', emittedQuestion)
+            this.$emit('saveAndNew')
+        },
+        onSetAnswer(answer) {
+            // changes all inputs that aren't the choosen correct answer to be unchecked
+            const index = this.question.answer_options.indexOf(answer)
+            this.question.answer_options.forEach((element) => {
+                const loopIndex = this.question.answer_options.indexOf(element)
+                if (loopIndex !== index) {
+                    element.correctAnswer = false
+                }
+            })
+        },
+        onDelete(index) {
+            this.question.answer_options.splice(index, 1)
+        },
+        onAddAnswer() {
+            // pushes new answer object into answer options
+            const answerObject = {
+                id: this.question.answer_options.length + 1,
+                value: '',
+                correctAnswer: false,
+                disabled: false,
+            }
+            this.question.answer_options.push(answerObject)
+        },
+        getCorrectAnswer(answer) {
+            // if input area is the correct answer adds a green border
+            if (answer.correctAnswer === true) {
+                return 'successOutline'
+            } else {
+                return ''
+            }
+        },
+        setOutline(answer) {
+            if (answer.correctAnswer === true) {
+                return false
+            } else {
+                return true
+            }
+        },
+        onHover() {
+            this.cursor = 'changePointer'
+        },
+        onHoverLeave() {
+            this.cursor = ''
+        },
+    },
+}
+</script>
+<style lang="scss" scoped>
+.successOutline {
+    border: 4px solid var(--v-success-base);
+    color: var(--v-success-base);
+}
+.changePointer {
+    cursor: pointer !important;
+}
+</style>

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

@@ -12,7 +12,7 @@
         ></v-switch>
         <div v-if="!tableMode">
             <div>
-                <h1
+                <h3
                     :aria-label="
                         $t(
                             'plugin.games.components.content.blocks.quizshow_game.title'
@@ -21,7 +21,7 @@
                     tabindex="0"
                 >
                     {{ block.metadata.config.title }}
-                </h1>
+                </h3>
 
                 <p tabindex="0">
                     <TextViewer v-model="block.metadata.config.instructions" />

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

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

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

@@ -0,0 +1,97 @@
+<template>
+    <v-container>
+        <v-row class="d-flex justify-center">
+            <div v-for="(item, index) in letterArray" :key="index">
+                <v-text-field
+                    v-model="item.value"
+                    :ref="'input' + index"
+                    :autofocus="index === 0 ? true : false"
+                    class="textArea ml-1 mr-1"
+                    maxlength="1"
+                    @input="onInput($event, index)"
+                    v-on:keydown="onSpaceHandler($event)"
+                ></v-text-field>
+            </div>
+        </v-row>
+    </v-container>
+</template>
+<script>
+import _ from 'lodash'
+export default {
+    name: 'Jumble',
+    props: {
+        value: { type: Object, required: true, default: '' },
+        reveal: { type: Boolean, required: true, default: false },
+        reset: { type: Boolean, required: true, default: false },
+    },
+    watch: {
+        reveal: {
+            handler(newValue) {
+                // reveals correct answer in input areas
+                if (newValue === true) {
+                    for (let i = 0; i < this.value.value.length; i++) {
+                        const letter = this.answer.charAt(i)
+                        this.letterArray[i].value = letter
+                    }
+                } else {
+                    this.splitUpWord()
+                }
+            },
+            immediate: true,
+        },
+        reset: {
+            handler(newValue) {
+                // removes students answer from input if they got it correct
+                this.splitUpWord()
+            }
+        }
+    },
+    data() {
+        return {
+            saveState: false,
+            letterArray: [],
+            answer: '',
+        }
+    },
+    mounted() {
+        this.letterArray = []
+        this.answer = this.value.value
+        this.splitUpWord()
+    },
+    methods: {
+        splitUpWord() {
+            this.letterArray = []
+            // gets length of word and creates input area for each letter
+            if (!_.isEmpty(this.value.value)) {
+                for (let i = 0; i < this.value.value.length; i++) {
+                    let defaultObject = {
+                        value: '',
+                    }
+                    this.letterArray.push(defaultObject)
+                }
+            }
+        },
+        onSpaceHandler(event) {
+            // prevents empty space from being entered
+            if (event.keyCode === 32) {
+                event.preventDefault()
+                return false
+            }
+        },
+        onInput(event, index) {
+            // handles focusing on next element after student enters a letter
+            if (!_.isEmpty(event) && this.$refs['input' + (index + 1)]) {
+                this.$refs['input' + (index + 1)][0].focus()
+            } else if (index !== 0 && _.isEmpty(event)) {
+                this.$refs['input' + (index - 1)][0].focus()
+            }
+            this.$emit('input', this.letterArray)
+        },
+    },
+}
+</script>
+<style scoped>
+.textArea {
+    width: 20px;
+}
+</style>

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

@@ -0,0 +1,239 @@
+<template>
+    <v-container>
+        <v-col class="pa-0">
+            <h3>
+                {{
+                    block.metadata.config.title
+                        ? block.metadata.config.title
+                        : $t(
+                              'plugin.games.components.content.blocks.word_jumble.title'
+                          )
+                }}
+            </h3>
+            <p>{{ block.metadata.config.instructions }}</p>
+        </v-col>
+        <v-col class="pa-0">
+            <template>
+                <v-carousel @change="onSlideChanged()">
+                    <v-carousel-item
+                        v-for="(word, index) in block.metadata.config.words"
+                        :key="index"
+                    >
+                        <v-row class="d-flex justify-center outline ma-2">
+                            <p class="pa-3 mb-0 clueAndJumble">
+                                <span class="spanBold"
+                                    >{{
+                                        $t(
+                                            'plugin.games.components.content.blocks.word_jumble.clue'
+                                        )
+                                    }}
+                                </span>
+                                {{ word.hint }}
+                            </p>
+                        </v-row>
+                        <v-row class="d-flex justify-center outline ma-2">
+                            <p class="pa-3 mb-0 clueAndJumble">
+                                {{ shuffle(word.value) }}
+                            </p>
+                        </v-row>
+                        <v-container :key="'feedback'" :class="feedbackStatus">
+                            <br />
+                            <v-row
+                                class="d-flex justify-space-around"
+                                align="center"
+                                justify="center"
+                                >{{ feedback }}
+                            </v-row>
+                            <br />
+                        </v-container>
+                        <v-row class="justify-center mt-4">
+                            <Jumble
+                                :value="word"
+                                :reveal="showAnswer"
+                                :reset="resetValue"
+                                @input="getResponse($event)"
+                            ></Jumble>
+                        </v-row>
+                        <v-row class="justify-center mt-8">
+                            <v-btn
+                                color="primary mr-4"
+                                @click="onCheckAnswer(word)"
+                                >{{
+                                    $t(
+                                        'plugin.games.components.content.blocks.word_jumble.check'
+                                    )
+                                }}</v-btn
+                            >
+                            <v-btn
+                                color="primary ml-4"
+                                @click="onRevealAnswer"
+                                >{{
+                                    $t(
+                                        'plugin.games.components.content.blocks.word_jumble.reveal'
+                                    )
+                                }}</v-btn
+                            >
+                        </v-row>
+                    </v-carousel-item>
+                </v-carousel>
+            </template>
+        </v-col>
+    </v-container>
+</template>
+<script>
+import _ from 'lodash'
+import Jumble from './Jumble.vue'
+import BaseContentBlock from '~/components/Content/Blocks/BaseContentBlock'
+
+export default {
+    name: 'WordJumble',
+    extends: BaseContentBlock,
+    components: {
+        Jumble,
+    },
+    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.feedback_correct)) {
+            this.block.metadata.config.feedback_correct = ''
+        }
+        if (_.isEmpty(this.block.metadata.config.feedback_incorrect)) {
+            this.block.metadata.config.feedback_incorrect = ''
+        }
+        if (_.isEmpty(this.block.metadata.config.words)) {
+            this.block.metadata.config.words = []
+        }
+    },
+    data() {
+        return {
+            saveState: false,
+            feedback: this.$t(
+                'plugin.games.components.content.blocks.word_jumble.feedback'
+            ),
+            showAnswer: false,
+            resetValue: false,
+            studentResponse: '',
+            feedbackStatus: '',
+        }
+    },
+    mounted() {
+        this.showAnswer = false
+    },
+    methods: {
+        shuffle(str) {
+            var a = str
+            var newArr = []
+            var neww = ''
+            var text = a.replace(/[\r\n]/g, '').split(' ')
+
+            text.map(function (v) {
+                v.split('').map(function () {
+                    var hash = Math.floor(Math.random() * v.length)
+                    neww += v[hash]
+                    v = v.replace(v.charAt(hash), '')
+                })
+                newArr.push(neww)
+                neww = ''
+            })
+            var x = newArr.map((v) => v.split('').join(' ')).join('\n')
+            str = x
+                .split('')
+                .map((v) => v.toUpperCase())
+                .join('')
+            return str
+        },
+        getResponse(event) {
+            // child component emits event that triggers this function to get the students response as they enter it
+            this.studentResponse = ''
+            event.forEach((element) => {
+                this.studentResponse = this.studentResponse + element.value
+            })
+        },
+        onRevealAnswer() {
+            // reveal prop changed to true to show answer
+            this.showAnswer = true
+        },
+        onCheckAnswer(word) {
+            this.studentResponse = this.studentResponse.toLowerCase()
+            const answer = word.value.toLowerCase()
+            if (this.studentResponse === answer) {
+                // updates class
+                this.feedbackStatus = 'success'
+                // gets custom or standard feedback
+                if (
+                    !_.isEmpty(this.block.metadata.config.feedback_correct) &&
+                    this.block.metadata.config.feedback_correct !== ''
+                ) {
+                    this.feedback = this.block.metadata.config.feedback_correct
+                } else {
+                    this.feedback = this.$t(
+                        'plugin.games.components.content.blocks.word_jumble.correct'
+                    )
+                }
+            } else {
+                // updates class
+                this.feedbackStatus = 'error'
+                // gets custom or standard feedback
+                if (
+                    !_.isEmpty(this.block.metadata.config.feedback_incorrect) &&
+                    this.block.metadata.config.feedback_incorrect !== ''
+                ) {
+                    this.feedback =
+                        this.block.metadata.config.feedback_incorrect
+                } else {
+                    this.feedback = this.$t(
+                        'plugin.games.components.content.blocks.word_jumble.incorrect'
+                    )
+                }
+            }
+        },
+        onSlideChanged() {
+            // this function is called when the slide is changed
+            // reset the game each time this occurs via props due to fact 
+            // that components do not remount on slides each time the slide is revisited
+            // updates class
+            this.feedbackStatus = ''
+            this.feedback = this.$t(
+                'plugin.games.components.content.blocks.word_jumble.feedback'
+            )
+            // ensure answer no longder revealed
+            this.showAnswer = false
+            // if student has entered a response the input values are reset to empty on slide change
+            this.resetValue = !this.resetValue
+        },
+    },
+}
+</script>
+<style lang="scss" scoped>
+.outline {
+    border: 2px solid black;
+    border-radius: 10px;
+}
+.clueAndJumble {
+    font-size: 20px;
+}
+.spanBold {
+    font-weight: 900;
+}
+.error {
+    border: dashed 2px #dc3d1a;
+    background-color: #fff1f1;
+}
+.success {
+    border: dashed 2px #76b778;
+    background-color: #f1fff3;
+}
+</style>