@windward/games 0.8.0 → 0.9.0

package/babel.config.js

@@ -1 +1 @@
-module.exports = { presets: ["@babel/preset-env"] };
+module.exports = { presets: ['@babel/preset-env'] }

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

@@ -501,6 +501,7 @@ export default {
 .crossword-board-container {
     position: relative;
     padding-top: 5px;
+    margin-top: 1rem;
     overflow: auto;
 }
 
@@ -595,8 +596,9 @@ export default {
 
 .crossword-clues {
     background: var(--v-content-background-base);
-    position: sticky;
-    bottom: 100px;
+    max-height: 30vh;
+    overflow-y: scroll;
+    bottom: 50px;
     border-radius: 5px;
 }
 .crossword-board__item--number {
@@ -613,63 +615,42 @@ export default {
         width: 500px;
         height: 500px;
     }
-    .crossword-board-container {
-        box-sizing: content-box !important;
-    }
 }
 @media (max-width: 1480px) {
     .crossword-col-4 {
         width: 400px;
         height: 400px;
     }
-    .crossword-board-container {
-        box-sizing: content-box !important;
-    }
 }
 @media (max-width: 1360px) {
     .crossword-col-4 {
         width: 350px;
         height: 350px;
     }
-    .crossword-board-container {
-        box-sizing: content-box !important;
-    }
 }
 @media (max-width: 1300px) {
     .crossword-col-4 {
         width: 300px;
         height: 300px;
     }
-    .crossword-board-container {
-        box-sizing: content-box !important;
-    }
 }
 @media (max-width: 1263px) {
     .crossword-col-4 {
         width: 550px;
         height: 550px;
     }
-    .crossword-board-container {
-        box-sizing: content-box !important;
-    }
 }
 @media (max-width: 823px) {
     .crossword-col-4 {
         width: 400px;
         height: 400px;
     }
-    .crossword-board-container {
-        box-sizing: content-box !important;
-    }
 }
 @media (max-width: 631px) {
     .crossword-col-4 {
         width: 300px;
         height: 300px;
     }
-    .crossword-board-container {
-        box-sizing: content-box !important;
-    }
 }
 @media (max-width: 565px) {
     .crossword-col-4 {
@@ -677,7 +658,6 @@ export default {
         height: 300px;
     }
     .crossword-board-container {
-        box-sizing: content-box !important;
         padding-top: 12px;
         padding-left: 12px;
     }

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

@@ -39,7 +39,7 @@
                     }}</v-col>
                     <v-col class="d-flex justify-end pl-4">
                         <v-btn
-                            v-if="status === 'successOutline'"
+                            v-if="status === 'container-success-outline'"
                             class="mr-5"
                             color="success"
                             elevation="0"
@@ -47,7 +47,7 @@
                             >{{ $t('shared.forms.continue') }}
                         </v-btn>
                         <v-container
-                            v-if="status === 'errorOutline'"
+                            v-if="status === 'container-error-outline'"
                             class="d-flex justify-end"
                             @click="continueGame"
                             ><v-icon class="icon--error" color="error"
@@ -83,15 +83,12 @@
                     </draggable>
                     <br />
 
-                    <v-row
-                        class="d-flex flex-wrap flex-row justify-center flex-fill"
-                    >
-                        <v-row align="center" class="col-md-10">
+                    <v-row class="d-flex justify-center mb-2">
+                        <v-row class="justify-center">
                             <v-card
                                 v-for="(bucket, bindex) in items"
                                 :key="'b-v-card-' + bindex"
-                                class="pa-2 flex-fill bucket"
-                                min-height="5em"
+                                class="card-bucket"
                                 outlined
                                 tile
                                 :color="
@@ -103,7 +100,7 @@
                                 "
                             >
                                 <v-card-text
-                                    class="d-flex justify-center text-center"
+                                    class="d-flex justify-center text-center pl-0 pr-0"
                                 >
                                     <draggable
                                         v-model="items[bindex]"
@@ -113,14 +110,30 @@
                                         @change="change($event, bindex)"
                                         :move="checkMove"
                                         tabindex="0"
+                                        class="draggable-bucket"
                                     >
                                         <TextViewer
                                             v-model="
                                                 block.metadata.config
                                                     .bucket_titles[bindex].title
                                             "
-                                            class="d-flex align-center"
+                                            class="d-flex align-center justify-center container-buckets"
                                         ></TextViewer>
+                                        <v-container
+                                            v-for="(
+                                                nested_answer, nested_index
+                                            ) in block.metadata.config
+                                                .bucket_titles[bindex]
+                                                .nested_answers"
+                                            :key="nested_index"
+                                            class="d-flex justify-center align-center pa-0"
+                                        >
+                                            <TextViewer
+                                                class="container-nested-answers mb-1"
+                                                v-model="nested_answer.display"
+                                                remove-root-element
+                                            ></TextViewer>
+                                        </v-container>
                                     </draggable>
                                 </v-card-text>
                             </v-card>
@@ -166,12 +179,15 @@
                 <v-row
                     class="d-flex flex-wrap flex-row justify-center flex-fill"
                 >
-                    <v-row align="center" class="col-md-10">
+                    <v-row
+                        align="center"
+                        class="col-md-10 justify-space-around"
+                    >
                         <v-card
                             v-for="(bucket, bindex) in block.metadata.config
                                 .bucket_titles"
                             :key="'b-v-card-' + bindex"
-                            class="pa-2 flex-fill bucket"
+                            class="pa-2 card-bucket"
                             min-height="5em"
                             outlined
                             tile
@@ -198,7 +214,7 @@
                                             ].title
                                         "
                                         class="d-flex align-center"
-                                    ></TextViewer> </draggable
+                                    ></TextViewer></draggable
                             ></v-card-text>
                         </v-card>
                     </v-row>
@@ -295,6 +311,17 @@ export default {
         if (_.isEmpty(this.block.metadata.config.bucket_titles)) {
             this.block.metadata.config.bucket_titles = []
         }
+        if (
+            this.block.metadata.config.bucket_titles &&
+            this.block.metadata.config.bucket_titles[0] &&
+            _.isEmpty(
+                this.block.metadata.config.bucket_titles[0].nested_answers
+            )
+        ) {
+            this.block.metadata.config.bucket_titles.forEach((bucket) => {
+                bucket.nested_answers = []
+            })
+        }
         if (_.isEmpty(this.block.metadata.config.bucket_answers)) {
             this.block.metadata.config.bucket_answers = []
         }
@@ -331,6 +358,7 @@ export default {
         },
         completedPercent() {
             if (
+                this.block.metadata.config.bucket_answers &&
                 this.block.metadata.config.bucket_answers.length > 0 &&
                 this.items.length > 0
             ) {
@@ -347,10 +375,16 @@ export default {
         },
     },
     mounted() {
-        if (this.block.metadata.config.bucket_answers.length > 0) {
+        if (
+            this.block.metadata.config.bucket_answers &&
+            this.block.metadata.config.bucket_answers.length > 0
+        ) {
             this.setMainAnswer()
         }
-        if (this.block.metadata.config.bucket_titles.length > 0) {
+        if (
+            this.block.metadata.config.bucket_titles &&
+            this.block.metadata.config.bucket_titles.length > 0
+        ) {
             this.setUpGame()
         }
         this.status = 'default'
@@ -470,8 +504,14 @@ export default {
                     this.feedback = this.$t(
                         'windward.games.components.content.blocks.matching_game.congratulations_feedback'
                     )
+                    this.block.metadata.config.bucket_titles[
+                        bucket_index
+                    ].nested_answers.push(evt.added.element)
                 } else {
-                    this.status = 'successOutline'
+                    this.status = 'container-success-outline'
+                    this.block.metadata.config.bucket_titles[
+                        bucket_index
+                    ].nested_answers.push(evt.added.element)
                     // set correct feedback
                     if (evt.added.element.feedback) {
                         this.feedback = evt.added.element.feedback
@@ -496,7 +536,7 @@ export default {
                     : this.$t(
                           'windward.games.components.settings.bucket_game.form.feedback.incorrect_default'
                       )
-                this.status = 'errorOutline'
+                this.status = 'container-error-outline'
             }
         },
         continueGame() {
@@ -509,6 +549,9 @@ export default {
             for (const index in this.block.metadata.config.bucket_answers) {
                 this.items[index] = []
             }
+            this.block.metadata.config.bucket_titles.forEach((element) => {
+                element.nested_answers = []
+            })
             this.status = 'default'
             this.feedback = ''
             this.allow_drag = true
@@ -518,26 +561,61 @@ export default {
 }
 </script>
 <style scoped>
-.successOutline {
+.container-success-outline {
     border: 4px solid var(--v-success-base);
     color: var(--v-success-base);
 }
-.errorOutline {
+.container-error-outline {
     border: 4px solid var(--v-error-base);
     color: var(--v-error-base);
 }
 .span-bold {
     font-weight: bold;
 }
-.bucket {
+.card-bucket {
     line-height: 1.1em;
     padding: 0.5em;
     box-shadow: 0px 2px 3px #0000004a;
     transition: 0.5s box-shadow;
     margin: 1%;
+    max-width: 12vw;
+    min-width: 12vw;
+    color: black !important;
 }
 .card_text {
     font-size: large;
     color: black;
 }
+.container-nested-answers {
+    max-width: 10vw;
+    min-width: 10vw;
+    padding-left: 4px;
+    padding-right: 4px;
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    background-color: white;
+    color: black;
+    box-shadow: 0px 2px 3px #0000004a;
+    border-radius: 2px;
+}
+.container-buckets {
+    color: black;
+}
+.draggable-bucket {
+    width: 100%;
+}
+@media (max-width: 600px) {
+    .card-bucket {
+        width: 40vh;
+        max-width: 40vh;
+    }
+    .container-nested-answers {
+        display: block !important;
+        width: 100%;
+        max-width: 100%;
+        min-width: 100%;
+        overflow-x: hidden !important;
+    }
+}
 </style>

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

@@ -1,6 +1,6 @@
 <template>
     <v-container style="height: 100%" class="div-container">
-        <v-card outlined @click="toggleCard" v-show="value" :class="cardClass">
+        <v-card outlined @click="toggleCard" v-show="side" :class="cardClass">
             <v-card-text>
                 <CardFace
                     side="front"
@@ -9,7 +9,7 @@
                 ></CardFace>
             </v-card-text>
         </v-card>
-        <v-card outlined @click="toggleCard" v-show="!value" :class="cardClass">
+        <v-card outlined @click="toggleCard" v-show="!side" :class="cardClass">
             <v-card-title class="card-title">
                 <v-row align="center" justify="center">{{
                     backFace.header
@@ -34,10 +34,10 @@ export default {
         return {
             settings: {},
             flip: false,
+            side: true,
         }
     },
     props: {
-        value: { type: Boolean, required: false, default: false },
         options: { type: Object, default: {} },
         slide: { type: Number, required: true, default: 0 },
         assets: { type: Array, required: true },
@@ -93,12 +93,16 @@ export default {
             }
         },
     },
+    mounted() {
+        this.side = true
+    },
     methods: {
         toggleCard() {
             //only flip card when user click
             this.flip = true
             //this.cardClass = 'animated flipInY flashcard flashcard--size-md'
-            this.$emit('input', !this.value)
+            this.$emit('input', !this.side)
+            this.side = !this.side
         },
     },
 }

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

@@ -8,10 +8,7 @@
             {{ block.metadata.config.instructions }}
         </p>
         <br />
-        <v-carousel
-            :value="block.metadata.config.currentSlide"
-            :hide-delimiters="hideDeliminators"
-        >
+        <v-carousel v-model="currentSlide" hide-delimiters>
             <template #prev="{ on, attrs }">
                 <v-btn
                     variant="elevated"
@@ -44,13 +41,20 @@
             >
                 <v-sheet height="90%" tile>
                     <Flashcard
-                        v-model="block.metadata.config.cards[index].side"
                         :options="card"
-                        :slide="block.metadata.config.currentSlide"
-                        :key="seed + '-' + block.metadata.config.currentSlide"
+                        :slide="currentSlide"
+                        :key="seed + '-' + currentSlide"
                         :assets="block.assets"
                     />
                 </v-sheet>
+                <div class="d-flex justify-end">
+                    {{
+                        $t('windward.games.shared.content_blocks.out_of', [
+                            index + 1,
+                            block.metadata.config.cards.length,
+                        ])
+                    }}
+                </div>
             </v-carousel-item>
         </v-carousel>
     </div>
@@ -73,6 +77,7 @@ export default {
             toggle: true,
             seed: Crypto.id(),
             cards: [],
+            currentSlide: 0,
         }
     },
     beforeMount() {
@@ -84,7 +89,6 @@ export default {
         }
         if (_.isEmpty(this.block.metadata.config)) {
             this.block.metadata.config = {}
-            this.block.metadata.config.currentSlide = 0
             this.block.metadata.config.title = this.$t(
                 'windward.games.components.content.blocks.flashcard.title'
             )
@@ -101,39 +105,10 @@ export default {
     computed: {
         slide() {
             if (this.block.metadata.config.cards.length > 0) {
-                return this.block.metadata.config.currentSlide + 1
+                return this.currentSlide + 1
             }
             return 0
         },
-        hideDeliminators() {
-            const condition1 =
-                window.innerWidth <= 1483 ||
-                this.block.metadata.config.cards.length >= 13
-            const condition2 =
-                this.block.metadata.config.cards.length >= 12 &&
-                window.innerWidth <= 1692
-            const condition3 =
-                this.block.metadata.config.cards.length >= 11 &&
-                window.innerWidth <= 1634
-            const condition4 =
-                this.block.metadata.config.cards.length >= 10 &&
-                window.innerWidth <= 1571
-            const condition5 =
-                this.block.metadata.config.cards.length >= 9 &&
-                window.innerWidth <= 1518
-
-            if (
-                condition1 ||
-                condition2 ||
-                condition3 ||
-                condition4 ||
-                condition5
-            ) {
-                return true
-            } else {
-                return false
-            }
-        },
     },
     methods: {
         onActionPanelEdit() {

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

@@ -97,7 +97,7 @@
                                     group="people"
                                     tabindex="0"
                                 >
-                                    <div :id="mainPrompt.file.id">
+                                    <div :id="mainPrompt.file.file_asset_id">
                                         <v-img
                                             :aria-describedby="
                                                 getFileAriaDescribedBy(
@@ -196,7 +196,7 @@
                                         :id="
                                             block.metadata.config.prompts[
                                                 startingIndex
-                                            ][startingIndex].file.id
+                                            ][startingIndex].file.file_asset_id
                                         "
                                     >
                                         <v-img
@@ -498,7 +498,7 @@ export default {
                         (outerElement) => {
                             const mainElement = outerElement.find((element) => {
                                 return (
-                                    element.file?.id ==
+                                    element.file?.file_asset_id ==
                                     evt.to.firstElementChild.id
                                 )
                             })