@windward/games 0.7.0 → 0.8.1

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 (28) hide show
  1. package/babel.config.js +1 -1
  2. package/components/content/blocks/crosswordPuzzle/CrosswordPuzzle.vue +10 -2
  3. package/components/content/blocks/dragDrop/BucketGame.vue +6 -1
  4. package/components/content/blocks/dragDrop/SortingGame.vue +4 -2
  5. package/components/content/blocks/flashcards/FlashcardSlides.vue +2 -2
  6. package/components/content/blocks/matchingGame/MatchingGame.vue +34 -10
  7. package/components/content/blocks/multipleChoice/MultipleChoice.vue +10 -2
  8. package/components/content/blocks/multipleChoice/QuestionDialog.vue +4 -7
  9. package/components/content/blocks/quizshowGame/QuizShow.vue +0 -7
  10. package/components/content/blocks/slideshow/SlideShow.vue +6 -1
  11. package/components/settings/BucketGameSettingsManager.vue +6 -30
  12. package/components/settings/CrosswordPuzzleSettingsManager.vue +6 -28
  13. package/components/settings/FlashCardSlidesManager.vue +12 -34
  14. package/components/settings/MatchingGameManager.vue +30 -50
  15. package/components/settings/MultipleChoiceSettingsManager.vue +6 -30
  16. package/components/settings/QuizShowSettingsManager.vue +12 -62
  17. package/components/settings/SevenStrikesSettingsManager.vue +12 -47
  18. package/components/settings/SlideShowManager.vue +20 -47
  19. package/components/settings/SortingGameSettingsManager.vue +8 -44
  20. package/components/settings/WordJumbleSettingsManager.vue +10 -46
  21. package/i18n/en-US/shared/content_blocks.ts +1 -1
  22. package/i18n/en-US/shared/settings.ts +3 -0
  23. package/i18n/es-ES/shared/settings.ts +3 -0
  24. package/i18n/sv-SE/shared/settings.ts +4 -1
  25. package/package.json +4 -4
  26. package/test/mocks.js +10 -2
  27. package/test/settings/BucketGameManager.spec.js +0 -1
  28. package/test/settings/FlashCardSlidesManager.spec.js +2 -2
package/babel.config.js CHANGED
@@ -1 +1 @@
1
- module.exports = { presets: ["@babel/preset-env"] };
1
+ module.exports = { presets: ['@babel/preset-env'] }
package/components/content/blocks/crosswordPuzzle/CrosswordPuzzle.vue CHANGED
@@ -1,8 +1,16 @@
1
1
  <template>
2
2
  <v-container class="pa-0">
3
3
  <div>
4
- <h2>{{ block.metadata.config.title }}</h2>
5
- <p>{{ block.metadata.config.instructions }}</p>
4
+ <h2 v-if="block.metadata.config.title" tabindex="0">
5
+ {{ block.metadata.config.title }}
6
+ </h2>
7
+ <p
8
+ v-if="block.metadata.config.instructions"
9
+ tabindex="0"
10
+ class="pt-3"
11
+ >
12
+ {{ block.metadata.config.instructions }}
13
+ </p>
6
14
  </div>
7
15
  <v-alert v-if="wordMap.length === 0" type="info" class="text-center">
8
16
  <p>
package/components/content/blocks/dragDrop/BucketGame.vue CHANGED
@@ -2,6 +2,7 @@
2
2
  <div>
3
3
  <div>
4
4
  <h2
5
+ v-if="block.metadata.config.title"
5
6
  :aria-label="
6
7
  $t(
7
8
  'windward.games.components.content.blocks.bucket_game.aria_title'
@@ -12,7 +13,11 @@
12
13
  {{ block.metadata.config.title }}
13
14
  </h2>
14
15
 
15
- <p tabindex="0">
16
+ <p
17
+ v-if="block.metadata.config.instructions"
18
+ tabindex="0"
19
+ class="pt-3"
20
+ >
16
21
  {{ block.metadata.config.instructions }}
17
22
  </p>
18
23
  <h4 v-if="!render" class="d-flex justify-center align-center">
package/components/content/blocks/dragDrop/SortingGame.vue CHANGED
@@ -1,7 +1,9 @@
1
1
  <template>
2
2
  <div>
3
- <h2>{{ block.metadata.config.title }}</h2>
4
- <p>
3
+ <h2 v-if="block.metadata.config.title" tabindex="0">
4
+ {{ block.metadata.config.title }}
5
+ </h2>
6
+ <p v-if="block.metadata.config.instructions" tabindex="0" class="pt-3">
5
7
  {{ block.metadata.config.instructions }}
6
8
  </p>
7
9
  <v-container :key="'feedback'" :class="feedbackClass()">
package/components/content/blocks/flashcards/FlashcardSlides.vue CHANGED
@@ -1,10 +1,10 @@
1
1
  <template>
2
2
  <div>
3
- <h2 v-if="block.metadata.config.title">
3
+ <h2 v-if="block.metadata.config.title" tabindex="0">
4
4
  {{ block.metadata.config.title }}
5
5
  </h2>
6
6
 
7
- <p v-if="block.metadata.config.instructions">
7
+ <p v-if="block.metadata.config.instructions" tabindex="0" class="pt-3">
8
8
  {{ block.metadata.config.instructions }}
9
9
  </p>
10
10
  <br />
package/components/content/blocks/matchingGame/MatchingGame.vue CHANGED
@@ -2,6 +2,7 @@
2
2
  <div>
3
3
  <div>
4
4
  <h2
5
+ v-if="block.metadata.config.title"
5
6
  :aria-label="
6
7
  $t(
7
8
  'windward.games.components.content.blocks.matching_game.match_game_title'
@@ -12,17 +13,21 @@
12
13
  {{ block.metadata.config.title }}
13
14
  </h2>
14
15
 
15
- <p>
16
+ <p
17
+ v-if="block.metadata.config.instructions"
18
+ tabindex="0"
19
+ class="pt-3"
20
+ >
16
21
  {{ block.metadata.config.instructions }}
17
22
  </p>
18
23
  <v-container :class="status">
19
- <v-row class="d-flex justify-center pa-2">{{
24
+ <v-alert class="d-flex justify-center pa-2">{{
20
25
  feedback
21
26
  ? feedback
22
27
  : $t(
23
28
  'windward.games.components.content.blocks.bucket_game.form.feedback.feedback_here'
24
29
  )
25
- }}</v-row>
30
+ }}</v-alert>
26
31
  <v-row class="d-flex justify-center pa-2">
27
32
  <v-btn
28
33
  v-if="status === 'successOutline'"
@@ -35,7 +40,9 @@
35
40
  v-if="status === 'errorOutline'"
36
41
  class="d-flex justify-center align-center"
37
42
  @click="onExitFeedback"
38
- ><v-icon class="icon--error">mdi-close-circle</v-icon>
43
+ ><v-btn class="error" elevation="0">{{
44
+ $t('shared.forms.try_again')
45
+ }}</v-btn>
39
46
  </v-container>
40
47
  </v-row>
41
48
  </v-container>
@@ -249,7 +256,10 @@
249
256
  v-for="(answer, aindex) in block.metadata.config
250
257
  .answerObjects"
251
258
  :key="aindex"
252
- class="pa-2 ma-2 answerCard container-outline"
259
+ :class="
260
+ 'pa-2 ma-2 answerCard container-outline ' +
261
+ answerColor(answer)
262
+ "
253
263
  outlined
254
264
  >
255
265
  <v-icon>mdi-drag-vertical</v-icon>
@@ -403,6 +413,7 @@ export default {
403
413
  },
404
414
  startingIndex: 0,
405
415
  flattenedPrompts: '',
416
+ droppedElement: null,
406
417
  }
407
418
  },
408
419
  watch: {
@@ -421,6 +432,15 @@ export default {
421
432
  this.setMainPrompt()
422
433
  },
423
434
  methods: {
435
+ answerColor(element) {
436
+ if (
437
+ !_.isEmpty(this.droppedElement) &&
438
+ element.display === this.droppedElement.display
439
+ ) {
440
+ return this.status
441
+ }
442
+ return ''
443
+ },
424
444
  shuffle(array) {
425
445
  let currentIndex = array.length,
426
446
  randomIndex
@@ -491,10 +511,12 @@ export default {
491
511
  }
492
512
  //set feedback information here
493
513
  if (_.isUndefined(target) || _.isEmpty(target)) {
494
- console.log('dragged to nowhere')
514
+ this.droppedElement = null
495
515
  } else if (draggedElement.id !== target.answer.id) {
496
516
  this.feedback = this.block.metadata.config.feedback_incorrect
497
517
  this.status = 'errorOutline'
518
+ this.allowDrag = false
519
+ this.droppedElement = draggedElement
498
520
  } else if (draggedElement.id === target.answer.id) {
499
521
  this.feedback = !_.isEmpty(target.matchExplanation)
500
522
  ? target.matchExplanation
@@ -502,6 +524,7 @@ export default {
502
524
  this.solvedQuestions.push(target)
503
525
  this.status = 'successOutline'
504
526
  this.allowDrag = false
527
+ this.droppedElement = draggedElement
505
528
  if (
506
529
  this.solvedQuestions.length === this.flattenedPrompts.length
507
530
  ) {
@@ -516,6 +539,7 @@ export default {
516
539
  onExitFeedback() {
517
540
  this.status = 'default'
518
541
  this.allowDrag = true
542
+ this.droppedElement = null
519
543
  this.feedback = this.$t(
520
544
  'windward.games.components.content.blocks.matching_game.default_feedback'
521
545
  )
@@ -527,6 +551,7 @@ export default {
527
551
  this.status = 'default'
528
552
  this.mainPrompt = this.shufflePrompts.shift()
529
553
  this.allowDrag = true
554
+ this.droppedElement = null
530
555
  this.feedback = this.$t(
531
556
  'windward.games.components.content.blocks.matching_game.default_feedback'
532
557
  )
@@ -576,18 +601,17 @@ export default {
576
601
  transition: 0.5s box-shadow;
577
602
  }
578
603
  .successOutline {
579
- border: 4px solid var(--v-success-base);
580
- color: var(--v-success-base);
604
+ border: 4px solid var(--v-success-base) !important;
581
605
  }
582
606
  .errorOutline {
583
- border: 4px solid var(--v-error-base);
584
- color: var(--v-error-base);
607
+ border: 4px solid var(--v-error-base) !important;
585
608
  }
586
609
  .card_text {
587
610
  font-size: large;
588
611
  }
589
612
  .answerCard {
590
613
  min-width: 23%;
614
+ cursor: grab;
591
615
  }
592
616
  .icon--error {
593
617
  color: var(--v-error-base);
package/components/content/blocks/multipleChoice/MultipleChoice.vue CHANGED
@@ -2,8 +2,16 @@
2
2
  <v-container class="pa-0">
3
3
  <v-row>
4
4
  <v-col>
5
- <h2>{{ block.metadata.config.title }}</h2>
6
- <p class="mb-0">{{ block.metadata.config.instructions }}</p>
5
+ <h2 v-if="block.metadata.config.title" tabindex="0">
6
+ {{ block.metadata.config.title }}
7
+ </h2>
8
+ <p
9
+ v-if="block.metadata.config.instructions"
10
+ tabindex="0"
11
+ class="pt-3"
12
+ >
13
+ {{ block.metadata.config.instructions }}
14
+ </p>
7
15
  </v-col>
8
16
  </v-row>
9
17
  <v-carousel height="auto" :hide-delimiters="hideDeliminators">
package/components/content/blocks/multipleChoice/QuestionDialog.vue CHANGED
@@ -11,7 +11,7 @@
11
11
  "
12
12
  :autofocus="true"
13
13
  rows="2"
14
- :rules="validation.textRules"
14
+ :rules="$Validation.getRule('exists')"
15
15
  prepend-inner-icon="mdi-help"
16
16
  :disabled="disabled"
17
17
  ></v-textarea>
@@ -23,7 +23,7 @@
23
23
  )
24
24
  "
25
25
  rows="2"
26
- :rules="validation.textRules"
26
+ :rules="$Validation.getRule('exists')"
27
27
  prepend-inner-icon="mdi-lightbulb-on-10"
28
28
  :disabled="disabled"
29
29
  ></v-textarea>
@@ -35,7 +35,7 @@
35
35
  )
36
36
  "
37
37
  rows="2"
38
- :rules="validation.textRules"
38
+ :rules="$Validation.getRule('exists')"
39
39
  prepend-inner-icon="mdi-comment"
40
40
  :disabled="disabled"
41
41
  ></v-textarea>
@@ -92,7 +92,7 @@
92
92
  )
93
93
  "
94
94
  rows="2"
95
- :rules="validation.textRules"
95
+ :rules="$Validation.getRule('exists')"
96
96
  :disabled="disabled"
97
97
  ></v-textarea>
98
98
  </v-col>
@@ -200,9 +200,6 @@ export default {
200
200
  return {
201
201
  question: {},
202
202
  validation: {
203
- textRules: [
204
- (v) => !!v || this.$t('shared.forms.errors.required'),
205
- ],
206
203
  optionRules: [
207
204
  (v) => {
208
205
  return (
package/components/content/blocks/quizshowGame/QuizShow.vue CHANGED
@@ -26,13 +26,6 @@
26
26
  <p tabindex="0">
27
27
  <TextViewer v-model="block.metadata.config.instructions" />
28
28
  </p>
29
- <p tabindex="0">
30
- {{
31
- $t(
32
- 'windward.games.components.content.blocks.quizshow_game.basic_instructions'
33
- )
34
- }}
35
- </p>
36
29
 
37
30
  <v-container
38
31
  class="d-flex flex-row flex-wrap flex-fill pa-0"
package/components/content/blocks/slideshow/SlideShow.vue CHANGED
@@ -2,6 +2,7 @@
2
2
  <div>
3
3
  <div class="header-description pa-0">
4
4
  <h2
5
+ v-if="block.metadata.config.title"
5
6
  :aria-label="
6
7
  $t(
7
8
  'windward.games.components.content.blocks.slideshow.slideshow_title'
@@ -12,7 +13,11 @@
12
13
  {{ block.metadata.config.title }}
13
14
  </h2>
14
15
 
15
- <p tabindex="0" class="pt-3">
16
+ <p
17
+ v-if="block.metadata.config.instructions"
18
+ tabindex="0"
19
+ class="pt-3"
20
+ >
16
21
  {{ block.metadata.config.instructions }}
17
22
  </p>
18
23
  </div>
package/components/settings/BucketGameSettingsManager.vue CHANGED
@@ -3,10 +3,11 @@
3
3
  <v-container class="pa-0">
4
4
  <v-text-field
5
5
  ref="title"
6
+ id="block-settings-title"
6
7
  v-model="block.metadata.config.title"
7
- :rules="validation.titleRule"
8
+ :rules="$Validation.getRule('block.title')"
9
+ :counter="$Validation.getLimit('block.title')"
8
10
  outlined
9
- :counter="50"
10
11
  :autofocus="true"
11
12
  :label="
12
13
  $t(
@@ -16,11 +17,12 @@
16
17
  :disabled="render"
17
18
  ></v-text-field>
18
19
  <v-textarea
20
+ id="block-settings-instructions"
19
21
  v-model="block.metadata.config.instructions"
20
22
  outlined
21
23
  auto-grow
22
- :rules="validation.instructionsRule"
23
- :counter="255"
24
+ :rules="$Validation.getRule('block.instructions')"
25
+ :counter="$Validation.getLimit('block.instructions')"
24
26
  :label="
25
27
  $t(
26
28
  'windward.games.components.settings.bucket_game.form.instructions'
@@ -319,32 +321,6 @@ export default {
319
321
  [colors.lightGreen.lighten4, colors.teal.lighten4],
320
322
  [colors.lightBlue.lighten4, colors.deepPurple.lighten3],
321
323
  ],
322
- validation: {
323
- titleRule: [
324
- (v) => {
325
- if (v && v.length >= 50) {
326
- return this.$t(
327
- 'windward.games.shared.settings.errors.input_limitations',
328
- [50]
329
- )
330
- } else {
331
- return true
332
- }
333
- },
334
- ],
335
- instructionsRule: [
336
- (v) => {
337
- if (v && v.length >= 255) {
338
- return this.$t(
339
- 'windward.games.shared.settings.errors.input_limitations',
340
- [255]
341
- )
342
- } else {
343
- return true
344
- }
345
- },
346
- ],
347
- },
348
324
  }
349
325
  },
350
326
  methods: {
package/components/settings/CrosswordPuzzleSettingsManager.vue CHANGED
@@ -3,9 +3,10 @@
3
3
  <v-container class="pa-0">
4
4
  <v-text-field
5
5
  ref="title"
6
+ id="block-settings-title"
6
7
  v-model="block.metadata.config.title"
7
- :counter="50"
8
- :rules="validation.titleRule"
8
+ :rules="$Validation.getRule('block.title')"
9
+ :counter="$Validation.getLimit('block.title')"
9
10
  outlined
10
11
  :autofocus="true"
11
12
  :label="
@@ -16,11 +17,12 @@
16
17
  :disabled="render"
17
18
  ></v-text-field>
18
19
  <v-textarea
20
+ id="block-settings-instructions"
19
21
  outlined
20
22
  auto-grow
21
23
  v-model="block.metadata.config.instructions"
22
- :rules="validation.instructionRule"
23
- :counter="255"
24
+ :rules="$Validation.getRule('block.instructions')"
25
+ :counter="$Validation.getLimit('block.instructions')"
24
26
  :label="
25
27
  $t(
26
28
  'windward.games.components.settings.bucket_game.form.instructions'
@@ -178,30 +180,6 @@ export default {
178
180
  valid: true,
179
181
  loading: false,
180
182
  validation: {
181
- titleRule: [
182
- (v) => {
183
- if (v && v.length >= 50) {
184
- return this.$t(
185
- 'windward.games.shared.settings.errors.input_limitations',
186
- [50]
187
- )
188
- } else {
189
- return true
190
- }
191
- },
192
- ],
193
- instructionRule: [
194
- (v) => {
195
- if (v && v.length >= 255) {
196
- return this.$t(
197
- 'windward.games.shared.settings.errors.input_limitations',
198
- [255]
199
- )
200
- } else {
201
- return true
202
- }
203
- },
204
- ],
205
183
  wordRule: [
206
184
  (v) => {
207
185
  if (v && v.length >= 20) {
package/components/settings/FlashCardSlidesManager.vue CHANGED
@@ -3,10 +3,11 @@
3
3
  <v-container class="pa-0">
4
4
  <v-text-field
5
5
  ref="title"
6
+ id="block-settings-title"
6
7
  v-model="block.metadata.config.title"
8
+ :rules="$Validation.getRule('block.title')"
9
+ :counter="$Validation.getLimit('block.title')"
7
10
  outlined
8
- :counter="50"
9
- :rules="validation.shortInputRules"
10
11
  :label="
11
12
  $t(
12
13
  'windward.games.components.settings.bucket_game.form.title'
@@ -15,9 +16,10 @@
15
16
  :disabled="render"
16
17
  ></v-text-field>
17
18
  <v-textarea
19
+ id="block-settings-instructions"
18
20
  v-model="block.metadata.config.instructions"
19
- :rules="validation.instructionRule"
20
- :counter="255"
21
+ :rules="$Validation.getRule('block.instructions')"
22
+ :counter="$Validation.getLimit('block.instructions')"
21
23
  outlined
22
24
  auto-grow
23
25
  :label="
@@ -116,8 +118,8 @@
116
118
  "
117
119
  outlined
118
120
  auto-grow
119
- :rules="validation.shortInputRules"
120
- :counter="50"
121
+ :rules="$Validation.getRule('shortInput')"
122
+ :counter="$Validation.getLimit('shortInput')"
121
123
  :label="
122
124
  $t(
123
125
  'windward.games.components.settings.flashcard.form.header'
@@ -162,13 +164,14 @@
162
164
  .imageAsset
163
165
  "
164
166
  mimes="image/png,image/jpeg"
167
+ outlined
165
168
  :assets.sync="block.assets"
166
169
  :disabled="render"
167
170
  >
168
171
  <template #title>
169
172
  {{
170
173
  $t(
171
- 'windward.games.components.settings.flashcard.form.image.title'
174
+ 'windward.games.shared.settings.file_picker.image'
172
175
  )
173
176
  }}
174
177
  </template>
@@ -233,13 +236,14 @@
233
236
  .imageAsset
234
237
  "
235
238
  mimes="image/png,image/jpeg"
239
+ outlined
236
240
  :assets.sync="block.assets"
237
241
  :disabled="render"
238
242
  >
239
243
  <template #title>
240
244
  {{
241
245
  $t(
242
- 'windward.games.components.settings.flashcard.form.image.title'
246
+ 'windward.games.shared.settings.file_picker.image'
243
247
  )
244
248
  }}
245
249
  </template>
@@ -368,32 +372,6 @@ export default {
368
372
  return {
369
373
  loading: false,
370
374
  valid: true,
371
- validation: {
372
- shortInputRules: [
373
- (v) => {
374
- if (v && v.length >= 50) {
375
- return this.$t(
376
- 'windward.games.shared.settings.errors.input_limitations',
377
- [50]
378
- )
379
- } else {
380
- return true
381
- }
382
- },
383
- ],
384
- instructionRule: [
385
- (v) => {
386
- if (v && v.length >= 255) {
387
- return this.$t(
388
- 'windward.games.shared.settings.errors.input_limitations',
389
- [255]
390
- )
391
- } else {
392
- return true
393
- }
394
- },
395
- ],
396
- },
397
375
  }
398
376
  },
399
377
  beforeMount() {