@windward/games 0.0.4 → 0.0.5

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

@@ -0,0 +1,368 @@
+<template>
+    <div>
+        <v-col class="pa-0">
+            <h3>
+                {{
+                    block.metadata.config.title
+                        ? block.metadata.config.title
+                        : $t(
+                              'plugin.games.components.content.blocks.seven_strikes.title'
+                          )
+                }}
+            </h3>
+            <p>{{ block.metadata.config.instructions }}</p>
+        </v-col>
+        <v-col class="pa-0">
+            <template>
+                <v-carousel
+                    v-model="carouselIndex"
+                    @change="onSlideChanged($event)"
+                >
+                    <v-carousel-item
+                        v-for="(word, index) in block.metadata.config.words"
+                        :key="index"
+                    >
+                        <v-row class="d-flex justify-center ma-2">
+                            <p class="pa-3 mb-0 clueAndJumble">
+                                {{ word.hint }}
+                            </p>
+                        </v-row>
+                        <v-container
+                            v-if="showFeedback"
+                            :key="'feedback'"
+                            :class="feedbackStatus"
+                            class="mb-8"
+                        >
+                            <v-row class="d-flex" align="center">
+                                <v-col cols="4"></v-col>
+                                <v-col cols="4" class="d-flex justify-center">
+                                    <p class="">{{ feedback }}</p>
+                                </v-col>
+                                <v-col cols="4" class="d-flex justify-end">
+                                    <v-icon @click="onHideFeedback">
+                                        mdi-alpha-x-circle-outline</v-icon
+                                    >
+                                </v-col>
+                            </v-row>
+                        </v-container>
+                        <v-row class="justify-center">
+                            <div
+                                v-for="(
+                                    strike, strikeIndex
+                                ) in sevenStrikesCounter"
+                                :key="strikeIndex"
+                            >
+                                <div
+                                    v-if="strike.strike === false"
+                                    :ref="'strike' + strikeIndex"
+                                    class="strikeArea ml-1 mr-1 d-flex justify-center align-center"
+                                    maxlength="1"
+                                ></div>
+                                <div
+                                    class="strike"
+                                    v-if="strike.strike === true"
+                                >
+                                    X
+                                </div>
+                            </div>
+                        </v-row>
+                        <v-row
+                            class="justify-center mt-12"
+                            v-if="word.splitWord"
+                        >
+                            <div
+                                v-for="(letter, splitIndex) in word.splitWord"
+                                :key="splitIndex"
+                            >
+                                <div
+                                    :ref="'input' + splitIndex"
+                                    class="textArea ml-1 mr-1"
+                                    maxlength="1"
+                                >
+                                    <div v-if="letter.show === true">
+                                        {{ letter.letter }}
+                                    </div>
+                                </div>
+                            </div>
+                        </v-row>
+                        <div>
+                            <keyboard
+                                v-if="!showFeedback"
+                                :key="index"
+                                :keyboardClass="keyBoardClass + index"
+                                @onChange="onChange"
+                                @onKeyPress="onKeyPress"
+                                :input="input"
+                            />
+                        </div>
+                        <v-row class="justify-center mt-12" v-if="showFeedback">
+                            <v-btn
+                                color="primary ml-4"
+                                @click="onRevealAnswer"
+                                >{{
+                                    $t(
+                                        'plugin.games.components.content.blocks.seven_strikes.reveal'
+                                    )
+                                }}</v-btn
+                            >
+                            <v-btn
+                                color="primary ml-4"
+                                @click="onSlideChanged(index)"
+                                >{{
+                                    $t(
+                                        'plugin.games.components.content.blocks.seven_strikes.again'
+                                    )
+                                }}</v-btn
+                            >
+                            <v-btn
+                                @click="onChangeSlide(index + 1)"
+                                color="primary ml-4"
+                                >{{
+                                    $t(
+                                        'plugin.games.components.content.blocks.seven_strikes.next'
+                                    )
+                                }}</v-btn
+                            >
+                        </v-row>
+                    </v-carousel-item>
+                </v-carousel>
+            </template>
+        </v-col>
+    </div>
+</template>
+
+<script>
+import _ from 'lodash'
+import draggable from 'vuedraggable'
+import keyboard from './keyboard.vue'
+import CrudTable from '../../CrudTable'
+import BaseContentBlock from '~/components/Content/Blocks/BaseContentBlock'
+
+export default {
+    name: 'SevenStrikesGame',
+    components: { CrudTable, draggable, keyboard },
+    extends: BaseContentBlock,
+    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.words)) {
+            this.block.metadata.config.words = []
+        }
+    },
+    data() {
+        return {
+            feedback: '',
+            feedbackStatus: '',
+            showFeedback: false,
+            input: '',
+            sevenStrikesCounter: [
+                { strike: false },
+                { strike: false },
+                { strike: false },
+                { strike: false },
+                { strike: false },
+                { strike: false },
+                { strike: false },
+            ],
+            keyBoardClass: 'simple-keyboard',
+            onSlide: 0,
+            onStrike: 0,
+            carouselIndex: 0,
+        }
+    },
+    mounted() {},
+    methods: {
+        onChangeSlide(newIndex) {
+            if (newIndex >= this.block.metadata.config.words.length) {
+                newIndex = 0
+            }
+            this.carouselIndex = newIndex
+            this.onSlideChanged(newIndex)
+        },
+        onChange(input) {
+            this.input = input
+        },
+        onKeyPress(letter) {
+            // can't play when editing
+            if (this.render) {
+                // to lowercase
+                letter = letter.toLowerCase()
+                // check if word value contains input letter
+                const doesContain =
+                    this.block.metadata.config.words[
+                        this.onSlide
+                    ].value.includes(letter)
+                if (doesContain) {
+                    // loop over to show letters in case there are multiple of the same
+                    this.block.metadata.config.words[
+                        this.onSlide
+                    ].splitWord.forEach((character) => {
+                        if (character.letter === letter) {
+                            character.show = true
+                        }
+                    })
+                } else {
+                    // checks if the user is already out of strikes
+                    if (this.onStrike <= 6) {
+                        this.sevenStrikesCounter[this.onStrike].strike = true
+                        this.onStrike = this.onStrike + 1
+                    }
+                }
+                const isComplete = this.checkIfComplete()
+                const checkStrikes = this.checkStrikes()
+                if (isComplete) {
+                    this.thatIsCorrect()
+                }
+                if (checkStrikes) {
+                    this.thatIsIncorrect()
+                }
+            }
+        },
+        checkIfComplete() {
+            // checks to see if the user guessed all the letters correctly
+            let finished = true
+            this.block.metadata.config.words[this.onSlide].splitWord.forEach(
+                (element) => {
+                    if (element.show === false) {
+                        finished = false
+                    }
+                }
+            )
+            return finished
+        },
+        checkStrikes() {
+            // checks to see if user has exhausted strikes
+            let outOfStrikes = true
+            this.sevenStrikesCounter.forEach((element) => {
+                if (element.strike === false) {
+                    outOfStrikes = false
+                }
+            })
+            return outOfStrikes
+        },
+        thatIsIncorrect() {
+            this.showFeedback = true
+            // 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'
+                )
+            }
+        },
+        thatIsCorrect() {
+            this.showFeedback = true
+            this.feedbackStatus = 'success'
+            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'
+                )
+            }
+        },
+        onHideFeedback() {
+            // fired from feedback x
+            this.showFeedback = false
+            this.onSlideChanged(this.onSlide)
+        },
+        onInputChange(input) {
+            // catches target input
+            this.input = input.target.value
+        },
+        onSlideChanged(event) {
+            // this function is called when the slide is changed
+            // manually resetting is necessary due to fact that components do not remount
+            // event hold slide index
+            this.onSlide = event
+            // hides feedback if showing
+            this.showFeedback = false
+            this.feedbackStatus = ''
+            this.onStrike = 0
+            this.feedback = this.$t(
+                'plugin.games.components.content.blocks.word_jumble.feedback'
+            )
+            // resets strikes
+            this.sevenStrikesCounter.forEach((element) => {
+                element.strike = false
+            })
+            if (
+                this.block.metadata.config.words[this.onSlide].splitWord &&
+                this.block.metadata.config.words[this.onSlide].splitWord
+                    .length > 0
+            ) {
+                // rehides the displayed correct letters
+                this.block.metadata.config.words[
+                    this.onSlide
+                ].splitWord.forEach((word) => {
+                    if (word.show) {
+                        word.show = false
+                    }
+                })
+            }
+        },
+        onRevealAnswer() {
+            this.block.metadata.config.words[this.onSlide].splitWord.forEach(
+                (word) => {
+                    word.show = true
+                }
+            )
+        },
+    },
+}
+</script>
+
+<style 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;
+}
+.textArea {
+    width: 20px;
+    height: 20px;
+    border-bottom: 2px solid black;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+.strikeArea {
+    width: 40px;
+    height: 40px;
+    border: 2px solid black;
+}
+.strike {
+    color: #dc3d1a;
+    font-size: 40px;
+    margin: 10px;
+}
+</style>

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

@@ -0,0 +1,71 @@
+<template>
+    <div :class="keyboardClass"></div>
+</template>
+
+<script>
+import Keyboard from 'simple-keyboard'
+import 'simple-keyboard/build/css/index.css'
+
+export default {
+    name: 'SimpleKeyboard',
+    props: {
+        keyboardClass: {
+            default: 'simple-keyboard',
+            type: String,
+        },
+        input: {
+            type: String,
+        },
+    },
+    data: () => ({
+        keyboard: null,
+    }),
+    mounted() {
+        this.keyboard = new Keyboard(this.keyboardClass, {
+            layout: {
+                default: [
+                    'q w e r t y u i o p',
+                    'a s d f g h j k l',
+                    'z x c v b n m',
+                ],
+            },
+            onChange: this.onChange,
+            onKeyPress: this.onKeyPress,
+        })
+    },
+    methods: {
+        onChange(input) {
+            this.$emit('onChange', input)
+        },
+        onKeyPress(button) {
+            this.$emit('onKeyPress', button)
+
+            /**
+             * If you want to handle the shift and caps lock buttons
+             */
+            if (button === '{shift}' || button === '{lock}') this.handleShift()
+        },
+        handleShift() {
+            let currentLayout = this.keyboard.options.layoutName
+            let shiftToggle = currentLayout === 'default' ? 'shift' : 'default'
+
+            this.keyboard.setOptions({
+                layoutName: shiftToggle,
+            })
+        },
+    },
+    watch: {
+        input(input) {
+            this.keyboard.setInput(input)
+        },
+    },
+}
+</script>
+
+<!-- Add "scoped" attribute to limit CSS to this component only -->
+<style scoped>
+.hg-theme-default {
+    padding: 55px;
+    margin-top: 25px;
+}
+</style>

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

@@ -9,7 +9,6 @@
                     class="textArea ml-1 mr-1"
                     maxlength="1"
                     @input="onInput($event, index)"
-                    v-on:keydown="onSpaceHandler($event)"
                 ></v-text-field>
             </div>
         </v-row>
@@ -43,8 +42,8 @@ export default {
             handler(newValue) {
                 // removes students answer from input if they got it correct
                 this.splitUpWord()
-            }
-        }
+            },
+        },
     },
     data() {
         return {
@@ -71,13 +70,6 @@ export default {
                 }
             }
         },
-        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)]) {

package/components/settings/CrosswordPuzzleSettingsManager.vue

@@ -1,6 +1,6 @@
 <template>
     <div>
-        <v-form ref="form" v-model="valid" v-if="!loading">
+        <v-form ref="form" v-model="valid">
             <v-text-field
                 v-model="block.metadata.config.title"
                 :counter="50"
@@ -82,6 +82,8 @@
                                 <v-textarea
                                     v-if="item.expand"
                                     outlined
+                                    :counter="20"
+                                    maxlength="20"
                                     :autofocus="true"
                                     :label="
                                         $t(
@@ -96,15 +98,16 @@
                                 <v-textarea
                                     v-if="item.expand"
                                     outlined
+                                    :counter="155"
+                                    maxlength="155"
                                     :label="
                                         $t(
-                                            'plugin.games.components.settings.crossword.description'
+                                            'plugin.games.components.settings.crossword.clue'
                                         )
                                     "
                                     class="pt-4"
                                     v-model="
-                                        block.metadata.config.words[index]
-                                            .description
+                                        block.metadata.config.words[index].clue
                                     "
                                 ></v-textarea>
                             </v-card>
@@ -131,14 +134,6 @@
                 </v-expansion-panel>
             </v-expansion-panels>
         </v-form>
-        <div v-if="loading" class="text-center">
-            <v-progress-circular
-                :size="70"
-                :width="7"
-                color="primary"
-                indeterminate
-            ></v-progress-circular>
-        </div>
     </div>
 </template>
 
@@ -168,11 +163,12 @@ export default {
         if (_.isEmpty(this.block.metadata.config.words)) {
             this.block.metadata.config.words = []
             let counter = 0
+            // ensures that there will always be at least two crossword elements to edit
             while (counter < 2) {
                 const default_object = {
                     id: counter,
                     word: '',
-                    description: '',
+                    clue: '',
                     expand: false,
                 }
                 counter = counter + 1
@@ -183,19 +179,20 @@ export default {
     data() {
         return {
             valid: true,
-            loading: false,
             cursor: null,
         }
     },
     methods: {
         onAddElement() {
+            // closes all elements that were expanded
             this.block.metadata.config.words.forEach((element) => {
                 element.expand = false
             })
+            // pushes in new crossword object and expands element
             const default_object = {
                 id: this.block.metadata.config.words.length,
                 word: '',
-                description: '',
+                clue: '',
                 expand: true,
             }
             this.block.metadata.config.words.push(default_object)

package/components/settings/MultipleChoiceSettingsManager.vue

@@ -28,13 +28,13 @@
                     <v-expansion-panels flat>
                         <v-expansion-panel>
                             <v-expansion-panel-header class="pa-0">
-                                <h3>
+                                <h5>
                                     {{
                                         $t(
                                             'plugin.games.components.settings.multiple_choice.questions'
                                         )
                                     }}
-                                </h3></v-expansion-panel-header
+                                </h5></v-expansion-panel-header
                             >
                             <v-expansion-panel-content class="ma-0">
                                 <v-container class="pa-0">
@@ -96,7 +96,7 @@
                                             @mouseover="onHover"
                                             @mouseleave="onHoverLeave"
                                             @click="onOpenModal"
-                                            v-on:keyup.enter="onOpenModal"
+                                            v-on:keydown.enter="onOpenModal"
                                             class="fullWidth"
                                             :class="cursor"
                                             tabindex="0"
@@ -149,6 +149,7 @@ import draggable from 'vuedraggable'
 import _ from 'lodash'
 import Dialog from '~/components/Dialog.vue'
 import QuestionDialog from '../content/blocks/multipleChoice/QuestionDialog.vue'
+import Crypto from '~/helpers/Crypto'
 
 export default {
     name: 'MultipleChoiceSettingsManager',
@@ -195,24 +196,32 @@ export default {
                 // when left the saveAndNew button it was causing errors
                 this.isNotEditing = false
             } else {
+                let firstAnswerId = Crypto.id()
                 this.block.metadata.config.questions.push({
+                    // crypto.id for all ids and then use filters
                     answer_options: [
                         {
-                            id: 1,
+                            id: firstAnswerId,
                             value: '',
                             correctAnswer: true,
                             disabled: false,
+                            chosen: false,
+                            focus: false,
                         },
                         {
-                            id: 2,
+                            id: Crypto.id(),
                             value: '',
                             correctAnswer: false,
                             disabled: false,
+                            chosen: false,
+                            focus: false,
                         },
                     ],
+                    correctAnswer: firstAnswerId,
                     body: '',
                     hint: '',
                     answer_description: '',
+                    id: Crypto.id(),
                 })
                 this.editingIndex =
                     this.block.metadata.config.questions.length - 1
@@ -222,21 +231,26 @@ export default {
             this.dialog = true
         },
         saveAndNewCalled() {
+            let firstAnswerId = Crypto.id()
             this.block.metadata.config.questions.push({
                 answer_options: [
                     {
-                        id: 1,
+                        id: firstAnswerId,
                         value: '',
                         correctAnswer: true,
                         disabled: false,
+                        chosen: false,
                     },
                     {
-                        id: 2,
+                        id: Crypto.id(),
                         value: '',
                         correctAnswer: false,
                         disabled: false,
+                        chosen: false,
                     },
                 ],
+                // needed to add this bc radio group needs the id of the answer in answerobjects array to set correct value
+                correctAnswer: firstAnswerId,
                 body: '',
                 hint: '',
                 answer_description: '',