@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
@@ -1,7 +1,7 @@
1
1
  <template>
2
2
  <div>
3
3
  <div>
4
- <h3
4
+ <h2
5
5
  :aria-label="
6
6
  $t(
7
7
  'windward.games.components.content.blocks.matching_game.match_game_title'
@@ -10,7 +10,7 @@
10
10
  tabindex="0"
11
11
  >
12
12
  {{ block.metadata.config.title }}
13
- </h3>
13
+ </h2>
14
14
 
15
15
  <p tabindex="0">
16
16
  {{ block.metadata.config.instructions }}
@@ -38,6 +38,7 @@
38
38
  <v-btn
39
39
  v-if="status === 'successOutline'"
40
40
  class="success mr-5"
41
+ elevation="0"
41
42
  @click="onContinueGame"
42
43
  >{{ $t('shared.forms.continue') }}
43
44
  </v-btn>
@@ -124,7 +125,7 @@
124
125
  >
125
126
  <v-card-text>
126
127
  <draggable
127
- v-if="mainPrompt['file']"
128
+ v-if="mainPrompt.file"
128
129
  class="dragArea list-group"
129
130
  :key="mainPrompt['prompt']"
130
131
  v-bind="dragOptions"
@@ -132,25 +133,26 @@
132
133
  group="people"
133
134
  tabindex="0"
134
135
  >
135
- <div
136
- :id="
137
- mainPrompt['file']['asset'][
138
- 'public_url'
139
- ]
140
- "
141
- >
136
+ <div :id="mainPrompt.file.id">
142
137
  <v-img
143
- v-if="mainPrompt['file']"
144
138
  :aria-describedby="
145
- mainPrompt[
146
- 'ariaDescribedBy'
147
- ]
139
+ getFileAriaDescribedBy(
140
+ mainPrompt.file,
141
+ mainPrompt[
142
+ 'ariaDescribedBy'
143
+ ]
144
+ )
145
+ "
146
+ :alt="
147
+ getFileAlt(
148
+ mainPrompt.file,
149
+ mainPrompt['altText']
150
+ )
148
151
  "
149
- :alt="mainPrompt['altText']"
150
152
  :src="
151
- mainPrompt['file']['asset'][
152
- 'public_url'
153
- ]
153
+ getFilePublicUrl(
154
+ mainPrompt.file
155
+ )
154
156
  "
155
157
  ></v-img>
156
158
  </div>
@@ -232,36 +234,45 @@
232
234
  :id="
233
235
  block.metadata.config.prompts[
234
236
  startingIndex
235
- ][startingIndex].file.asset
236
- .public_url
237
+ ][startingIndex].file.id
237
238
  "
238
239
  >
239
240
  <v-img
240
- v-if="
241
- block.metadata.config
242
- .prompts[startingIndex][
243
- startingIndex
244
- ]['file']
245
- "
246
241
  :aria-describedby="
247
- block.metadata.config
248
- .prompts[startingIndex][
249
- startingIndex
250
- ]['ariaDescribedBy']
242
+ getFileAriaDescribedBy(
243
+ block.metadata.config
244
+ .prompts[
245
+ startingIndex
246
+ ][startingIndex].file,
247
+ block.metadata.config
248
+ .prompts[
249
+ startingIndex
250
+ ][startingIndex][
251
+ 'ariaDescribedBy'
252
+ ]
253
+ )
251
254
  "
252
255
  :alt="
253
- block.metadata.config
254
- .prompts[startingIndex][
255
- startingIndex
256
- ]['altText']
256
+ getFileAlt(
257
+ block.metadata.config
258
+ .prompts[
259
+ startingIndex
260
+ ][startingIndex].file,
261
+ block.metadata.config
262
+ .prompts[
263
+ startingIndex
264
+ ][startingIndex][
265
+ 'altText'
266
+ ]
267
+ )
257
268
  "
258
269
  :src="
259
- block.metadata.config
260
- .prompts[startingIndex][
261
- startingIndex
262
- ]['file']['asset'][
263
- 'public_url'
264
- ]
270
+ getFilePublicUrl(
271
+ block.metadata.config
272
+ .prompts[
273
+ startingIndex
274
+ ][startingIndex].file
275
+ )
265
276
  "
266
277
  ></v-img>
267
278
  </div>
@@ -312,6 +323,7 @@
312
323
  <v-btn
313
324
  color="primary"
314
325
  outlined
326
+ elevation="0"
315
327
  @click="onReset"
316
328
  >{{
317
329
  $t(
@@ -410,12 +422,7 @@ export default {
410
422
  mainPrompt: {
411
423
  altText: '',
412
424
  answer: {},
413
- file: {
414
- asset: {
415
- public_url: '',
416
- },
417
- name: '',
418
- },
425
+ file: null,
419
426
  prompt: '',
420
427
  textOrImage: 'text',
421
428
  },
@@ -489,10 +496,7 @@ export default {
489
496
  this.block.metadata.config.answerObjects[evt.oldIndex]
490
497
  this.block.metadata.config.prompts.forEach((outerElement) => {
491
498
  const mainElement = outerElement.find((element) => {
492
- return (
493
- element.file?.asset.public_url ==
494
- evt.to.firstElementChild.id
495
- )
499
+ return element.file?.id == evt.to.firstElementChild.id
496
500
  })
497
501
  if (mainElement) {
498
502
  target = mainElement
@@ -550,6 +554,28 @@ export default {
550
554
  )
551
555
  this.setMainPrompt()
552
556
  },
557
+ getFileAlt(file, defaultText = '') {
558
+ // If a default / override was defined
559
+ if (defaultText) {
560
+ return defaultText
561
+ }
562
+
563
+ file = this.resolveAsset(file)
564
+ return _.get(file, 'asset.metadata.props.alt', '')
565
+ },
566
+ getFileAriaDescribedBy(file, defaultText = '') {
567
+ // If a default / override was defined
568
+ if (defaultText) {
569
+ return defaultText
570
+ }
571
+
572
+ file = this.resolveAsset(file)
573
+ return _.get(file, 'asset.metadata.props.aria_describedby', '')
574
+ },
575
+ getFilePublicUrl(file) {
576
+ file = this.resolveAsset(file)
577
+ return _.get(file, 'asset.public_url', '')
578
+ },
553
579
  },
554
580
  }
555
581
  </script>
@@ -2,15 +2,16 @@
2
2
  <v-container>
3
3
  <v-row>
4
4
  <v-col>
5
- <h3>{{ block.metadata.config.title }}</h3>
5
+ <h2>{{ block.metadata.config.title }}</h2>
6
6
  <p class="mb-0">{{ block.metadata.config.instructions }}</p>
7
7
  </v-col>
8
8
  </v-row>
9
- <v-carousel height="600">
9
+ <v-carousel height="auto">
10
10
  <template #prev="{ on, attrs }">
11
11
  <v-btn
12
12
  variant="elevated"
13
13
  color="primary"
14
+ elevation="0"
14
15
  outlined
15
16
  fab
16
17
  small
@@ -23,6 +24,7 @@
23
24
  <v-btn
24
25
  variant="elevated"
25
26
  color="primary"
27
+ elevation="0"
26
28
  outlined
27
29
  fab
28
30
  small
@@ -38,7 +40,7 @@
38
40
  <v-col class="d-flex justify-center">
39
41
  <p>{{ question.body }}</p>
40
42
  </v-col>
41
- <v-container :key="updateKey">
43
+ <v-container :key="updateKey" class="pl-16 pr-16">
42
44
  <v-row
43
45
  v-for="answer in question.answer_options"
44
46
  :key="answer.id"
@@ -97,6 +99,7 @@
97
99
  <v-btn
98
100
  color="primary"
99
101
  text
102
+ elevation="0"
100
103
  class="mr-4 btn-hint"
101
104
  @click="onHint(question)"
102
105
  >{{
@@ -108,6 +111,7 @@
108
111
  <v-btn
109
112
  color="primary"
110
113
  text
114
+ elevation="0"
111
115
  :disabled="
112
116
  question.answer_options.length !== 4 ||
113
117
  question.fiftyFifty
@@ -122,7 +126,7 @@
122
126
  >
123
127
  </v-row>
124
128
  </v-col>
125
- <v-layout class="mt-2">
129
+ <v-layout>
126
130
  <v-flex xs4></v-flex>
127
131
  <v-flex xs4>
128
132
  <v-col align="center" tabindex="0">
@@ -144,7 +148,7 @@
144
148
  </v-flex>
145
149
  <v-flex xs4></v-flex>
146
150
  </v-layout>
147
- <v-layout class="mt-2" v-if="mountCourseCounter">
151
+ <v-layout v-if="mountCourseCounter" class="mb-6">
148
152
  <v-flex xs8></v-flex>
149
153
  <v-flex xs4>
150
154
  <v-col>
@@ -206,11 +210,11 @@
206
210
  </v-container>
207
211
  </template>
208
212
  <script>
209
- import BaseContentBlock from '~/components/Content/Blocks/BaseContentBlock'
210
- import DialogBox from '~/components/DialogBox.vue'
211
213
  import _ from 'lodash'
212
214
  import Crypto from '~/helpers/Crypto'
213
215
  import { mapGetters } from 'vuex'
216
+ import BaseContentBlock from '~/components/Content/Blocks/BaseContentBlock'
217
+ import DialogBox from '~/components/Core/DialogBox.vue'
214
218
  import UserContentBlockState from '~/models/UserContentBlockState'
215
219
  import ContentBlock from '~/models/ContentBlock'
216
220
  import Course from '~/models/Course'
@@ -290,9 +294,9 @@ export default {
290
294
  },
291
295
  },
292
296
  mounted() {
293
- this.mountCourseCounter = false
297
+ //this.mountCourseCounter = false
294
298
  this.onAmountCorrect()
295
- this.onTotalAmountOfQuestions()
299
+ //this.onTotalAmountOfQuestions()
296
300
  },
297
301
  methods: {
298
302
  async onAmountCorrect() {
@@ -13,6 +13,7 @@
13
13
  rows="2"
14
14
  :rules="validation.textRules"
15
15
  prepend-inner-icon="mdi-help"
16
+ :disabled="disabled"
16
17
  ></v-textarea>
17
18
  <v-textarea
18
19
  v-model="question.hint"
@@ -24,6 +25,7 @@
24
25
  rows="2"
25
26
  :rules="validation.textRules"
26
27
  prepend-inner-icon="mdi-lightbulb-on-10"
28
+ :disabled="disabled"
27
29
  ></v-textarea>
28
30
  <v-textarea
29
31
  v-model="question.answer_description"
@@ -35,6 +37,7 @@
35
37
  rows="2"
36
38
  :rules="validation.textRules"
37
39
  prepend-inner-icon="mdi-comment"
40
+ :disabled="disabled"
38
41
  ></v-textarea>
39
42
  <br />
40
43
  <h4 class="pb-2">
@@ -67,18 +70,19 @@
67
70
  <v-radio-group v-model="question.correctAnswer">
68
71
  <v-radio
69
72
  :ref="'checkbox' + index"
70
- v-on:keydown.enter="onSetAnswer(answer, true)"
71
73
  :value="answer.id"
74
+ :disabled="disabled"
75
+ v-on:keydown.enter="onSetAnswer(answer, true)"
72
76
  @click="onSetAnswer(answer)"
73
77
  ></v-radio>
74
78
  </v-radio-group>
75
79
  </v-col>
76
80
  <v-col cols="12" md="10">
77
81
  <v-textarea
82
+ v-model="answer.value"
78
83
  flat
79
84
  solo
80
85
  :autofocus="answer.focus"
81
- v-model="answer.value"
82
86
  :outlined="setOutline(answer)"
83
87
  hide-details
84
88
  :class="getCorrectAnswer(answer)"
@@ -89,22 +93,32 @@
89
93
  "
90
94
  rows="2"
91
95
  :rules="validation.textRules"
96
+ :disabled="disabled"
92
97
  ></v-textarea>
93
98
  </v-col>
94
- <v-col
95
- cols="12"
96
- md="1"
97
- class="d-flex justify-center"
98
- @mouseover="onHover"
99
- @mouseleave="onHoverLeave"
100
- @click="onDelete(index)"
101
- >
102
- <v-icon color="error">mdi-delete-outline</v-icon>
99
+ <v-col cols="12" md="1" class="d-flex justify-center">
100
+ <v-btn
101
+ text
102
+ elevation="0"
103
+ :disabled="disabled"
104
+ @click="onDelete(index)"
105
+ >
106
+ <v-icon color="error">mdi-delete-outline</v-icon>
107
+ <span class="d-sr-only">{{
108
+ $t('shared.forms.delete')
109
+ }}</span>
110
+ </v-btn>
103
111
  </v-col>
104
112
  </v-row>
105
113
  </v-container>
106
114
  <v-container class="d-flex justify-center" v-if="overLength">
107
- <v-btn @click="onAddAnswer" :class="cursor" color="primary">
115
+ <v-btn
116
+ :class="cursor"
117
+ color="primary"
118
+ elevation="0"
119
+ :disabled="disabled"
120
+ @click="onAddAnswer"
121
+ >
108
122
  <v-icon>mdi-plus</v-icon>
109
123
  {{
110
124
  $t(
@@ -117,7 +131,7 @@
117
131
  </v-form>
118
132
  </template>
119
133
  <script>
120
- import Form from '~/components/Form'
134
+ import Form from '~/components/Core/Form'
121
135
  import _ from 'lodash'
122
136
  import Crypto from '~/helpers/Crypto'
123
137
  export default {
@@ -156,6 +156,7 @@
156
156
  <v-btn
157
157
  v-if="editMode"
158
158
  @click="addChoice"
159
+ elevation="0"
159
160
  class="ma-1 pa-5 justify-start"
160
161
  color="error"
161
162
  >
@@ -211,7 +212,7 @@
211
212
  </template>
212
213
 
213
214
  <script>
214
- import DialogBox from '~/components/DialogBox.vue'
215
+ import DialogBox from '~/components/Core/DialogBox.vue'
215
216
  import { MathHelper } from '@windward/core/utils'
216
217
  import TextEditor from '~/components/Text/TextEditor.vue'
217
218
  import TextViewer from '~/components/Text/TextViewer.vue'
@@ -10,6 +10,7 @@
10
10
  <v-spacer></v-spacer>
11
11
  <v-btn
12
12
  icon
13
+ elevation="0"
13
14
  :aria-label="
14
15
  $t(
15
16
  'windward.games.components.content.blocks.quizshow_game.expand_button'
@@ -218,7 +219,7 @@
218
219
  </template>
219
220
 
220
221
  <script>
221
- import DialogBox from '~/components/DialogBox.vue'
222
+ import DialogBox from '~/components/Core/DialogBox.vue'
222
223
  import VueExcelEditor from 'vue-excel-editor/src/VueExcelEditor'
223
224
  import VueExcelColumn from 'vue-excel-editor/src/VueExcelColumn'
224
225
  import _ from 'lodash'
@@ -12,7 +12,7 @@
12
12
  ></v-switch>
13
13
  <div v-if="!tableMode">
14
14
  <div>
15
- <h3
15
+ <h2
16
16
  :aria-label="
17
17
  $t(
18
18
  'windward.games.components.content.blocks.quizshow_game.title'
@@ -21,7 +21,7 @@
21
21
  tabindex="0"
22
22
  >
23
23
  {{ title }}
24
- </h3>
24
+ </h2>
25
25
 
26
26
  <p tabindex="0">
27
27
  <TextViewer v-model="block.metadata.config.instructions" />
@@ -67,6 +67,7 @@
67
67
  <v-row align="center" justify="center">
68
68
  <v-btn
69
69
  outlined
70
+ elevation="0"
70
71
  :color="
71
72
  getButtonColor(cat_index, point_index)
72
73
  "
@@ -143,6 +144,7 @@
143
144
  <v-btn
144
145
  class="text-capitalize"
145
146
  color="primary"
147
+ elevation="0"
146
148
  @click="show = !show"
147
149
  outlined
148
150
  >
@@ -162,6 +164,7 @@
162
164
  >
163
165
  <v-btn
164
166
  outlined
167
+ elevation="0"
165
168
  class="text-capitalize"
166
169
  color="primary"
167
170
  @click="resetGame"
@@ -1,7 +1,7 @@
1
1
  <template>
2
2
  <div>
3
3
  <v-col class="pa-0">
4
- <h3>
4
+ <h2>
5
5
  {{
6
6
  block.metadata.config.title
7
7
  ? block.metadata.config.title
@@ -9,7 +9,7 @@
9
9
  'windward.games.components.content.blocks.seven_strikes.title'
10
10
  )
11
11
  }}
12
- </h3>
12
+ </h2>
13
13
  <p>{{ block.metadata.config.instructions }}</p>
14
14
  </v-col>
15
15
  <v-col class="pa-0">
@@ -22,6 +22,7 @@
22
22
  <v-btn
23
23
  variant="elevated"
24
24
  color="primary"
25
+ elevation="0"
25
26
  outlined
26
27
  fab
27
28
  small
@@ -34,6 +35,7 @@
34
35
  <v-btn
35
36
  variant="elevated"
36
37
  color="primary"
38
+ elevation="0"
37
39
  outlined
38
40
  fab
39
41
  small
@@ -76,6 +78,7 @@
76
78
  "
77
79
  class="mr-5"
78
80
  color="success"
81
+ elevation="0"
79
82
  @click="onChangeSlide(index + 1)"
80
83
  >{{ $t('shared.forms.continue') }}
81
84
  </v-btn>
@@ -155,6 +158,7 @@
155
158
  color="primary"
156
159
  class="ml-4"
157
160
  outlined
161
+ elevation="0"
158
162
  @click="onRevealAnswer"
159
163
  >{{
160
164
  $t(
@@ -166,6 +170,7 @@
166
170
  color="primary"
167
171
  class="ml-4"
168
172
  outlined
173
+ elevation="0"
169
174
  @click="onSlideChanged(index)"
170
175
  >{{
171
176
  $t(
@@ -176,6 +181,7 @@
176
181
  <v-btn
177
182
  @click="onChangeSlide(index + 1)"
178
183
  color="primary ml-4"
184
+ elevation="0"
179
185
  >{{
180
186
  $t(
181
187
  'windward.games.components.content.blocks.seven_strikes.next'
@@ -1,7 +1,7 @@
1
1
  <template>
2
2
  <div>
3
- <div class="header-description">
4
- <h3
3
+ <div class="header-description pa-0">
4
+ <h2
5
5
  :aria-label="
6
6
  $t(
7
7
  'windward.games.components.content.blocks.slideshow.slideshow_title'
@@ -10,18 +10,11 @@
10
10
  tabindex="0"
11
11
  >
12
12
  {{ block.metadata.config.title }}
13
- </h3>
13
+ </h2>
14
14
 
15
15
  <p tabindex="0" class="pt-3">
16
16
  {{ block.metadata.config.instructions }}
17
17
  </p>
18
- <p tabindex="0">
19
- {{
20
- $t(
21
- 'windward.games.components.content.blocks.slideshow.basic_instructions'
22
- )
23
- }}
24
- </p>
25
18
  </div>
26
19
  <div>
27
20
  <template v-if="block.metadata.config.slides.length !== 0">
@@ -30,6 +23,7 @@
30
23
  <v-btn
31
24
  variant="elevated"
32
25
  color="primary"
26
+ elevation="0"
33
27
  outlined
34
28
  fab
35
29
  small
@@ -42,6 +36,7 @@
42
36
  <v-btn
43
37
  variant="elevated"
44
38
  color="primary"
39
+ elevation="0"
45
40
  outlined
46
41
  fab
47
42
  small
@@ -57,23 +52,24 @@
57
52
  >
58
53
  <v-carousel-item>
59
54
  <div class="fill-height d-flex flex-column">
60
- <div>
61
- <h3 class="header-description">
62
- {{ slide['header'] }} :
63
- </h3>
55
+ <div class="pa-0 ma-0">
56
+ <h4 class="header-description">
57
+ {{ slide['header'] }}
58
+ </h4>
64
59
  <p class="header-description">
65
60
  {{ slide['description'] }}
66
61
  </p>
67
62
  </div>
68
- <div style="overflow: auto">
63
+ <div style="overflow: auto" class="pl-15 pr-15">
69
64
  <v-img
70
- v-if="slide['image']"
71
- :src="
72
- slide['image']['asset'][
73
- 'public_url'
74
- ]
65
+ v-if="slide['imageAsset']"
66
+ :src="getImageUrl(slide['imageAsset'])"
67
+ :alt="
68
+ getImageAlt(
69
+ slide['imageAsset'],
70
+ slide['imageAlt']
71
+ )
75
72
  "
76
- :alt="slide['image_alt']"
77
73
  height="100%"
78
74
  contain
79
75
  />
@@ -129,7 +125,20 @@ export default {
129
125
  this.block.metadata.config.currentSlide = 0
130
126
  },
131
127
  },
132
- methods: {},
128
+ methods: {
129
+ getImageUrl(file) {
130
+ file = this.resolveAsset(file)
131
+ return _.get(file, 'asset.public_url', '')
132
+ },
133
+ getImageAlt(file, defaultText = '') {
134
+ // If a default / override was defined
135
+ if (defaultText) {
136
+ return defaultText
137
+ }
138
+ file = this.resolveAsset(file)
139
+ return _.get(file, 'asset.metadata.props.alt', '')
140
+ },
141
+ },
133
142
  }
134
143
  </script>
135
144
  <style scoped>