@windward/games 0.0.9 → 0.0.10

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

@@ -1,9 +1,16 @@
 <template>
     <div>
         <div>
-            <h1 aria-label="bucket game title" tabindex="0">
+            <h3
+                :aria-label="
+                    $t(
+                        'plugin.games.components.content.blocks.bucket_game.aria_title'
+                    )
+                "
+                tabindex="0"
+            >
                 {{ block.metadata.config.title }}
-            </h1>
+            </h3>
 
             <p tabindex="0">
                 {{ block.metadata.config.instructions }}
@@ -28,18 +35,21 @@
                     }}</v-col>
                     <v-col class="d-flex justify-end pl-4">
                         <v-btn
-                            v-if="
-                                status === 'successOutline' ||
-                                status === 'errorOutline'
-                            "
+                            v-if="status === 'successOutline'"
                             class="mr-5"
-                            :color="
-                                status == 'successOutline' ? 'success' : 'error'
-                            "
+                            color="success"
                             @click="continueGame"
                             >{{ $t('shared.forms.continue') }}
-                        </v-btn></v-col
-                    >
+                        </v-btn>
+                        <v-container
+                            v-if="status === 'errorOutline'"
+                            class="d-flex justify-end"
+                            @click="continueGame"
+                            ><v-icon class="icon--error" color="error"
+                                >mdi-close-circle</v-icon
+                            >
+                        </v-container>
+                    </v-col>
                 </v-row>
                 <br />
             </v-container>
@@ -54,14 +64,14 @@
                     >
                         <v-row align="center" class="col-md-10">
                             <v-card
+                                v-if="mainAnswer[0]"
                                 class="pa-2 flex-fill"
                                 outlined
                                 tile
-                                v-if="mainAnswer[0]"
                             >
                                 <v-icon>mdi-drag-vertical</v-icon>
 
-                                <span class="text-justify">{{
+                                <span class="text-justify span-bold">{{
                                     mainAnswer[counter].display
                                         ? mainAnswer[counter].display
                                         : ''
@@ -84,15 +94,18 @@
                                 tile
                                 :color="
                                     block.metadata.config.bucket_titles[bindex]
-                                        .color
+                                        ? block.metadata.config.bucket_titles[
+                                              bindex
+                                          ].color
+                                        : ''
                                 "
                             >
                                 <v-card-text class="text-center">
                                     <draggable
+                                        v-model="items[bindex]"
                                         :key="'bucket - ' + bindex"
                                         disabled
                                         group="people"
-                                        v-model="items[bindex]"
                                         @change="change($event, bindex)"
                                         :move="checkMove"
                                         tabindex="0"
@@ -100,7 +113,11 @@
                                         <div class="card_text">
                                             {{
                                                 block.metadata.config
-                                                    .bucket_titles[bindex].title
+                                                    .bucket_titles[bindex]
+                                                    ? block.metadata.config
+                                                          .bucket_titles[bindex]
+                                                          .title
+                                                    : ''
                                             }}
                                         </div>
                                     </draggable></v-card-text
@@ -122,14 +139,14 @@
                 >
                     <v-row align="center" class="col-md-10">
                         <v-card
-                            class="pa-2 flex-fill"
-                            outlined
-                            tile
                             v-if="
                                 block.metadata.config.bucket_answers[
                                     startingIndex
                                 ]
                             "
+                            class="pa-2 flex-fill"
+                            outlined
+                            tile
                         >
                             <v-icon>mdi-drag-vertical</v-icon>
 
@@ -212,9 +229,9 @@
                                 )
                             }}
                             <v-progress-linear
+                                v-model="completedPercent"
                                 color="primary"
                                 outlined
-                                v-model="completedPercent"
                                 rounded
                                 height="15"
                             ></v-progress-linear>
@@ -285,28 +302,7 @@ export default {
             instructions: '',
             feedback: '',
             counter: 0,
-            headers: [
-                {
-                    text: 'Bucket display text',
-                    align: 'start',
-                    sortable: false,
-                    value: 'display',
-                    draggable: true,
-                },
-                { text: 'bucket value', value: 'value', sortable: false },
-                { text: 'feedback', value: 'feedback', sortable: false },
-            ],
-            default_item: {
-                id: 0,
-                value: '',
-                display_value: '',
-                feedback: '',
-            },
-            bucket_titles: [],
-            bucket_colors: [],
             items: [],
-            dialogDelete: false,
-            bucketDeleteIndex: 0,
             status: 'default',
             allow_drag: true,
             mainAnswer: [],
@@ -356,6 +352,8 @@ export default {
             return false
         },
         setUpGame() {
+            // reset so we don't carry over any empty arrays
+            this.items = []
             this.block.metadata.config.bucket_titles.forEach((element) => {
                 let index =
                     this.block.metadata.config.bucket_titles.indexOf(element)
@@ -399,32 +397,6 @@ export default {
             }
             return this.shuffle(_.flatten(result))
         },
-        closeDelete() {
-            this.dialogDelete = false
-        },
-        next() {
-            console.log(
-                'index' + this.index,
-                'bucket length' +
-                    this.block.metadata.config.bucket_answers.length
-            )
-
-            if (
-                this.index <
-                this.block.metadata.config.bucket_answers.length - 1
-            ) {
-                this.index = this.index + 1
-            } else {
-                this.index = 0
-            }
-        },
-        onCloneCallback(item) {
-            // Create a fresh copy of item
-            const cloneMe = JSON.parse(JSON.stringify(item))
-            console.log('cloned')
-
-            return cloneMe
-        },
         onMoveCallback(evt, originalEvent) {
             const item = evt.draggedContext.element
             const itemIdx = evt.draggedContext.futureIndex
@@ -441,9 +413,6 @@ export default {
 
             return false
         },
-        onDropCallback(evt, originalEvent) {
-            console.log('dropped', evt)
-        },
         change(evt, bucket_index) {
             this.allow_drag = false
             if (
@@ -500,23 +469,8 @@ export default {
     border: 4px solid var(--v-error-base);
     color: var(--v-error-base);
 }
-.white-bg {
-    background-color: #ffffff;
-}
-.feedback--error {
-    background-color: #ff8383;
-    color: black;
-}
-.feedback--success {
-    background-color: #8cfa54;
-    color: black;
-}
-.body {
-    background-color: #d8ebfe;
-    color: black;
-}
-.title {
-    color: #04709f;
+.span-bold {
+    font-weight: bold;
 }
 .bucket {
     line-height: 1.1em;

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

@@ -1,7 +1,6 @@
 <template>
     <div>
         <h3>{{ block.metadata.config.title }}</h3>
-
         <p>
             {{ block.metadata.config.instructions }}
         </p>
@@ -10,36 +9,54 @@
                 class="d-flex justify-space-around pa-4"
                 align="center"
                 justify="center"
-                >{{ feedback }}
+            >
+                <v-col cols="2"></v-col>
+                <v-col cols="8" class="d-flex justify-center">{{
+                    feedback
+                }}</v-col>
+                <v-col cols="2">
+                    <v-row
+                        v-if="isFail() || isSuccess()"
+                        class="d-flex justify-end"
+                    >
+                        <v-btn
+                            v-if="isSuccess()"
+                            class="success"
+                            elevation="0"
+                            @click="reset"
+                            >{{ $t('shared.forms.continue') }}
+                        </v-btn>
+                        <v-container
+                            v-if="isFail()"
+                            @click="continueGame"
+                            class="d-flex justify-end"
+                            ><v-icon class="icon--error"
+                                >mdi-close-circle</v-icon
+                            >
+                        </v-container>
+                    </v-row>
+                </v-col>
             </v-row>
         </v-container>
-        <v-container v-if="render">
+        <v-container v-if="render" class="mt-2">
             <draggable
                 v-model="input"
                 :disabled="disabled"
-                class="d-flex flex-column mb-6"
+                class="d-flex flex-column"
                 group="cards"
                 v-bind="dragOptions"
                 @change="onDragChange"
             >
-                <v-row
-                    class="justify-center align-center"
-                    v-for="index in input.length"
-                    :key="'bucket_' + index"
-                >
-                    <v-col
-                        cols="1"
-                        v-if="graded"
-                        class="d-flex justify-end pa-0"
-                    >
+                <v-row v-for="index in input.length" :key="'bucket_' + index">
+                    <v-col cols="1" md="1" class="d-flex justify-end pa-0">
                         <v-icon v-if="success[index - 1]" class="icon--success"
-                            >mdi-check
+                            >mdi-check-circle
                         </v-icon>
                         <v-icon v-if="fail[index - 1]" class="icon--error ma-0"
-                            >mdi-close</v-icon
+                            >mdi-close-circle</v-icon
                         >
                     </v-col>
-                    <v-col cols="11">
+                    <v-col cols="10">
                         <v-card
                             :class="
                                 'pa-2 flex-fill bucket ' +
@@ -54,15 +71,16 @@
                             {{ input[index - 1].value }}
                         </v-card>
                     </v-col>
+                    <v-col cols="1"></v-col>
                 </v-row>
             </draggable>
-            <v-container>
+            <v-container class="mt-3">
                 <v-row
                     v-if="!isFail() && !isSuccess()"
-                    class="d-flex justify-end"
+                    class="d-flex justify-center"
                 >
                     <v-spacer class="col-lg-1" />
-                    <v-btn color="primary" @click="checkAnswers">
+                    <v-btn color="primary" elevation="0" @click="checkAnswers">
                         {{
                             $t(
                                 'plugin.games.components.content.blocks.sorting_game.check_answers'
@@ -72,17 +90,16 @@
                 </v-row>
                 <v-row
                     v-if="isFail() || isSuccess()"
-                    class="d-flex justify-end"
+                    class="d-flex justify-center"
                 >
                     <v-btn
                         v-if="isFail()"
                         color="primary"
                         outlined
-                        class=" "
                         @click="continueGame"
                         >{{ $t('shared.forms.continue') }} </v-btn
                     >&nbsp;&nbsp;
-                    <v-btn color="primary" class="" @click="reset"
+                    <v-btn color="primary" elevation="0" @click="reset"
                         >{{ $t('shared.forms.reset') }}
                     </v-btn>
                 </v-row>
@@ -350,6 +367,7 @@ export default {
     border: solid 1px black;
     border-radius: 4px !important;
     cursor: pointer;
+    font-weight: bold;
 }
 .bucket--error {
     background-color: var(--v-error-base);
@@ -363,13 +381,9 @@ export default {
     color: white;
 }
 .icon--error {
-    background-color: var(--v-error-base);
-    color: white;
-    border-radius: 25px;
+    color: var(--v-error-base);
 }
 .icon--success {
-    background-color: var(--v-success-base);
-    color: white;
-    border-radius: 25px;
+    color: var(--v-success-base);
 }
 </style>

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

@@ -87,7 +87,9 @@ export default {
         if (_.isEmpty(this.block.metadata.config)) {
             this.block.metadata.config = {}
             this.block.metadata.config.currentSlide = 0
-            this.block.metadata.config.title = ''
+            this.block.metadata.config.title = this.$t(
+                'plugin.games.components.content.blocks.flashcard.title'
+            )
             this.block.metadata.config.instructions = ''
         }