@windward/games 0.0.9 → 0.1.0

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

@@ -1,85 +1,127 @@
 <template>
     <v-container>
         <v-col class="pa-0">
-            <h1>
+            <h3>
                 {{
                     block.metadata.config.title
                         ? block.metadata.config.title
                         : $t(
-                              'plugin.games.components.content.blocks.word_jumble.title'
+                              'windward.games.components.content.blocks.word_jumble.title'
                           )
                 }}
-            </h1>
+            </h3>
             <p>{{ block.metadata.config.instructions }}</p>
         </v-col>
         <v-col class="pa-0">
             <template>
-                <v-carousel @change="onSlideChanged()">
+                <v-carousel
+                    hide-delimiters
+                    v-model="selectedPage"
+                    @change="onSlideChanged()"
+                >
                     <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">
-                                <span class="spanBold"
+                            <p class="pa-3 mb-0 p-clue-jumble">
+                                <span class="span-bold"
                                     >{{
                                         $t(
-                                            'plugin.games.components.content.blocks.word_jumble.clue'
+                                            'windward.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) }}
+                        <v-row class="d-flex justify-center ma-2">
+                            <p v-if="render" class="pa-3 mb-0 p-clue-jumble">
+                                {{ word.shuffledWord }}
+                            </p>
+                            <p v-if="!render" class="pa-3 mb-0 p-clue-jumble">
+                                {{ word.value }}
                             </p>
                         </v-row>
                         <v-container
                             v-if="showFeedback"
+                            fluid
                             :key="'feedback'"
                             :class="feedbackStatus"
+                            class="pa-0"
                         >
-                            <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
-                                    >
+                            <br />
+                            <v-row>
+                                <v-col></v-col>
+                                <v-col class="d-flex justify-center">{{
+                                    feedback
+                                        ? feedback
+                                        : $t(
+                                              'windward.games.components.content.blocks.bucket_game.form.feedback.feedback_here'
+                                          )
+                                }}</v-col>
+                                <v-col class="d-flex justify-end pl-4">
+                                    <v-btn
+                                        v-if="
+                                            feedbackStatus ===
+                                            'container-feedback-success'
+                                        "
+                                        class="mr-5"
+                                        color="success"
+                                        @click="onSlideChanged(true)"
+                                        >{{ $t('shared.forms.continue') }}
+                                    </v-btn>
+                                    <v-container
+                                        v-if="
+                                            feedbackStatus ===
+                                            'container-feedback-error'
+                                        "
+                                        class="d-flex justify-end"
+                                        @click="onHideFeedback"
+                                        ><v-icon
+                                            class="icon--error"
+                                            color="error"
+                                            >mdi-close-circle</v-icon
+                                        >
+                                    </v-container>
                                 </v-col>
                             </v-row>
+                            <br />
                         </v-container>
                         <v-row class="justify-center mt-4">
                             <Jumble
+                                :key="updateJumble"
                                 :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 class="d-flex mt-8">
+                            <v-col class="d-flex justify-end">
+                                <v-btn
+                                    :disabled="disableButtons"
+                                    color="primary"
+                                    @click="onCheckAnswer(word)"
+                                    >{{
+                                        $t(
+                                            'windward.games.components.content.blocks.word_jumble.check'
+                                        )
+                                    }}
+                                </v-btn>
+                            </v-col>
+                            <v-col class="d-flex justify-start">
+                                <v-btn
+                                    :disabled="disableButtons"
+                                    color="primary"
+                                    @click="onRevealAnswer"
+                                    >{{
+                                        $t(
+                                            'windward.games.components.content.blocks.word_jumble.reveal'
+                                        )
+                                    }}
+                                </v-btn>
+                            </v-col>
                         </v-row>
                     </v-carousel-item>
                 </v-carousel>
@@ -91,6 +133,7 @@
 import _ from 'lodash'
 import Jumble from './Jumble.vue'
 import BaseContentBlock from '~/components/Content/Blocks/BaseContentBlock'
+import Crypto from '~/helpers/Crypto'
 
 export default {
     name: 'WordJumble',
@@ -110,20 +153,22 @@ export default {
         }
         if (_.isEmpty(this.block.metadata.config.title)) {
             this.block.metadata.config.title = this.$t(
-                'plugin.games.components.content.blocks.word_jumble.title'
+                'windward.games.components.content.blocks.word_jumble.title'
             )
         }
         if (_.isEmpty(this.block.metadata.config.instructions)) {
-            this.block.metadata.config.instructions = ''
+            this.block.metadata.config.instructions = this.$t(
+                'windward.games.components.content.blocks.word_jumble.instructions'
+            )
         }
         if (_.isEmpty(this.block.metadata.config.feedback_correct)) {
             this.block.metadata.config.feedback_correct = this.$t(
-                'plugin.games.components.settings.bucket_game.form.feedback.correct_default'
+                'windward.games.components.settings.bucket_game.form.feedback.correct_default'
             )
         }
         if (_.isEmpty(this.block.metadata.config.feedback_incorrect)) {
             this.block.metadata.config.feedback_incorrect = this.$t(
-                'plugin.games.components.settings.bucket_game.form.feedback.incorrect_default'
+                'windward.games.components.settings.bucket_game.form.feedback.incorrect_default'
             )
         }
         if (_.isEmpty(this.block.metadata.config.words)) {
@@ -134,15 +179,24 @@ export default {
         return {
             saveState: false,
             feedback: this.$t(
-                'plugin.games.components.content.blocks.word_jumble.feedback'
+                'windward.games.components.content.blocks.word_jumble.feedback'
             ),
             showAnswer: false,
             showFeedback: false,
             resetValue: false,
+            selectedPage: 0,
             studentResponse: '',
             feedbackStatus: '',
+            updateJumble: 0,
+            disableButtons: false,
+            shuffledWord: '',
         }
     },
+    watch: {
+        render(newValue) {
+            this.updateJumble = Crypto.id()
+        },
+    },
     mounted() {
         this.showAnswer = false
     },
@@ -179,17 +233,23 @@ export default {
         onRevealAnswer() {
             // reveal prop changed to true to show answer
             this.showAnswer = true
+            this.disableButtons = true
         },
         onHideFeedback() {
             this.showFeedback = false
+            this.disableButtons = false
         },
         onCheckAnswer(word) {
             this.studentResponse = this.studentResponse.toLowerCase()
             this.showFeedback = true
+            this.disableButtons = true
             const answer = word.value.toLowerCase()
-            if (this.studentResponse === answer) {
+            if (
+                !_.isEmpty(this.studentResponse) &&
+                this.studentResponse === answer
+            ) {
                 // updates class
-                this.feedbackStatus = 'success'
+                this.feedbackStatus = 'container-feedback-success'
                 // gets custom or standard feedback
                 if (
                     !_.isEmpty(this.block.metadata.config.feedback_correct) &&
@@ -198,12 +258,12 @@ export default {
                     this.feedback = this.block.metadata.config.feedback_correct
                 } else {
                     this.feedback = this.$t(
-                        'plugin.games.components.content.blocks.word_jumble.correct'
+                        'windward.games.components.content.blocks.word_jumble.correct'
                     )
                 }
             } else {
                 // updates class
-                this.feedbackStatus = 'error'
+                this.feedbackStatus = 'container-feedback-error'
                 // gets custom or standard feedback
                 if (
                     !_.isEmpty(this.block.metadata.config.feedback_incorrect) &&
@@ -213,20 +273,30 @@ export default {
                         this.block.metadata.config.feedback_incorrect
                 } else {
                     this.feedback = this.$t(
-                        'plugin.games.components.content.blocks.word_jumble.incorrect'
+                        'windward.games.components.content.blocks.word_jumble.incorrect'
                     )
                 }
             }
         },
-        onSlideChanged() {
+        onSlideChanged(changeSlide) {
             // 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
+            this.block.metadata.config.words[this.selectedPage].shuffledWord =
+                this.shuffle(
+                    this.block.metadata.config.words[this.selectedPage].value
+                )
+            if (changeSlide) {
+                this.selectedPage = this.selectedPage + 1
+            }
             // updates class
             this.feedbackStatus = ''
+            this.showFeedback = false
+            this.studentResponse = ''
             this.feedback = this.$t(
-                'plugin.games.components.content.blocks.word_jumble.feedback'
+                'windward.games.components.content.blocks.word_jumble.feedback'
             )
+            this.disableButtons = false
             // ensure answer no longder revealed
             this.showAnswer = false
             // if student has entered a response the input values are reset to empty on slide change
@@ -236,22 +306,18 @@ export default {
 }
 </script>
 <style lang="scss" scoped>
-.outline {
-    border: 2px solid black;
-    border-radius: 10px;
-}
-.clueAndJumble {
+.p-clue-jumble {
     font-size: 20px;
 }
-.spanBold {
+.span-bold {
     font-weight: 900;
 }
-.error {
-    border: dashed 2px #dc3d1a;
-    background-color: #fff1f1;
+.container-feedback-error {
+    border: solid 4px var(--v-error-base);
+    color: var(--v-error-base);
 }
-.success {
-    border: dashed 2px #76b778;
-    background-color: #f1fff3;
+.container-feedback-success {
+    border: solid 4px var(--v-success-base);
+    color: var(--v-success-base);
 }
 </style>