@windward/games 0.17.1 → 0.19.0

package/CHANGELOG.md

@@ -1,41 +1,33 @@
 # Changelog
 
-### Hotfix [0.17.1] created - 2025-05-21
+### Release [0.19.0] created - 2025-05-30
 
+### Release [0.18.0] created - 2025-05-20
 
-### Release [0.17.0] created - 2025-05-13
+### 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
@@ -46,7 +52,9 @@
                 :key="question.id"
             >
                 <v-col class="d-flex justify-center">
-                    <p>{{ question.body }}</p>
+                    <p>
+                        <TextViewer v-model="question.body"></TextViewer>
+                    </p>
                 </v-col>
                 <v-container :key="updateKey" class="pl-16 pr-16">
                     <v-row
@@ -71,16 +79,20 @@
                                 @keyup.enter="onChooseAnswer(answer, question)"
                             >
                                 <div class="d-flex justify-space-between">
-                                    <p
-                                        class="mb-0"
-                                        :aria-labelledby="answer.value"
-                                    >
-                                        {{
-                                            getCharacter(question, answer) +
-                                            '. ' +
-                                            answer.value
-                                        }}
-                                    </p>
+                                    <div class="d-flex">
+                                        <p
+                                            class="mb-0"
+                                            :aria-labelledby="answer.value"
+                                        >
+                                            {{
+                                                getCharacter(question, answer) +
+                                                '. '
+                                            }}
+                                        </p>
+                                        <TextViewer
+                                            v-model="answer.value"
+                                        ></TextViewer>
+                                    </div>
                                     <div>
                                         <v-icon
                                             v-if="
@@ -217,12 +229,11 @@
                 </template>
                 <template #form="{ on, attrs }">
                     <div v-bind="attrs" v-on="on">
-                        <div v-if="hint">
-                            {{ hintText }}
-                        </div>
-                        <div v-if="answerDescriptionModal">
-                            {{ answerDescription }}
-                        </div>
+                        <TextViewer v-if="hint" v-model="hintText"></TextViewer>
+                        <TextViewer
+                            v-if="answerDescriptionModal"
+                            v-model="answerDescription"
+                        ></TextViewer>
                     </div>
                 </template>
             </DialogBox>
@@ -235,11 +246,12 @@ import Crypto from '~/helpers/Crypto'
 import { mapGetters } from 'vuex'
 import BaseContentBlock from '~/components/Content/Blocks/BaseContentBlock'
 import DialogBox from '~/components/Core/DialogBox.vue'
+import TextViewer from '~/components/Text/TextViewer.vue'
 
 export default {
     name: 'MultipleChoice',
     extends: BaseContentBlock,
-    components: { DialogBox },
+    components: { DialogBox, TextViewer },
     beforeMount() {
         if (_.isEmpty(this.block)) {
             this.block = {}
@@ -255,6 +267,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 = ''
         }