@windward/games 0.3.0 → 0.4.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 (36) 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 +2 -1
  4. package/components/content/blocks/dragDrop/BucketGame.vue +4 -3
  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 +76 -50
  10. package/components/content/blocks/multipleChoice/MultipleChoice.vue +5 -1
  11. package/components/content/blocks/multipleChoice/QuestionDialog.vue +2 -0
  12. package/components/content/blocks/quizshowGame/AnswerPanel.vue +1 -0
  13. package/components/content/blocks/quizshowGame/Gridview.vue +1 -0
  14. package/components/content/blocks/quizshowGame/QuizShow.vue +5 -2
  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 +7 -2
  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 +31 -0
  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/seven_strikes.ts +1 -1
  30. package/i18n/es-ES/components/content/blocks/slideshow.ts +0 -2
  31. package/i18n/es-ES/components/settings/seven_strikes.ts +1 -1
  32. package/i18n/sv-SE/components/content/blocks/slideshow.ts +0 -2
  33. package/i18n/sv-SE/components/settings/seven_strikes.ts +1 -1
  34. package/package.json +1 -1
  35. package/test/blocks/flashcards/CardFace.spec.js +2 -0
  36. package/test/blocks/flashcards/Flashcard.spec.js +1 -0
@@ -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>
@@ -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"
@@ -218,6 +220,15 @@
218
220
  'windward.games.components.content.blocks.matching_game.alt_image'
219
221
  )
220
222
  "
223
+ :placeholder="
224
+ getAriaDescribedBy(
225
+ block.metadata.config
226
+ .prompts[index][
227
+ indexPrompt
228
+ ].file
229
+ )
230
+ "
231
+ persistent-placeholder
221
232
  :disabled="render"
222
233
  ></v-text-field>
223
234
  <v-text-field
@@ -240,6 +251,15 @@
240
251
  'windward.games.components.content.blocks.matching_game.aria_described'
241
252
  )
242
253
  "
254
+ :placeholder="
255
+ getAlt(
256
+ block.metadata.config
257
+ .prompts[index][
258
+ indexPrompt
259
+ ].file
260
+ )
261
+ "
262
+ persistent-placeholder
243
263
  :disabled="render"
244
264
  ></v-text-field>
245
265
  <ContentBlockAsset
@@ -253,6 +273,7 @@
253
273
  indexPrompt
254
274
  ].file
255
275
  "
276
+ :assets.sync="block.assets"
256
277
  class="content-block-asset"
257
278
  mimes="image/png,image/jpeg"
258
279
  :disabled="render"
@@ -264,6 +285,7 @@
264
285
  <v-row justify="center" class="my-4">
265
286
  <v-btn
266
287
  color="primary"
288
+ elevation="0"
267
289
  :disabled="render"
268
290
  @click="onAddPrompt(index)"
269
291
  >
@@ -283,6 +305,7 @@
283
305
  <v-row justify="center" class="my-4">
284
306
  <v-btn
285
307
  color="primary"
308
+ elevation="0"
286
309
  :disabled="render"
287
310
  @click="onAddAnswer"
288
311
  >
@@ -526,6 +549,14 @@ export default {
526
549
  // holder array now has new answer positions
527
550
  this.block.metadata.config.prompts = holderArray
528
551
  },
552
+ getAriaDescribedBy(file) {
553
+ file = this.resolveAsset(file)
554
+ return _.get(file, 'asset.metadata.props.aria_describedby', '')
555
+ },
556
+ getAlt(file) {
557
+ file = this.resolveAsset(file)
558
+ return _.get(file, 'asset.metadata.props.alt', '')
559
+ },
529
560
  },
530
561
  }
531
562
  </script>
@@ -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
  >
@@ -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"
@@ -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
  >
@@ -83,12 +83,35 @@
83
83
  "
84
84
  :disabled="render"
85
85
  ></v-text-field>
86
- <v-text-field
86
+
87
+ <ContentBlockAsset
88
+ id="content-block-asset"
87
89
  v-model="
88
90
  block.metadata.config.slides[index]
89
- .image_alt
91
+ .imageAsset
92
+ "
93
+ :assets.sync="block.assets"
94
+ mimes="image/png,image/jpeg"
95
+ :disabled="render"
96
+ ></ContentBlockAsset>
97
+
98
+ <v-text-field
99
+ v-if="
100
+ block.metadata.config.slides[index]
101
+ .imageAsset
90
102
  "
103
+ v-model="
104
+ block.metadata.config.slides[index].imageAlt
105
+ "
106
+ class="mt-4"
91
107
  outlined
108
+ :placeholder="
109
+ getImageAlt(
110
+ block.metadata.config.slides[index]
111
+ .imageAsset
112
+ )
113
+ "
114
+ persistent-placeholder
92
115
  :label="
93
116
  $t(
94
117
  'windward.games.components.content.blocks.slideshow.slides.image_alt'
@@ -96,14 +119,6 @@
96
119
  "
97
120
  :disabled="render"
98
121
  ></v-text-field>
99
- <ContentBlockAsset
100
- id="content-block-asset"
101
- v-model="
102
- block.metadata.config.slides[index].image
103
- "
104
- mimes="image/png,image/jpeg"
105
- :disabled="render"
106
- ></ContentBlockAsset>
107
122
  </v-container>
108
123
  </template>
109
124
  </SortableExpansionPanel>
@@ -111,6 +126,7 @@
111
126
  <v-row justify="center" class="my-4">
112
127
  <v-btn
113
128
  color="primary"
129
+ elevation="0"
114
130
  :disabled="render"
115
131
  @click="onAddSlide"
116
132
  >
@@ -195,8 +211,8 @@ export default {
195
211
  id: this.block.metadata.config.slides.length + 1,
196
212
  header: '',
197
213
  description: '',
198
- image: null,
199
- image_alt: '',
214
+ imageAsset: null,
215
+ imageAlt: '',
200
216
  }
201
217
  this.block.metadata.config.slides.push(defaultSlide)
202
218
  this.block.metadata.config.currentSlide =
@@ -226,6 +242,10 @@ export default {
226
242
  this.block.metadata.config.currentSlide =
227
243
  this.block.metadata.config.slides.length - 1
228
244
  },
245
+ getImageAlt(file) {
246
+ file = this.resolveAsset(file)
247
+ return _.get(file, 'asset.metadata.props.alt', '')
248
+ },
229
249
  },
230
250
  }
231
251
  </script>
@@ -76,6 +76,7 @@
76
76
  <v-row justify="center" class="my-4">
77
77
  <v-btn
78
78
  color="primary"
79
+ elevation="0"
79
80
  :disabled="render"
80
81
  @click="onAddElement"
81
82
  >
@@ -94,6 +94,7 @@
94
94
  <v-row justify="center" class="my-4">
95
95
  <v-btn
96
96
  color="primary"
97
+ elevation="0"
97
98
  :disabled="render"
98
99
  @click="onAddWord"
99
100
  >
@@ -3,11 +3,9 @@ export default {
3
3
  slide: 'Slide {0}: {1}',
4
4
  slide_header: 'Slide header',
5
5
  slide_description: 'Slide description',
6
- image_alt: 'Enter text here if not uploading image',
6
+ image_alt: 'Image Alt Text',
7
7
  },
8
8
  add_slide: 'Add Slide',
9
9
  amount_of_slides: 'Amount of slides',
10
10
  slideshow_title: 'Slideshow title',
11
- basic_instructions:
12
- "Click on the 'next' and 'previous' buttons to move through the slideshow.",
13
11
  }
@@ -1,7 +1,7 @@
1
1
  export default {
2
2
  title: 'Seven Strikes',
3
3
  instructions:
4
- 'Read the clue below, and click on the letters to spell out the word the clue refers to. If you choose a letter that isnt in the word, an X will be illuminated. When you choose an incorrect letter 7 times, the game is over.Open a text-only version of this vocabulary game in a new windowSkip this vocabulary game',
4
+ 'Read the clue below, and click on the letters to spell out the word the clue refers to. If you choose a letter that isnt in the word, an X will be illuminated. When you choose an incorrect letter 7 times, the game is over.',
5
5
  word: 'Word or Phrase',
6
6
  hint: 'Clue',
7
7
  items: 'Seven Strikes Items',
@@ -8,6 +8,4 @@ export default {
8
8
  add_slide: 'Agregar diapositiva',
9
9
  amount_of_slides: 'Cantidad de diapositivas',
10
10
  slideshow_title: 'Título de la presentación de diapositivas',
11
- basic_instructions:
12
- "Haga clic en los botones 'siguiente' y 'anterior' para moverse por la presentación de diapositivas.",
13
11
  }
@@ -1,7 +1,7 @@
1
1
  export default {
2
2
  title: 'Siete golpes',
3
3
  instructions:
4
- 'Lea las pistas y haga clic en las letras para deletrear la palabra a la que se refiere. Si elige una letra que no está en la palabra, se iluminará una X. El juego se acaba si elijes una letra incorrecta 7 veces. Puedes tambien elejir la versión del juego en formato accesible.',
4
+ 'Lea las pistas y haga clic en las letras para deletrear la palabra a la que se refiere. Si elige una letra que no está en la palabra, se iluminará una X. El juego se acaba si elijes una letra incorrecta 7 veces.',
5
5
  word: 'Palabra o frase',
6
6
  hint: 'Pista',
7
7
  items: 'Elementos del juego',