@windward/games 0.9.0 → 0.11.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 (25) hide show
  1. package/CHANGELOG.md +6 -0
  2. package/components/content/blocks/crosswordPuzzle/CrosswordPuzzle.vue +2 -6
  3. package/components/content/blocks/dragDrop/BucketGame.vue +157 -87
  4. package/components/content/blocks/dragDrop/SortingGame.vue +42 -66
  5. package/components/content/blocks/flashcards/CardFace.vue +22 -57
  6. package/components/content/blocks/flashcards/Flashcard.vue +12 -13
  7. package/components/content/blocks/matchingGame/MatchingGame.vue +73 -117
  8. package/components/content/blocks/slideshow/SlideShow.vue +10 -24
  9. package/components/settings/BucketGameSettingsManager.vue +9 -32
  10. package/components/settings/FlashCardSlidesManager.vue +26 -91
  11. package/components/settings/MatchingGameManager.vue +14 -94
  12. package/components/settings/SlideShowManager.vue +11 -46
  13. package/components/settings/SortingGameSettingsManager.vue +2 -19
  14. package/i18n/en-US/components/content/blocks/bucket_game.ts +1 -0
  15. package/i18n/en-US/components/content/blocks/sorting_game.ts +2 -0
  16. package/i18n/en-US/components/settings/sorting_game.ts +2 -0
  17. package/i18n/es-ES/components/content/blocks/bucket_game.ts +1 -0
  18. package/i18n/es-ES/components/content/blocks/sorting_game.ts +2 -0
  19. package/i18n/es-ES/components/settings/sorting_game.ts +2 -0
  20. package/i18n/sv-SE/components/content/blocks/bucket_game.ts +1 -0
  21. package/i18n/sv-SE/components/content/blocks/sorting_game.ts +2 -0
  22. package/i18n/sv-SE/components/settings/sorting_game.ts +2 -0
  23. package/package.json +1 -1
  24. package/test/__mocks__/contentBlockMock.js +94 -0
  25. package/test/mocks.js +1 -0
@@ -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
- .imageAsset
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
- <ContentBlockAsset
201
+ <ImageAssetSettings
234
202
  v-model="
235
203
  block.metadata.config.cards[index].back
236
- .imageAsset
204
+ .fileConfig
237
205
  "
238
- mimes="image/png,image/jpeg"
239
- outlined
240
206
  :assets.sync="block.assets"
241
- :disabled="render"
242
- >
243
- <template #title>
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
- imageAsset: null,
347
+ fileConfig: {
348
+ hideBackground: true,
349
+ },
411
350
  header: '',
412
351
  text: '',
413
- imageAlt: '',
414
352
  },
415
353
  back: {
416
- imageAsset: null,
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.imageAsset.file_asset_id', null)
379
+ _.get(item, 'item.front.fileConfig.file_asset_id', null)
441
380
  )
442
381
  ) {
443
382
  assets.push(
444
- _.get(item, 'item.front.imageAsset.file_asset_id', null)
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.imageAsset.file_asset_id', null)
388
+ _.get(item, 'item.back.fileConfig.file_asset_id', null)
450
389
  )
451
390
  ) {
452
391
  assets.push(
453
- _.get(item, 'item.back.imageAsset.file_asset_id', null)
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>
@@ -106,11 +106,9 @@
106
106
  }}
107
107
  </span>
108
108
  <span v-if="prompt.textOrImage === 'image'">{{
109
- prompt.file && prompt.file !== null
110
- ? prompt.file.name
111
- : $t(
112
- 'windward.games.components.content.blocks.matching_game.image'
113
- )
109
+ $t(
110
+ 'windward.games.components.content.blocks.matching_game.image'
111
+ )
114
112
  }}</span>
115
113
  </template>
116
114
  <template
@@ -199,88 +197,17 @@
199
197
  v-if="prompt.textOrImage === 'image'"
200
198
  class="pa-0"
201
199
  >
202
- <v-text-field
203
- v-if="
204
- prompt.textOrImage === 'image'
205
- "
206
- v-model="
207
- block.metadata.config.prompts[
208
- index
209
- ][indexPrompt].altText
210
- "
211
- class="pt-3 pb-3"
212
- :hide-details="true"
213
- dense
214
- outlined
215
- :autofocus="true"
216
- :label="
217
- $t(
218
- 'windward.games.components.content.blocks.matching_game.alt_image'
219
- )
220
- "
221
- :placeholder="
222
- getAlt(
223
- block.metadata.config
224
- .prompts[index][
225
- indexPrompt
226
- ].file
227
- )
228
- "
229
- persistent-placeholder
230
- :disabled="render"
231
- ></v-text-field>
232
- <v-text-field
233
- v-if="
234
- prompt.textOrImage === 'image'
235
- "
200
+ <ImageAssetSettings
236
201
  v-model="
237
202
  block.metadata.config.prompts[
238
203
  index
239
- ][indexPrompt].ariaDescribedBy
204
+ ][indexPrompt].fileConfig
240
205
  "
241
- class="pt-3 pb-3"
242
- :hide-details="true"
243
- dense
244
- outlined
245
- :label="
246
- $t(
247
- 'shared.file.attr.screenreader'
248
- )
249
- "
250
- :placeholder="
251
- getAriaDescribedBy(
252
- block.metadata.config
253
- .prompts[index][
254
- indexPrompt
255
- ].file
256
- )
257
- "
258
- persistent-placeholder
259
- :disabled="render"
260
- ></v-text-field>
261
- <ContentBlockAsset
262
- v-if="
263
- prompt.textOrImage === 'image'
264
- "
265
- v-model="
266
- block.metadata.config.prompts[
267
- index
268
- ][indexPrompt].file
269
- "
270
- outlined
271
206
  :assets.sync="block.assets"
272
- class="content-block-asset"
273
- mimes="image/png,image/jpeg"
274
- :disabled="render"
275
- >
276
- <template #title>
277
- {{
278
- $t(
279
- 'windward.games.shared.settings.file_picker.image'
280
- )
281
- }}
282
- </template>
283
- </ContentBlockAsset>
207
+ hide-background
208
+ hide-decorative
209
+ hide-modal
210
+ ></ImageAssetSettings>
284
211
  </v-container>
285
212
  <v-container class="pa-0">
286
213
  <v-text-field
@@ -353,11 +280,12 @@ import BaseContentSettings from '~/components/Content/Settings/BaseContentSettin
353
280
  import _ from 'lodash'
354
281
  import SortableExpansionPanel from '~/components/Core/SortableExpansionPanel.vue'
355
282
  import Uuid from '~/helpers/Uuid'
283
+ import ImageAssetSettings from '~/components/Content/Settings/ImageAssetSettings.vue'
356
284
 
357
285
  export default {
358
286
  name: 'MatchingGameManager',
359
287
  extends: BaseContentSettings,
360
- components: { SortableExpansionPanel },
288
+ components: { SortableExpansionPanel, ImageAssetSettings },
361
289
  beforeMount() {
362
290
  if (_.isEmpty(this.block)) {
363
291
  this.block = {}
@@ -430,9 +358,9 @@ export default {
430
358
  matchExplanation: this.$t(
431
359
  'windward.games.components.settings.matching_game.form.correct_match'
432
360
  ),
433
- file: null,
434
- altText: '',
435
- ariaDescribedBy: '',
361
+ fileConfig: {
362
+ hideBackground: true,
363
+ },
436
364
  answer: this.block.metadata.config.answerObjects[index],
437
365
  }
438
366
  this.block.metadata.config.prompts[index].push(default_prompt)
@@ -552,14 +480,6 @@ export default {
552
480
  // holder array now has new answer positions
553
481
  this.block.metadata.config.prompts = holderArray
554
482
  },
555
- getAriaDescribedBy(file) {
556
- file = this.resolveAsset(file)
557
- return _.get(file, 'asset.metadata.props.aria_describedby', '')
558
- },
559
- getAlt(file) {
560
- file = this.resolveAsset(file)
561
- return _.get(file, 'asset.metadata.props.alt', '')
562
- },
563
483
  },
564
484
  }
565
485
  </script>
@@ -84,48 +84,16 @@
84
84
  :disabled="render"
85
85
  ></v-textarea>
86
86
 
87
- <ContentBlockAsset
88
- id="content-block-asset"
87
+ <ImageAssetSettings
89
88
  v-model="
90
- block.metadata.config.slides[index].imageAsset
89
+ block.metadata.config.slides[index].fileConfig
91
90
  "
92
91
  :assets.sync="block.assets"
93
- mimes="image/png,image/jpeg"
94
- :disabled="render"
95
- outlined
96
- >
97
- <template #title>
98
- {{
99
- $t(
100
- 'windward.games.shared.settings.file_picker.image'
101
- )
102
- }}
103
- </template>
104
- </ContentBlockAsset>
92
+ hide-background
93
+ hide-decorative
94
+ hide-modal
95
+ ></ImageAssetSettings>
105
96
 
106
- <v-text-field
107
- v-if="
108
- block.metadata.config.slides[index].imageAsset
109
- "
110
- v-model="
111
- block.metadata.config.slides[index].imageAlt
112
- "
113
- class="mt-4"
114
- outlined
115
- :placeholder="
116
- getImageAlt(
117
- block.metadata.config.slides[index]
118
- .imageAsset
119
- )
120
- "
121
- persistent-placeholder
122
- :label="
123
- $t(
124
- 'windward.games.components.content.blocks.slideshow.slides.image_alt'
125
- )
126
- "
127
- :disabled="render"
128
- ></v-text-field>
129
97
  </v-container>
130
98
  </template>
131
99
  </SortableExpansionPanel>
@@ -160,7 +128,7 @@
160
128
  <script>
161
129
  import BaseContentSettings from '~/components/Content/Settings/BaseContentSettings.js'
162
130
  import _ from 'lodash'
163
- import ContentBlockAsset from '~/components/Content/ContentBlockAsset.vue'
131
+ import ImageAssetSettings from '~/components/Content/Settings/ImageAssetSettings.vue'
164
132
  import SortableExpansionPanel from '~/components/Core/SortableExpansionPanel.vue'
165
133
  import Uuid from '~/helpers/Uuid'
166
134
 
@@ -168,7 +136,7 @@ export default {
168
136
  name: 'SlideShowManager',
169
137
  extends: BaseContentSettings,
170
138
  components: {
171
- ContentBlockAsset,
139
+ ImageAssetSettings,
172
140
  SortableExpansionPanel,
173
141
  },
174
142
  beforeMount() {
@@ -224,8 +192,9 @@ export default {
224
192
  id: this.block.metadata.config.slides.length + 1,
225
193
  header: '',
226
194
  description: '',
227
- imageAsset: null,
228
- imageAlt: '',
195
+ fileConfig: {
196
+ hideBackground: true,
197
+ },
229
198
  }
230
199
  this.block.metadata.config.slides.push(defaultSlide)
231
200
  this.block.metadata.config.currentSlide =
@@ -255,10 +224,6 @@ export default {
255
224
  this.block.metadata.config.currentSlide =
256
225
  this.block.metadata.config.slides.length - 1
257
226
  },
258
- getImageAlt(file) {
259
- file = this.resolveAsset(file)
260
- return _.get(file, 'asset.metadata.props.alt', '')
261
- },
262
227
  },
263
228
  }
264
229
  </script>
@@ -98,19 +98,7 @@
98
98
  :counter="255"
99
99
  :label="
100
100
  $t(
101
- 'windward.games.components.settings.bucket_game.form.feedback.correct'
102
- )
103
- "
104
- :disabled="render"
105
- ></v-textarea>
106
- <v-textarea
107
- v-model="block.metadata.config.feedback_incorrect"
108
- outlined
109
- auto-grow
110
- :counter="255"
111
- :label="
112
- $t(
113
- 'windward.games.components.settings.bucket_game.form.feedback.incorrect'
101
+ 'windward.games.components.settings.sorting_game.feedback_correct_label'
114
102
  )
115
103
  "
116
104
  :disabled="render"
@@ -163,12 +151,7 @@ export default {
163
151
  }
164
152
  if (_.isEmpty(this.block.metadata.config.feedback_correct)) {
165
153
  this.block.metadata.config.feedback_correct = this.$t(
166
- 'windward.games.components.settings.bucket_game.form.feedback.correct_default'
167
- )
168
- }
169
- if (_.isEmpty(this.block.metadata.config.feedback_incorrect)) {
170
- this.block.metadata.config.feedback_incorrect = this.$t(
171
- 'windward.games.components.settings.bucket_game.form.feedback.incorrect_default'
154
+ 'windward.games.components.settings.sorting_game.default_feedback_correct'
172
155
  )
173
156
  }
174
157
  if (_.isEmpty(this.block.metadata.config.answer)) {
@@ -38,4 +38,5 @@ export default {
38
38
  'The character count for this field must be less than',
39
39
  },
40
40
  },
41
+ try_again: 'Try again',
41
42
  }
@@ -2,4 +2,6 @@ export default {
2
2
  check_answers: 'Check your Answers',
3
3
  add_element: 'Add Element',
4
4
  placeholder: 'Placeholder',
5
+ incorrect_feedback:
6
+ 'This order is not correct. Items with green checkmarks are in the correct position.',
5
7
  }
@@ -3,4 +3,6 @@ export default {
3
3
  sortable_items: 'Sortable Items',
4
4
  word: 'Sortable Word',
5
5
  instructions: 'Drag each statement into the correct order. When you are finished, click the Check Your Answers button. Statements in the correct order will appear green, while statements not in the correct order will appear red.',
6
+ feedback_correct_label: 'Explanation of the correct order',
7
+ default_feedback_correct: 'That is the correct order.',
6
8
  }
@@ -38,4 +38,5 @@ export default {
38
38
  'El número de caracteres para este campo debe ser menor que',
39
39
  },
40
40
  },
41
+ try_again: 'Intentar otra vez',
41
42
  }
@@ -2,4 +2,6 @@ export default {
2
2
  check_answers: 'Compruebe sus respuestas',
3
3
  add_element: 'Agregar elemento',
4
4
  placeholder: 'Marcador de posición',
5
+ incorrect_feedback:
6
+ 'Este orden no es correcto. Los elementos con marcas de verificación verdes están en la posición correcta.',
5
7
  }
@@ -3,4 +3,6 @@ export default {
3
3
  sortable_items: 'Elementos clasificables',
4
4
  word: 'Palabra ordenable',
5
5
  instructions: 'Arrastre cada declaración al orden correcto. Cuando haya terminado, haga clic en el botón Verifique sus respuestas. Las declaraciones en el orden correcto aparecerán en verde, mientras que las declaraciones que no estén en el orden correcto aparecerán en rojo.',
6
+ feedback_correct_label: 'Explicación del orden correcto.',
7
+ default_feedback_correct: 'Ese es el orden correcto.',
6
8
  }
@@ -38,4 +38,5 @@ export default {
38
38
  'Teckenantalet för detta fält måste vara mindre än',
39
39
  },
40
40
  },
41
+ try_again: 'Försök igen',
41
42
  }
@@ -2,4 +2,6 @@ export default {
2
2
  check_answers: 'Kolla dina svar',
3
3
  add_element: 'Lägg till element',
4
4
  placeholder: 'Platshållare',
5
+ incorrect_feedback:
6
+ 'Denna ordning är inte korrekt. Föremål med gröna bockar är i rätt position.',
5
7
  }
@@ -3,4 +3,6 @@ export default {
3
3
  sortable_items: 'Sorterbara artiklar',
4
4
  word: 'Sorterbart ord',
5
5
  instructions: 'Dra varje påstående i rätt ordning. När du är klar klickar du på knappen Kontrollera dina svar. Påståenden i rätt ordning visas i grönt, medan påståenden som inte är i rätt ordning visas röda.',
6
+ feedback_correct_label: 'Förklaring av rätt ordning',
7
+ default_feedback_correct: 'Det är rätt ordning.',
6
8
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@windward/games",
3
- "version": "0.9.0",
3
+ "version": "0.11.0",
4
4
  "description": "Windward UI Plugin Games",
5
5
  "main": "plugin.js",
6
6
  "scripts": {
@@ -0,0 +1,94 @@
1
+ import mock_ from 'lodash'
2
+
3
+ jest.mock(
4
+ '~/components/Content/ActionPanel.vue',
5
+ () => {
6
+ return jest.fn().mockImplementation(() => {
7
+ return { test: () => {} }
8
+ })
9
+ },
10
+ { virtual: true }
11
+ )
12
+
13
+ jest.mock(
14
+ '~/components/Content/ContentBlockAsset.vue',
15
+ () => {
16
+ return jest.fn().mockImplementation(() => {
17
+ return { test: () => {} }
18
+ })
19
+ },
20
+ { virtual: true }
21
+ )
22
+
23
+ jest.mock(
24
+ '~/components/Content/ImageAssetViewer.vue',
25
+ () => {
26
+ return jest.fn().mockImplementation(() => {
27
+ return { test: () => {} }
28
+ })
29
+ },
30
+ { virtual: true }
31
+ )
32
+
33
+ jest.mock(
34
+ '~/components/Content/Settings/ImageAssetSettings.vue',
35
+ () => {
36
+ return jest.fn().mockImplementation(() => {
37
+ return { test: () => {} }
38
+ })
39
+ },
40
+ { virtual: true }
41
+ )
42
+
43
+ jest.mock(
44
+ '~/components/Text/TextViewer.vue',
45
+ () => {
46
+ return {
47
+ props: {},
48
+ computed: {
49
+ body() {
50
+ return ''
51
+ },
52
+ },
53
+ data() {
54
+ return {}
55
+ },
56
+ }
57
+ },
58
+ { virtual: true }
59
+ )
60
+ jest.mock(
61
+ '~/components/Text/TextEditor.vue',
62
+ () => {
63
+ return {
64
+ props: {},
65
+ computed: {
66
+ body() {
67
+ return ''
68
+ },
69
+ },
70
+ data() {
71
+ return {}
72
+ },
73
+ }
74
+ },
75
+ { virtual: true }
76
+ )
77
+
78
+ jest.mock(
79
+ '~/components/Core/FileDropZone.vue',
80
+ () => {
81
+ return {
82
+ props: {},
83
+ computed: {
84
+ body() {
85
+ return ''
86
+ },
87
+ },
88
+ data() {
89
+ return {}
90
+ },
91
+ }
92
+ },
93
+ { virtual: true }
94
+ )
package/test/mocks.js CHANGED
@@ -12,5 +12,6 @@ require('./__mocks__/fileMock')
12
12
  require('./__mocks__/styleMock')
13
13
  require('./__mocks__/modelMock')
14
14
  require('./__mocks__/componentsMock')
15
+ require('./__mocks__/contentBlockMock')
15
16
 
16
17
  export const defaultMocks = mocks