@windward/games 0.0.9 → 0.1.0

package/components/settings/SortingGameSettingsManager.vue

@@ -9,7 +9,7 @@
                     :counter="50"
                     :label="
                         $t(
-                            'plugin.games.components.settings.bucket_game.form.title'
+                            'windward.games.components.settings.bucket_game.form.title'
                         )
                     "
                     ref="title"
@@ -21,7 +21,7 @@
                     :counter="255"
                     :label="
                         $t(
-                            'plugin.games.components.settings.bucket_game.form.instructions'
+                            'windward.games.components.settings.bucket_game.form.instructions'
                         )
                     "
                 ></v-textarea>
@@ -31,81 +31,42 @@
                 <p>
                     {{
                         $t(
-                            'plugin.games.components.settings.sorting_game.sortable_items'
+                            'windward.games.components.settings.sorting_game.sortable_items'
                         )
                     }}
                 </p>
-                <draggable
+                <SortableExpansionPanel
                     v-model="block.metadata.config.answer"
-                    group="cards"
-                    @change="onDragged"
+                    @click:close="onDelete($event)"
                 >
-                    <v-container
-                        v-for="(item, index) in block.metadata.config.answer"
-                        :key="'bucket_' + index"
-                        class="container-card-outline"
-                        elevation="0"
-                        outlined
-                        tile
-                    >
-                        <v-layout row wrap outlined>
-                            <v-flex xs10 :class="bottomBorder(index)">
-                                <p
-                                    class="text-truncate mb-0 p-header"
-                                    @click="onOpenEditor(index)"
-                                    v-on:keyup.enter="onOpenEditor(index)"
-                                    @mouseover="onHover"
-                                    @mouseleave="onHoverLeave"
-                                    :class="cursor"
-                                    tabindex="0"
-                                >
-                                    <v-icon>mdi-drag-vertical</v-icon>
-                                    <span class="span-text-ellipsis">
-                                        {{
-                                            item.value
-                                                ? block.metadata.config.answer[
-                                                      index
-                                                  ].value
-                                                : $t(
-                                                      'plugin.games.components.settings.bucket_game.form.enter_text'
-                                                  )
-                                        }}
-                                    </span>
-                                </p>
-                            </v-flex>
-                            <v-flex
-                                xs2
-                                class="btn-header-delete d-flex justify-center"
-                                :class="bottomBorder(index)"
-                            >
-                                <v-icon
-                                    class="btn-delete-icon"
-                                    @click="onDelete(index)"
-                                    >mdi-delete-outline</v-icon
-                                >
-                            </v-flex>
-                            <v-container v-if="item.expand">
-                                <v-flex xs12>
-                                    <p class="p-label">
-                                        {{
-                                            $t(
-                                                'plugin.games.components.settings.sorting_game.word'
-                                            )
-                                        }}
-                                    </p>
-                                    <v-textarea
-                                        outlined
-                                        v-model="
-                                            block.metadata.config.answer[index]
-                                                .value
-                                        "
-                                        :autofocus="true"
-                                    ></v-textarea>
-                                </v-flex>
-                            </v-container>
-                        </v-layout>
-                    </v-container>
-                </draggable>
+                    <template #header="{ item, index }">
+                        {{
+                            item.value
+                                ? block.metadata.config.answer[index].value
+                                : $t(
+                                      'windward.games.components.settings.bucket_game.form.enter_text'
+                                  )
+                        }}
+                    </template>
+                    <template #body="{ item, index }">
+                        <v-container>
+                            <p class="p-label">
+                                {{
+                                    $t(
+                                        'windward.games.components.settings.sorting_game.word'
+                                    )
+                                }}
+                            </p>
+                            <v-textarea
+                                outlined
+                                v-model="
+                                    block.metadata.config.answer[index].value
+                                "
+                                :autofocus="true"
+                            ></v-textarea>
+                        </v-container>
+                    </template>
+                </SortableExpansionPanel>
             </v-container>
             <v-container class="pa-0">
                 <v-row justify="center" class="my-4">
@@ -113,7 +74,7 @@
                         <v-icon>mdi-plus</v-icon>
                         {{
                             $t(
-                                'plugin.games.components.settings.bucket_game.form.add_answer'
+                                'windward.games.components.settings.bucket_game.form.add_answer'
                             )
                         }}
                     </v-btn>
@@ -125,7 +86,7 @@
                     :counter="255"
                     :label="
                         $t(
-                            'plugin.games.components.settings.bucket_game.form.feedback.correct'
+                            'windward.games.components.settings.bucket_game.form.feedback.correct'
                         )
                     "
                 ></v-textarea>
@@ -136,7 +97,7 @@
                     :counter="255"
                     :label="
                         $t(
-                            'plugin.games.components.settings.bucket_game.form.feedback.incorrect'
+                            'windward.games.components.settings.bucket_game.form.feedback.incorrect'
                         )
                     "
                 ></v-textarea>
@@ -155,13 +116,12 @@
 
 <script>
 import _ from 'lodash'
-import draggable from 'vuedraggable'
 import BaseContentSettings from '~/components/Content/Tool/BaseContentSettings.js'
-import CrudTable from '../content/CrudTable.vue'
+import SortableExpansionPanel from '~/components/SortableExpansionPanel.vue'
 export default {
     name: 'SortingGameSettingsManager',
     extends: BaseContentSettings,
-    components: { CrudTable, draggable },
+    components: { SortableExpansionPanel },
     beforeMount() {
         if (_.isEmpty(this.block)) {
             this.block = {}
@@ -174,17 +134,17 @@ export default {
         }
         if (_.isEmpty(this.block.metadata.config.title)) {
             this.block.metadata.config.title = this.$t(
-                'plugin.games.components.settings.sorting_game.sortable_game'
+                'windward.games.components.settings.sorting_game.sortable_game'
             )
         }
         if (_.isEmpty(this.block.metadata.config.feedback_correct)) {
             this.block.metadata.config.feedback_correct = this.$t(
-                'plugin.games.components.settings.bucket_game.form.feedback.correct_default'
+                'windward.games.components.settings.bucket_game.form.feedback.correct_default'
             )
         }
         if (_.isEmpty(this.block.metadata.config.feedback_incorrect)) {
             this.block.metadata.config.feedback_incorrect = this.$t(
-                'plugin.games.components.settings.bucket_game.form.feedback.incorrect_default'
+                'windward.games.components.settings.bucket_game.form.feedback.incorrect_default'
             )
         }
         if (_.isEmpty(this.block.metadata.config.answer)) {
@@ -214,13 +174,6 @@ export default {
         }
     },
     methods: {
-        bottomBorder(index) {
-            if (this.block.metadata.config.answer[index].expand === true) {
-                return 'container-header-border'
-            } else {
-                return null
-            }
-        },
         onAddElement() {
             this.block.metadata.config.answer.forEach((element) => {
                 element.expand = false
@@ -240,28 +193,6 @@ export default {
                 return (element.id = startingIndex)
             })
         },
-        onOpenEditor(index) {
-            this.block.metadata.config.answer[index].expand =
-                !this.block.metadata.config.answer[index].expand
-            this.block.metadata.config.answer.forEach((element) => {
-                if (index + 1 !== element.id) {
-                    element.expand = false
-                }
-            })
-        },
-        onHover(index) {
-            this.cursor = 'change-pointer'
-        },
-        onHoverLeave() {
-            this.cursor = ''
-        },
-        onDragged() {
-            let counter = 1
-            this.block.metadata.config.answer.forEach((element) => {
-                element.id = counter
-                counter = counter + 1
-            })
-        },
     },
 }
 </script>
@@ -270,49 +201,6 @@ export default {
 .v-progress-circular {
     margin: 1rem;
 }
-.container-card-outline {
-    border: solid 1px var(--v-primary-base);
-    border-radius: 3px !important;
-    margin-bottom: 8px;
-}
-.container-header-border {
-    border-bottom: 1px solid var(--v-primary-base);
-}
-.fullWidth {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    font-weight: bold;
-    font-size: 16px;
-}
-.change-pointer {
-    cursor: pointer !important;
-}
-.p-header {
-    height: 45px;
-    display: flex;
-    align-items: center;
-}
-.p-header:hover {
-    background-color: rgb(243, 243, 243);
-}
-.span-text-ellipsis {
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
-}
-.btn-header-delete {
-    border-left: 1px solid var(--v-primary-base);
-}
-.btn-header-delete:hover {
-    background-color: rgb(243, 243, 243);
-}
-.btn-delete-icon {
-    color: var(--v-primary-base);
-}
-.addIcon {
-    margin-right: 5px;
-}
 .p-label {
     font-size: 16px;
     font-weight: 500;

package/components/settings/WordJumbleSettingsManager.vue

@@ -9,7 +9,7 @@
                     :autofocus="true"
                     :label="
                         $t(
-                            'plugin.games.components.settings.word_jumble.title_input'
+                            'windward.games.components.settings.word_jumble.title_input'
                         )
                     "
                     ref="title"
@@ -20,7 +20,7 @@
                     v-model="block.metadata.config.instructions"
                     :label="
                         $t(
-                            'plugin.games.components.settings.word_jumble.instructions'
+                            'windward.games.components.settings.word_jumble.instructions'
                         )
                     "
                 ></v-textarea>
@@ -30,91 +30,59 @@
                 <p>
                     {{
                         $t(
-                            'plugin.games.components.settings.word_jumble.word_jumble'
+                            'windward.games.components.settings.word_jumble.word_jumble'
                         )
                     }}
                 </p>
-                <draggable v-model="block.metadata.config.words" group="cards">
-                    <v-container
-                        v-for="(word, index) in block.metadata.config.words"
-                        :key="index"
-                        class="container-card-outline"
-                        elevation="0"
-                        outlined
-                        tile
-                    >
-                        <v-layout row wrap outlined>
-                            <v-flex xs10 :class="bottomBorder(index)">
-                                <p
-                                    class="text-truncate mb-0 p-header"
-                                    @click="onOpenEditor(index)"
-                                    v-on:keyup.enter="onOpenEditor(index)"
-                                    @mouseover="onHover"
-                                    @mouseleave="onHoverLeave"
-                                    :class="cursor"
-                                    tabindex="0"
-                                >
-                                    <v-icon>mdi-drag-vertical</v-icon>
-                                    <span class="span-text-ellipsis">
-                                        {{
-                                            word.value
-                                                ? word.value
-                                                : $t(
-                                                      'plugin.games.components.settings.word_jumble.click'
-                                                  )
-                                        }}
-                                    </span>
+                <SortableExpansionPanel
+                    v-model="block.metadata.config.words"
+                    @click:close="onDelete($event)"
+                >
+                    <template #header="{ item, index }">
+                        {{
+                            item.value
+                                ? item.value
+                                : $t(
+                                      'windward.games.components.settings.word_jumble.click'
+                                  )
+                        }}
+                    </template>
+                    <template #body="{ item, index }">
+                        <v-container>
+                            <v-flex xs12>
+                                <p class="p-label">
+                                    {{
+                                        $t(
+                                            'windward.games.components.settings.word_jumble.word_jumble'
+                                        )
+                                    }}
                                 </p>
+                                <v-textarea
+                                    outlined
+                                    :autofocus="true"
+                                    v-model="
+                                        block.metadata.config.words[index].value
+                                    "
+                                ></v-textarea>
                             </v-flex>
-                            <v-flex
-                                xs2
-                                class="btn-header-delete d-flex justify-center"
-                                :class="bottomBorder(index)"
-                            >
-                                <v-icon
-                                    class="btn-delete-icon"
-                                    @click="onDelete(index)"
-                                    >mdi-delete-outline</v-icon
-                                >
+                            <v-flex xs12>
+                                <p class="p-label">
+                                    {{
+                                        $t(
+                                            'windward.games.components.settings.word_jumble.hint'
+                                        )
+                                    }}
+                                </p>
+                                <v-textarea
+                                    outlined
+                                    v-model="
+                                        block.metadata.config.words[index].hint
+                                    "
+                                ></v-textarea>
                             </v-flex>
-                            <v-container v-if="word.expand">
-                                <v-flex xs12>
-                                    <p class="p-label">
-                                        {{
-                                            $t(
-                                                'plugin.games.components.settings.word_jumble.word_jumble'
-                                            )
-                                        }}
-                                    </p>
-                                    <v-textarea
-                                        outlined
-                                        :autofocus="true"
-                                        v-model="
-                                            block.metadata.config.words[index]
-                                                .value
-                                        "
-                                    ></v-textarea>
-                                </v-flex>
-                                <v-flex xs12>
-                                    <p class="p-label">
-                                        {{
-                                            $t(
-                                                'plugin.games.components.settings.word_jumble.hint'
-                                            )
-                                        }}
-                                    </p>
-                                    <v-textarea
-                                        outlined
-                                        v-model="
-                                            block.metadata.config.words[index]
-                                                .hint
-                                        "
-                                    ></v-textarea>
-                                </v-flex>
-                            </v-container>
-                        </v-layout>
-                    </v-container>
-                </draggable>
+                        </v-container>
+                    </template>
+                </SortableExpansionPanel>
             </v-container>
             <v-container class="pa-0">
                 <v-row justify="center" class="my-4">
@@ -122,7 +90,7 @@
                         <v-icon>mdi-plus</v-icon>
                         {{
                             $t(
-                                'plugin.games.components.settings.word_jumble.add'
+                                'windward.games.components.settings.word_jumble.add'
                             )
                         }}
                     </v-btn>
@@ -134,7 +102,7 @@
                     :counter="50"
                     :label="
                         $t(
-                            'plugin.games.components.settings.word_jumble.feedback_correct'
+                            'windward.games.components.settings.word_jumble.feedback_correct'
                         )
                     "
                     ref="title"
@@ -145,7 +113,7 @@
                     v-model="block.metadata.config.feedback_incorrect"
                     :label="
                         $t(
-                            'plugin.games.components.settings.word_jumble.feedback_incorrect'
+                            'windward.games.components.settings.word_jumble.feedback_incorrect'
                         )
                     "
                 ></v-textarea>
@@ -164,13 +132,13 @@
 <script>
 import _ from 'lodash'
 import BaseContentSettings from '~/components/Content/Tool/BaseContentSettings.js'
-import draggable from 'vuedraggable'
+import SortableExpansionPanel from '~/components/SortableExpansionPanel.vue'
 
 export default {
     name: 'WordJumbleSettings',
     extends: BaseContentSettings,
     components: {
-        draggable,
+        SortableExpansionPanel,
     },
     beforeMount() {
         if (_.isEmpty(this.block)) {
@@ -184,7 +152,7 @@ export default {
         }
         if (_.isEmpty(this.block.metadata.config.title)) {
             this.block.metadata.config.title = this.$t(
-                'plugin.games.components.content.blocks.word_jumble.title'
+                'windward.games.components.content.blocks.word_jumble.title'
             )
         }
         if (_.isEmpty(this.block.metadata.config.instructions)) {
@@ -192,12 +160,12 @@ export default {
         }
         if (_.isEmpty(this.block.metadata.config.feedback_correct)) {
             this.block.metadata.config.feedback_correct = this.$t(
-                'plugin.games.components.settings.bucket_game.form.feedback.correct_default'
+                'windward.games.components.settings.bucket_game.form.feedback.correct_default'
             )
         }
         if (_.isEmpty(this.block.metadata.config.feedback_incorrect)) {
             this.block.metadata.config.feedback_incorrect = this.$t(
-                'plugin.games.components.settings.bucket_game.form.feedback.incorrect_default'
+                'windward.games.components.settings.bucket_game.form.feedback.incorrect_default'
             )
         }
         if (_.isEmpty(this.block.metadata.config.words)) {
@@ -208,28 +176,43 @@ export default {
     data() {
         return {
             valid: true,
-            debounce: null,
-            cursor: null,
             loading: false,
         }
     },
     methods: {
-        bottomBorder(index) {
-            if (this.block.metadata.config.words[index].expand === true) {
-                return 'container-header-border'
-            } else {
-                return null
-            }
-        },
-        onAddWord() {
+        onBeforeSave() {
             this.block.metadata.config.words.forEach((element) => {
-                element.expand = false
+                element.shuffledWord = this.shuffle(element.value)
             })
+        },
+        shuffle(str) {
+            var a = str
+            var newArr = []
+            var neww = ''
+            var text = a.replace(/[\r\n]/g, '').split(' ')
+
+            text.map(function (v) {
+                v.split('').map(function () {
+                    var hash = Math.floor(Math.random() * v.length)
+                    neww += v[hash]
+                    v = v.replace(v.charAt(hash), '')
+                })
+                newArr.push(neww)
+                neww = ''
+            })
+            var x = newArr.map((v) => v.split('').join(' ')).join('\n')
+            str = x
+                .split('')
+                .map((v) => v.toUpperCase())
+                .join('')
+            return str
+        },
+        onAddWord() {
             let defaultWord = {
                 id: this.block.metadata.config.words.length + 1,
                 value: '',
                 hint: '',
-                expand: true,
+                shuffledWord: '',
             }
             this.block.metadata.config.words.push(defaultWord)
         },
@@ -241,22 +224,6 @@ export default {
                 return (element.id = startingIndex)
             })
         },
-        onOpenEditor(index) {
-            // expands editing area of clicked upon word jumble
-            this.block.metadata.config.words[index].expand =
-                !this.block.metadata.config.words[index].expand
-            this.block.metadata.config.words.forEach((element) => {
-                if (index + 1 !== element.id) {
-                    element.expand = false
-                }
-            })
-        },
-        onHover(index) {
-            this.cursor = 'change-pointer'
-        },
-        onHoverLeave() {
-            this.cursor = ''
-        },
     },
 }
 </script>
@@ -264,39 +231,6 @@ export default {
 .v-progress-circular {
     margin: 1rem;
 }
-.container-card-outline {
-    border: solid 1px var(--v-primary-base);
-    border-radius: 3px !important;
-    margin-bottom: 8px;
-}
-.container-header-border {
-    border-bottom: 1px solid var(--v-primary-base);
-}
-.change-pointer {
-    cursor: pointer !important;
-}
-.p-header {
-    height: 45px;
-    display: flex;
-    align-items: center;
-}
-.p-header:hover {
-    background-color: rgb(243, 243, 243);
-}
-.span-text-ellipsis {
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
-}
-.btn-header-delete {
-    border-left: 1px solid var(--v-primary-base);
-}
-.btn-header-delete:hover {
-    background-color: rgb(243, 243, 243);
-}
-.btn-delete-icon {
-    color: var(--v-primary-base);
-}
 .p-label {
     font-size: 16px;
     font-weight: 500;

package/i18n/en-US/components/content/blocks/bucket_game.ts

@@ -3,6 +3,7 @@ export default {
     completed: 'Completed!',
     name: 'Bucket Name',
     game_title: 'Bucket Game',
+    aria_title: 'Bucket Game Title',
     answers: 'Answers',
     cannot: 'Cannot drag when editing!',
     form: {

package/i18n/en-US/components/content/blocks/flashcard.ts

@@ -1,5 +1,8 @@
 export default {
+    title: 'FlashCards',
+    items: 'FlashCard Items',
     img_alt: 'card image',
+    flip_card: 'Click to flip card',
     click_to_show_front: 'Click to show Front',
     click_to_show_back: 'Click to show Back',
 }

package/i18n/en-US/components/content/blocks/word_jumble.ts

@@ -1,5 +1,7 @@
 export default {
     title: 'Word Jumble Game',
+    instructions:
+        'Unscramble the clue and type your answer into the empty spaces and select Check Answer.',
     clue: 'Clue: ',
     check: 'Check Answer',
     reveal: 'Reveal Answer',

package/i18n/en-US/components/settings/bucket_game.ts

@@ -10,8 +10,9 @@ export default {
             default: 'Default feedback',
             correct: 'feedback when correct',
             incorrect: 'feedback when incorrect',
-            correct_default: 'Correct!',
-            incorrect_default: 'That is incorrect.',
+            correct_default: 'That is correct.',
+            incorrect_default:
+                'That is incorrect. Try again or select reveal answer.',
         },
         image: {
             title: 'Flash Card Image File',

package/i18n/en-US/components/settings/flashcard.ts

@@ -1,6 +1,7 @@
 export default {
     form: {
         card: 'Card',
+        flip_card: 'Click to flip card',
         label: 'Card Label',
         card_content: 'Card Content',
         front: 'Front',