@windward/games 0.8.1 → 0.10.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +3 -0
- package/components/content/blocks/crosswordPuzzle/CrosswordPuzzle.vue +4 -24
- package/components/content/blocks/dragDrop/BucketGame.vue +139 -60
- package/components/content/blocks/flashcards/CardFace.vue +22 -57
- package/components/content/blocks/flashcards/Flashcard.vue +19 -16
- package/components/content/blocks/flashcards/FlashcardSlides.vue +13 -38
- package/components/content/blocks/matchingGame/MatchingGame.vue +3 -3
- package/components/content/blocks/multipleChoice/MultipleChoice.vue +18 -118
- package/components/content/blocks/sevenStrikes/SevenStikes.vue +158 -165
- package/components/content/blocks/slideshow/SlideShow.vue +49 -99
- package/components/content/blocks/wordJumble/WordJumble.vue +122 -129
- package/components/settings/BucketGameSettingsManager.vue +9 -0
- package/components/settings/FlashCardSlidesManager.vue +26 -91
- package/i18n/en-US/components/content/blocks/bucket_game.ts +1 -0
- package/i18n/en-US/components/content/blocks/multiple_choice.ts +0 -1
- package/i18n/en-US/shared/content_blocks.ts +1 -0
- package/i18n/es-ES/components/content/blocks/bucket_game.ts +1 -0
- package/i18n/es-ES/components/content/blocks/multiple_choice.ts +0 -1
- package/i18n/es-ES/shared/content_blocks.ts +1 -0
- package/i18n/sv-SE/components/content/blocks/bucket_game.ts +1 -0
- package/i18n/sv-SE/components/content/blocks/multiple_choice.ts +0 -1
- package/i18n/sv-SE/shared/content_blocks.ts +1 -0
- package/package.json +1 -1
- package/test/__mocks__/contentBlockMock.js +94 -0
- package/test/mocks.js +1 -0
- package/test/settings/BucketGameManager.spec.js +3 -3
|
@@ -16,7 +16,7 @@
|
|
|
16
16
|
<template>
|
|
17
17
|
<v-carousel
|
|
18
18
|
v-model="block.metadata.config.currentWord"
|
|
19
|
-
|
|
19
|
+
hide-delimiters
|
|
20
20
|
@change="onSlideChanged()"
|
|
21
21
|
>
|
|
22
22
|
<template #prev="{ on, attrs }">
|
|
@@ -49,110 +49,134 @@
|
|
|
49
49
|
v-for="(word, index) in block.metadata.config.words"
|
|
50
50
|
:key="index"
|
|
51
51
|
>
|
|
52
|
-
<v-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
>{{
|
|
56
|
-
$t(
|
|
57
|
-
'windward.games.components.content.blocks.word_jumble.clue'
|
|
58
|
-
)
|
|
59
|
-
}}
|
|
60
|
-
</span>
|
|
61
|
-
{{ word.hint }}
|
|
62
|
-
</p>
|
|
63
|
-
</v-row>
|
|
64
|
-
<v-row class="d-flex justify-center ma-2">
|
|
65
|
-
<p v-if="render" class="pa-3 mb-0 p-clue-jumble">
|
|
66
|
-
{{ word.shuffledWord }}
|
|
67
|
-
</p>
|
|
68
|
-
<p v-if="!render" class="pa-3 mb-0 p-clue-jumble">
|
|
69
|
-
{{ word.value }}
|
|
70
|
-
</p>
|
|
71
|
-
</v-row>
|
|
72
|
-
<v-container
|
|
73
|
-
v-if="showFeedback"
|
|
74
|
-
fluid
|
|
75
|
-
:key="'feedback'"
|
|
76
|
-
:class="feedbackStatus"
|
|
77
|
-
class="pa-0"
|
|
52
|
+
<v-sheet
|
|
53
|
+
height="90%"
|
|
54
|
+
class="fill-height d-flex flex-column"
|
|
78
55
|
>
|
|
79
|
-
<
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
56
|
+
<v-row class="d-flex justify-center ma-2">
|
|
57
|
+
<p class="pa-3 mb-0 p-clue-jumble">
|
|
58
|
+
<span class="span-bold"
|
|
59
|
+
>{{
|
|
60
|
+
$t(
|
|
61
|
+
'windward.games.components.content.blocks.word_jumble.clue'
|
|
62
|
+
)
|
|
63
|
+
}}
|
|
64
|
+
</span>
|
|
65
|
+
{{ word.hint }}
|
|
66
|
+
</p>
|
|
67
|
+
</v-row>
|
|
68
|
+
<v-row class="d-flex justify-center ma-2">
|
|
69
|
+
<p
|
|
70
|
+
v-if="render"
|
|
71
|
+
class="pa-3 mb-0 p-clue-jumble"
|
|
72
|
+
>
|
|
73
|
+
{{ word.shuffledWord }}
|
|
74
|
+
</p>
|
|
75
|
+
<p
|
|
76
|
+
v-if="!render"
|
|
77
|
+
class="pa-3 mb-0 p-clue-jumble"
|
|
78
|
+
>
|
|
79
|
+
{{ word.value }}
|
|
80
|
+
</p>
|
|
81
|
+
</v-row>
|
|
82
|
+
<v-container
|
|
83
|
+
v-if="showFeedback"
|
|
84
|
+
fluid
|
|
85
|
+
:key="'feedback'"
|
|
86
|
+
:class="feedbackStatus"
|
|
87
|
+
class="pa-0"
|
|
88
|
+
>
|
|
89
|
+
<br />
|
|
90
|
+
<v-row>
|
|
91
|
+
<v-col></v-col>
|
|
92
|
+
<v-col class="d-flex justify-center">{{
|
|
93
|
+
feedback
|
|
94
|
+
? feedback
|
|
95
|
+
: $t(
|
|
96
|
+
'windward.games.components.content.blocks.bucket_game.form.feedback.feedback_here'
|
|
97
|
+
)
|
|
98
|
+
}}</v-col>
|
|
99
|
+
<v-col class="d-flex justify-end pl-4">
|
|
100
|
+
<v-btn
|
|
101
|
+
v-if="
|
|
102
|
+
feedbackStatus ===
|
|
103
|
+
'container-feedback-success'
|
|
104
|
+
"
|
|
105
|
+
class="mr-5"
|
|
106
|
+
elevation="0"
|
|
107
|
+
color="success"
|
|
108
|
+
@click="onSlideChanged(true)"
|
|
109
|
+
>{{ $t('shared.forms.continue') }}
|
|
110
|
+
</v-btn>
|
|
111
|
+
<v-container
|
|
112
|
+
v-if="
|
|
113
|
+
feedbackStatus ===
|
|
114
|
+
'container-feedback-error'
|
|
115
|
+
"
|
|
116
|
+
class="d-flex justify-end"
|
|
117
|
+
@click="onHideFeedback"
|
|
118
|
+
><v-icon
|
|
119
|
+
class="icon--error"
|
|
120
|
+
color="error"
|
|
121
|
+
>mdi-close-circle</v-icon
|
|
122
|
+
>
|
|
123
|
+
</v-container>
|
|
124
|
+
</v-col>
|
|
125
|
+
</v-row>
|
|
126
|
+
<br />
|
|
127
|
+
</v-container>
|
|
128
|
+
<v-row class="justify-center mt-4">
|
|
129
|
+
<Jumble
|
|
130
|
+
:key="updateJumble"
|
|
131
|
+
:value="word"
|
|
132
|
+
:reveal="showAnswer"
|
|
133
|
+
:reset="resetValue"
|
|
134
|
+
@input="getResponse($event)"
|
|
135
|
+
></Jumble>
|
|
136
|
+
</v-row>
|
|
137
|
+
<v-row class="d-flex mt-8">
|
|
138
|
+
<v-col class="d-flex justify-end">
|
|
139
|
+
<v-btn
|
|
140
|
+
:disabled="disableButtons"
|
|
141
|
+
color="primary"
|
|
142
|
+
elevation="0"
|
|
143
|
+
@click="onCheckAnswer(word)"
|
|
144
|
+
>{{
|
|
145
|
+
$t(
|
|
146
|
+
'windward.games.components.content.blocks.word_jumble.check'
|
|
147
|
+
)
|
|
148
|
+
}}
|
|
149
|
+
</v-btn>
|
|
150
|
+
</v-col>
|
|
151
|
+
<v-col class="d-flex justify-start">
|
|
90
152
|
<v-btn
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
'container-feedback-success'
|
|
94
|
-
"
|
|
95
|
-
class="mr-5"
|
|
153
|
+
:disabled="disableButtons"
|
|
154
|
+
color="primary"
|
|
96
155
|
elevation="0"
|
|
97
|
-
|
|
98
|
-
@click="
|
|
99
|
-
>{{
|
|
156
|
+
outlined
|
|
157
|
+
@click="onRevealAnswer"
|
|
158
|
+
>{{
|
|
159
|
+
$t(
|
|
160
|
+
'windward.games.components.content.blocks.word_jumble.reveal'
|
|
161
|
+
)
|
|
162
|
+
}}
|
|
100
163
|
</v-btn>
|
|
101
|
-
<v-container
|
|
102
|
-
v-if="
|
|
103
|
-
feedbackStatus ===
|
|
104
|
-
'container-feedback-error'
|
|
105
|
-
"
|
|
106
|
-
class="d-flex justify-end"
|
|
107
|
-
@click="onHideFeedback"
|
|
108
|
-
><v-icon
|
|
109
|
-
class="icon--error"
|
|
110
|
-
color="error"
|
|
111
|
-
>mdi-close-circle</v-icon
|
|
112
|
-
>
|
|
113
|
-
</v-container>
|
|
114
164
|
</v-col>
|
|
115
165
|
</v-row>
|
|
116
|
-
|
|
166
|
+
</v-sheet>
|
|
167
|
+
<v-container>
|
|
168
|
+
<v-row class="d-flex justify-end align-end">
|
|
169
|
+
{{
|
|
170
|
+
$t(
|
|
171
|
+
'windward.games.shared.content_blocks.out_of',
|
|
172
|
+
[
|
|
173
|
+
index + 1,
|
|
174
|
+
block.metadata.config.words.length,
|
|
175
|
+
]
|
|
176
|
+
)
|
|
177
|
+
}}
|
|
178
|
+
</v-row>
|
|
117
179
|
</v-container>
|
|
118
|
-
<v-row class="justify-center mt-4">
|
|
119
|
-
<Jumble
|
|
120
|
-
:key="updateJumble"
|
|
121
|
-
:value="word"
|
|
122
|
-
:reveal="showAnswer"
|
|
123
|
-
:reset="resetValue"
|
|
124
|
-
@input="getResponse($event)"
|
|
125
|
-
></Jumble>
|
|
126
|
-
</v-row>
|
|
127
|
-
<v-row class="d-flex mt-8">
|
|
128
|
-
<v-col class="d-flex justify-end">
|
|
129
|
-
<v-btn
|
|
130
|
-
:disabled="disableButtons"
|
|
131
|
-
color="primary"
|
|
132
|
-
elevation="0"
|
|
133
|
-
@click="onCheckAnswer(word)"
|
|
134
|
-
>{{
|
|
135
|
-
$t(
|
|
136
|
-
'windward.games.components.content.blocks.word_jumble.check'
|
|
137
|
-
)
|
|
138
|
-
}}
|
|
139
|
-
</v-btn>
|
|
140
|
-
</v-col>
|
|
141
|
-
<v-col class="d-flex justify-start">
|
|
142
|
-
<v-btn
|
|
143
|
-
:disabled="disableButtons"
|
|
144
|
-
color="primary"
|
|
145
|
-
elevation="0"
|
|
146
|
-
outlined
|
|
147
|
-
@click="onRevealAnswer"
|
|
148
|
-
>{{
|
|
149
|
-
$t(
|
|
150
|
-
'windward.games.components.content.blocks.word_jumble.reveal'
|
|
151
|
-
)
|
|
152
|
-
}}
|
|
153
|
-
</v-btn>
|
|
154
|
-
</v-col>
|
|
155
|
-
</v-row>
|
|
156
180
|
</v-carousel-item>
|
|
157
181
|
</v-carousel>
|
|
158
182
|
</template>
|
|
@@ -222,37 +246,6 @@ export default {
|
|
|
222
246
|
shuffledWord: '',
|
|
223
247
|
}
|
|
224
248
|
},
|
|
225
|
-
computed: {
|
|
226
|
-
hideDeliminators() {
|
|
227
|
-
const condition1 =
|
|
228
|
-
window.innerWidth <= 1483 ||
|
|
229
|
-
this.block.metadata.config.words.length >= 13
|
|
230
|
-
const condition2 =
|
|
231
|
-
this.block.metadata.config.words.length >= 12 &&
|
|
232
|
-
window.innerWidth <= 1692
|
|
233
|
-
const condition3 =
|
|
234
|
-
this.block.metadata.config.words.length >= 11 &&
|
|
235
|
-
window.innerWidth <= 1634
|
|
236
|
-
const condition4 =
|
|
237
|
-
this.block.metadata.config.words.length >= 10 &&
|
|
238
|
-
window.innerWidth <= 1571
|
|
239
|
-
const condition5 =
|
|
240
|
-
this.block.metadata.config.words.length >= 9 &&
|
|
241
|
-
window.innerWidth <= 1518
|
|
242
|
-
|
|
243
|
-
if (
|
|
244
|
-
condition1 ||
|
|
245
|
-
condition2 ||
|
|
246
|
-
condition3 ||
|
|
247
|
-
condition4 ||
|
|
248
|
-
condition5
|
|
249
|
-
) {
|
|
250
|
-
return true
|
|
251
|
-
} else {
|
|
252
|
-
return false
|
|
253
|
-
}
|
|
254
|
-
},
|
|
255
|
-
},
|
|
256
249
|
watch: {
|
|
257
250
|
render(newValue) {
|
|
258
251
|
this.updateJumble = Crypto.id()
|
|
@@ -71,6 +71,7 @@
|
|
|
71
71
|
block.metadata.config.bucket_titles[index]
|
|
72
72
|
.title
|
|
73
73
|
"
|
|
74
|
+
:data-key="'bucket-' + index + '-title'"
|
|
74
75
|
:disabled="render"
|
|
75
76
|
></TextEditor>
|
|
76
77
|
</v-flex>
|
|
@@ -143,6 +144,13 @@
|
|
|
143
144
|
answerIndex
|
|
144
145
|
].display
|
|
145
146
|
"
|
|
147
|
+
:data-key="
|
|
148
|
+
'bucket-answer-' +
|
|
149
|
+
index +
|
|
150
|
+
'-' +
|
|
151
|
+
answerIndex +
|
|
152
|
+
'-display'
|
|
153
|
+
"
|
|
146
154
|
:disabled="render"
|
|
147
155
|
></TextEditor>
|
|
148
156
|
<p class="p-label mb-0">
|
|
@@ -354,6 +362,7 @@ export default {
|
|
|
354
362
|
title: '',
|
|
355
363
|
color: colors.blueGrey.lighten5,
|
|
356
364
|
expand: true,
|
|
365
|
+
nested_answers: [],
|
|
357
366
|
}
|
|
358
367
|
this.block.metadata.config.bucket_titles.push(emptyString)
|
|
359
368
|
},
|
|
@@ -145,6 +145,7 @@
|
|
|
145
145
|
block.metadata.config.cards[index].front
|
|
146
146
|
.text
|
|
147
147
|
"
|
|
148
|
+
:data-key="'flashcard-' + index + '-front'"
|
|
148
149
|
outlined
|
|
149
150
|
auto-grow
|
|
150
151
|
menubar="edit"
|
|
@@ -157,51 +158,17 @@
|
|
|
157
158
|
required
|
|
158
159
|
:disabled="render"
|
|
159
160
|
></TextEditor>
|
|
160
|
-
|
|
161
|
-
<ContentBlockAsset
|
|
161
|
+
<ImageAssetSettings
|
|
162
162
|
v-model="
|
|
163
163
|
block.metadata.config.cards[index].front
|
|
164
|
-
.
|
|
164
|
+
.fileConfig
|
|
165
165
|
"
|
|
166
|
-
mimes="image/png,image/jpeg"
|
|
167
|
-
outlined
|
|
168
166
|
:assets.sync="block.assets"
|
|
167
|
+
hide-background
|
|
168
|
+
hide-decorative
|
|
169
|
+
hide-modal
|
|
169
170
|
:disabled="render"
|
|
170
|
-
>
|
|
171
|
-
<template #title>
|
|
172
|
-
{{
|
|
173
|
-
$t(
|
|
174
|
-
'windward.games.shared.settings.file_picker.image'
|
|
175
|
-
)
|
|
176
|
-
}}
|
|
177
|
-
</template>
|
|
178
|
-
<template #description>
|
|
179
|
-
{{
|
|
180
|
-
$t(
|
|
181
|
-
'windward.games.components.settings.flashcard.form.image.configure_blurb'
|
|
182
|
-
)
|
|
183
|
-
}}
|
|
184
|
-
</template>
|
|
185
|
-
</ContentBlockAsset>
|
|
186
|
-
|
|
187
|
-
<v-text-field
|
|
188
|
-
v-model="
|
|
189
|
-
block.metadata.config.cards[index].front
|
|
190
|
-
.imageAlt
|
|
191
|
-
"
|
|
192
|
-
auto-grow
|
|
193
|
-
outlined
|
|
194
|
-
:label="$t('shared.accessibility.alt_text')"
|
|
195
|
-
required
|
|
196
|
-
:placeholder="
|
|
197
|
-
getImageAlt(
|
|
198
|
-
block.metadata.config.cards[index].front
|
|
199
|
-
.imageAsset
|
|
200
|
-
)
|
|
201
|
-
"
|
|
202
|
-
persistent-placeholder
|
|
203
|
-
:disabled="render"
|
|
204
|
-
></v-text-field>
|
|
171
|
+
></ImageAssetSettings>
|
|
205
172
|
</v-card>
|
|
206
173
|
|
|
207
174
|
<!-- The back card -->
|
|
@@ -221,6 +188,7 @@
|
|
|
221
188
|
block.metadata.config.cards[index].back
|
|
222
189
|
.text
|
|
223
190
|
"
|
|
191
|
+
:data-key="'flashcard-' + index + '-back'"
|
|
224
192
|
outlined
|
|
225
193
|
auto-grow
|
|
226
194
|
menubar="edit"
|
|
@@ -230,49 +198,16 @@
|
|
|
230
198
|
:disabled="render"
|
|
231
199
|
></TextEditor>
|
|
232
200
|
|
|
233
|
-
<
|
|
201
|
+
<ImageAssetSettings
|
|
234
202
|
v-model="
|
|
235
203
|
block.metadata.config.cards[index].back
|
|
236
|
-
.
|
|
204
|
+
.fileConfig
|
|
237
205
|
"
|
|
238
|
-
mimes="image/png,image/jpeg"
|
|
239
|
-
outlined
|
|
240
206
|
:assets.sync="block.assets"
|
|
241
|
-
|
|
242
|
-
|
|
243
|
-
|
|
244
|
-
|
|
245
|
-
$t(
|
|
246
|
-
'windward.games.shared.settings.file_picker.image'
|
|
247
|
-
)
|
|
248
|
-
}}
|
|
249
|
-
</template>
|
|
250
|
-
<template #description>
|
|
251
|
-
{{
|
|
252
|
-
$t(
|
|
253
|
-
'windward.games.components.settings.flashcard.form.image.configure_blurb'
|
|
254
|
-
)
|
|
255
|
-
}}
|
|
256
|
-
</template>
|
|
257
|
-
</ContentBlockAsset>
|
|
258
|
-
<v-text-field
|
|
259
|
-
v-model="
|
|
260
|
-
block.metadata.config.cards[index].back
|
|
261
|
-
.imageAlt
|
|
262
|
-
"
|
|
263
|
-
auto-grow
|
|
264
|
-
outlined
|
|
265
|
-
:label="$t('shared.accessibility.alt_text')"
|
|
266
|
-
required
|
|
267
|
-
:placeholder="
|
|
268
|
-
getImageAlt(
|
|
269
|
-
block.metadata.config.cards[index]
|
|
270
|
-
.back.imageAsset
|
|
271
|
-
)
|
|
272
|
-
"
|
|
273
|
-
persistent-placeholder
|
|
274
|
-
:disabled="render"
|
|
275
|
-
></v-text-field>
|
|
207
|
+
hide-background
|
|
208
|
+
hide-decorative
|
|
209
|
+
hide-modal
|
|
210
|
+
></ImageAssetSettings>
|
|
276
211
|
</v-card-text>
|
|
277
212
|
</v-card>
|
|
278
213
|
<v-row
|
|
@@ -356,6 +291,7 @@ import ContentBlockAsset from '~/components/Content/ContentBlockAsset.vue'
|
|
|
356
291
|
import TextEditor from '~/components/Text/TextEditor.vue'
|
|
357
292
|
import SortableExpansionPanel from '~/components/Core/SortableExpansionPanel.vue'
|
|
358
293
|
import Uuid from '~/helpers/Uuid'
|
|
294
|
+
import ImageAssetSettings from '~/components/Content/Settings/ImageAssetSettings.vue'
|
|
359
295
|
|
|
360
296
|
export default {
|
|
361
297
|
name: 'FlashCardSlidesManager',
|
|
@@ -367,6 +303,7 @@ export default {
|
|
|
367
303
|
ContentBlockAsset,
|
|
368
304
|
TextEditor,
|
|
369
305
|
SortableExpansionPanel,
|
|
306
|
+
ImageAssetSettings,
|
|
370
307
|
},
|
|
371
308
|
data() {
|
|
372
309
|
return {
|
|
@@ -407,16 +344,18 @@ export default {
|
|
|
407
344
|
defaultCard() {
|
|
408
345
|
return {
|
|
409
346
|
front: {
|
|
410
|
-
|
|
347
|
+
fileConfig: {
|
|
348
|
+
hideBackground: true,
|
|
349
|
+
},
|
|
411
350
|
header: '',
|
|
412
351
|
text: '',
|
|
413
|
-
imageAlt: '',
|
|
414
352
|
},
|
|
415
353
|
back: {
|
|
416
|
-
|
|
354
|
+
fileConfig: {
|
|
355
|
+
hideBackground: true,
|
|
356
|
+
},
|
|
417
357
|
header: '',
|
|
418
358
|
text: '',
|
|
419
|
-
imageAlt: '',
|
|
420
359
|
},
|
|
421
360
|
expand: false,
|
|
422
361
|
title: '',
|
|
@@ -437,20 +376,20 @@ export default {
|
|
|
437
376
|
for (const item of items) {
|
|
438
377
|
if (
|
|
439
378
|
Uuid.test(
|
|
440
|
-
_.get(item, 'item.front.
|
|
379
|
+
_.get(item, 'item.front.fileConfig.file_asset_id', null)
|
|
441
380
|
)
|
|
442
381
|
) {
|
|
443
382
|
assets.push(
|
|
444
|
-
_.get(item, 'item.front.
|
|
383
|
+
_.get(item, 'item.front.fileConfig.file_asset_id', null)
|
|
445
384
|
)
|
|
446
385
|
}
|
|
447
386
|
if (
|
|
448
387
|
Uuid.test(
|
|
449
|
-
_.get(item, 'item.back.
|
|
388
|
+
_.get(item, 'item.back.fileConfig.file_asset_id', null)
|
|
450
389
|
)
|
|
451
390
|
) {
|
|
452
391
|
assets.push(
|
|
453
|
-
_.get(item, 'item.back.
|
|
392
|
+
_.get(item, 'item.back.fileConfig.file_asset_id', null)
|
|
454
393
|
)
|
|
455
394
|
}
|
|
456
395
|
}
|
|
@@ -500,10 +439,6 @@ export default {
|
|
|
500
439
|
}
|
|
501
440
|
return htmlString.replace(/(<([^>]+)>)/gi, '')
|
|
502
441
|
},
|
|
503
|
-
getImageAlt(file) {
|
|
504
|
-
file = this.resolveAsset(file)
|
|
505
|
-
return _.get(file, 'asset.metadata.props.alt', '')
|
|
506
|
-
},
|
|
507
442
|
},
|
|
508
443
|
}
|
|
509
444
|
</script>
|