@windward/games 0.4.0 → 0.5.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 (17) hide show
  1. package/components/content/blocks/crosswordPuzzle/CrosswordPuzzle.vue +1 -1
  2. package/components/content/blocks/dragDrop/BucketGame.vue +6 -2
  3. package/components/content/blocks/flashcards/FlashcardSlides.vue +35 -2
  4. package/components/content/blocks/matchingGame/MatchingGame.vue +318 -321
  5. package/components/content/blocks/multipleChoice/MultipleChoice.vue +31 -2
  6. package/components/content/blocks/quizshowGame/AnswerPanel.vue +2 -1
  7. package/components/content/blocks/quizshowGame/QuizShow.vue +1 -1
  8. package/components/content/blocks/sevenStrikes/SevenStikes.vue +33 -1
  9. package/components/content/blocks/slideshow/SlideShow.vue +41 -3
  10. package/components/content/blocks/wordJumble/WordJumble.vue +33 -1
  11. package/components/settings/MatchingGameManager.vue +26 -27
  12. package/components/settings/SevenStrikesSettingsManager.vue +17 -15
  13. package/components/settings/WordJumbleSettingsManager.vue +19 -17
  14. package/i18n/en-US/components/settings/matching_game.ts +4 -0
  15. package/i18n/es-ES/components/settings/matching_game.ts +4 -0
  16. package/i18n/sv-SE/components/settings/matching_game.ts +4 -0
  17. package/package.json +1 -1
package/components/content/blocks/crosswordPuzzle/CrosswordPuzzle.vue CHANGED
@@ -1,5 +1,5 @@
1
1
  <template>
2
- <v-container>
2
+ <v-container class="pa-0">
3
3
  <div>
4
4
  <h2>{{ block.metadata.config.title }}</h2>
5
5
  <p>{{ block.metadata.config.instructions }}</p>
package/components/content/blocks/dragDrop/BucketGame.vue CHANGED
@@ -217,7 +217,7 @@
217
217
  )
218
218
  "
219
219
  >
220
- <v-col align="end" tabindex="0">
220
+ <v-col align="end" tabindex="0" class="pa-0">
221
221
  {{
222
222
  $t(
223
223
  'windward.games.components.content.blocks.matching_game.of_complete_text_area',
@@ -233,7 +233,11 @@
233
233
  style="pointer-events: none"
234
234
  ></v-progress-linear>
235
235
  <br />
236
- <v-btn color="primary" outlined elevation="0" @click="onReset"
236
+ <v-btn
237
+ color="primary"
238
+ outlined
239
+ elevation="0"
240
+ @click="onReset"
237
241
  >{{ $t('shared.forms.reset') }}
238
242
  </v-btn>
239
243
  </v-col>
package/components/content/blocks/flashcards/FlashcardSlides.vue CHANGED
@@ -8,7 +8,10 @@
8
8
  {{ block.metadata.config.instructions }}
9
9
  </p>
10
10
  <br />
11
- <v-carousel v-model="block.metadata.config.currentSlide">
11
+ <v-carousel
12
+ :value="block.metadata.config.currentSlide"
13
+ :hide-delimiters="hideDeliminators"
14
+ >
12
15
  <template #prev="{ on, attrs }">
13
16
  <v-btn
14
17
  variant="elevated"
@@ -39,7 +42,7 @@
39
42
  v-for="(card, index) in block.metadata.config.cards"
40
43
  :key="index"
41
44
  >
42
- <v-sheet height="100%" tile>
45
+ <v-sheet height="90%" tile>
43
46
  <Flashcard
44
47
  v-model="block.metadata.config.cards[index].side"
45
48
  :options="card"
@@ -59,6 +62,7 @@ import Flashcard from './Flashcard'
59
62
  import draggable from 'vuedraggable'
60
63
  import BaseContentBlock from '~/components/Content/Blocks/BaseContentBlock'
61
64
  import Crypto from '~/helpers/Crypto'
65
+
62
66
  export default {
63
67
  name: 'Flashcards',
64
68
  components: { Flashcard, draggable },
@@ -101,6 +105,35 @@ export default {
101
105
  }
102
106
  return 0
103
107
  },
108
+ hideDeliminators() {
109
+ const condition1 =
110
+ window.innerWidth <= 1483 ||
111
+ this.block.metadata.config.cards.length >= 13
112
+ const condition2 =
113
+ this.block.metadata.config.cards.length >= 12 &&
114
+ window.innerWidth <= 1692
115
+ const condition3 =
116
+ this.block.metadata.config.cards.length >= 11 &&
117
+ window.innerWidth <= 1634
118
+ const condition4 =
119
+ this.block.metadata.config.cards.length >= 10 &&
120
+ window.innerWidth <= 1571
121
+ const condition5 =
122
+ this.block.metadata.config.cards.length >= 9 &&
123
+ window.innerWidth <= 1518
124
+
125
+ if (
126
+ condition1 ||
127
+ condition2 ||
128
+ condition3 ||
129
+ condition4 ||
130
+ condition5
131
+ ) {
132
+ return true
133
+ } else {
134
+ return false
135
+ }
136
+ },
104
137
  },
105
138
  methods: {
106
139
  onActionPanelEdit() {
package/components/content/blocks/matchingGame/MatchingGame.vue CHANGED
@@ -23,321 +23,304 @@
23
23
  }}
24
24
  </p>
25
25
 
26
- <v-container fluid :class="status" class="pa-0">
27
- <br />
28
- <v-row>
29
- <v-col></v-col>
30
- <v-col class="d-flex justify-center">{{
31
- feedback
32
- ? feedback
33
- : $t(
34
- 'windward.games.components.content.blocks.bucket_game.form.feedback.feedback_here'
35
- )
36
- }}</v-col>
37
- <v-col class="d-flex justify-end pl-4">
38
- <v-btn
39
- v-if="status === 'successOutline'"
40
- class="success mr-5"
41
- elevation="0"
42
- @click="onContinueGame"
43
- >{{ $t('shared.forms.continue') }}
44
- </v-btn>
45
- <v-container
46
- v-if="status === 'errorOutline'"
47
- class="d-flex justify-end"
48
- @click="onExitFeedback"
49
- ><v-icon class="icon--error"
50
- >mdi-close-circle</v-icon
51
- >
52
- </v-container>
53
- </v-col>
26
+ <v-container fluid :class="status">
27
+ <v-row class="d-flex justify-center pa-2">{{
28
+ feedback
29
+ ? feedback
30
+ : $t(
31
+ 'windward.games.components.content.blocks.bucket_game.form.feedback.feedback_here'
32
+ )
33
+ }}</v-row>
34
+ <v-row class="d-flex justify-center pa-2">
35
+ <v-btn
36
+ v-if="status === 'successOutline'"
37
+ class="success mr-5"
38
+ elevation="0"
39
+ @click="onContinueGame"
40
+ >{{ $t('shared.forms.continue') }}
41
+ </v-btn>
42
+ <v-container
43
+ v-if="status === 'errorOutline'"
44
+ class="d-flex justify-center align-center"
45
+ @click="onExitFeedback"
46
+ ><v-icon class="icon--error">mdi-close-circle</v-icon>
47
+ </v-container>
54
48
  </v-row>
55
- <br />
56
49
  </v-container>
57
- <div>
58
- <v-container>
59
- <v-row>
60
- <draggable
61
- v-bind="dragOptions"
62
- class="d-flex justify-space-between flex-wrap col-md-12"
63
- :list="block.metadata.config.answerObjects"
64
- :disabled="!allowDrag"
65
- :group="{
66
- name: 'people',
67
- pull: 'clone',
68
- put: false,
69
- }"
70
- @end="onEnd"
71
- >
72
- <v-card
73
- v-for="(answer, aindex) in block.metadata.config
74
- .answerObjects"
75
- :key="aindex"
76
- class="pa-2 ma-2 answerCard container-outline"
77
- outlined
78
- >
79
- <v-icon>mdi-drag-vertical</v-icon>
80
- <span>
81
- {{ answer.display }}
82
- </span>
83
- </v-card>
84
- </draggable>
85
- </v-row>
86
- <v-row
87
- v-if="render"
88
- class="d-flex flex-wrap flex-row justify-center flex-fill"
50
+ <v-container class="pa-0">
51
+ <v-row>
52
+ <draggable
53
+ v-bind="dragOptions"
54
+ class="d-flex justify-space-between flex-wrap col-md-12"
55
+ :list="block.metadata.config.answerObjects"
56
+ :disabled="!allowDrag"
57
+ :group="{
58
+ name: 'people',
59
+ pull: 'clone',
60
+ put: false,
61
+ }"
62
+ @end="onEnd"
89
63
  >
90
- <v-row align="center" class="col-md-12">
91
- <v-card
92
- v-if="mainPrompt['textOrImage'] === 'text'"
93
- class="flex-fill bucket"
94
- min-height="5em"
95
- outlined
96
- tile
97
- color="secondary"
98
- >
99
- <v-card-text class="text-center">
100
- <draggable
101
- class="dragArea list-group"
102
- :key="mainPrompt['prompt']"
103
- v-bind="dragOptions"
104
- disabled
105
- group="people"
106
- tabindex="0"
107
- >
108
- <div
109
- class="card_text secondary"
110
- color="secondary"
111
- >
112
- {{ mainPrompt['prompt'] }}
113
- </div>
114
- </draggable>
115
- </v-card-text>
116
- </v-card>
117
- </v-row>
118
- <v-row align="center" class="col-md-10">
119
- <v-card
120
- v-if="mainPrompt['textOrImage'] === 'image'"
121
- class="pa-2 flex-fill bucket"
122
- min-height="5em"
123
- outlined
124
- tile
125
- >
126
- <v-card-text>
127
- <draggable
128
- v-if="mainPrompt.file"
129
- class="dragArea list-group"
130
- :key="mainPrompt['prompt']"
131
- v-bind="dragOptions"
132
- disabled
133
- group="people"
134
- tabindex="0"
64
+ <v-card
65
+ v-for="(answer, aindex) in block.metadata.config
66
+ .answerObjects"
67
+ :key="aindex"
68
+ class="pa-2 ma-2 answerCard container-outline"
69
+ outlined
70
+ >
71
+ <v-icon>mdi-drag-vertical</v-icon>
72
+ <span>
73
+ {{ answer.display }}
74
+ </span>
75
+ </v-card>
76
+ </draggable>
77
+ </v-row>
78
+ <v-row
79
+ v-if="render"
80
+ class="d-flex flex-wrap flex-row justify-center flex-fill"
81
+ >
82
+ <v-row align="center" class="col-md-12">
83
+ <v-card
84
+ v-if="mainPrompt['textOrImage'] === 'text'"
85
+ class="flex-fill bucket"
86
+ min-height="5em"
87
+ outlined
88
+ tile
89
+ color="secondary"
90
+ >
91
+ <v-card-text class="text-center">
92
+ <draggable
93
+ class="dragArea list-group"
94
+ :key="mainPrompt['prompt']"
95
+ v-bind="dragOptions"
96
+ disabled
97
+ group="people"
98
+ tabindex="0"
99
+ >
100
+ <div
101
+ class="card_text secondary"
102
+ color="secondary"
135
103
  >
136
- <div :id="mainPrompt.file.id">
137
- <v-img
138
- :aria-describedby="
139
- getFileAriaDescribedBy(
140
- mainPrompt.file,
141
- mainPrompt[
142
- 'ariaDescribedBy'
143
- ]
144
- )
145
- "
146
- :alt="
147
- getFileAlt(
148
- mainPrompt.file,
149
- mainPrompt['altText']
150
- )
151
- "
152
- :src="
153
- getFilePublicUrl(
154
- mainPrompt.file
155
- )
156
- "
157
- ></v-img>
158
- </div>
159
- </draggable>
160
- </v-card-text>
161
- </v-card>
162
- </v-row>
104
+ {{ mainPrompt['prompt'] }}
105
+ </div>
106
+ </draggable>
107
+ </v-card-text>
108
+ </v-card>
163
109
  </v-row>
164
- <v-row
165
- v-if="
166
- !render && block.metadata.config.prompts.length > 0
167
- "
168
- class="d-flex flex-wrap flex-row justify-center flex-fill"
169
- >
170
- <v-row align="center" class="col-md-12">
171
- <v-card
172
- v-if="
173
- block.metadata.config.prompts[
174
- startingIndex
175
- ][startingIndex].textOrImage === 'text'
176
- "
177
- class="pa-2 flex-fill bucket"
178
- min-height="5em"
179
- outlined
180
- tile
181
- color="secondary"
182
- >
183
- <v-card-text class="text-center">
184
- <draggable
185
- v-bind="dragOptions"
186
- class="dragArea list-group"
187
- disabled
188
- group="people"
189
- tabindex="0"
110
+ <v-row align="center" class="col-md-10">
111
+ <v-card
112
+ v-if="mainPrompt['textOrImage'] === 'image'"
113
+ class="pa-2 flex-fill bucket"
114
+ min-height="5em"
115
+ outlined
116
+ tile
117
+ >
118
+ <v-card-text>
119
+ <draggable
120
+ v-if="mainPrompt.file"
121
+ class="dragArea list-group"
122
+ :key="mainPrompt['prompt']"
123
+ v-bind="dragOptions"
124
+ disabled
125
+ group="people"
126
+ tabindex="0"
127
+ >
128
+ <div :id="mainPrompt.file.id">
129
+ <v-img
130
+ :aria-describedby="
131
+ getFileAriaDescribedBy(
132
+ mainPrompt.file,
133
+ mainPrompt[
134
+ 'ariaDescribedBy'
135
+ ]
136
+ )
137
+ "
138
+ :alt="
139
+ getFileAlt(
140
+ mainPrompt.file,
141
+ mainPrompt['altText']
142
+ )
143
+ "
144
+ :src="
145
+ getFilePublicUrl(
146
+ mainPrompt.file
147
+ )
148
+ "
149
+ ></v-img>
150
+ </div>
151
+ </draggable>
152
+ </v-card-text>
153
+ </v-card>
154
+ </v-row>
155
+ </v-row>
156
+ <v-row
157
+ v-if="!render && block.metadata.config.prompts.length > 0"
158
+ class="d-flex flex-wrap flex-row justify-center flex-fill"
159
+ >
160
+ <v-row align="center" class="col-md-12">
161
+ <v-card
162
+ v-if="
163
+ block.metadata.config.prompts[startingIndex][
164
+ startingIndex
165
+ ].textOrImage === 'text'
166
+ "
167
+ class="pa-2 flex-fill bucket"
168
+ min-height="5em"
169
+ outlined
170
+ tile
171
+ color="secondary"
172
+ >
173
+ <v-card-text class="text-center">
174
+ <draggable
175
+ v-bind="dragOptions"
176
+ class="dragArea list-group"
177
+ disabled
178
+ group="people"
179
+ tabindex="0"
180
+ >
181
+ <div
182
+ class="card_text secondary"
183
+ color="secondary"
190
184
  >
191
- <div
192
- class="card_text secondary"
193
- color="secondary"
194
- >
195
- {{
196
- block.metadata.config.prompts[
197
- startingIndex
198
- ][startingIndex].prompt
199
- }}
200
- </div>
201
- </draggable>
202
- </v-card-text>
203
- </v-card>
204
- </v-row>
205
- <v-row align="center" class="col-md-10">
206
- <v-card
207
- v-if="
208
- block.metadata.config.prompts[
209
- startingIndex
210
- ][startingIndex].textOrImage === 'image' &&
211
- block.metadata.config.prompts[
212
- startingIndex
213
- ][startingIndex].file
214
- "
215
- class="pa-2 flex-fill bucket"
216
- min-height="5em"
217
- outlined
218
- tile
219
- >
220
- <v-card-text>
221
- <draggable
222
- v-bind="dragOptions"
223
- class="dragArea list-group"
224
- :key="
185
+ {{
225
186
  block.metadata.config.prompts[
226
187
  startingIndex
227
- ]['prompt']
188
+ ][startingIndex].prompt
189
+ }}
190
+ </div>
191
+ </draggable>
192
+ </v-card-text>
193
+ </v-card>
194
+ </v-row>
195
+ <v-row align="center" class="col-md-10">
196
+ <v-card
197
+ v-if="
198
+ block.metadata.config.prompts[startingIndex][
199
+ startingIndex
200
+ ].textOrImage === 'image' &&
201
+ block.metadata.config.prompts[startingIndex][
202
+ startingIndex
203
+ ].file
204
+ "
205
+ class="pa-2 flex-fill bucket"
206
+ min-height="5em"
207
+ outlined
208
+ tile
209
+ >
210
+ <v-card-text>
211
+ <draggable
212
+ v-bind="dragOptions"
213
+ class="dragArea list-group"
214
+ :key="
215
+ block.metadata.config.prompts[
216
+ startingIndex
217
+ ]['prompt']
218
+ "
219
+ disabled
220
+ group="people"
221
+ tabindex="0"
222
+ >
223
+ <div
224
+ :id="
225
+ block.metadata.config.prompts[
226
+ startingIndex
227
+ ][startingIndex].file.id
228
228
  "
229
- disabled
230
- group="people"
231
- tabindex="0"
232
229
  >
233
- <div
234
- :id="
235
- block.metadata.config.prompts[
236
- startingIndex
237
- ][startingIndex].file.id
230
+ <v-img
231
+ :aria-describedby="
232
+ getFileAriaDescribedBy(
233
+ block.metadata.config
234
+ .prompts[startingIndex][
235
+ startingIndex
236
+ ].file,
237
+ block.metadata.config
238
+ .prompts[startingIndex][
239
+ startingIndex
240
+ ]['ariaDescribedBy']
241
+ )
242
+ "
243
+ :alt="
244
+ getFileAlt(
245
+ block.metadata.config
246
+ .prompts[startingIndex][
247
+ startingIndex
248
+ ].file,
249
+ block.metadata.config
250
+ .prompts[startingIndex][
251
+ startingIndex
252
+ ]['altText']
253
+ )
254
+ "
255
+ :src="
256
+ getFilePublicUrl(
257
+ block.metadata.config
258
+ .prompts[startingIndex][
259
+ startingIndex
260
+ ].file
261
+ )
238
262
  "
239
- >
240
- <v-img
241
- :aria-describedby="
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
- )
254
- "
255
- :alt="
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
- )
268
- "
269
- :src="
270
- getFilePublicUrl(
271
- block.metadata.config
272
- .prompts[
273
- startingIndex
274
- ][startingIndex].file
275
- )
276
- "
277
- ></v-img>
278
- </div>
279
- </draggable>
280
- </v-card-text>
281
- </v-card>
282
- </v-row>
263
+ ></v-img>
264
+ </div>
265
+ </draggable>
266
+ </v-card-text>
267
+ </v-card>
283
268
  </v-row>
284
- <v-container
285
- class="d-flex flex-wrap flex-row justify-center flex-fill"
286
- align="end"
287
- >
288
- <v-layout>
289
- <v-flex xs8></v-flex>
290
- <v-flex xs4>
291
- <v-row
292
- align="end"
293
- tabindex="0"
294
- :aria-label="
269
+ </v-row>
270
+ <v-container
271
+ class="d-flex flex-wrap flex-row justify-center flex-fill"
272
+ align="end"
273
+ >
274
+ <v-row>
275
+ <!-- <v-flex xs8></v-flex> -->
276
+ <v-col cols="12" lg="6" md="7" sm="6"></v-col>
277
+ <v-col cols="12" lg="6" md="5" sm="6">
278
+ <v-row
279
+ align="end"
280
+ tabindex="0"
281
+ :aria-label="
282
+ $t(
283
+ 'windward.games.components.content.blocks.matching_game.of_complete',
284
+ [completedAmount, totalAmountQuestions]
285
+ )
286
+ "
287
+ >
288
+ <v-col align="end" tabindex="0" class="pa-0">
289
+ {{
295
290
  $t(
296
- 'windward.games.components.content.blocks.matching_game.of_complete',
291
+ 'windward.games.components.content.blocks.matching_game.of_complete_text_area',
297
292
  [
298
293
  completedAmount,
299
294
  totalAmountQuestions,
300
295
  ]
301
296
  )
302
- "
303
- >
304
- <v-col align="end" tabindex="0">
305
- {{
297
+ }}
298
+ <v-progress-linear
299
+ v-model="completedPercent"
300
+ color="primary"
301
+ outlined
302
+ rounded
303
+ height="15"
304
+ style="pointer-events: none"
305
+ ></v-progress-linear>
306
+ <br />
307
+ <v-btn
308
+ color="primary"
309
+ outlined
310
+ elevation="0"
311
+ @click="onReset"
312
+ >{{
306
313
  $t(
307
- 'windward.games.components.content.blocks.matching_game.of_complete_text_area',
308
- [
309
- completedAmount,
310
- totalAmountQuestions,
311
- ]
314
+ 'windward.games.components.content.blocks.matching_game.reset'
312
315
  )
313
316
  }}
314
- <v-progress-linear
315
- v-model="completedPercent"
316
- color="primary"
317
- outlined
318
- rounded
319
- height="15"
320
- style="pointer-events: none"
321
- ></v-progress-linear>
322
- <br />
323
- <v-btn
324
- color="primary"
325
- outlined
326
- elevation="0"
327
- @click="onReset"
328
- >{{
329
- $t(
330
- 'windward.games.components.content.blocks.matching_game.reset'
331
- )
332
- }}
333
- </v-btn>
334
- </v-col>
335
- </v-row>
336
- </v-flex>
337
- </v-layout>
338
- </v-container>
317
+ </v-btn>
318
+ </v-col>
319
+ </v-row>
320
+ </v-col>
321
+ </v-row>
339
322
  </v-container>
340
- </div>
323
+ </v-container>
341
324
  </div>
342
325
  <br />
343
326
  </div>
@@ -371,12 +354,12 @@ export default {
371
354
  }
372
355
  if (_.isEmpty(this.block.metadata.config.feedback_correct)) {
373
356
  this.block.metadata.config.feedback_correct = this.$t(
374
- 'windward.games.components.settings.bucket_game.form.feedback.correct_default'
357
+ 'windward.games.components.settings.matching_game.form.correct_match'
375
358
  )
376
359
  }
377
360
  if (_.isEmpty(this.block.metadata.config.feedback_incorrect)) {
378
361
  this.block.metadata.config.feedback_incorrect = this.$t(
379
- 'windward.games.components.settings.bucket_game.form.feedback.incorrect_default'
362
+ 'windward.games.components.settings.matching_game.form.incorrect_match'
380
363
  )
381
364
  }
382
365
  if (_.isEmpty(this.block.metadata.config.prompts)) {
@@ -471,45 +454,59 @@ export default {
471
454
  }
472
455
  },
473
456
  onEnd(evt, originalEvent) {
457
+ // if dragged to nowhere do not set target
458
+ const draggedToNowhere = evt.to === evt.from
474
459
  if (!this.render) {
475
460
  this.mainPrompt =
476
461
  this.block.metadata.config.prompts[this.startingIndex]
477
462
  }
478
463
  let draggedElement = ''
479
464
  let target = ''
480
- if (this.mainPrompt.textOrImage === 'text') {
481
- draggedElement =
482
- this.block.metadata.config.answerObjects[evt.oldIndex]
483
- this.block.metadata.config.prompts.forEach((outerElement) => {
484
- const getMain = outerElement.find((element) => {
485
- return (
486
- element.prompt ==
487
- evt.to.firstChild.textContent.trim()
488
- )
489
- })
490
- if (getMain) {
491
- target = getMain
492
- }
493
- })
494
- } else {
495
- draggedElement =
496
- this.block.metadata.config.answerObjects[evt.oldIndex]
497
- this.block.metadata.config.prompts.forEach((outerElement) => {
498
- const mainElement = outerElement.find((element) => {
499
- return element.file?.id == evt.to.firstElementChild.id
500
- })
501
- if (mainElement) {
502
- target = mainElement
503
- }
504
- })
465
+ if (!draggedToNowhere) {
466
+ if (this.mainPrompt.textOrImage === 'text') {
467
+ draggedElement =
468
+ this.block.metadata.config.answerObjects[evt.oldIndex]
469
+ this.block.metadata.config.prompts.forEach(
470
+ (outerElement) => {
471
+ const getMain = outerElement.find((element) => {
472
+ return (
473
+ element.prompt ==
474
+ evt.to.firstChild.textContent.trim()
475
+ )
476
+ })
477
+ if (getMain) {
478
+ target = getMain
479
+ }
480
+ }
481
+ )
482
+ } else {
483
+ draggedElement =
484
+ this.block.metadata.config.answerObjects[evt.oldIndex]
485
+ this.block.metadata.config.prompts.forEach(
486
+ (outerElement) => {
487
+ const mainElement = outerElement.find((element) => {
488
+ return (
489
+ element.file?.id ==
490
+ evt.to.firstElementChild.id
491
+ )
492
+ })
493
+ if (mainElement) {
494
+ target = mainElement
495
+ }
496
+ }
497
+ )
498
+ }
505
499
  }
500
+ //set feedback information here
506
501
  if (_.isUndefined(target) || _.isEmpty(target)) {
507
502
  console.log('dragged to nowhere')
508
503
  } else if (draggedElement.id !== target.answer.id) {
509
504
  this.feedback = this.block.metadata.config.feedback_incorrect
510
505
  this.status = 'errorOutline'
511
506
  } else if (draggedElement.id === target.answer.id) {
512
- this.feedback = this.block.metadata.config.feedback_correct
507
+ this.feedback = !_.isEmpty(target.matchExplanation)
508
+ ? target.matchExplanation
509
+ : this.block.metadata.config.feedback_correct
513
510
  this.solvedQuestions.push(target)
514
511
  this.status = 'successOutline'
515
512
  this.allowDrag = false
package/components/content/blocks/multipleChoice/MultipleChoice.vue CHANGED
@@ -1,12 +1,12 @@
1
1
  <template>
2
- <v-container>
2
+ <v-container class="pa-0">
3
3
  <v-row>
4
4
  <v-col>
5
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="auto">
9
+ <v-carousel height="auto" :hide-delimiters="hideDeliminators">
10
10
  <template #prev="{ on, attrs }">
11
11
  <v-btn
12
12
  variant="elevated"
@@ -285,6 +285,35 @@ export default {
285
285
  }
286
286
  return 0
287
287
  },
288
+ hideDeliminators() {
289
+ const condition1 =
290
+ window.innerWidth <= 1483 ||
291
+ this.block.metadata.config.questions.length >= 13
292
+ const condition2 =
293
+ this.block.metadata.config.questions.length >= 12 &&
294
+ window.innerWidth <= 1692
295
+ const condition3 =
296
+ this.block.metadata.config.questions.length >= 11 &&
297
+ window.innerWidth <= 1634
298
+ const condition4 =
299
+ this.block.metadata.config.questions.length >= 10 &&
300
+ window.innerWidth <= 1571
301
+ const condition5 =
302
+ this.block.metadata.config.questions.length >= 9 &&
303
+ window.innerWidth <= 1518
304
+
305
+ if (
306
+ condition1 ||
307
+ condition2 ||
308
+ condition3 ||
309
+ condition4 ||
310
+ condition5
311
+ ) {
312
+ return true
313
+ } else {
314
+ return false
315
+ }
316
+ },
288
317
  },
289
318
  watch: {
290
319
  render(newValue) {
package/components/content/blocks/quizshowGame/AnswerPanel.vue CHANGED
@@ -157,8 +157,9 @@
157
157
  v-if="editMode"
158
158
  @click="addChoice"
159
159
  elevation="0"
160
+ outlined
160
161
  class="ma-1 pa-5 justify-start"
161
- color="error"
162
+ color="primary"
162
163
  >
163
164
  {{
164
165
  $tc(
package/components/content/blocks/quizshowGame/QuizShow.vue CHANGED
@@ -35,7 +35,7 @@
35
35
  </p>
36
36
 
37
37
  <v-container
38
- class="d-flex flex-row flex-wrap flex-fill"
38
+ class="d-flex flex-row flex-wrap flex-fill pa-0"
39
39
  v-if="show"
40
40
  >
41
41
  <v-card
package/components/content/blocks/sevenStrikes/SevenStikes.vue CHANGED
@@ -16,6 +16,7 @@
16
16
  <template>
17
17
  <v-carousel
18
18
  v-model="block.metadata.config.currentWord"
19
+ :hide-delimiters="hideDeliminators"
19
20
  @change="onSlideChanged($event)"
20
21
  >
21
22
  <template #prev="{ on, attrs }">
@@ -203,6 +204,7 @@ import draggable from 'vuedraggable'
203
204
  import keyboard from './keyboard.vue'
204
205
  import CrudTable from '../../CrudTable'
205
206
  import BaseContentBlock from '~/components/Content/Blocks/BaseContentBlock'
207
+ import Crypto from '~/helpers/Crypto'
206
208
 
207
209
  export default {
208
210
  name: 'SevenStrikesGame',
@@ -265,6 +267,37 @@ export default {
265
267
  onStrike: 0,
266
268
  }
267
269
  },
270
+ computed: {
271
+ hideDeliminators() {
272
+ const condition1 =
273
+ window.innerWidth <= 1483 ||
274
+ this.block.metadata.config.words.length >= 13
275
+ const condition2 =
276
+ this.block.metadata.config.words.length >= 12 &&
277
+ window.innerWidth <= 1692
278
+ const condition3 =
279
+ this.block.metadata.config.words.length >= 11 &&
280
+ window.innerWidth <= 1634
281
+ const condition4 =
282
+ this.block.metadata.config.words.length >= 10 &&
283
+ window.innerWidth <= 1571
284
+ const condition5 =
285
+ this.block.metadata.config.words.length >= 9 &&
286
+ window.innerWidth <= 1518
287
+
288
+ if (
289
+ condition1 ||
290
+ condition2 ||
291
+ condition3 ||
292
+ condition4 ||
293
+ condition5
294
+ ) {
295
+ return true
296
+ } else {
297
+ return false
298
+ }
299
+ },
300
+ },
268
301
  watch: {
269
302
  render(newValue) {
270
303
  if (newValue) {
@@ -272,7 +305,6 @@ export default {
272
305
  }
273
306
  },
274
307
  },
275
- mounted() {},
276
308
  methods: {
277
309
  onChangeSlide(newIndex) {
278
310
  if (newIndex >= this.block.metadata.config.words.length) {
package/components/content/blocks/slideshow/SlideShow.vue CHANGED
@@ -18,7 +18,10 @@
18
18
  </div>
19
19
  <div>
20
20
  <template v-if="block.metadata.config.slides.length !== 0">
21
- <v-carousel v-model="block.metadata.config.currentSlide">
21
+ <v-carousel
22
+ v-model="block.metadata.config.currentSlide"
23
+ :hide-delimiters="hideDeliminators"
24
+ >
22
25
  <template #prev="{ on, attrs }">
23
26
  <v-btn
24
27
  variant="elevated"
@@ -51,7 +54,10 @@
51
54
  :key="index"
52
55
  >
53
56
  <v-carousel-item>
54
- <div class="fill-height d-flex flex-column">
57
+ <v-sheet
58
+ height="85%"
59
+ class="fill-height d-flex flex-column"
60
+ >
55
61
  <div class="pa-0 ma-0">
56
62
  <h4 class="header-description">
57
63
  {{ slide['header'] }}
@@ -74,7 +80,7 @@
74
80
  contain
75
81
  />
76
82
  </div>
77
- </div>
83
+ </v-sheet>
78
84
  </v-carousel-item>
79
85
  </v-container>
80
86
  </v-carousel>
@@ -86,6 +92,7 @@
86
92
  <script>
87
93
  import _ from 'lodash'
88
94
  import BaseContentBlock from '~/components/Content/Blocks/BaseContentBlock'
95
+ import Crypto from '~/helpers/Crypto'
89
96
 
90
97
  export default {
91
98
  name: 'SlideShow',
@@ -120,6 +127,37 @@ export default {
120
127
  prev: {},
121
128
  }
122
129
  },
130
+ computed: {
131
+ hideDeliminators() {
132
+ const condition1 =
133
+ window.innerWidth <= 1483 ||
134
+ this.block.metadata.config.slides.length >= 13
135
+ const condition2 =
136
+ this.block.metadata.config.slides.length >= 12 &&
137
+ window.innerWidth <= 1692
138
+ const condition3 =
139
+ this.block.metadata.config.slides.length >= 11 &&
140
+ window.innerWidth <= 1634
141
+ const condition4 =
142
+ this.block.metadata.config.slides.length >= 10 &&
143
+ window.innerWidth <= 1571
144
+ const condition5 =
145
+ this.block.metadata.config.slides.length >= 9 &&
146
+ window.innerWidth <= 1518
147
+
148
+ if (
149
+ condition1 ||
150
+ condition2 ||
151
+ condition3 ||
152
+ condition4 ||
153
+ condition5
154
+ ) {
155
+ return true
156
+ } else {
157
+ return false
158
+ }
159
+ },
160
+ },
123
161
  watch: {
124
162
  render(newValue) {
125
163
  this.block.metadata.config.currentSlide = 0
package/components/content/blocks/wordJumble/WordJumble.vue CHANGED
@@ -1,5 +1,5 @@
1
1
  <template>
2
- <v-container>
2
+ <v-container class="pa-0">
3
3
  <v-col class="pa-0">
4
4
  <h2>
5
5
  {{
@@ -16,6 +16,7 @@
16
16
  <template>
17
17
  <v-carousel
18
18
  v-model="block.metadata.config.currentWord"
19
+ :hide-delimiters="hideDeliminators"
19
20
  @change="onSlideChanged()"
20
21
  >
21
22
  <template #prev="{ on, attrs }">
@@ -220,6 +221,37 @@ export default {
220
221
  shuffledWord: '',
221
222
  }
222
223
  },
224
+ computed: {
225
+ hideDeliminators() {
226
+ const condition1 =
227
+ window.innerWidth <= 1483 ||
228
+ this.block.metadata.config.words.length >= 13
229
+ const condition2 =
230
+ this.block.metadata.config.words.length >= 12 &&
231
+ window.innerWidth <= 1692
232
+ const condition3 =
233
+ this.block.metadata.config.words.length >= 11 &&
234
+ window.innerWidth <= 1634
235
+ const condition4 =
236
+ this.block.metadata.config.words.length >= 10 &&
237
+ window.innerWidth <= 1571
238
+ const condition5 =
239
+ this.block.metadata.config.words.length >= 9 &&
240
+ window.innerWidth <= 1518
241
+
242
+ if (
243
+ condition1 ||
244
+ condition2 ||
245
+ condition3 ||
246
+ condition4 ||
247
+ condition5
248
+ ) {
249
+ return true
250
+ } else {
251
+ return false
252
+ }
253
+ },
254
+ },
223
255
  watch: {
224
256
  render(newValue) {
225
257
  this.updateJumble = Crypto.id()
package/components/settings/MatchingGameManager.vue CHANGED
@@ -188,6 +188,11 @@
188
188
  indexPrompt
189
189
  ].prompt
190
190
  "
191
+ :label="
192
+ $t(
193
+ 'windward.games.components.settings.matching_game.form.prompt_body'
194
+ )
195
+ "
191
196
  outlined
192
197
  :autofocus="true"
193
198
  :disabled="render"
@@ -279,6 +284,22 @@
279
284
  :disabled="render"
280
285
  ></ContentBlockAsset>
281
286
  </v-container>
287
+ <v-container class="pa-0">
288
+ <v-text-field
289
+ v-model="
290
+ block.metadata.config
291
+ .prompts[index][
292
+ indexPrompt
293
+ ].matchExplanation
294
+ "
295
+ :label="
296
+ $t(
297
+ 'windward.games.components.settings.matching_game.form.correct_match_label'
298
+ )
299
+ "
300
+ outlined
301
+ ></v-text-field>
302
+ </v-container>
282
303
  </v-container>
283
304
  </template>
284
305
  </SortableExpansionPanel>
@@ -317,31 +338,6 @@
317
338
  }}
318
339
  </v-btn>
319
340
  </v-row>
320
- <v-textarea
321
- v-model="block.metadata.config.feedback_correct"
322
- class="mt-2"
323
- outlined
324
- auto-grow
325
- :counter="255"
326
- :label="
327
- $t(
328
- 'windward.games.components.settings.matching_game.form.feedback.correct'
329
- )
330
- "
331
- :disabled="render"
332
- ></v-textarea>
333
- <v-textarea
334
- v-model="block.metadata.config.feedback_incorrect"
335
- outlined
336
- auto-grow
337
- :counter="255"
338
- :label="
339
- $t(
340
- 'windward.games.components.settings.matching_game.form.feedback.incorrect'
341
- )
342
- "
343
- :disabled="render"
344
- ></v-textarea>
345
341
  </v-container>
346
342
  </v-form>
347
343
  <div v-if="loading" class="text-center">
@@ -389,12 +385,12 @@ export default {
389
385
  }
390
386
  if (_.isEmpty(this.block.metadata.config.feedback_correct)) {
391
387
  this.block.metadata.config.feedback_correct = this.$t(
392
- 'windward.games.components.settings.bucket_game.form.feedback.correct_default'
388
+ 'windward.games.components.settings.matching_game.form.correct_match'
393
389
  )
394
390
  }
395
391
  if (_.isEmpty(this.block.metadata.config.feedback_incorrect)) {
396
392
  this.block.metadata.config.feedback_incorrect = this.$t(
397
- 'windward.games.components.settings.bucket_game.form.feedback.incorrect_default'
393
+ 'windward.games.components.settings.matching_game.form.incorrect_match'
398
394
  )
399
395
  }
400
396
  if (_.isEmpty(this.block.metadata.config.answerObjects)) {
@@ -427,6 +423,9 @@ export default {
427
423
  id: index,
428
424
  textOrImage: 'text',
429
425
  prompt: '',
426
+ matchExplanation: this.$t(
427
+ 'windward.games.components.settings.matching_game.form.correct_match'
428
+ ),
430
429
  file: null,
431
430
  altText: '',
432
431
  ariaDescribedBy: '',
package/components/settings/SevenStrikesSettingsManager.vue CHANGED
@@ -201,22 +201,24 @@ export default {
201
201
  onBeforeSave() {
202
202
  this.block.metadata.config.words.forEach((element) => {
203
203
  // check against lowercase keyboard inputs
204
- element.value = element.value.toLowerCase()
205
- element.splitWord = element.value.split('')
206
- element.splitWord.forEach((letter) => {
207
- const letterIndex = element.splitWord.indexOf(letter)
208
- if (letter !== ' ') {
209
- element.splitWord[letterIndex] = {
210
- letter: letter,
211
- show: false,
204
+ if (element.value) {
205
+ element.value = element.value.toLowerCase()
206
+ element.splitWord = element.value.split('')
207
+ element.splitWord.forEach((letter) => {
208
+ const letterIndex = element.splitWord.indexOf(letter)
209
+ if (letter !== ' ') {
210
+ element.splitWord[letterIndex] = {
211
+ letter: letter,
212
+ show: false,
213
+ }
214
+ } else {
215
+ element.splitWord[letterIndex] = {
216
+ letter: letter,
217
+ show: true,
218
+ }
212
219
  }
213
- } else {
214
- element.splitWord[letterIndex] = {
215
- letter: letter,
216
- show: true,
217
- }
218
- }
219
- })
220
+ })
221
+ }
220
222
  })
221
223
  },
222
224
  onAddElement() {
package/components/settings/WordJumbleSettingsManager.vue CHANGED
@@ -202,25 +202,27 @@ export default {
202
202
  })
203
203
  },
204
204
  shuffle(str) {
205
- var a = str
206
- var newArr = []
207
- var neww = ''
208
- var text = a.replace(/[\r\n]/g, '').split(' ')
205
+ if (str) {
206
+ var a = str
207
+ var newArr = []
208
+ var neww = ''
209
+ var text = a.replace(/[\r\n]/g, '').split(' ')
209
210
 
210
- text.map(function (v) {
211
- v.split('').map(function () {
212
- var hash = Math.floor(Math.random() * v.length)
213
- neww += v[hash]
214
- v = v.replace(v.charAt(hash), '')
211
+ text.map(function (v) {
212
+ v.split('').map(function () {
213
+ var hash = Math.floor(Math.random() * v.length)
214
+ neww += v[hash]
215
+ v = v.replace(v.charAt(hash), '')
216
+ })
217
+ newArr.push(neww)
218
+ neww = ''
215
219
  })
216
- newArr.push(neww)
217
- neww = ''
218
- })
219
- var x = newArr.map((v) => v.split('').join(' ')).join('\n')
220
- str = x
221
- .split('')
222
- .map((v) => v.toUpperCase())
223
- .join('')
220
+ var x = newArr.map((v) => v.split('').join(' ')).join('\n')
221
+ str = x
222
+ .split('')
223
+ .map((v) => v.toUpperCase())
224
+ .join('')
225
+ }
224
226
  return str
225
227
  },
226
228
  onAddWord() {
package/i18n/en-US/components/settings/matching_game.ts CHANGED
@@ -2,6 +2,10 @@ export default {
2
2
  form: {
3
3
  title: 'Matching Game',
4
4
  instructions: 'Instructions',
5
+ prompt_body: 'Prompt Body',
6
+ correct_match: 'This match is correct.',
7
+ incorrect_match: 'That’s an incorrect match. Try again.',
8
+ correct_match_label: 'Explanation of the correct match',
5
9
  feedback: {
6
10
  correct: 'feedback when correct',
7
11
  incorrect: 'feedback when incorrect',
package/i18n/es-ES/components/settings/matching_game.ts CHANGED
@@ -2,6 +2,10 @@ export default {
2
2
  form: {
3
3
  title: 'Juego de Correspondencias',
4
4
  instructions: 'Instrucciones',
5
+ prompt_body: 'Cuerpo rápido',
6
+ correct_match: 'Esta coincidencia es correcta.',
7
+ incorrect_match: 'Esa es una coincidencia incorrecta. Intentar otra vez.',
8
+ correct_match_label: 'Explicación de la coincidencia correcta.',
5
9
  feedback: {
6
10
  correct: 'comentarios cuando sea correcto',
7
11
  incorrect: 'comentarios cuando son incorrectos',
package/i18n/sv-SE/components/settings/matching_game.ts CHANGED
@@ -2,6 +2,10 @@ export default {
2
2
  form: {
3
3
  title: 'Matchande Spel',
4
4
  instructions: 'Instruktioner',
5
+ prompt_body: 'Snabb kropp',
6
+ correct_match: 'Denna matchning är korrekt',
7
+ incorrect_match: 'Det är en felaktig matchning. Försök igen.',
8
+ correct_match_label: 'Förklaring av rätt matchning',
5
9
  feedback: {
6
10
  correct: 'feedback när korrekt',
7
11
  incorrect: 'feedback when incorrect',
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@windward/games",
3
- "version": "0.4.0",
3
+ "version": "0.5.1",
4
4
  "description": "Windward UI Plugin Games",
5
5
  "main": "plugin.js",
6
6
  "scripts": {