@windward/games 0.10.0 → 0.12.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 (21) 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 +121 -52
  4. package/components/content/blocks/dragDrop/SortingGame.vue +42 -66
  5. package/components/content/blocks/flashcards/CardFace.vue +23 -10
  6. package/components/content/blocks/flashcards/Flashcard.vue +20 -4
  7. package/components/content/blocks/matchingGame/MatchingGame.vue +156 -186
  8. package/components/content/blocks/sevenStrikes/SevenStikes.vue +20 -2
  9. package/components/content/blocks/slideshow/SlideShow.vue +16 -24
  10. package/components/settings/BucketGameSettingsManager.vue +0 -31
  11. package/components/settings/MatchingGameManager.vue +14 -94
  12. package/components/settings/SevenStrikesSettingsManager.vue +6 -15
  13. package/components/settings/SlideShowManager.vue +11 -46
  14. package/components/settings/SortingGameSettingsManager.vue +2 -19
  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/sorting_game.ts +2 -0
  18. package/i18n/es-ES/components/settings/sorting_game.ts +2 -0
  19. package/i18n/sv-SE/components/content/blocks/sorting_game.ts +2 -0
  20. package/i18n/sv-SE/components/settings/sorting_game.ts +2 -0
  21. package/package.json +1 -1
package/components/content/blocks/slideshow/SlideShow.vue CHANGED
@@ -69,22 +69,21 @@
69
69
  {{ slide['description'] }}
70
70
  </p>
71
71
  </div>
72
- <div
73
- style="overflow: auto"
74
- class="pl-15 pr-15 container-image"
75
- >
76
- <v-img
77
- v-if="slide['imageAsset']"
78
- :src="getImageUrl(slide['imageAsset'])"
79
- :alt="
80
- getImageAlt(
81
- slide['imageAsset'],
82
- slide['imageAlt']
83
- )
72
+ <div class="pl-15 pr-15 container-image">
73
+ <ImageAssetViewer
74
+ v-if="
75
+ block.metadata.config.slides[index]
76
+ .fileConfig.asset &&
77
+ block.metadata.config.slides[index]
78
+ .fileConfig.asset.file_asset_id
84
79
  "
85
- height="100%"
86
- contain
87
- />
80
+ v-model="
81
+ block.metadata.config.slides[index]
82
+ .fileConfig
83
+ "
84
+ :assets="block.assets"
85
+ max-height="300"
86
+ ></ImageAssetViewer>
88
87
  </div>
89
88
  </v-sheet>
90
89
  <div class="d-flex justify-end">
@@ -108,11 +107,12 @@
108
107
  <script>
109
108
  import _ from 'lodash'
110
109
  import BaseContentBlock from '~/components/Content/Blocks/BaseContentBlock'
111
- import Crypto from '~/helpers/Crypto'
110
+ import ImageAssetViewer from '~/components/Content/ImageAssetViewer.vue'
112
111
 
113
112
  export default {
114
113
  name: 'SlideShow',
115
114
  extends: BaseContentBlock,
115
+ components: { ImageAssetViewer },
116
116
  beforeMount() {
117
117
  if (_.isEmpty(this.block)) {
118
118
  this.block = {}
@@ -154,14 +154,6 @@ export default {
154
154
  file = this.resolveAsset(file)
155
155
  return _.get(file, 'asset.public_url', '')
156
156
  },
157
- getImageAlt(file, defaultText = '') {
158
- // If a default / override was defined
159
- if (defaultText) {
160
- return defaultText
161
- }
162
- file = this.resolveAsset(file)
163
- return _.get(file, 'asset.metadata.props.alt', '')
164
- },
165
157
  },
166
158
  }
167
159
  </script>
package/components/settings/BucketGameSettingsManager.vue CHANGED
@@ -209,31 +209,6 @@
209
209
  }}
210
210
  </v-btn>
211
211
  </v-row>
212
- <v-textarea
213
- v-model="block.metadata.config.feedback_correct"
214
- class="pt-4"
215
- outlined
216
- auto-grow
217
- :counter="255"
218
- :label="
219
- $t(
220
- 'windward.games.components.settings.bucket_game.form.feedback.correct'
221
- )
222
- "
223
- :disabled="render"
224
- ></v-textarea>
225
- <v-textarea
226
- v-model="block.metadata.config.feedback_incorrect"
227
- outlined
228
- auto-grow
229
- :counter="255"
230
- :label="
231
- $t(
232
- 'windward.games.components.settings.bucket_game.form.feedback.incorrect'
233
- )
234
- "
235
- :disabled="render"
236
- ></v-textarea>
237
212
  </v-container>
238
213
  <div v-if="loading" class="text-center">
239
214
  <v-progress-circular
@@ -298,12 +273,6 @@ export default {
298
273
  'windward.games.components.settings.bucket_game.form.default_instructions'
299
274
  )
300
275
  }
301
- if (_.isEmpty(this.block.metadata.config.feedback_correct)) {
302
- this.block.metadata.config.feedback_correct = ''
303
- }
304
- if (_.isEmpty(this.block.metadata.config.feedback_incorrect)) {
305
- this.block.metadata.config.feedback_incorrect = ''
306
- }
307
276
  if (_.isEmpty(this.block.metadata.config.bucket_titles)) {
308
277
  this.block.metadata.config.bucket_titles = []
309
278
  this.onAddBucket()
package/components/settings/MatchingGameManager.vue CHANGED
@@ -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>
package/components/settings/SevenStrikesSettingsManager.vue CHANGED
@@ -208,21 +208,12 @@ export default {
208
208
  // check against lowercase keyboard inputs
209
209
  if (element.value) {
210
210
  element.value = element.value.toLowerCase()
211
- element.splitWord = element.value.split('')
212
- element.splitWord.forEach((letter) => {
213
- const letterIndex = element.splitWord.indexOf(letter)
214
- if (letter !== ' ') {
215
- element.splitWord[letterIndex] = {
216
- letter: letter,
217
- show: false,
218
- }
219
- } else {
220
- element.splitWord[letterIndex] = {
221
- letter: letter,
222
- show: true,
223
- }
224
- }
225
- })
211
+ element.splitWord = element.value
212
+ .split('')
213
+ .map((letter, index) => ({
214
+ letter,
215
+ show: letter === ' ' || letter === '-',
216
+ }))
226
217
  }
227
218
  })
228
219
  },
package/components/settings/SlideShowManager.vue CHANGED
@@ -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>
package/components/settings/SortingGameSettingsManager.vue CHANGED
@@ -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)) {
package/i18n/en-US/components/content/blocks/sorting_game.ts CHANGED
@@ -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
  }
package/i18n/en-US/components/settings/sorting_game.ts CHANGED
@@ -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
  }
package/i18n/es-ES/components/content/blocks/sorting_game.ts CHANGED
@@ -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
  }
package/i18n/es-ES/components/settings/sorting_game.ts CHANGED
@@ -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
  }
package/i18n/sv-SE/components/content/blocks/sorting_game.ts CHANGED
@@ -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
  }
package/i18n/sv-SE/components/settings/sorting_game.ts CHANGED
@@ -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.10.0",
3
+ "version": "0.12.0",
4
4
  "description": "Windward UI Plugin Games",
5
5
  "main": "plugin.js",
6
6
  "scripts": {