@windward/games 0.2.2 → 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 (41) 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 +37 -28
  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 +13 -9
  11. package/components/content/blocks/multipleChoice/QuestionDialog.vue +27 -13
  12. package/components/content/blocks/quizshowGame/AnswerPanel.vue +2 -1
  13. package/components/content/blocks/quizshowGame/Gridview.vue +2 -1
  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 +8 -2
  18. package/components/settings/BucketGameSettingsManager.vue +25 -5
  19. package/components/settings/CrosswordPuzzleSettingsManager.vue +20 -10
  20. package/components/settings/FlashCardSlidesManager.vue +194 -115
  21. package/components/settings/MatchingGameManager.vue +57 -8
  22. package/components/settings/MultipleChoiceSettingsManager.vue +33 -77
  23. package/components/settings/QuizShowSettingsManager.vue +22 -11
  24. package/components/settings/SevenStrikesSettingsManager.vue +17 -5
  25. package/components/settings/SlideShowManager.vue +46 -15
  26. package/components/settings/SortingGameSettingsManager.vue +19 -8
  27. package/components/settings/WordJumbleSettingsManager.vue +22 -10
  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/jest.config.js +0 -1
  35. package/package.json +2 -2
  36. package/test/__mocks__/componentsMock.js +3 -1
  37. package/test/__mocks__/modelMock.js +13 -84
  38. package/test/blocks/flashcards/CardFace.spec.js +2 -0
  39. package/test/blocks/flashcards/Flashcard.spec.js +1 -0
  40. package/test/blocks/multipleChoice/MultipleChoice.spec.js +1 -1
  41. package/test/settings/WordJumbleManager.spec.js +3 -0
package/components/settings/FlashCardSlidesManager.vue CHANGED
@@ -3,6 +3,7 @@
3
3
  <v-form ref="outer-form" v-model="valid" v-if="!loading">
4
4
  <v-container class="pa-0">
5
5
  <v-text-field
6
+ ref="title"
6
7
  v-model="block.metadata.config.title"
7
8
  outlined
8
9
  :counter="50"
@@ -11,17 +12,18 @@
11
12
  'windward.games.components.settings.bucket_game.form.title'
12
13
  )
13
14
  "
14
- ref="title"
15
+ :disabled="render"
15
16
  ></v-text-field>
16
17
  <v-textarea
18
+ v-model="block.metadata.config.instructions"
17
19
  outlined
18
20
  auto-grow
19
- v-model="block.metadata.config.instructions"
20
21
  :label="
21
22
  $t(
22
23
  'windward.games.components.settings.bucket_game.form.instructions'
23
24
  )
24
25
  "
26
+ :disabled="render"
25
27
  ></v-textarea>
26
28
  </v-container>
27
29
  <v-divider class="my-4 primary"></v-divider>
@@ -35,10 +37,11 @@
35
37
  </p>
36
38
  <SortableExpansionPanel
37
39
  v-model="block.metadata.config.cards"
38
- @click:close="onDelete($event)"
39
40
  v-bind:currentPanel.sync="
40
41
  block.metadata.config.currentSlide
41
42
  "
43
+ :disabled="render"
44
+ @click:close="onDelete($event)"
42
45
  >
43
46
  <template #header="{ item, index }">
44
47
  {{
@@ -79,10 +82,12 @@
79
82
  >
80
83
  <v-btn
81
84
  :value="true"
85
+ elevation="0"
82
86
  :outlined="
83
87
  !block.metadata.config.cards[index]
84
88
  .side
85
89
  "
90
+ :disabled="render"
86
91
  >{{
87
92
  $t(
88
93
  'windward.games.components.settings.flashcard.form.front'
@@ -90,10 +95,12 @@
90
95
  }}</v-btn
91
96
  ><v-btn
92
97
  :value="false"
98
+ elevation="0"
93
99
  :outlined="
94
100
  block.metadata.config.cards[index]
95
101
  .side
96
102
  "
103
+ :disabled="render"
97
104
  >
98
105
  {{
99
106
  $t(
@@ -111,12 +118,12 @@
111
118
  v-if="
112
119
  !block.metadata.config.cards[index].side
113
120
  "
114
- outlined
115
- auto-grow
116
121
  v-model="
117
122
  block.metadata.config.cards[index].back
118
123
  .header
119
124
  "
125
+ outlined
126
+ auto-grow
120
127
  :counter="255"
121
128
  :label="
122
129
  $t(
@@ -124,7 +131,9 @@
124
131
  )
125
132
  "
126
133
  required
134
+ :disabled="render"
127
135
  />
136
+ <!-- The front card -->
128
137
  <v-card
129
138
  elevation="0"
130
139
  v-show="
@@ -138,23 +147,73 @@
138
147
  )
139
148
  }}
140
149
  </v-card-title>
141
- <textEditor
142
- outlined
143
- auto-grow
144
- menubar="edit"
145
- toolbar="undo redo | italic underline strikethrough removeformat | mathButton"
150
+ <TextEditor
146
151
  v-model="
147
152
  block.metadata.config.cards[index]
148
153
  .front.text
149
154
  "
155
+ outlined
156
+ auto-grow
157
+ menubar="edit"
158
+ toolbar="undo redo | italic underline strikethrough removeformat | mathButton"
150
159
  :label="
151
160
  $t(
152
161
  'windward.games.components.settings.flashcard.form.text'
153
162
  )
154
163
  "
155
164
  required
156
- />
165
+ :disabled="render"
166
+ ></TextEditor>
167
+
168
+ <ContentBlockAsset
169
+ v-model="
170
+ block.metadata.config.cards[index]
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
197
+ "
198
+ auto-grow
199
+ outlined
200
+ :label="
201
+ $t('shared.accessibility.alt_text')
202
+ "
203
+ required
204
+ :placeholder="
205
+ getImageAlt(
206
+ block.metadata.config.cards[
207
+ index
208
+ ].front.imageAsset
209
+ )
210
+ "
211
+ persistent-placeholder
212
+ :disabled="render"
213
+ ></v-text-field>
157
214
  </v-card>
215
+
216
+ <!-- The back card -->
158
217
  <v-card
159
218
  outlined
160
219
  v-show="
@@ -167,100 +226,73 @@
167
226
  'windward.games.components.settings.flashcard.form.card_content'
168
227
  )
169
228
  }}
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>
170
294
  </v-card-text>
171
- <textEditor
172
- outlined
173
- auto-grow
174
- menubar="edit"
175
- toolbar="undo redo | italic underline strikethrough removeformat | mathButton"
176
- v-model="
177
- block.metadata.config.cards[index]
178
- .back.text
179
- "
180
- label="Text"
181
- required
182
- />
183
295
  </v-card>
184
- <br />
185
- <ContentBlockAsset
186
- v-show="
187
- block.metadata.config.cards[index].side
188
- "
189
- v-model="
190
- block.metadata.config.cards[index].front
191
- .img
192
- "
193
- mimes="image/png,image/jpeg"
194
- @click:file="onImageSelect"
195
- >
196
- <template #title>
197
- {{
198
- $t(
199
- 'windward.games.components.settings.flashcard.form.image.title'
200
- )
201
- }}
202
- </template>
203
- <template #description>
204
- {{
205
- $t(
206
- 'windward.games.components.settings.flashcard.form.image.configure_blurb'
207
- )
208
- }}
209
- </template>
210
- </ContentBlockAsset>
211
- <ContentBlockAsset
212
- v-show="
213
- !block.metadata.config.cards[index].side
214
- "
215
- v-model="
216
- block.metadata.config.cards[index].back
217
- .img
218
- "
219
- mimes="image/png,image/jpeg"
220
- @click:file="onImageSelect"
221
- >
222
- <template #title>
223
- {{
224
- $t(
225
- 'windward.games.components.settings.flashcard.form.image.title'
226
- )
227
- }}
228
- </template>
229
- <template #description>
230
- {{
231
- $t(
232
- 'windward.games.components.settings.flashcard.form.image.configure_blurb'
233
- )
234
- }}
235
- </template>
236
- </ContentBlockAsset>
237
- <br />
238
- <v-textarea
239
- auto-grow
240
- v-show="
241
- block.metadata.config.cards[index].side
242
- "
243
- outlined
244
- v-model="
245
- block.metadata.config.cards[index].front
246
- .altText
247
- "
248
- label="Alt Text"
249
- required
250
- ></v-textarea>
251
- <v-textarea
252
- auto-grow
253
- v-show="
254
- !block.metadata.config.cards[index].side
255
- "
256
- outlined
257
- v-model="
258
- block.metadata.config.cards[index].back
259
- .altText
260
- "
261
- label="Alt Text"
262
- required
263
- ></v-textarea>
264
296
  <v-row
265
297
  class="d-flex justify-space-around pt-8"
266
298
  align="center"
@@ -274,6 +306,7 @@
274
306
  >
275
307
  <v-btn
276
308
  :value="true"
309
+ elevation="0"
277
310
  :outlined="
278
311
  !block.metadata.config.cards[
279
312
  index
@@ -286,6 +319,7 @@
286
319
  }}</v-btn
287
320
  ><v-btn
288
321
  :value="false"
322
+ elevation="0"
289
323
  :outlined="
290
324
  block.metadata.config.cards[
291
325
  index
@@ -308,7 +342,12 @@
308
342
  </v-container>
309
343
  <v-container class="pa-0">
310
344
  <v-row justify="center" class="my-4">
311
- <v-btn color="primary" @click="onAddCard">
345
+ <v-btn
346
+ color="primary"
347
+ elevation="0"
348
+ :disabled="render"
349
+ @click="onAddCard"
350
+ >
312
351
  <v-icon>mdi-plus</v-icon>
313
352
  {{
314
353
  $t(
@@ -337,10 +376,11 @@ import {
337
376
  MathLiveWrapper,
338
377
  ContentViewer,
339
378
  } from '@windward/core/utils'
340
- import BaseContentSettings from '~/components/Content/Tool/BaseContentSettings.js'
379
+ import BaseContentSettings from '~/components/Content/Settings/BaseContentSettings.js'
341
380
  import ContentBlockAsset from '~/components/Content/ContentBlockAsset.vue'
342
381
  import TextEditor from '~/components/Text/TextEditor.vue'
343
- import SortableExpansionPanel from '~/components/SortableExpansionPanel.vue'
382
+ import SortableExpansionPanel from '~/components/Core/SortableExpansionPanel.vue'
383
+ import Uuid from '~/helpers/Uuid'
344
384
 
345
385
  export default {
346
386
  name: 'FlashCardSlidesManager',
@@ -386,18 +426,18 @@ export default {
386
426
  defaultCard() {
387
427
  return {
388
428
  front: {
389
- img: {},
429
+ imageAsset: null,
390
430
  header: '',
391
431
  text: '',
392
- imgAltText: '',
432
+ imageAlt: '',
393
433
  },
394
434
  back: {
395
- img: {},
435
+ imageAsset: null,
396
436
  header: this.$t(
397
437
  'windward.games.components.settings.flashcard.form.header'
398
438
  ),
399
439
  text: '',
400
- imgAltText: '',
440
+ imageAlt: '',
401
441
  },
402
442
  expand: false,
403
443
  title: '',
@@ -406,6 +446,42 @@ export default {
406
446
  },
407
447
  },
408
448
  methods: {
449
+ async onBeforeSave() {
450
+ this.block.metadata.config.cards.forEach((element) => {
451
+ element.side = true
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)
484
+ },
409
485
  onAddCard() {
410
486
  this.block.metadata.config.cards.forEach((element) => {
411
487
  element.expand = false
@@ -432,11 +508,6 @@ export default {
432
508
  ],
433
509
  })
434
510
  },
435
- onImageSelect(img) {
436
- let currentSlide = this.block.metadata.config.currentSlide
437
- this.block.metadata.config.cards[currentSlide].img = img
438
- //this.face.img = img
439
- },
440
511
  flipCardFront(index) {
441
512
  this.block.metadata.config.cards[index].side = true
442
513
  },
@@ -444,8 +515,16 @@ export default {
444
515
  this.block.metadata.config.cards[index].side = false
445
516
  },
446
517
  stripHtml(htmlString) {
518
+ // Convert nulls to empty strings so the below replace doesn't fail
519
+ if (!htmlString) {
520
+ htmlString = ''
521
+ }
447
522
  return htmlString.replace(/(<([^>]+)>)/gi, '')
448
523
  },
524
+ getImageAlt(file) {
525
+ file = this.resolveAsset(file)
526
+ return _.get(file, 'asset.metadata.props.alt', '')
527
+ },
449
528
  },
450
529
  }
451
530
  </script>
package/components/settings/MatchingGameManager.vue CHANGED
@@ -3,6 +3,7 @@
3
3
  <v-form ref="form" v-model="valid" v-if="!loading">
4
4
  <v-container class="pa-0">
5
5
  <v-text-field
6
+ ref="title"
6
7
  v-model="block.metadata.config.title"
7
8
  outlined
8
9
  :counter="50"
@@ -12,7 +13,7 @@
12
13
  'windward.games.components.settings.matching_game.form.title'
13
14
  )
14
15
  "
15
- ref="title"
16
+ :disabled="render"
16
17
  ></v-text-field>
17
18
  <v-textarea
18
19
  v-model="block.metadata.config.instructions"
@@ -24,6 +25,7 @@
24
25
  'windward.games.components.settings.matching_game.form.instructions'
25
26
  )
26
27
  "
28
+ :disabled="render"
27
29
  ></v-textarea>
28
30
  </v-container>
29
31
  <v-divider class="my-4 primary"></v-divider>
@@ -37,6 +39,7 @@
37
39
  </p>
38
40
  <SortableExpansionPanel
39
41
  v-model="block.metadata.config.answerObjects"
42
+ :disabled="render"
40
43
  @change="onDragged"
41
44
  @click:close="onConfirmDeleteAnswer($event)"
42
45
  >
@@ -68,6 +71,7 @@
68
71
  "
69
72
  outlined
70
73
  :autofocus="true"
74
+ :disabled="render"
71
75
  ></v-text-field>
72
76
  </v-flex>
73
77
  <v-flex xs12>
@@ -82,6 +86,7 @@
82
86
 
83
87
  <SortableExpansionPanel
84
88
  v-model="block.metadata.config.prompts[index]"
89
+ :disabled="render"
85
90
  @click:close="
86
91
  onConfirmDeletePrompt($event, index)
87
92
  "
@@ -149,16 +154,20 @@
149
154
  >
150
155
  <v-btn
151
156
  text
157
+ elevation="0"
152
158
  class="pa-0 mr-2 btn-text-file-toggle"
153
159
  value="text"
160
+ :disabled="render"
154
161
  ><v-icon
155
162
  >mdi-alpha-t</v-icon
156
163
  ></v-btn
157
164
  >
158
165
  <v-btn
159
166
  text
167
+ elevation="0"
160
168
  class="pa-0 btn-text-file-toggle"
161
169
  value="image"
170
+ :disabled="render"
162
171
  ><v-icon
163
172
  >mdi-image-area</v-icon
164
173
  ></v-btn
@@ -181,6 +190,7 @@
181
190
  "
182
191
  outlined
183
192
  :autofocus="true"
193
+ :disabled="render"
184
194
  ></v-text-field>
185
195
  </v-container>
186
196
  <v-container
@@ -190,6 +200,10 @@
190
200
  class="pa-0"
191
201
  >
192
202
  <v-text-field
203
+ v-if="
204
+ prompt.textOrImage ===
205
+ 'image'
206
+ "
193
207
  v-model="
194
208
  block.metadata.config
195
209
  .prompts[index][
@@ -197,10 +211,6 @@
197
211
  ].altText
198
212
  "
199
213
  class="pt-3 pb-3"
200
- v-if="
201
- prompt.textOrImage ===
202
- 'image'
203
- "
204
214
  :hide-details="true"
205
215
  dense
206
216
  outlined
@@ -210,6 +220,16 @@
210
220
  'windward.games.components.content.blocks.matching_game.alt_image'
211
221
  )
212
222
  "
223
+ :placeholder="
224
+ getAriaDescribedBy(
225
+ block.metadata.config
226
+ .prompts[index][
227
+ indexPrompt
228
+ ].file
229
+ )
230
+ "
231
+ persistent-placeholder
232
+ :disabled="render"
213
233
  ></v-text-field>
214
234
  <v-text-field
215
235
  v-if="
@@ -231,6 +251,16 @@
231
251
  'windward.games.components.content.blocks.matching_game.aria_described'
232
252
  )
233
253
  "
254
+ :placeholder="
255
+ getAlt(
256
+ block.metadata.config
257
+ .prompts[index][
258
+ indexPrompt
259
+ ].file
260
+ )
261
+ "
262
+ persistent-placeholder
263
+ :disabled="render"
234
264
  ></v-text-field>
235
265
  <ContentBlockAsset
236
266
  v-if="
@@ -243,8 +273,10 @@
243
273
  indexPrompt
244
274
  ].file
245
275
  "
276
+ :assets.sync="block.assets"
246
277
  class="content-block-asset"
247
278
  mimes="image/png,image/jpeg"
279
+ :disabled="render"
248
280
  ></ContentBlockAsset>
249
281
  </v-container>
250
282
  </v-container>
@@ -253,6 +285,8 @@
253
285
  <v-row justify="center" class="my-4">
254
286
  <v-btn
255
287
  color="primary"
288
+ elevation="0"
289
+ :disabled="render"
256
290
  @click="onAddPrompt(index)"
257
291
  >
258
292
  <v-icon>mdi-plus</v-icon>
@@ -269,7 +303,12 @@
269
303
  </v-container>
270
304
  <v-container class="pa-0">
271
305
  <v-row justify="center" class="my-4">
272
- <v-btn color="primary" @click="onAddAnswer">
306
+ <v-btn
307
+ color="primary"
308
+ elevation="0"
309
+ :disabled="render"
310
+ @click="onAddAnswer"
311
+ >
273
312
  <v-icon>mdi-plus</v-icon>
274
313
  {{
275
314
  $t(
@@ -289,6 +328,7 @@
289
328
  'windward.games.components.settings.matching_game.form.feedback.correct'
290
329
  )
291
330
  "
331
+ :disabled="render"
292
332
  ></v-textarea>
293
333
  <v-textarea
294
334
  v-model="block.metadata.config.feedback_incorrect"
@@ -300,6 +340,7 @@
300
340
  'windward.games.components.settings.matching_game.form.feedback.incorrect'
301
341
  )
302
342
  "
343
+ :disabled="render"
303
344
  ></v-textarea>
304
345
  </v-container>
305
346
  </v-form>
@@ -315,9 +356,9 @@
315
356
  </template>
316
357
 
317
358
  <script>
318
- import BaseContentSettings from '~/components/Content/Tool/BaseContentSettings.js'
359
+ import BaseContentSettings from '~/components/Content/Settings/BaseContentSettings.js'
319
360
  import _ from 'lodash'
320
- import SortableExpansionPanel from '~/components/SortableExpansionPanel.vue'
361
+ import SortableExpansionPanel from '~/components/Core/SortableExpansionPanel.vue'
321
362
 
322
363
  export default {
323
364
  name: 'MatchingGameManager',
@@ -508,6 +549,14 @@ export default {
508
549
  // holder array now has new answer positions
509
550
  this.block.metadata.config.prompts = holderArray
510
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
+ },
511
560
  },
512
561
  }
513
562
  </script>