@windward/games 0.17.1 → 0.18.0

package/CHANGELOG.md

@@ -1,41 +1,31 @@
 # Changelog
 
-### Hotfix [0.17.1] created - 2025-05-21
+### Release [0.18.0] created - 2025-05-20
 
+### Hotfix [0.17.1] created - 2025-05-21
 
 ### Release [0.17.0] created - 2025-05-13
 
-
 ### Release [0.16.0] created - 2025-04-29
 
-
 ### Release [0.15.0] created - 2025-04-09
 
-
 ### Release [0.14.0] created - 2025-03-25
 
-
 ### Release [0.13.0] created - 2025-03-11
 
-
 ### Hotfix [0.12.1] created - 2025-02-20
 
-
 ### Release [0.12.0] created - 2025-02-18
 
-
 ### Release [0.11.0] created - 2025-02-05
 
-
 ### Release [0.10.0] created - 2025-01-03
 
-
 ## Release [0.7.0] - 2024-08-29
 
-* Version bump to 0.7.0
-
+-   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,7 +1,13 @@
 <template>
     <v-container class="pa-0">
         <div>
-            <h2 v-if="block.metadata.config.title" tabindex="0">
+            <h2
+                v-if="
+                    block.metadata.config.title &&
+                    block.metadata.config.display_title
+                "
+                tabindex="0"
+            >
                 {{ block.metadata.config.title }}
             </h2>
             <p
@@ -117,9 +123,9 @@
 </template>
 
 <script>
+import _ from 'lodash'
 import { Crossword } from './Crossword'
 import BaseContentBlock from '~/components/Content/Blocks/BaseContentBlock'
-import _ from 'lodash'
 import Crypto from '~/helpers/Crypto'
 import CrosswordClues from './CrosswordClues.vue'
 
@@ -144,6 +150,9 @@ export default {
                 'windward.games.components.content.blocks.crossword.crossword'
             )
         }
+        if (!_.isBoolean(this.block.metadata.config.display_title)) {
+            this.$set(this.block.metadata.config, 'display_title', true)
+        }
         if (_.isEmpty(this.block.metadata.config.instructions)) {
             this.block.metadata.config.instructions = ''
         }

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

@@ -2,7 +2,10 @@
     <div>
         <div>
             <h2
-                v-if="block.metadata.config.title"
+                v-if="
+                    block.metadata.config.title &&
+                    block.metadata.config.display_title
+                "
                 :aria-label="
                     $t(
                         'windward.games.components.content.blocks.bucket_game.aria_title'
@@ -339,6 +342,9 @@ export default {
                 'windward.games.components.content.blocks.bucket_game.game_title'
             )
         }
+        if (!_.isBoolean(this.block.metadata.config.display_title)) {
+            this.$set(this.block.metadata.config, 'display_title', true)
+        }
         if (_.isEmpty(this.block.metadata.config.instructions)) {
             this.block.metadata.config.instructions = ''
         }

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

@@ -1,6 +1,12 @@
 <template>
     <div>
-        <h2 v-if="block.metadata.config.title" tabindex="0">
+        <h2
+            v-if="
+                block.metadata.config.title &&
+                block.metadata.config.display_title
+            "
+            tabindex="0"
+        >
             {{ block.metadata.config.title }}
         </h2>
         <p v-if="block.metadata.config.instructions" tabindex="0" class="pt-3">
@@ -149,6 +155,9 @@ export default {
                 'windward.games.components.settings.sorting_game.sortable_game'
             )
         }
+        if (!_.isBoolean(this.block.metadata.config.display_title)) {
+            this.$set(this.block.metadata.config, 'display_title', true)
+        }
         if (_.isEmpty(this.block.metadata.config.feedback_correct)) {
             this.block.metadata.config.feedback_correct = this.$t(
                 'windward.games.components.settings.sorting_game.default_feedback_correct'

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

@@ -2,8 +2,10 @@
     <v-container
         class="fill-height d-flex flex-column align-center justify-center"
     >
-        <div class="card-content">
-            <v-row class="justify-center">
+        <div class="card-content d-flex align-center">
+            <v-row
+                class="d-flex align-center justify-center content-scroll-wrapper"
+            >
                 <content-viewer :class="textClass" v-model="settings.text" />
             </v-row>
             <v-row
@@ -22,7 +24,7 @@
                 </v-col>
             </v-row>
         </div>
-        <v-row class="card-footer pt-4" align="center" justify="center">
+        <v-row class="card-footer mt-2">
             {{ settings.footer }}&nbsp;
             <v-icon color="primary">mdi-orbit-variant</v-icon>
         </v-row>
@@ -95,6 +97,9 @@ export default {
     color: var(--v-primary-base);
     font-size: 1rem;
     max-height: 100%;
+    min-height: 300px;
+    min-width: 100%;
+    flex-direction: column;
 }
 .card-content--bold {
     font-weight: bold;
@@ -106,6 +111,8 @@ p.card-content {
 }
 .card-footer {
     font-weight: bold;
+    position: absolute;
+    top: 90%;
     color: var(--v-primary-base);
 }
 .centered {
@@ -115,15 +122,12 @@ p.card-content {
     left: 50%;
     transform: translate(-50%, -50%);
 }
-.card-footer {
-    margin: 0;
-    position: absolute;
-    top: 90%;
-    left: 50%;
-    transform: translate(-50%, -50%);
-    color: var(--v-primary-base);
-}
 .paragraph {
     margin: 5%;
 }
+.content-scroll-wrapper {
+    max-height: 100%;
+    overflow-y: auto;
+    width: 100%;
+}
 </style>

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

@@ -65,7 +65,6 @@ export default {
         slide: { type: Number, required: true, default: 0 },
         assets: { type: Array, required: true },
     },
-
     computed: {
         cardClass() {
             let result = 'animated flashcard'
@@ -117,7 +116,6 @@ export default {
         toggleCard() {
             //only flip card when user click
             this.flip = true
-            //this.cardClass = 'animated flipInY flashcard flashcard--size-md'
             this.$emit('input', !this.side)
             this.side = !this.side
             // update container with correct side
@@ -214,7 +212,6 @@ export default {
 
 .flashcard:hover {
     box-shadow: 0 0px 12px rgba(0, 0, 0, 0.8);
-    background-color: var(--v-background-darken1);
 }
 
 .animated {

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

@@ -1,6 +1,12 @@
 <template>
     <div>
-        <h2 v-if="block.metadata.config.title" tabindex="0">
+        <h2
+            v-if="
+                block.metadata.config.title &&
+                block.metadata.config.display_title
+            "
+            tabindex="0"
+        >
             {{ block.metadata.config.title }}
         </h2>
 
@@ -12,7 +18,7 @@
             <template #prev="{ on, attrs }">
                 <v-btn
                     variant="elevated"
-                    color="primary"
+                    :color="styleForText"
                     elevation="0"
                     outlined
                     fab
@@ -25,7 +31,7 @@
             <template #next="{ on, attrs }">
                 <v-btn
                     variant="elevated"
-                    color="primary"
+                    :color="styleForText"
                     elevation="0"
                     outlined
                     fab
@@ -39,7 +45,11 @@
                 v-for="(card, index) in block.metadata.config.cards"
                 :key="index"
             >
-                <v-sheet height="90%" tile>
+                <v-sheet
+                    height="90%"
+                    tile
+                    :style="setBackgroundInCaseHighlight()"
+                >
                     <Flashcard
                         :options="card"
                         :slide="currentSlide"
@@ -47,14 +57,17 @@
                         :assets="block.assets"
                     />
                 </v-sheet>
-                <div class="d-flex justify-end">
+                <v-container
+                    class="d-flex justify-end"
+                    :style="setTextColorInCaseHighlight()"
+                >
                     {{
                         $t('windward.games.shared.content_blocks.out_of', [
                             index + 1,
                             block.metadata.config.cards.length,
                         ])
                     }}
-                </div>
+                </v-container>
             </v-carousel-item>
         </v-carousel>
     </div>
@@ -94,6 +107,9 @@ export default {
             )
             this.block.metadata.config.instructions = ''
         }
+        if (!_.isBoolean(this.block.metadata.config.display_title)) {
+            this.$set(this.block.metadata.config, 'display_title', true)
+        }
         if (_.isEmpty(this.block.assets)) {
             this.block.assets = []
         }
@@ -109,11 +125,43 @@ export default {
             }
             return 0
         },
+        styleForText() {
+            // if highlight is set, use black instead of primary
+            if (
+                this.block.metadata.display.setHighlight &&
+                this.block.metadata.display.highlight
+            ) {
+                return 'black'
+            } else {
+                return 'primary'
+            }
+        },
     },
     methods: {
         onActionPanelEdit() {
             this.render = !this.render
         },
+        setBackgroundInCaseHighlight() {
+            let style = ''
+            if (
+                !_.isEmpty(this.block.metadata.display) &&
+                !_.isEmpty(this.block.metadata.display.highlight)
+            ) {
+                style =
+                    'background-color: ' + this.block.metadata.display.highlight
+            }
+            return style
+        },
+        setTextColorInCaseHighlight() {
+            let style = ''
+            if (
+                !_.isEmpty(this.block.metadata.display) &&
+                !_.isEmpty(this.block.metadata.display.highlight)
+            ) {
+                style = 'color:  black'
+            }
+            return style
+        },
     },
 }
 </script>

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

@@ -2,7 +2,10 @@
     <div>
         <div>
             <h2
-                v-if="block.metadata.config.title"
+                v-if="
+                    block.metadata.config.title &&
+                    block.metadata.config.display_title
+                "
                 :aria-label="
                     $t(
                         'windward.games.components.content.blocks.matching_game.match_game_title'
@@ -332,6 +335,9 @@ export default {
                 'windward.games.components.settings.matching_game.form.title'
             )
         }
+        if (!_.isBoolean(this.block.metadata.config.display_title)) {
+            this.$set(this.block.metadata.config, 'display_title', true)
+        }
         if (_.isEmpty(this.block.metadata.config.instructions)) {
             this.block.metadata.config.instructions = ''
         }

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

@@ -2,7 +2,13 @@
     <v-container class="pa-0">
         <v-row>
             <v-col>
-                <h2 v-if="block.metadata.config.title" tabindex="0">
+                <h2
+                    v-if="
+                        block.metadata.config.title &&
+                        block.metadata.config.display_title
+                    "
+                    tabindex="0"
+                >
                     {{ block.metadata.config.title }}
                 </h2>
                 <p
@@ -255,6 +261,9 @@ export default {
                 'windward.games.components.content.blocks.multiple_choice.game_title'
             )
         }
+        if (!_.isBoolean(this.block.metadata.config.display_title)) {
+            this.$set(this.block.metadata.config, 'display_title', true)
+        }
         if (_.isEmpty(this.block.metadata.config.instructions)) {
             this.block.metadata.config.instructions = ''
         }

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

@@ -13,6 +13,10 @@
         <div v-if="!tableMode">
             <div>
                 <h2
+                    v-if="
+                        block.metadata.config.title &&
+                        block.metadata.config.display_title
+                    "
                     :aria-label="
                         $t(
                             'windward.games.components.content.blocks.quizshow_game.title'
@@ -231,6 +235,9 @@ export default {
         if (this.answerStates.length === 0) {
             this.initAnswersStates()
         }
+        if (!_.isBoolean(this.block.metadata.config.display_title)) {
+            this.$set(this.block.metadata.config, 'display_title', true)
+        }
     },
     mounted() {},
     updated() {},

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

@@ -1,7 +1,12 @@
 <template>
     <div>
         <v-col class="pa-0">
-            <h2>
+            <h2
+                v-if="
+                    block.metadata.config.title &&
+                    block.metadata.config.display_title
+                "
+            >
                 {{
                     block.metadata.config.title
                         ? block.metadata.config.title
@@ -253,6 +258,9 @@ export default {
                 'windward.games.components.settings.seven_strikes.title'
             )
         }
+        if (!_.isBoolean(this.block.metadata.config.display_title)) {
+            this.$set(this.block.metadata.config, 'display_title', true)
+        }
         if (_.isEmpty(this.block.metadata.config.instructions)) {
             this.block.metadata.config.instructions = this.$t(
                 'windward.games.components.settings.seven_strikes.instructions'

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

@@ -2,7 +2,10 @@
     <div>
         <div>
             <h2
-                v-if="block.metadata.config.title"
+                v-if="
+                    block.metadata.config.title &&
+                    block.metadata.config.display_title
+                "
                 :aria-label="
                     $t(
                         'windward.games.components.content.blocks.slideshow.slideshow_title'
@@ -128,7 +131,9 @@ export default {
                 'windward.games.components.settings.slideshow.form.slideshow_title'
             )
         }
-
+        if (!_.isBoolean(this.block.metadata.config.display_title)) {
+            this.$set(this.block.metadata.config, 'display_title', true)
+        }
         if (_.isEmpty(this.block.metadata.config.instructions)) {
             this.block.metadata.config.instructions = ''
         }

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

@@ -1,7 +1,12 @@
 <template>
     <v-container class="pa-0">
         <v-col class="pa-0">
-            <h2>
+            <h2
+                v-if="
+                    block.metadata.config.title &&
+                    block.metadata.config.display_title
+                "
+            >
                 {{
                     block.metadata.config.title
                         ? block.metadata.config.title
@@ -211,6 +216,9 @@ export default {
                 'windward.games.components.settings.word_jumble.title'
             )
         }
+        if (!_.isBoolean(this.block.metadata.config.display_title)) {
+            this.$set(this.block.metadata.config, 'display_title', true)
+        }
         if (
             _.isEmpty(this.block.metadata.config.instructions) &&
             this.block.id &&

package/components/settings/BucketGameSettingsManager.vue

@@ -1,35 +1,10 @@
 <template>
     <div>
         <v-container class="pa-0">
-            <v-text-field
-                ref="title"
-                id="block-settings-title"
-                v-model="block.metadata.config.title"
-                :rules="$Validation.getRule('block.title')"
-                :counter="$Validation.getLimit('block.title')"
-                outlined
-                :autofocus="true"
-                :label="
-                    $t(
-                        'windward.games.components.settings.bucket_game.form.title'
-                    )
-                "
-                :disabled="render"
-            ></v-text-field>
-            <v-textarea
-                id="block-settings-instructions"
-                v-model="block.metadata.config.instructions"
-                outlined
-                auto-grow
-                :rules="$Validation.getRule('block.instructions')"
-                :counter="$Validation.getLimit('block.instructions')"
-                :label="
-                    $t(
-                        'windward.games.components.settings.bucket_game.form.instructions'
-                    )
-                "
+            <BaseContentBlockSettings
+                v-model="block.metadata.config"
                 :disabled="render"
-            ></v-textarea>
+            ></BaseContentBlockSettings>
         </v-container>
         <v-divider class="my-4 primary"></v-divider>
         <v-container class="pa-0">
@@ -230,6 +205,7 @@ import {
 } from '@windward/core/utils'
 import colors from 'vuetify/lib/util/colors'
 import TextEditor from '~/components/Text/TextEditor'
+import BaseContentBlockSettings from '~/components/Content/Settings/BaseContentBlockSettings.vue'
 import Crypto from '~/helpers/Crypto'
 import BaseContentSettings from '~/components/Content/Settings/BaseContentSettings.js'
 import SortableExpansionPanel from '~/components/Core/SortableExpansionPanel.vue'
@@ -243,6 +219,7 @@ export default {
         MathLiveWrapper,
         ContentViewer,
         SortableExpansionPanel,
+        BaseContentBlockSettings,
         TextEditor,
     },
     beforeMount() {
@@ -264,6 +241,9 @@ export default {
                 'windward.games.components.content.blocks.bucket_game.game_title'
             )
         }
+        if (!_.isBoolean(this.block.metadata.config.display_title)) {
+            this.$set(this.block.metadata.config, 'display_title', true)
+        }
         if (
             _.isEmpty(this.block.metadata.config.instructions) &&
             this.block.id &&

package/components/settings/CrosswordPuzzleSettingsManager.vue

@@ -1,35 +1,10 @@
 <template>
     <div>
         <v-container class="pa-0">
-            <v-text-field
-                ref="title"
-                id="block-settings-title"
-                v-model="block.metadata.config.title"
-                :rules="$Validation.getRule('block.title')"
-                :counter="$Validation.getLimit('block.title')"
-                outlined
-                :autofocus="true"
-                :label="
-                    $t(
-                        'windward.games.components.settings.bucket_game.form.title'
-                    )
-                "
-                :disabled="render"
-            ></v-text-field>
-            <v-textarea
-                id="block-settings-instructions"
-                outlined
-                auto-grow
-                v-model="block.metadata.config.instructions"
-                :rules="$Validation.getRule('block.instructions')"
-                :counter="$Validation.getLimit('block.instructions')"
-                :label="
-                    $t(
-                        'windward.games.components.settings.bucket_game.form.instructions'
-                    )
-                "
+            <BaseContentBlockSettings
+                v-model="block.metadata.config"
                 :disabled="render"
-            ></v-textarea>
+            ></BaseContentBlockSettings>
         </v-container>
         <v-divider class="my-4 primary"></v-divider>
         <v-container class="pa-0">
@@ -128,6 +103,7 @@
 
 <script>
 import _ from 'lodash'
+import BaseContentBlockSettings from '~/components/Content/Settings/BaseContentBlockSettings.vue'
 import BaseContentSettings from '~/components/Content/Settings/BaseContentSettings.js'
 import SortableExpansionPanel from '~/components/Core/SortableExpansionPanel.vue'
 import Uuid from '~/helpers/Uuid'
@@ -135,7 +111,7 @@ import Uuid from '~/helpers/Uuid'
 export default {
     name: 'CrosswordPuzzleSettingsManager',
     extends: BaseContentSettings,
-    components: { SortableExpansionPanel },
+    components: { SortableExpansionPanel, BaseContentBlockSettings },
     beforeMount() {
         if (_.isEmpty(this.block)) {
             this.block = {}
@@ -151,6 +127,9 @@ export default {
                 'windward.games.components.content.blocks.crossword.crossword'
             )
         }
+        if (!_.isBoolean(this.block.metadata.config.display_title)) {
+            this.$set(this.block.metadata.config, 'display_title', true)
+        }
         if (
             _.isEmpty(this.block.metadata.config.instructions) &&
             this.block.id &&

package/components/settings/FlashCardSlidesManager.vue

@@ -1,34 +1,10 @@
 <template>
     <div>
         <v-container class="pa-0">
-            <v-text-field
-                ref="title"
-                id="block-settings-title"
-                v-model="block.metadata.config.title"
-                :rules="$Validation.getRule('block.title')"
-                :counter="$Validation.getLimit('block.title')"
-                outlined
-                :label="
-                    $t(
-                        'windward.games.components.settings.bucket_game.form.title'
-                    )
-                "
-                :disabled="render"
-            ></v-text-field>
-            <v-textarea
-                id="block-settings-instructions"
-                v-model="block.metadata.config.instructions"
-                :rules="$Validation.getRule('block.instructions')"
-                :counter="$Validation.getLimit('block.instructions')"
-                outlined
-                auto-grow
-                :label="
-                    $t(
-                        'windward.games.components.settings.bucket_game.form.instructions'
-                    )
-                "
+            <BaseContentBlockSettings
+                v-model="block.metadata.config"
                 :disabled="render"
-            ></v-textarea>
+            ></BaseContentBlockSettings>
         </v-container>
         <v-divider class="my-4 primary"></v-divider>
         <v-container class="pa-0">
@@ -308,6 +284,7 @@ import ContentBlockAsset from '~/components/Content/ContentBlockAsset.vue'
 import TextEditor from '~/components/Text/TextEditor.vue'
 import SortableExpansionPanel from '~/components/Core/SortableExpansionPanel.vue'
 import Uuid from '~/helpers/Uuid'
+import BaseContentBlockSettings from '~/components/Content/Settings/BaseContentBlockSettings.vue'
 import ImageAssetSettings from '~/components/Content/Settings/ImageAssetSettings.vue'
 
 export default {
@@ -320,6 +297,7 @@ export default {
         ContentBlockAsset,
         TextEditor,
         SortableExpansionPanel,
+        BaseContentBlockSettings,
         ImageAssetSettings,
         GenerateAIQuestionButton,
     },
@@ -345,6 +323,9 @@ export default {
                 'windward.games.components.content.blocks.flashcard.title'
             )
         }
+        if (!_.isBoolean(this.block.metadata.config.display_title)) {
+            this.$set(this.block.metadata.config, 'display_title', true)
+        }
         if (
             _.isEmpty(this.block.metadata.config.instructions) &&
             this.block.id &&

package/components/settings/MatchingGameManager.vue

@@ -1,35 +1,10 @@
 <template>
     <div>
         <v-container class="pa-0">
-            <v-text-field
-                ref="title"
-                id="block-settings-title"
-                v-model="block.metadata.config.title"
-                :rules="$Validation.getRule('block.title')"
-                :counter="$Validation.getLimit('block.title')"
-                :autofocus="true"
-                outlined
-                :label="
-                    $t(
-                        'windward.games.components.settings.matching_game.form.title'
-                    )
-                "
+            <BaseContentBlockSettings
+                v-model="block.metadata.config"
                 :disabled="render"
-            ></v-text-field>
-            <v-textarea
-                id="block-settings-instructions"
-                v-model="block.metadata.config.instructions"
-                :rules="$Validation.getRule('block.instructions')"
-                :counter="$Validation.getLimit('block.instructions')"
-                outlined
-                auto-grow
-                :label="
-                    $t(
-                        'windward.games.components.settings.matching_game.form.instructions'
-                    )
-                "
-                :disabled="render"
-            ></v-textarea>
+            ></BaseContentBlockSettings>
         </v-container>
         <v-divider class="my-4 primary"></v-divider>
         <v-container class="pa-0">
@@ -279,6 +254,7 @@
 <script>
 import BaseContentSettings from '~/components/Content/Settings/BaseContentSettings.js'
 import _ from 'lodash'
+import BaseContentBlockSettings from '~/components/Content/Settings/BaseContentBlockSettings.vue'
 import SortableExpansionPanel from '~/components/Core/SortableExpansionPanel.vue'
 import Uuid from '~/helpers/Uuid'
 import ImageAssetSettings from '~/components/Content/Settings/ImageAssetSettings.vue'
@@ -286,7 +262,11 @@ import ImageAssetSettings from '~/components/Content/Settings/ImageAssetSettings
 export default {
     name: 'MatchingGameManager',
     extends: BaseContentSettings,
-    components: { SortableExpansionPanel, ImageAssetSettings },
+    components: {
+        SortableExpansionPanel,
+        ImageAssetSettings,
+        BaseContentBlockSettings,
+    },
     beforeMount() {
         if (_.isEmpty(this.block)) {
             this.block = {}
@@ -307,6 +287,9 @@ export default {
                 'windward.games.components.settings.matching_game.form.title'
             )
         }
+        if (!_.isBoolean(this.block.metadata.config.display_title)) {
+            this.$set(this.block.metadata.config, 'display_title', true)
+        }
         if (
             _.isEmpty(this.block.metadata.config.instructions) &&
             this.block.id &&

package/components/settings/MultipleChoiceSettingsManager.vue

@@ -1,34 +1,10 @@
 <template>
     <div>
         <v-container class="pa-0">
-            <v-text-field
-                id="block-settings-title"
-                v-model="block.metadata.config.title"
-                outlined
-                :autofocus="true"
-                :rules="$Validation.getRule('block.title')"
-                :counter="$Validation.getLimit('block.title')"
-                :label="
-                    $t(
-                        'windward.games.components.settings.multiple_choice.title_placeholder'
-                    )
-                "
+            <BaseContentBlockSettings
+                v-model="block.metadata.config"
                 :disabled="render"
-            ></v-text-field>
-            <v-textarea
-                id="block-settings-instructions"
-                v-model="block.metadata.config.instructions"
-                outlined
-                :rules="$Validation.getRule('block.instructions')"
-                :counter="$Validation.getLimit('block.instructions')"
-                auto-grow
-                :label="
-                    $t(
-                        'windward.games.components.settings.multiple_choice.instructions'
-                    )
-                "
-                :disabled="render"
-            ></v-textarea>
+            ></BaseContentBlockSettings>
         </v-container>
         <v-divider class="my-4 primary"></v-divider>
         <v-container class="pa-0">
@@ -116,12 +92,18 @@ import SortableExpansionPanel from '~/components/Core/SortableExpansionPanel.vue
 import DialogBox from '~/components/Core/DialogBox.vue'
 import QuestionDialog from '../content/blocks/multipleChoice/QuestionDialog.vue'
 import Crypto from '~/helpers/Crypto'
+import BaseContentBlockSettings from '~/components/Content/Settings/BaseContentBlockSettings.vue'
 import Uuid from '~/helpers/Uuid'
 
 export default {
     name: 'MultipleChoiceSettingsManager',
     extends: BaseContentSettings,
-    components: { SortableExpansionPanel, QuestionDialog, DialogBox },
+    components: {
+        SortableExpansionPanel,
+        QuestionDialog,
+        DialogBox,
+        BaseContentBlockSettings,
+    },
     beforeMount() {
         if (_.isEmpty(this.block)) {
             this.block = {}
@@ -137,6 +119,9 @@ export default {
                 'windward.games.components.content.blocks.multiple_choice.game_title'
             )
         }
+        if (!_.isBoolean(this.block.metadata.config.display_title)) {
+            this.$set(this.block.metadata.config, 'display_title', true)
+        }
         if (
             _.isEmpty(this.block.metadata.config.instructions) &&
             this.block.id &&

package/components/settings/QuizShowSettingsManager.vue

@@ -1,18 +1,11 @@
 <template>
     <div>
-        <v-text-field
-            id="block-settings-title"
-            v-model="block.metadata.config.title"
-            :rules="$Validation.getRule('block.title')"
-            :counter="$Validation.getLimit('block.title')"
-            outlined
-            :label="
-                $t(
-                    'windward.games.components.settings.quizshow_game.form.title'
-                )
-            "
-            :disabled="render"
-        ></v-text-field>
+        <v-container class="pa-0">
+            <BaseContentBlockSettings
+                v-model="block.metadata.config"
+                :disabled="render"
+            ></BaseContentBlockSettings>
+        </v-container>
         <br />
         <v-checkbox
             v-model="block.metadata.config.responsive"
@@ -24,21 +17,6 @@
             :disabled="render"
         ></v-checkbox>
         <br />
-        <v-textarea
-            id="block-settings-instructions"
-            outlined
-            auto-grow
-            v-model="block.metadata.config.instructions"
-            :rules="$Validation.getRule('block.instructions')"
-            :counter="$Validation.getLimit('block.instructions')"
-            :label="
-                $t(
-                    'windward.games.components.settings.multiple_choice.instructions'
-                )
-            "
-            :disabled="render"
-        ></v-textarea>
-        <br />
         <v-expansion-panels outlined tile flat>
             <v-divider class="cardOutline primary"></v-divider>
             <v-expansion-panel>
@@ -221,6 +199,7 @@
 </template>
 
 <script>
+import BaseContentBlockSettings from '~/components/Content/Settings/BaseContentBlockSettings.vue'
 import TextEditor from '~/components/Text/TextEditor.vue'
 import BaseContentSettings from '~/components/Content/Settings/BaseContentSettings.js'
 export default {
@@ -228,6 +207,7 @@ export default {
     extends: BaseContentSettings,
     components: {
         TextEditor,
+        BaseContentBlockSettings,
     },
     watch: {
         'block.metadata.config.maxCategories'(newValue, oldValue) {
@@ -290,6 +270,9 @@ export default {
         if (_.isEmpty(this.block.metadata.config)) {
             this.block.metadata.config = _.cloneDeep(this.quizShowSettings)
         }
+        if (!_.isBoolean(this.block.metadata.config.display_title)) {
+            this.$set(this.block.metadata.config, 'display_title', true)
+        }
     },
     methods: {
         changeMaxCategories() {

package/components/settings/SevenStrikesSettingsManager.vue

@@ -1,35 +1,10 @@
 <template>
     <div>
         <v-container class="pa-0">
-            <v-text-field
-                ref="title"
-                id="block-settings-title"
-                v-model="block.metadata.config.title"
-                :rules="$Validation.getRule('block.title')"
-                :counter="$Validation.getLimit('block.title')"
-                outlined
-                :autofocus="true"
-                :label="
-                    $t(
-                        'windward.games.components.settings.bucket_game.form.title'
-                    )
-                "
+            <BaseContentBlockSettings
+                v-model="block.metadata.config"
                 :disabled="render"
-            ></v-text-field>
-            <v-textarea
-                id="block-settings-instructions"
-                v-model="block.metadata.config.instructions"
-                :rules="$Validation.getRule('block.instructions')"
-                :counter="$Validation.getLimit('block.instructions')"
-                outlined
-                auto-grow
-                :label="
-                    $t(
-                        'windward.games.components.settings.bucket_game.form.instructions'
-                    )
-                "
-                :disabled="render"
-            ></v-textarea>
+            ></BaseContentBlockSettings>
         </v-container>
         <v-divider class="my-4 primary"></v-divider>
         <v-container class="pa-0">
@@ -146,12 +121,18 @@ import draggable from 'vuedraggable'
 import BaseContentSettings from '~/components/Content/Settings/BaseContentSettings.js'
 import CrudTable from '../content/CrudTable.vue'
 import SortableExpansionPanel from '~/components/Core/SortableExpansionPanel.vue'
+import BaseContentBlockSettings from '~/components/Content/Settings/BaseContentBlockSettings.vue'
 import Uuid from '~/helpers/Uuid'
 
 export default {
     name: 'SevenStrikesSettingsManager',
     extends: BaseContentSettings,
-    components: { CrudTable, draggable, SortableExpansionPanel },
+    components: {
+        CrudTable,
+        draggable,
+        SortableExpansionPanel,
+        BaseContentBlockSettings,
+    },
     beforeMount() {
         if (_.isEmpty(this.block)) {
             this.block = {}
@@ -170,6 +151,9 @@ export default {
                 'windward.games.components.settings.seven_strikes.title'
             )
         }
+        if (!_.isBoolean(this.block.metadata.config.display_title)) {
+            this.$set(this.block.metadata.config, 'display_title', true)
+        }
         if (
             _.isEmpty(this.block.metadata.config.instructions) &&
             this.block.id &&

package/components/settings/SlideShowManager.vue

@@ -1,33 +1,10 @@
 <template>
     <div>
         <v-container class="pa-0">
-            <v-text-field
-                id="block-settings-title"
-                v-model="block.metadata.config.title"
-                outlined
-                :rules="$Validation.getRule('block.title')"
-                :counter="$Validation.getLimit('block.title')"
-                :label="
-                    $t(
-                        'windward.games.components.settings.slideshow.form.title'
-                    )
-                "
-                :disabled="render"
-            ></v-text-field>
-            <v-textarea
-                id="block-settings-instructions"
-                v-model="block.metadata.config.instructions"
-                outlined
-                auto-grow
-                :rules="$Validation.getRule('block.instructions')"
-                :counter="$Validation.getLimit('block.instructions')"
-                :label="
-                    $t(
-                        'windward.games.components.settings.slideshow.form.instructions'
-                    )
-                "
+            <BaseContentBlockSettings
+                v-model="block.metadata.config"
                 :disabled="render"
-            ></v-textarea>
+            ></BaseContentBlockSettings>
         </v-container>
         <v-divider class="my-4 primary"></v-divider>
         <v-container class="pa-0">
@@ -128,6 +105,7 @@
 <script>
 import BaseContentSettings from '~/components/Content/Settings/BaseContentSettings.js'
 import _ from 'lodash'
+import BaseContentBlockSettings from '~/components/Content/Settings/BaseContentBlockSettings.vue'
 import ImageAssetSettings from '~/components/Content/Settings/ImageAssetSettings.vue'
 import SortableExpansionPanel from '~/components/Core/SortableExpansionPanel.vue'
 import Uuid from '~/helpers/Uuid'
@@ -138,6 +116,7 @@ export default {
     components: {
         ImageAssetSettings,
         SortableExpansionPanel,
+        BaseContentBlockSettings,
     },
     beforeMount() {
         if (_.isEmpty(this.block)) {
@@ -152,6 +131,9 @@ export default {
         if (_.isEmpty(this.block.metadata.config)) {
             this.block.metadata.config = {}
         }
+        if (!_.isBoolean(this.block.metadata.config.display_title)) {
+            this.$set(this.block.metadata.config, 'display_title', true)
+        }
         if (_.isEmpty(this.block.metadata.config.currentSlide)) {
             this.block.metadata.config.currentSlide = 0
         }

package/components/settings/SortingGameSettingsManager.vue

@@ -1,35 +1,10 @@
 <template>
     <div>
         <v-container class="pa-0">
-            <v-text-field
-                ref="title"
-                id="block-settings-title"
-                v-model="block.metadata.config.title"
-                outlined
-                :autofocus="true"
-                :rules="$Validation.getRule('block.title')"
-                :counter="$Validation.getLimit('block.title')"
-                :label="
-                    $t(
-                        'windward.games.components.settings.bucket_game.form.title'
-                    )
-                "
+            <BaseContentBlockSettings
+                v-model="block.metadata.config"
                 :disabled="render"
-            ></v-text-field>
-            <v-textarea
-                id="block-settings-instructions"
-                v-model="block.metadata.config.instructions"
-                outlined
-                auto-grow
-                :rules="$Validation.getRule('block.instructions')"
-                :counter="$Validation.getLimit('block.instructions')"
-                :label="
-                    $t(
-                        'windward.games.components.settings.bucket_game.form.instructions'
-                    )
-                "
-                :disabled="render"
-            ></v-textarea>
+            ></BaseContentBlockSettings>
         </v-container>
         <v-divider class="my-4 primary"></v-divider>
         <v-container class="pa-0">
@@ -118,13 +93,14 @@
 <script>
 import _ from 'lodash'
 import BaseContentSettings from '~/components/Content/Settings/BaseContentSettings.js'
+import BaseContentBlockSettings from '~/components/Content/Settings/BaseContentBlockSettings.vue'
 import SortableExpansionPanel from '~/components/Core/SortableExpansionPanel.vue'
 import Uuid from '~/helpers/Uuid'
 
 export default {
     name: 'SortingGameSettingsManager',
     extends: BaseContentSettings,
-    components: { SortableExpansionPanel },
+    components: { SortableExpansionPanel, BaseContentBlockSettings },
     beforeMount() {
         if (_.isEmpty(this.block)) {
             this.block = {}
@@ -140,6 +116,9 @@ export default {
                 'windward.games.components.settings.sorting_game.sortable_game'
             )
         }
+        if (!_.isBoolean(this.block.metadata.config.display_title)) {
+            this.$set(this.block.metadata.config, 'display_title', true)
+        }
         if (
             _.isEmpty(this.block.metadata.config.instructions) &&
             this.block.id &&

package/components/settings/WordJumbleSettingsManager.vue

@@ -1,35 +1,10 @@
 <template>
     <div>
         <v-container class="pa-0">
-            <v-text-field
-                ref="title"
-                id="block-settings-title"
-                v-model="block.metadata.config.title"
-                :rules="$Validation.getRule('block.title')"
-                :counter="$Validation.getLimit('block.title')"
-                outlined
-                :autofocus="true"
-                :label="
-                    $t(
-                        'windward.games.components.settings.word_jumble.title_input'
-                    )
-                "
-                :disabled="render"
-            ></v-text-field>
-            <v-textarea
-                id="block-settings-instructions"
-                v-model="block.metadata.config.instructions"
-                :rules="$Validation.getRule('block.instructions')"
-                :counter="$Validation.getLimit('block.instructions')"
-                outlined
-                auto-grow
-                :label="
-                    $t(
-                        'windward.games.components.settings.word_jumble.instructions'
-                    )
-                "
+            <BaseContentBlockSettings
+                v-model="block.metadata.config"
                 :disabled="render"
-            ></v-textarea>
+            ></BaseContentBlockSettings>
         </v-container>
         <v-divider class="my-4 primary"></v-divider>
         <v-container class="pa-0">
@@ -150,12 +125,14 @@
 import _ from 'lodash'
 import BaseContentSettings from '~/components/Content/Settings/BaseContentSettings.js'
 import SortableExpansionPanel from '~/components/Core/SortableExpansionPanel.vue'
+import BaseContentBlockSettings from '~/components/Content/Settings/BaseContentBlockSettings.vue'
 
 export default {
     name: 'WordJumbleSettings',
     extends: BaseContentSettings,
     components: {
         SortableExpansionPanel,
+        BaseContentBlockSettings,
     },
     beforeMount() {
         if (_.isEmpty(this.block)) {
@@ -175,6 +152,9 @@ export default {
                 'windward.games.components.settings.word_jumble.title'
             )
         }
+        if (!_.isBoolean(this.block.metadata.config.display_title)) {
+            this.$set(this.block.metadata.config, 'display_title', true)
+        }
         if (_.isEmpty(this.block.metadata.config.instructions)) {
             this.block.metadata.config.instructions = ''
         }

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@windward/games",
-    "version": "0.17.1",
+    "version": "0.18.0",
     "description": "Windward UI Plugin Games",
     "main": "plugin.js",
     "scripts": {

package/test/blocks/crossword/CrosswordPuzzle.spec.js

@@ -6,27 +6,6 @@ import Vuetify from 'vuetify'
 import Vue from 'vue'
 Vue.use(Vuetify)
 
-//override default mock
-jest.mock(
-    'lodash',
-    () => {
-        return {
-            cloneDeep: () => {
-                return []
-            },
-            isEmpty: () => {
-                return jest.fn()
-            },
-            flatten: () => {
-                return jest.fn()
-            },
-            get: () => {
-                return jest.fn()
-            },
-        }
-    },
-    { virtual: true }
-)
 describe('CrosswordPuzzle', () => {
     test('is a Vue instance', () => {
         const wrapper = shallowMount(CrosswordPuzzle, {

package/test/blocks/dragDrop/SortingGame.spec.js

@@ -6,27 +6,6 @@ import Vuetify from 'vuetify'
 import Vue from 'vue'
 Vue.use(Vuetify)
 
-//override default mock
-jest.mock(
-    'lodash',
-    () => {
-        return {
-            cloneDeep: () => {
-                return []
-            },
-            isEmpty: () => {
-                return jest.fn()
-            },
-            flatten: () => {
-                return jest.fn()
-            },
-            get: () => {
-                return jest.fn()
-            },
-        }
-    },
-    { virtual: true }
-)
 describe('SortingGame', () => {
     test('is a Vue instance', () => {
         const wrapper = shallowMount(SortingGame, {