@windward/games 0.26.0 → 0.28.0

package/CHANGELOG.md

@@ -1,5 +1,37 @@
 # Changelog
 
+## Release [0.28.0] - 2026-03-10
+
+* Merged in feature/LE-2298-word-jumble (pull request #288)
+* Merged release/0.28.0 into feature/LE-2298-word-jumble
+* Merged in feature/LE-2076-matching-game-allow-rich-text-ed (pull request #287)
+* Merged release/0.28.0 into feature/LE-2076-matching-game-allow-rich-text-ed
+* Merged in feature/LE-2076-matching-game-allow-rich-text-ed (pull request #286)
+* Merged in bugfix/LE-2232-flashcards-when-the-prev-or-next (pull request #285)
+* Merged release/0.28.0 into bugfix/LE-2232-flashcards-when-the-prev-or-next
+* Merged release/0.28.0 into feature/LE-2076-matching-game-allow-rich-text-ed
+* Merged in feature/LE-2076-matching-game-allow-rich-text-ed (pull request #281)
+* Merged in feature/LE-2298-word-jumble (pull request #282)
+* Merged release/0.28.0 into bugfix/LE-2232-flashcards-when-the-prev-or-next
+* Merged release/0.28.0 into feature/LE-2298-word-jumble
+* Merged master into release/0.28.0
+* Merged in release/0.27.0 (pull request #280)
+* Merged in release/0.26.0 (pull request #269)
+* Merged in release/0.25.0 (pull request #266)
+* Merged in release/0.24.0 (pull request #261)
+* Merged in release/0.23.0 (pull request #256)
+* Merged in release/0.22.0 (pull request #248)
+* Merged in release/0.21.0 (pull request #244)
+* Merged in release/0.20.0 (pull request #238)
+* Merged in hotfix/0.19.1 (pull request #236)
+* Merged in hotfix/0.19.1 (pull request #232)
+
+
+## Release [0.27.0] - 2026-01-27
+
+* Merged in bugfix/LE-2232-flashcards-when-the-prev-or-next (pull request #274)
+
+
 ## Release [0.26.0] - 2026-01-20
 
 * Merged in LE-2037-word-jumble-remove-feedback-se (pull request #278)

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

@@ -10,6 +10,7 @@
             outlined
             :class="cardClass"
             style="height: 90%"
+            tabindex="0"
             @keyup.enter="toggleCard"
             @click="toggleCard"
         >
@@ -27,6 +28,7 @@
             outlined
             :class="cardClass"
             style="height: 90%"
+            tabindex="0"
             @keyup.enter="toggleCard"
             @click="toggleCard"
         >
@@ -64,6 +66,7 @@ export default {
         options: { type: Object, default: {} },
         slide: { type: Number, required: true, default: 0 },
         assets: { type: Array, required: true },
+        index: { type: Number, required: true, default: 0 },
     },
     computed: {
         cardClass() {
@@ -109,8 +112,22 @@ export default {
             }
         },
     },
+    watch: {
+        slide(newValue) {
+            if (newValue === this.index) {
+                this.focusCard()
+            }
+        },
+    },
     mounted() {
         this.side = true
+        // next tick doesn't work here. Need to wait for v-carousel animations
+        // to finish to focus on the card even if it is mounted
+        if (this.slide === this.index) {
+            setTimeout(() => {
+                this.focusCard()
+            }, 250)
+        }
     },
     methods: {
         toggleCard() {
@@ -127,6 +144,17 @@ export default {
                 target.$el.focus()
             })
         },
+        focusCard() {
+            // Focus the currently visible side of the card.
+            // Should always be front but just in case, check both refs
+            const ref = this.side ? this.$refs.cardFront : this.$refs.cardBack
+            if (!ref) return
+            // Vuetify components expose $el; native element does not
+            const el = ref.$el ? ref.$el : ref
+            if (el && typeof el.focus === 'function') {
+                el.focus()
+            }
+        },
     },
 }
 </script>

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

@@ -59,8 +59,10 @@
                     :style="setBackgroundInCaseHighlight()"
                 >
                     <Flashcard
+                        ref="flashcard"
                         :options="card"
                         :slide="currentSlide"
+                        :index="index"
                         :key="seed + '-' + currentSlide"
                         :assets="block.assets"
                     />
@@ -127,12 +129,6 @@ export default {
         }
     },
     computed: {
-        slide() {
-            if (this.block.metadata.config.cards.length > 0) {
-                return this.currentSlide + 1
-            }
-            return 0
-        },
         styleForText() {
             // if highlight is set, use black instead of primary
             if (

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

@@ -76,12 +76,10 @@
                                     group="people"
                                     tabindex="0"
                                 >
-                                    <div
+                                    <TextViewer
                                         class="card_text secondary"
-                                        color="secondary"
-                                    >
-                                        {{ mainPrompt['prompt'] }}
-                                    </div>
+                                        v-model="mainPrompt['prompt']"
+                                    ></TextViewer>
                                 </draggable>
                             </v-card-text>
                         </v-card>
@@ -155,16 +153,14 @@
                                     group="people"
                                     tabindex="0"
                                 >
-                                    <div
+                                    <TextViewer
                                         class="card_text secondary"
-                                        color="secondary"
-                                    >
-                                        {{
+                                        v-model="
                                             block.metadata.config.prompts[
                                                 startingIndex
                                             ][startingIndex].prompt
-                                        }}
-                                    </div>
+                                        "
+                                    ></TextViewer>
                                 </draggable>
                             </v-card-text>
                         </v-card>
@@ -321,10 +317,11 @@ import _ from 'lodash'
 import draggable from 'vuedraggable'
 import BaseContentBlock from '~/components/Content/Blocks/BaseContentBlock'
 import ImageAssetViewer from '~/components/Content/ImageAssetViewer.vue'
+import TextViewer from '~/components/Text/TextViewer'
 
 export default {
     name: 'MatchingGame',
-    components: { draggable, ImageAssetViewer },
+    components: { draggable, ImageAssetViewer, TextViewer },
     extends: BaseContentBlock,
     beforeMount() {
         if (_.isEmpty(this.block)) {
@@ -483,21 +480,10 @@ export default {
             if (evt.to === evt.from) {
                 return
             }
-
             const { answerObjects, prompts } = this.block.metadata.config
             const draggedElement = answerObjects[evt.oldIndex]
-            // flatten nested prompts array and then find target by either text or image
-            let target = prompts
-                .flatMap((outerElement) => outerElement)
-                .find((element) =>
-                    this.mainPrompt.textOrImage === 'text'
-                        ? element.prompt ===
-                          evt.to.firstChild?.textContent.trim()
-                        : element.fileConfig.asset?.file_asset_id ===
-                          evt.to.firstElementChild?.id
-                )
 
-            this.setFeedback(target, draggedElement)
+            this.setFeedback(this.mainPrompt, draggedElement)
         },
         setFeedback(target, draggedElement) {
             //set feedback information here
@@ -565,6 +551,12 @@ export default {
 .dragArea {
     min-height: 100%;
     min-width: 100%;
+    height: auto;
+}
+.dragArea /deep/ .text-viewer {
+    overflow: visible !important;
+    height: auto !important;
+    max-height: none !important;
 }
 .card-bucket {
     line-height: 1.1em;
@@ -580,6 +572,7 @@ export default {
 }
 .card_text {
     font-size: large;
+    height: auto;
 }
 .card-answer-option {
     min-width: 23%;

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

@@ -91,7 +91,11 @@
                                     {{ word.value }}
                                 </p>
                             </v-row>
-                            <v-alert v-if="showFeedback" fluid :class="feedbackStatus">
+                            <v-alert
+                                v-if="showFeedback"
+                                fluid
+                                :class="feedbackStatus"
+                            >
                                 <v-row class="pa-4 d-flex justify-center">
                                     <p class="mb-0 p-text-override">
                                         {{
@@ -111,6 +115,7 @@
                                         "
                                         color="success"
                                         elevation="0"
+                                        :ref="'continueButton' + index"
                                         @click="onSlideChanged(true)"
                                         >{{ $t('shared.forms.continue') }}
                                     </v-btn>
@@ -120,7 +125,8 @@
                                             'container-feedback-error'
                                         "
                                         color="error"
-                                        @click="onHideFeedback"
+                                        :ref="'tryAgainButton' + index"
+                                        @click="onHideFeedback(index)"
                                         >{{
                                             $t(
                                                 'windward.games.components.content.blocks.bucket_game.try_again'
@@ -142,6 +148,7 @@
                         <v-row class="d-flex mt-8">
                             <v-col class="d-flex justify-end">
                                 <v-btn
+                                    :ref="'checkAnswer' + index"
                                     :disabled="disableButtons"
                                     color="primary"
                                     elevation="0"
@@ -297,15 +304,20 @@ export default {
             this.showAnswer = true
             this.disableButtons = true
         },
-        onHideFeedback() {
+        onHideFeedback(index) {
             this.showFeedback = false
             this.disableButtons = false
+            this.$nextTick(() => {
+                const buttonLabel = 'checkAnswer' + index
+                this.$refs[buttonLabel][0].$el.focus()
+            })
         },
         onCheckAnswer(word) {
             this.studentResponse = this.studentResponse.toLowerCase()
             this.showFeedback = true
             this.disableButtons = true
             const answer = word.value.toLowerCase()
+            const wordIndex = this.block.metadata.config.words.indexOf(word)
             if (
                 !_.isEmpty(this.studentResponse) &&
                 this.studentResponse === answer
@@ -323,6 +335,10 @@ export default {
                         'windward.games.components.content.blocks.word_jumble.correct'
                     )
                 }
+                this.$nextTick(() => {
+                    const buttonLabel = 'continueButton' + wordIndex
+                    this.$refs[buttonLabel][0].$el.focus()
+                })
             } else {
                 // updates class
                 this.feedbackStatus = 'container-feedback-error'
@@ -338,6 +354,10 @@ export default {
                         'windward.games.components.content.blocks.word_jumble.incorrect'
                     )
                 }
+                this.$nextTick(() => {
+                    const buttonLabel = 'tryAgainButton' + wordIndex
+                    this.$refs[buttonLabel][0].$el.focus()
+                })
             }
         },
         onSlideChanged(changeSlide) {

package/components/settings/MatchingGameManager.vue

@@ -72,9 +72,11 @@
                                 <span v-if="prompt.textOrImage === 'text'">
                                     {{
                                         prompt.prompt
-                                            ? block.metadata.config.prompts[
-                                                  index
-                                              ][indexPrompt].prompt
+                                            ? removeHtmlTags(
+                                                  block.metadata.config.prompts[
+                                                      index
+                                                  ][indexPrompt].prompt
+                                              )
                                             : $t(
                                                   'windward.games.components.content.blocks.matching_game.click_here'
                                               )
@@ -143,30 +145,24 @@
                                         </v-row>
                                     </v-container>
                                     <v-container class="pa-0">
-                                        <v-textarea
+                                        <TextEditor
                                             v-if="prompt.textOrImage === 'text'"
                                             v-model="
                                                 block.metadata.config.prompts[
                                                     index
                                                 ][indexPrompt].prompt
                                             "
-                                            :rules="
-                                                $Validation.getRule('longInput')
-                                            "
-                                            :counter="
-                                                $Validation.getLimit(
-                                                    'longInput'
-                                                )
-                                            "
                                             :label="
                                                 $t(
                                                     'windward.games.components.settings.matching_game.form.prompt_body'
                                                 )
                                             "
-                                            outlined
-                                            :autofocus="true"
+                                            toolbar="styles | bold italic underline strikethrough removeformat | alignleft aligncenter alignright | mathButton a11yButton reviseText | undo redo"
+                                            menubar="view"
+                                            :default-alignment="'aligncenter'"
                                             :disabled="render"
-                                        ></v-textarea>
+                                            class="mb-3"
+                                        ></TextEditor>
                                     </v-container>
                                     <v-container
                                         v-if="prompt.textOrImage === 'image'"
@@ -278,6 +274,7 @@ import BaseContentBlockSettings from '~/components/Content/Settings/BaseContentB
 import SortableExpansionPanel from '~/components/Core/SortableExpansionPanel.vue'
 import Uuid from '~/helpers/Uuid'
 import ImageAssetSettings from '~/components/Content/Settings/ImageAssetSettings.vue'
+import TextEditor from '~/components/Text/TextEditor'
 
 export default {
     name: 'MatchingGameManager',
@@ -287,6 +284,7 @@ export default {
         ImageAssetSettings,
         BaseContentBlockSettings,
         PluginRef,
+        TextEditor,
     },
     beforeMount() {
         if (_.isEmpty(this.block)) {
@@ -357,6 +355,9 @@ export default {
     },
     mounted() {},
     methods: {
+        removeHtmlTags(input) {
+            return input.replace(/<\/?[a-z][^>]*(>|$)/gi, '')
+        },
         onAddPrompt(index = 0) {
             if (this.block.metadata.config.prompts[index] === undefined) {
                 // forces the component to track the state by making this an observable

package/package.json

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