@windward/games 0.6.0 → 0.8.0

package/CHANGELOG.md

@@ -1,4 +1,11 @@
 # Changelog
 
-### Release [0.6.0] created - 2024-07-30
+## Release [0.7.0] - 2024-08-29
+
+* Version bump to 0.7.0
+
 
+### Release [0.7.0] created - 2024-08-29
+
+
+### Release [0.6.0] created - 2024-07-30

package/components/content/blocks/crosswordPuzzle/CrosswordPuzzle.vue

@@ -1,8 +1,16 @@
 <template>
     <v-container class="pa-0">
         <div>
-            <h2>{{ block.metadata.config.title }}</h2>
-            <p>{{ block.metadata.config.instructions }}</p>
+            <h2 v-if="block.metadata.config.title" tabindex="0">
+                {{ block.metadata.config.title }}
+            </h2>
+            <p
+                v-if="block.metadata.config.instructions"
+                tabindex="0"
+                class="pt-3"
+            >
+                {{ block.metadata.config.instructions }}
+            </p>
         </div>
         <v-alert v-if="wordMap.length === 0" type="info" class="text-center">
             <p>

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

@@ -2,6 +2,7 @@
     <div>
         <div>
             <h2
+                v-if="block.metadata.config.title"
                 :aria-label="
                     $t(
                         'windward.games.components.content.blocks.bucket_game.aria_title'
@@ -12,7 +13,11 @@
                 {{ block.metadata.config.title }}
             </h2>
 
-            <p tabindex="0">
+            <p
+                v-if="block.metadata.config.instructions"
+                tabindex="0"
+                class="pt-3"
+            >
                 {{ block.metadata.config.instructions }}
             </p>
             <h4 v-if="!render" class="d-flex justify-center align-center">
@@ -253,6 +258,7 @@ import _ from 'lodash'
 import CrudTable from '../../CrudTable'
 import BaseContentBlock from '~/components/Content/Blocks/BaseContentBlock'
 import TextViewer from '~/components/Text/TextViewer.vue'
+import Uuid from '~/helpers/Uuid'
 
 export default {
     name: 'BucketGame',
@@ -268,7 +274,11 @@ export default {
         if (_.isEmpty(this.block.metadata.config)) {
             this.block.metadata.config = {}
         }
-        if (_.isEmpty(this.block.metadata.config.title)) {
+        if (
+            _.isEmpty(this.block.metadata.config.title) &&
+            this.block.id &&
+            !Uuid.test(this.block.id)
+        ) {
             this.block.metadata.config.title = this.$t(
                 'windward.games.components.content.blocks.bucket_game.game_title'
             )
@@ -277,14 +287,10 @@ export default {
             this.block.metadata.config.instructions = ''
         }
         if (_.isEmpty(this.block.metadata.config.feedback_correct)) {
-            this.block.metadata.config.feedback_correct = this.$t(
-                'windward.games.components.settings.bucket_game.form.feedback.correct_default'
-            )
+            this.block.metadata.config.feedback_correct = ''
         }
         if (_.isEmpty(this.block.metadata.config.feedback_incorrect)) {
-            this.block.metadata.config.feedback_incorrect = this.$t(
-                'windward.games.components.settings.bucket_game.form.feedback.incorrect_default'
-            )
+            this.block.metadata.config.feedback_incorrect = ''
         }
         if (_.isEmpty(this.block.metadata.config.bucket_titles)) {
             this.block.metadata.config.bucket_titles = []
@@ -429,7 +435,6 @@ export default {
                 if (
                     element.bucket_index === item.bucket_index &&
                     element.display === item.display &&
-                    element.display_value === item.display_value &&
                     element.feedback === item.feedback &&
                     element.id === item.id
                 ) {
@@ -467,6 +472,17 @@ export default {
                     )
                 } else {
                     this.status = 'successOutline'
+                    // set correct feedback
+                    if (evt.added.element.feedback) {
+                        this.feedback = evt.added.element.feedback
+                    } else {
+                        this.feedback = this.block.metadata.config
+                            .feedback_correct
+                            ? this.block.metadata.config.feedback_correct
+                            : this.$t(
+                                  'windward.games.components.settings.bucket_game.form.feedback.correct_default'
+                              )
+                    }
                 }
             } else {
                 let items = this.items[bucket_index]
@@ -474,7 +490,12 @@ export default {
                 this.items[bucket_index].splice(indexOfAddedElement, 1)
                 // puts item back into mutable array for draggable component
                 this.mainAnswer.push(evt.added.element)
+                // set incorrect feedback
                 this.feedback = this.block.metadata.config.feedback_incorrect
+                    ? this.block.metadata.config.feedback_incorrect
+                    : this.$t(
+                          'windward.games.components.settings.bucket_game.form.feedback.incorrect_default'
+                      )
                 this.status = 'errorOutline'
             }
         },

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

@@ -1,7 +1,9 @@
 <template>
     <div>
-        <h2>{{ block.metadata.config.title }}</h2>
-        <p>
+        <h2 v-if="block.metadata.config.title" tabindex="0">
+            {{ block.metadata.config.title }}
+        </h2>
+        <p v-if="block.metadata.config.instructions" tabindex="0" class="pt-3">
             {{ block.metadata.config.instructions }}
         </p>
         <v-container :key="'feedback'" :class="feedbackClass()">

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

@@ -2,7 +2,7 @@
     <v-container>
         <br />
         <div class="card-content">
-            <v-row align="center" justify="center">
+            <v-row>
                 <content-viewer :class="textClass" v-model="settings.text" />
             </v-row>
             <br />
@@ -51,7 +51,7 @@ export default {
                 this.settings.text.length < 100 &&
                 this.side === 'front'
             ) {
-                return 'text-justify centered card-content--bold'
+                return 'centered card-content--bold'
             }
 
             if (this.side === 'front') {
@@ -66,7 +66,7 @@ export default {
                 return 'text-justify centered'
             }
 
-            return 'px-6  text-justify'
+            return 'px-6  text-left'
         },
         imageAsset() {
             if (!this.settings.imageAsset) {

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

@@ -1,10 +1,10 @@
 <template>
     <div>
-        <h2 v-if="block.metadata.config.title">
+        <h2 v-if="block.metadata.config.title" tabindex="0">
             {{ block.metadata.config.title }}
         </h2>
 
-        <p v-if="block.metadata.config.instructions">
+        <p v-if="block.metadata.config.instructions" tabindex="0" class="pt-3">
             {{ block.metadata.config.instructions }}
         </p>
         <br />

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

@@ -2,6 +2,7 @@
     <div>
         <div>
             <h2
+                v-if="block.metadata.config.title"
                 :aria-label="
                     $t(
                         'windward.games.components.content.blocks.matching_game.match_game_title'
@@ -12,24 +13,21 @@
                 {{ block.metadata.config.title }}
             </h2>
 
-            <p>
+            <p
+                v-if="block.metadata.config.instructions"
+                tabindex="0"
+                class="pt-3"
+            >
                 {{ block.metadata.config.instructions }}
             </p>
-            <p>
-                {{
-                    $t(
-                        'windward.games.components.content.blocks.matching_game.description'
-                    )
-                }}
-            </p>
             <v-container :class="status">
-                <v-row class="d-flex justify-center pa-2">{{
+                <v-alert class="d-flex justify-center pa-2">{{
                     feedback
                         ? feedback
                         : $t(
                               'windward.games.components.content.blocks.bucket_game.form.feedback.feedback_here'
                           )
-                }}</v-row>
+                }}</v-alert>
                 <v-row class="d-flex justify-center pa-2">
                     <v-btn
                         v-if="status === 'successOutline'"
@@ -42,7 +40,9 @@
                         v-if="status === 'errorOutline'"
                         class="d-flex justify-center align-center"
                         @click="onExitFeedback"
-                        ><v-icon class="icon--error">mdi-close-circle</v-icon>
+                        ><v-btn class="error" elevation="0">{{
+                            $t('shared.forms.try_again')
+                        }}</v-btn>
                     </v-container>
                 </v-row>
             </v-container>
@@ -256,7 +256,10 @@
                             v-for="(answer, aindex) in block.metadata.config
                                 .answerObjects"
                             :key="aindex"
-                            class="pa-2 ma-2 answerCard container-outline"
+                            :class="
+                                'pa-2 ma-2 answerCard container-outline ' +
+                                answerColor(answer)
+                            "
                             outlined
                         >
                             <v-icon>mdi-drag-vertical</v-icon>
@@ -410,6 +413,7 @@ export default {
             },
             startingIndex: 0,
             flattenedPrompts: '',
+            droppedElement: null,
         }
     },
     watch: {
@@ -428,6 +432,15 @@ export default {
         this.setMainPrompt()
     },
     methods: {
+        answerColor(element) {
+            if (
+                !_.isEmpty(this.droppedElement) &&
+                element.display === this.droppedElement.display
+            ) {
+                return this.status
+            }
+            return ''
+        },
         shuffle(array) {
             let currentIndex = array.length,
                 randomIndex
@@ -498,10 +511,12 @@ export default {
             }
             //set feedback information here
             if (_.isUndefined(target) || _.isEmpty(target)) {
-                console.log('dragged to nowhere')
+                this.droppedElement = null
             } else if (draggedElement.id !== target.answer.id) {
                 this.feedback = this.block.metadata.config.feedback_incorrect
                 this.status = 'errorOutline'
+                this.allowDrag = false
+                this.droppedElement = draggedElement
             } else if (draggedElement.id === target.answer.id) {
                 this.feedback = !_.isEmpty(target.matchExplanation)
                     ? target.matchExplanation
@@ -509,6 +524,7 @@ export default {
                 this.solvedQuestions.push(target)
                 this.status = 'successOutline'
                 this.allowDrag = false
+                this.droppedElement = draggedElement
                 if (
                     this.solvedQuestions.length === this.flattenedPrompts.length
                 ) {
@@ -523,6 +539,7 @@ export default {
         onExitFeedback() {
             this.status = 'default'
             this.allowDrag = true
+            this.droppedElement = null
             this.feedback = this.$t(
                 'windward.games.components.content.blocks.matching_game.default_feedback'
             )
@@ -534,6 +551,7 @@ export default {
             this.status = 'default'
             this.mainPrompt = this.shufflePrompts.shift()
             this.allowDrag = true
+            this.droppedElement = null
             this.feedback = this.$t(
                 'windward.games.components.content.blocks.matching_game.default_feedback'
             )
@@ -583,18 +601,17 @@ export default {
     transition: 0.5s box-shadow;
 }
 .successOutline {
-    border: 4px solid var(--v-success-base);
-    color: var(--v-success-base);
+    border: 4px solid var(--v-success-base) !important;
 }
 .errorOutline {
-    border: 4px solid var(--v-error-base);
-    color: var(--v-error-base);
+    border: 4px solid var(--v-error-base) !important;
 }
 .card_text {
     font-size: large;
 }
 .answerCard {
     min-width: 23%;
+    cursor: grab;
 }
 .icon--error {
     color: var(--v-error-base);

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

@@ -2,8 +2,16 @@
     <v-container class="pa-0">
         <v-row>
             <v-col>
-                <h2>{{ block.metadata.config.title }}</h2>
-                <p class="mb-0">{{ block.metadata.config.instructions }}</p>
+                <h2 v-if="block.metadata.config.title" tabindex="0">
+                    {{ block.metadata.config.title }}
+                </h2>
+                <p
+                    v-if="block.metadata.config.instructions"
+                    tabindex="0"
+                    class="pt-3"
+                >
+                    {{ block.metadata.config.instructions }}
+                </p>
             </v-col>
         </v-row>
         <v-carousel height="auto" :hide-delimiters="hideDeliminators">

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

@@ -11,7 +11,7 @@
                     "
                     :autofocus="true"
                     rows="2"
-                    :rules="validation.textRules"
+                    :rules="$Validation.getRule('exists')"
                     prepend-inner-icon="mdi-help"
                     :disabled="disabled"
                 ></v-textarea>
@@ -23,7 +23,7 @@
                         )
                     "
                     rows="2"
-                    :rules="validation.textRules"
+                    :rules="$Validation.getRule('exists')"
                     prepend-inner-icon="mdi-lightbulb-on-10"
                     :disabled="disabled"
                 ></v-textarea>
@@ -35,7 +35,7 @@
                         )
                     "
                     rows="2"
-                    :rules="validation.textRules"
+                    :rules="$Validation.getRule('exists')"
                     prepend-inner-icon="mdi-comment"
                     :disabled="disabled"
                 ></v-textarea>
@@ -92,7 +92,7 @@
                                 )
                             "
                             rows="2"
-                            :rules="validation.textRules"
+                            :rules="$Validation.getRule('exists')"
                             :disabled="disabled"
                         ></v-textarea>
                     </v-col>
@@ -200,9 +200,6 @@ export default {
         return {
             question: {},
             validation: {
-                textRules: [
-                    (v) => !!v || this.$t('shared.forms.errors.required'),
-                ],
                 optionRules: [
                     (v) => {
                         return (

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

@@ -26,13 +26,6 @@
                 <p tabindex="0">
                     <TextViewer v-model="block.metadata.config.instructions" />
                 </p>
-                <p tabindex="0">
-                    {{
-                        $t(
-                            'windward.games.components.content.blocks.quizshow_game.basic_instructions'
-                        )
-                    }}
-                </p>
 
                 <v-container
                     class="d-flex flex-row flex-wrap flex-fill pa-0"

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

@@ -234,14 +234,10 @@ export default {
             )
         }
         if (_.isEmpty(this.block.metadata.config.feedback_correct)) {
-            this.block.metadata.config.feedback_correct = this.$t(
-                'windward.games.components.settings.bucket_game.form.feedback.correct_default'
-            )
+            this.block.metadata.config.feedback_correct = ''
         }
         if (_.isEmpty(this.block.metadata.config.feedback_correct)) {
-            this.block.metadata.config.feedback_incorrect = this.$t(
-                'windward.games.components.settings.bucket_game.form.feedback.incorrect_default'
-            )
+            this.block.metadata.config.feedback_incorrect = ''
         }
         if (_.isEmpty(this.block.metadata.config.words)) {
             this.block.metadata.config.words = []

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

@@ -2,6 +2,7 @@
     <div>
         <div class="header-description pa-0">
             <h2
+                v-if="block.metadata.config.title"
                 :aria-label="
                     $t(
                         'windward.games.components.content.blocks.slideshow.slideshow_title'
@@ -12,7 +13,11 @@
                 {{ block.metadata.config.title }}
             </h2>
 
-            <p tabindex="0" class="pt-3">
+            <p
+                v-if="block.metadata.config.instructions"
+                tabindex="0"
+                class="pt-3"
+            >
                 {{ block.metadata.config.instructions }}
             </p>
         </div>

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

@@ -164,6 +164,7 @@ import _ from 'lodash'
 import Jumble from './Jumble.vue'
 import BaseContentBlock from '~/components/Content/Blocks/BaseContentBlock'
 import Crypto from '~/helpers/Crypto'
+import Uuid from '~/helpers/Uuid'
 
 export default {
     name: 'WordJumble',
@@ -183,23 +184,23 @@ export default {
         }
         if (_.isEmpty(this.block.metadata.config.title)) {
             this.block.metadata.config.title = this.$t(
-                'windward.games.components.content.blocks.word_jumble.title'
+                'windward.games.components.settings.word_jumble.title'
             )
         }
-        if (_.isEmpty(this.block.metadata.config.instructions)) {
+        if (
+            _.isEmpty(this.block.metadata.config.instructions) &&
+            this.block.id &&
+            !Uuid.test(this.block.id)
+        ) {
             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(
-                'windward.games.components.settings.bucket_game.form.feedback.correct_default'
-            )
+            this.block.metadata.config.feedback_correct = ''
         }
         if (_.isEmpty(this.block.metadata.config.feedback_incorrect)) {
-            this.block.metadata.config.feedback_incorrect = this.$t(
-                'windward.games.components.settings.bucket_game.form.feedback.incorrect_default'
-            )
+            this.block.metadata.config.feedback_incorrect = ''
         }
         if (_.isEmpty(this.block.metadata.config.words)) {
             this.block.metadata.config.words = []

package/components/settings/BucketGameSettingsManager.vue

@@ -3,10 +3,11 @@
         <v-container class="pa-0">
             <v-text-field
                 ref="title"
+                id="block-settings-title"
                 v-model="block.metadata.config.title"
-                :rules="validation.titleRule"
+                :rules="$Validation.getRule('block.title')"
+                :counter="$Validation.getLimit('block.title')"
                 outlined
-                :counter="50"
                 :autofocus="true"
                 :label="
                     $t(
@@ -16,11 +17,12 @@
                 :disabled="render"
             ></v-text-field>
             <v-textarea
+                id="block-settings-instructions"
                 v-model="block.metadata.config.instructions"
                 outlined
                 auto-grow
-                :rules="validation.instructionsRule"
-                :counter="255"
+                :rules="$Validation.getRule('block.instructions')"
+                :counter="$Validation.getLimit('block.instructions')"
                 :label="
                     $t(
                         'windward.games.components.settings.bucket_game.form.instructions'
@@ -146,24 +148,7 @@
                                         <p class="p-label mb-0">
                                             {{
                                                 $t(
-                                                    'windward.games.components.content.blocks.bucket_game.form.value'
-                                                )
-                                            }}
-                                        </p>
-                                        <v-text-field
-                                            v-model="
-                                                block.metadata.config
-                                                    .bucket_answers[index][
-                                                    answerIndex
-                                                ].display_value
-                                            "
-                                            outlined
-                                            :disabled="render"
-                                        ></v-text-field>
-                                        <p class="p-label mb-0">
-                                            {{
-                                                $t(
-                                                    'windward.games.components.content.blocks.bucket_game.form.feedback.feedback'
+                                                    'windward.games.components.content.blocks.bucket_game.form.feedback.explanation'
                                                 )
                                             }}
                                         </p>
@@ -265,6 +250,7 @@ import TextEditor from '~/components/Text/TextEditor'
 import Crypto from '~/helpers/Crypto'
 import BaseContentSettings from '~/components/Content/Settings/BaseContentSettings.js'
 import SortableExpansionPanel from '~/components/Core/SortableExpansionPanel.vue'
+import Uuid from '~/helpers/Uuid'
 
 export default {
     name: 'BucketGameSettingsManager',
@@ -286,23 +272,29 @@ export default {
         if (_.isEmpty(this.block.metadata.config)) {
             this.block.metadata.config = {}
         }
-        if (_.isEmpty(this.block.metadata.config.title)) {
+        if (
+            _.isEmpty(this.block.metadata.config.title) &&
+            this.block.id &&
+            !Uuid.test(this.block.id)
+        ) {
             this.block.metadata.config.title = this.$t(
                 'windward.games.components.content.blocks.bucket_game.game_title'
             )
         }
-        if (_.isEmpty(this.block.metadata.config.instructions)) {
-            this.block.metadata.config.instructions = ''
+        if (
+            _.isEmpty(this.block.metadata.config.instructions) &&
+            this.block.id &&
+            !Uuid.test(this.block.id)
+        ) {
+            this.block.metadata.config.instructions = this.$t(
+                'windward.games.components.settings.bucket_game.form.default_instructions'
+            )
         }
         if (_.isEmpty(this.block.metadata.config.feedback_correct)) {
-            this.block.metadata.config.feedback_correct = this.$t(
-                'windward.games.components.settings.bucket_game.form.feedback.correct_default'
-            )
+            this.block.metadata.config.feedback_correct = ''
         }
         if (_.isEmpty(this.block.metadata.config.feedback_incorrect)) {
-            this.block.metadata.config.feedback_incorrect = this.$t(
-                'windward.games.components.settings.bucket_game.form.feedback.incorrect_default'
-            )
+            this.block.metadata.config.feedback_incorrect = ''
         }
         if (_.isEmpty(this.block.metadata.config.bucket_titles)) {
             this.block.metadata.config.bucket_titles = []
@@ -329,24 +321,6 @@ export default {
                 [colors.lightGreen.lighten4, colors.teal.lighten4],
                 [colors.lightBlue.lighten4, colors.deepPurple.lighten3],
             ],
-            validation: {
-                titleRule: [
-                    (v) =>
-                        v.length <= 50 ||
-                        this.$t(
-                            'windward.games.shared.settings.errors.input_limitations',
-                            [50]
-                        ),
-                ],
-                instructionsRule: [
-                    (v) =>
-                        v.length <= 255 ||
-                        this.$t(
-                            'windward.games.shared.settings.errors.input_limitations',
-                            [255]
-                        ),
-                ],
-            },
         }
     },
     methods: {
@@ -402,7 +376,6 @@ export default {
             const answerObject = {
                 bucket_index: mainBucketIndex,
                 display: '',
-                display_value: '',
                 feedback: '',
                 expand: true,
                 id: this.block.metadata.config.bucket_answers.length + 1,