@windward/games 0.3.0 → 0.5.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.
Files changed (39) hide show
  1. package/components/content/CrudTable.vue +8 -4
  2. package/components/content/DatableEditor.vue +1 -0
  3. package/components/content/blocks/crosswordPuzzle/CrosswordPuzzle.vue +3 -2
  4. package/components/content/blocks/dragDrop/BucketGame.vue +9 -4
  5. package/components/content/blocks/dragDrop/SortingGame.vue +2 -1
  6. package/components/content/blocks/flashcards/CardFace.vue +48 -9
  7. package/components/content/blocks/flashcards/Flashcard.vue +26 -17
  8. package/components/content/blocks/flashcards/FlashcardSlides.vue +10 -5
  9. package/components/content/blocks/matchingGame/MatchingGame.vue +327 -304
  10. package/components/content/blocks/multipleChoice/MultipleChoice.vue +6 -2
  11. package/components/content/blocks/multipleChoice/QuestionDialog.vue +2 -0
  12. package/components/content/blocks/quizshowGame/AnswerPanel.vue +3 -1
  13. package/components/content/blocks/quizshowGame/Gridview.vue +1 -0
  14. package/components/content/blocks/quizshowGame/QuizShow.vue +6 -3
  15. package/components/content/blocks/sevenStrikes/SevenStikes.vue +8 -2
  16. package/components/content/blocks/slideshow/SlideShow.vue +31 -22
  17. package/components/content/blocks/wordJumble/WordJumble.vue +8 -3
  18. package/components/settings/BucketGameSettingsManager.vue +5 -1
  19. package/components/settings/CrosswordPuzzleSettingsManager.vue +1 -0
  20. package/components/settings/FlashCardSlidesManager.vue +165 -107
  21. package/components/settings/MatchingGameManager.vue +57 -27
  22. package/components/settings/MultipleChoiceSettingsManager.vue +1 -0
  23. package/components/settings/QuizShowSettingsManager.vue +3 -0
  24. package/components/settings/SevenStrikesSettingsManager.vue +1 -0
  25. package/components/settings/SlideShowManager.vue +32 -12
  26. package/components/settings/SortingGameSettingsManager.vue +1 -0
  27. package/components/settings/WordJumbleSettingsManager.vue +1 -0
  28. package/i18n/en-US/components/content/blocks/slideshow.ts +1 -3
  29. package/i18n/en-US/components/settings/matching_game.ts +4 -0
  30. package/i18n/en-US/components/settings/seven_strikes.ts +1 -1
  31. package/i18n/es-ES/components/content/blocks/slideshow.ts +0 -2
  32. package/i18n/es-ES/components/settings/matching_game.ts +4 -0
  33. package/i18n/es-ES/components/settings/seven_strikes.ts +1 -1
  34. package/i18n/sv-SE/components/content/blocks/slideshow.ts +0 -2
  35. package/i18n/sv-SE/components/settings/matching_game.ts +4 -0
  36. package/i18n/sv-SE/components/settings/seven_strikes.ts +1 -1
  37. package/package.json +1 -1
  38. package/test/blocks/flashcards/CardFace.spec.js +2 -0
  39. package/test/blocks/flashcards/Flashcard.spec.js +1 -0
package/components/settings/FlashCardSlidesManager.vue CHANGED
@@ -82,6 +82,7 @@
82
82
  >
83
83
  <v-btn
84
84
  :value="true"
85
+ elevation="0"
85
86
  :outlined="
86
87
  !block.metadata.config.cards[index]
87
88
  .side
@@ -94,6 +95,7 @@
94
95
  }}</v-btn
95
96
  ><v-btn
96
97
  :value="false"
98
+ elevation="0"
97
99
  :outlined="
98
100
  block.metadata.config.cards[index]
99
101
  .side
@@ -131,6 +133,7 @@
131
133
  required
132
134
  :disabled="render"
133
135
  />
136
+ <!-- The front card -->
134
137
  <v-card
135
138
  elevation="0"
136
139
  v-show="
@@ -161,118 +164,135 @@
161
164
  required
162
165
  :disabled="render"
163
166
  ></TextEditor>
164
- </v-card>
165
- <v-card
166
- outlined
167
- v-show="
168
- !block.metadata.config.cards[index].side
169
- "
170
- >
171
- <v-card-text>
172
- {{
173
- $t(
174
- 'windward.games.components.settings.flashcard.form.card_content'
175
- )
176
- }}
177
- </v-card-text>
178
- <TextEditor
167
+
168
+ <ContentBlockAsset
179
169
  v-model="
180
170
  block.metadata.config.cards[index]
181
- .back.text
171
+ .front.imageAsset
172
+ "
173
+ mimes="image/png,image/jpeg"
174
+ :assets.sync="block.assets"
175
+ :disabled="render"
176
+ >
177
+ <template #title>
178
+ {{
179
+ $t(
180
+ 'windward.games.components.settings.flashcard.form.image.title'
181
+ )
182
+ }}
183
+ </template>
184
+ <template #description>
185
+ {{
186
+ $t(
187
+ 'windward.games.components.settings.flashcard.form.image.configure_blurb'
188
+ )
189
+ }}
190
+ </template>
191
+ </ContentBlockAsset>
192
+
193
+ <v-text-field
194
+ v-model="
195
+ block.metadata.config.cards[index]
196
+ .front.imageAlt
182
197
  "
183
- outlined
184
198
  auto-grow
185
- menubar="edit"
186
- toolbar="undo redo | italic underline strikethrough removeformat | mathButton"
187
- label="Text"
199
+ outlined
200
+ :label="
201
+ $t('shared.accessibility.alt_text')
202
+ "
188
203
  required
204
+ :placeholder="
205
+ getImageAlt(
206
+ block.metadata.config.cards[
207
+ index
208
+ ].front.imageAsset
209
+ )
210
+ "
211
+ persistent-placeholder
189
212
  :disabled="render"
190
- ></TextEditor>
213
+ ></v-text-field>
191
214
  </v-card>
192
- <br />
193
- <ContentBlockAsset
194
- v-show="
195
- block.metadata.config.cards[index].side
196
- "
197
- v-model="
198
- block.metadata.config.cards[index].front
199
- .img
200
- "
201
- mimes="image/png,image/jpeg"
202
- :disabled="render"
203
- @click:file="onImageSelect"
204
- >
205
- <template #title>
206
- {{
207
- $t(
208
- 'windward.games.components.settings.flashcard.form.image.title'
209
- )
210
- }}
211
- </template>
212
- <template #description>
213
- {{
214
- $t(
215
- 'windward.games.components.settings.flashcard.form.image.configure_blurb'
216
- )
217
- }}
218
- </template>
219
- </ContentBlockAsset>
220
- <ContentBlockAsset
215
+
216
+ <!-- The back card -->
217
+ <v-card
218
+ outlined
221
219
  v-show="
222
220
  !block.metadata.config.cards[index].side
223
221
  "
224
- v-model="
225
- block.metadata.config.cards[index].back
226
- .img
227
- "
228
- mimes="image/png,image/jpeg"
229
- :disabled="render"
230
- @click:file="onImageSelect"
231
222
  >
232
- <template #title>
233
- {{
234
- $t(
235
- 'windward.games.components.settings.flashcard.form.image.title'
236
- )
237
- }}
238
- </template>
239
- <template #description>
223
+ <v-card-text>
240
224
  {{
241
225
  $t(
242
- 'windward.games.components.settings.flashcard.form.image.configure_blurb'
226
+ 'windward.games.components.settings.flashcard.form.card_content'
243
227
  )
244
228
  }}
245
- </template>
246
- </ContentBlockAsset>
247
- <br />
248
- <v-textarea
249
- auto-grow
250
- v-show="
251
- block.metadata.config.cards[index].side
252
- "
253
- v-model="
254
- block.metadata.config.cards[index].front
255
- .altText
256
- "
257
- outlined
258
- :label="$t('shared.accessibility.alt_text')"
259
- required
260
- :disabled="render"
261
- ></v-textarea>
262
- <v-textarea
263
- auto-grow
264
- v-show="
265
- !block.metadata.config.cards[index].side
266
- "
267
- outlined
268
- v-model="
269
- block.metadata.config.cards[index].back
270
- .altText
271
- "
272
- :label="$t('shared.accessibility.alt_text')"
273
- required
274
- :disabled="render"
275
- ></v-textarea>
229
+
230
+ <TextEditor
231
+ v-model="
232
+ block.metadata.config.cards[
233
+ index
234
+ ].back.text
235
+ "
236
+ outlined
237
+ auto-grow
238
+ menubar="edit"
239
+ toolbar="undo redo | italic underline strikethrough removeformat | mathButton"
240
+ label="Text"
241
+ required
242
+ :disabled="render"
243
+ ></TextEditor>
244
+
245
+ <ContentBlockAsset
246
+ v-model="
247
+ block.metadata.config.cards[
248
+ index
249
+ ].back.imageAsset
250
+ "
251
+ mimes="image/png,image/jpeg"
252
+ :assets.sync="block.assets"
253
+ :disabled="render"
254
+ >
255
+ <template #title>
256
+ {{
257
+ $t(
258
+ 'windward.games.components.settings.flashcard.form.image.title'
259
+ )
260
+ }}
261
+ </template>
262
+ <template #description>
263
+ {{
264
+ $t(
265
+ 'windward.games.components.settings.flashcard.form.image.configure_blurb'
266
+ )
267
+ }}
268
+ </template>
269
+ </ContentBlockAsset>
270
+ <v-text-field
271
+ v-model="
272
+ block.metadata.config.cards[
273
+ index
274
+ ].back.imageAlt
275
+ "
276
+ auto-grow
277
+ outlined
278
+ :label="
279
+ $t(
280
+ 'shared.accessibility.alt_text'
281
+ )
282
+ "
283
+ required
284
+ :placeholder="
285
+ getImageAlt(
286
+ block.metadata.config.cards[
287
+ index
288
+ ].back.imageAsset
289
+ )
290
+ "
291
+ persistent-placeholder
292
+ :disabled="render"
293
+ ></v-text-field>
294
+ </v-card-text>
295
+ </v-card>
276
296
  <v-row
277
297
  class="d-flex justify-space-around pt-8"
278
298
  align="center"
@@ -286,6 +306,7 @@
286
306
  >
287
307
  <v-btn
288
308
  :value="true"
309
+ elevation="0"
289
310
  :outlined="
290
311
  !block.metadata.config.cards[
291
312
  index
@@ -298,6 +319,7 @@
298
319
  }}</v-btn
299
320
  ><v-btn
300
321
  :value="false"
322
+ elevation="0"
301
323
  :outlined="
302
324
  block.metadata.config.cards[
303
325
  index
@@ -322,6 +344,7 @@
322
344
  <v-row justify="center" class="my-4">
323
345
  <v-btn
324
346
  color="primary"
347
+ elevation="0"
325
348
  :disabled="render"
326
349
  @click="onAddCard"
327
350
  >
@@ -357,6 +380,7 @@ import BaseContentSettings from '~/components/Content/Settings/BaseContentSettin
357
380
  import ContentBlockAsset from '~/components/Content/ContentBlockAsset.vue'
358
381
  import TextEditor from '~/components/Text/TextEditor.vue'
359
382
  import SortableExpansionPanel from '~/components/Core/SortableExpansionPanel.vue'
383
+ import Uuid from '~/helpers/Uuid'
360
384
 
361
385
  export default {
362
386
  name: 'FlashCardSlidesManager',
@@ -402,18 +426,18 @@ export default {
402
426
  defaultCard() {
403
427
  return {
404
428
  front: {
405
- img: {},
429
+ imageAsset: null,
406
430
  header: '',
407
431
  text: '',
408
- imgAltText: '',
432
+ imageAlt: '',
409
433
  },
410
434
  back: {
411
- img: {},
435
+ imageAsset: null,
412
436
  header: this.$t(
413
437
  'windward.games.components.settings.flashcard.form.header'
414
438
  ),
415
439
  text: '',
416
- imgAltText: '',
440
+ imageAlt: '',
417
441
  },
418
442
  expand: false,
419
443
  title: '',
@@ -422,10 +446,41 @@ export default {
422
446
  },
423
447
  },
424
448
  methods: {
425
- onBeforeSave() {
449
+ async onBeforeSave() {
426
450
  this.block.metadata.config.cards.forEach((element) => {
427
451
  element.side = true
428
452
  })
453
+
454
+ // Compile all the actual used assets together
455
+ const assets = []
456
+ const items = _.get(this.block, 'metadata.config.cards', [])
457
+
458
+ for (const item of items) {
459
+ if (
460
+ Uuid.test(
461
+ _.get(item, 'item.front.imageAsset.file_asset_id', null)
462
+ )
463
+ ) {
464
+ assets.push(
465
+ _.get(item, 'item.front.imageAsset.file_asset_id', null)
466
+ )
467
+ }
468
+ if (
469
+ Uuid.test(
470
+ _.get(item, 'item.back.imageAsset.file_asset_id', null)
471
+ )
472
+ ) {
473
+ assets.push(
474
+ _.get(item, 'item.back.imageAsset.file_asset_id', null)
475
+ )
476
+ }
477
+ }
478
+
479
+ const uniqueAssets = _.uniq(assets).map(function (assetId) {
480
+ return { file_asset_id: assetId }
481
+ })
482
+
483
+ await this.$set(this.block, 'assets', uniqueAssets)
429
484
  },
430
485
  onAddCard() {
431
486
  this.block.metadata.config.cards.forEach((element) => {
@@ -453,11 +508,6 @@ export default {
453
508
  ],
454
509
  })
455
510
  },
456
- onImageSelect(img) {
457
- let currentSlide = this.block.metadata.config.currentSlide
458
- this.block.metadata.config.cards[currentSlide].img = img
459
- //this.face.img = img
460
- },
461
511
  flipCardFront(index) {
462
512
  this.block.metadata.config.cards[index].side = true
463
513
  },
@@ -465,8 +515,16 @@ export default {
465
515
  this.block.metadata.config.cards[index].side = false
466
516
  },
467
517
  stripHtml(htmlString) {
518
+ // Convert nulls to empty strings so the below replace doesn't fail
519
+ if (!htmlString) {
520
+ htmlString = ''
521
+ }
468
522
  return htmlString.replace(/(<([^>]+)>)/gi, '')
469
523
  },
524
+ getImageAlt(file) {
525
+ file = this.resolveAsset(file)
526
+ return _.get(file, 'asset.metadata.props.alt', '')
527
+ },
470
528
  },
471
529
  }
472
530
  </script>
package/components/settings/MatchingGameManager.vue CHANGED
@@ -154,6 +154,7 @@
154
154
  >
155
155
  <v-btn
156
156
  text
157
+ elevation="0"
157
158
  class="pa-0 mr-2 btn-text-file-toggle"
158
159
  value="text"
159
160
  :disabled="render"
@@ -163,6 +164,7 @@
163
164
  >
164
165
  <v-btn
165
166
  text
167
+ elevation="0"
166
168
  class="pa-0 btn-text-file-toggle"
167
169
  value="image"
168
170
  :disabled="render"
@@ -186,6 +188,11 @@
186
188
  indexPrompt
187
189
  ].prompt
188
190
  "
191
+ :label="
192
+ $t(
193
+ 'windward.games.components.settings.matching_game.form.prompt_body'
194
+ )
195
+ "
189
196
  outlined
190
197
  :autofocus="true"
191
198
  :disabled="render"
@@ -218,6 +225,15 @@
218
225
  'windward.games.components.content.blocks.matching_game.alt_image'
219
226
  )
220
227
  "
228
+ :placeholder="
229
+ getAriaDescribedBy(
230
+ block.metadata.config
231
+ .prompts[index][
232
+ indexPrompt
233
+ ].file
234
+ )
235
+ "
236
+ persistent-placeholder
221
237
  :disabled="render"
222
238
  ></v-text-field>
223
239
  <v-text-field
@@ -240,6 +256,15 @@
240
256
  'windward.games.components.content.blocks.matching_game.aria_described'
241
257
  )
242
258
  "
259
+ :placeholder="
260
+ getAlt(
261
+ block.metadata.config
262
+ .prompts[index][
263
+ indexPrompt
264
+ ].file
265
+ )
266
+ "
267
+ persistent-placeholder
243
268
  :disabled="render"
244
269
  ></v-text-field>
245
270
  <ContentBlockAsset
@@ -253,17 +278,35 @@
253
278
  indexPrompt
254
279
  ].file
255
280
  "
281
+ :assets.sync="block.assets"
256
282
  class="content-block-asset"
257
283
  mimes="image/png,image/jpeg"
258
284
  :disabled="render"
259
285
  ></ContentBlockAsset>
260
286
  </v-container>
287
+ <v-container class="pa-0">
288
+ <v-text-field
289
+ v-model="
290
+ block.metadata.config
291
+ .prompts[index][
292
+ indexPrompt
293
+ ].matchExplanation
294
+ "
295
+ :label="
296
+ $t(
297
+ 'windward.games.components.settings.matching_game.form.correct_match_label'
298
+ )
299
+ "
300
+ outlined
301
+ ></v-text-field>
302
+ </v-container>
261
303
  </v-container>
262
304
  </template>
263
305
  </SortableExpansionPanel>
264
306
  <v-row justify="center" class="my-4">
265
307
  <v-btn
266
308
  color="primary"
309
+ elevation="0"
267
310
  :disabled="render"
268
311
  @click="onAddPrompt(index)"
269
312
  >
@@ -283,6 +326,7 @@
283
326
  <v-row justify="center" class="my-4">
284
327
  <v-btn
285
328
  color="primary"
329
+ elevation="0"
286
330
  :disabled="render"
287
331
  @click="onAddAnswer"
288
332
  >
@@ -294,31 +338,6 @@
294
338
  }}
295
339
  </v-btn>
296
340
  </v-row>
297
- <v-textarea
298
- v-model="block.metadata.config.feedback_correct"
299
- class="mt-2"
300
- outlined
301
- auto-grow
302
- :counter="255"
303
- :label="
304
- $t(
305
- 'windward.games.components.settings.matching_game.form.feedback.correct'
306
- )
307
- "
308
- :disabled="render"
309
- ></v-textarea>
310
- <v-textarea
311
- v-model="block.metadata.config.feedback_incorrect"
312
- outlined
313
- auto-grow
314
- :counter="255"
315
- :label="
316
- $t(
317
- 'windward.games.components.settings.matching_game.form.feedback.incorrect'
318
- )
319
- "
320
- :disabled="render"
321
- ></v-textarea>
322
341
  </v-container>
323
342
  </v-form>
324
343
  <div v-if="loading" class="text-center">
@@ -366,12 +385,12 @@ export default {
366
385
  }
367
386
  if (_.isEmpty(this.block.metadata.config.feedback_correct)) {
368
387
  this.block.metadata.config.feedback_correct = this.$t(
369
- 'windward.games.components.settings.bucket_game.form.feedback.correct_default'
388
+ 'windward.games.components.settings.matching_game.form.correct_match'
370
389
  )
371
390
  }
372
391
  if (_.isEmpty(this.block.metadata.config.feedback_incorrect)) {
373
392
  this.block.metadata.config.feedback_incorrect = this.$t(
374
- 'windward.games.components.settings.bucket_game.form.feedback.incorrect_default'
393
+ 'windward.games.components.settings.matching_game.form.incorrect_match'
375
394
  )
376
395
  }
377
396
  if (_.isEmpty(this.block.metadata.config.answerObjects)) {
@@ -404,6 +423,9 @@ export default {
404
423
  id: index,
405
424
  textOrImage: 'text',
406
425
  prompt: '',
426
+ matchExplanation: this.$t(
427
+ 'windward.games.components.settings.matching_game.form.correct_match'
428
+ ),
407
429
  file: null,
408
430
  altText: '',
409
431
  ariaDescribedBy: '',
@@ -526,6 +548,14 @@ export default {
526
548
  // holder array now has new answer positions
527
549
  this.block.metadata.config.prompts = holderArray
528
550
  },
551
+ getAriaDescribedBy(file) {
552
+ file = this.resolveAsset(file)
553
+ return _.get(file, 'asset.metadata.props.aria_describedby', '')
554
+ },
555
+ getAlt(file) {
556
+ file = this.resolveAsset(file)
557
+ return _.get(file, 'asset.metadata.props.alt', '')
558
+ },
529
559
  },
530
560
  }
531
561
  </script>
package/components/settings/MultipleChoiceSettingsManager.vue CHANGED
@@ -58,6 +58,7 @@
58
58
  <v-row justify="center" class="my-4">
59
59
  <v-btn
60
60
  color="primary"
61
+ elevation="0"
61
62
  :disabled="render"
62
63
  @click="onOpenModal"
63
64
  >
package/components/settings/QuizShowSettingsManager.vue CHANGED
@@ -67,6 +67,7 @@
67
67
  v-for="index in Number(
68
68
  block.metadata.config.maxCategories
69
69
  )"
70
+ :key="'maxcategories-row-' + index"
70
71
  >
71
72
  <v-text-field
72
73
  :key="'cat' + index"
@@ -105,6 +106,7 @@
105
106
  .maxCategories
106
107
  ) < 6
107
108
  "
109
+ elevation="0"
108
110
  color="primary"
109
111
  class="text-capitalize clickable"
110
112
  :disabled="render"
@@ -184,6 +186,7 @@
184
186
  .maxRows
185
187
  ) < 6
186
188
  "
189
+ elevation="0"
187
190
  class="text-capitalize clickable"
188
191
  color="primary"
189
192
  :disabled="render"
package/components/settings/SevenStrikesSettingsManager.vue CHANGED
@@ -93,6 +93,7 @@
93
93
  <v-row justify="center" class="my-4">
94
94
  <v-btn
95
95
  color="primary"
96
+ elevation="0"
96
97
  :disabled="render"
97
98
  @click="onAddElement"
98
99
  >