@windward/games 0.0.8 → 0.0.10

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 (88) hide show
  1. package/components/content/blocks/dragDrop/BucketGame.vue +41 -87
  2. package/components/content/blocks/dragDrop/SortingGame.vue +43 -29
  3. package/components/content/blocks/flashcards/FlashcardSlides.vue +3 -1
  4. package/components/content/blocks/matchingGame/MatchingGame.vue +94 -51
  5. package/components/content/blocks/quizshowGame/AnswerPanel.vue +93 -96
  6. package/components/content/blocks/quizshowGame/QuizShow.vue +54 -31
  7. package/components/content/blocks/slideshow/SlideShow.vue +3 -1
  8. package/components/content/blocks/wordJumble/Jumble.vue +4 -2
  9. package/components/content/blocks/wordJumble/WordJumble.vue +11 -2
  10. package/components/settings/BucketGameSettingsManager.vue +175 -349
  11. package/components/settings/FlashCardSlidesManager.vue +335 -414
  12. package/components/settings/MatchingGameManager.vue +357 -618
  13. package/components/settings/QuizShowSettingsManager.vue +228 -201
  14. package/components/settings/SlideShowManager.vue +89 -127
  15. package/components/settings/SortingGameSettingsManager.vue +32 -144
  16. package/components/settings/WordJumbleSettingsManager.vue +48 -142
  17. package/i18n/en-US/components/content/blocks/bucket_game.ts +1 -0
  18. package/i18n/en-US/components/content/blocks/flashcard.ts +2 -0
  19. package/i18n/en-US/components/content/blocks/quizshow_game.ts +1 -1
  20. package/i18n/en-US/components/settings/matching_game.ts +1 -1
  21. package/i18n/en-US/components/settings/quizshow_game.ts +8 -2
  22. package/i18n/en-US/components/settings/slideshow.ts +2 -0
  23. package/i18n/es-ES/components/content/blocks/bucket_game.ts +40 -0
  24. package/i18n/es-ES/components/content/blocks/crossword.ts +25 -0
  25. package/i18n/es-ES/components/content/blocks/flashcard.ts +7 -0
  26. package/i18n/es-ES/components/content/blocks/index.ts +23 -0
  27. package/i18n/es-ES/components/content/blocks/matching_game.ts +26 -0
  28. package/i18n/es-ES/components/content/blocks/multiple_choice.ts +9 -0
  29. package/i18n/es-ES/components/content/blocks/quizshow_game.ts +35 -0
  30. package/i18n/es-ES/components/content/blocks/seven_strikes.ts +6 -0
  31. package/i18n/es-ES/components/content/blocks/slideshow.ts +13 -0
  32. package/i18n/es-ES/components/content/blocks/sorting_game.ts +5 -0
  33. package/i18n/es-ES/components/content/blocks/word_jumble.ts +9 -0
  34. package/i18n/es-ES/components/content/crud_table.ts +6 -0
  35. package/i18n/es-ES/components/content/index.ts +7 -0
  36. package/i18n/es-ES/components/index.ts +9 -0
  37. package/i18n/es-ES/components/navigation/index.ts +5 -0
  38. package/i18n/es-ES/components/settings/bucket_game.ts +38 -0
  39. package/i18n/es-ES/components/settings/crossword.ts +7 -0
  40. package/i18n/es-ES/components/settings/flashcard.ts +28 -0
  41. package/i18n/es-ES/components/settings/index.ts +23 -0
  42. package/i18n/es-ES/components/settings/matching_game.ts +15 -0
  43. package/i18n/es-ES/components/settings/multiple_choice.ts +17 -0
  44. package/i18n/es-ES/components/settings/quizshow_game.ts +20 -0
  45. package/i18n/es-ES/components/settings/seven_strikes.ts +8 -0
  46. package/i18n/es-ES/components/settings/slideshow.ts +13 -0
  47. package/i18n/es-ES/components/settings/sorting_game.ts +5 -0
  48. package/i18n/es-ES/components/settings/word_jumble.ts +11 -0
  49. package/i18n/es-ES/index.ts +15 -0
  50. package/i18n/es-ES/modules/index.ts +5 -0
  51. package/i18n/es-ES/pages/index.ts +5 -0
  52. package/i18n/es-ES/shared/content_blocks.ts +18 -0
  53. package/i18n/es-ES/shared/index.ts +7 -0
  54. package/i18n/es-ES/shared/settings.ts +14 -0
  55. package/i18n/sv-SE/components/content/blocks/bucket_game.ts +40 -0
  56. package/i18n/sv-SE/components/content/blocks/crossword.ts +20 -0
  57. package/i18n/sv-SE/components/content/blocks/flashcard.ts +7 -0
  58. package/i18n/sv-SE/components/content/blocks/index.ts +23 -0
  59. package/i18n/sv-SE/components/content/blocks/matching_game.ts +25 -0
  60. package/i18n/sv-SE/components/content/blocks/multiple_choice.ts +9 -0
  61. package/i18n/sv-SE/components/content/blocks/quizshow_game.ts +35 -0
  62. package/i18n/sv-SE/components/content/blocks/seven_strikes.ts +6 -0
  63. package/i18n/sv-SE/components/content/blocks/slideshow.ts +13 -0
  64. package/i18n/sv-SE/components/content/blocks/sorting_game.ts +5 -0
  65. package/i18n/sv-SE/components/content/blocks/word_jumble.ts +9 -0
  66. package/i18n/sv-SE/components/content/crud_table.ts +6 -0
  67. package/i18n/sv-SE/components/content/index.ts +7 -0
  68. package/i18n/sv-SE/components/index.ts +9 -0
  69. package/i18n/sv-SE/components/navigation/index.ts +5 -0
  70. package/i18n/sv-SE/components/settings/bucket_game.ts +38 -0
  71. package/i18n/sv-SE/components/settings/crossword.ts +7 -0
  72. package/i18n/sv-SE/components/settings/flashcard.ts +28 -0
  73. package/i18n/sv-SE/components/settings/index.ts +23 -0
  74. package/i18n/sv-SE/components/settings/matching_game.ts +15 -0
  75. package/i18n/sv-SE/components/settings/multiple_choice.ts +16 -0
  76. package/i18n/sv-SE/components/settings/quizshow_game.ts +20 -0
  77. package/i18n/sv-SE/components/settings/seven_strikes.ts +8 -0
  78. package/i18n/sv-SE/components/settings/slideshow.ts +13 -0
  79. package/i18n/sv-SE/components/settings/sorting_game.ts +5 -0
  80. package/i18n/sv-SE/components/settings/word_jumble.ts +11 -0
  81. package/i18n/sv-SE/index.ts +15 -0
  82. package/i18n/sv-SE/modules/index.ts +5 -0
  83. package/i18n/sv-SE/pages/index.ts +5 -0
  84. package/i18n/sv-SE/shared/content_blocks.ts +18 -0
  85. package/i18n/sv-SE/shared/index.ts +7 -0
  86. package/i18n/sv-SE/shared/settings.ts +14 -0
  87. package/package.json +1 -1
  88. package/i18n/en-US.ts +0 -5
package/components/settings/MatchingGameManager.vue CHANGED
@@ -1,454 +1,291 @@
1
1
  <template>
2
2
  <div>
3
- <br />
4
3
  <v-form ref="form" v-model="valid" v-if="!loading">
5
- <v-text-field
6
- v-model="block.metadata.config.title"
7
- :counter="50"
8
- :label="
9
- $t(
10
- 'plugin.games.components.settings.matching_game.form.title'
11
- )
12
- "
13
- ref="title"
14
- ></v-text-field>
15
- <br />
16
- <v-textarea
17
- outlined
18
- auto-grow
19
- v-model="block.metadata.config.instructions"
20
- :counter="255"
21
- :label="
22
- $t(
23
- 'plugin.games.components.settings.matching_game.form.instructions'
24
- )
25
- "
26
- ></v-textarea>
27
- <div>
28
- <v-container class="background pa-0">
29
- <v-expansion-panels v-model="expansionPanel" flat>
30
- <v-expansion-panel>
31
- <v-expansion-panel-header class="pa-0">
32
- <h3>
4
+ <v-container class="pa-0">
5
+ <v-text-field
6
+ v-model="block.metadata.config.title"
7
+ outlined
8
+ :counter="50"
9
+ :autofocus="true"
10
+ :label="
11
+ $t(
12
+ 'plugin.games.components.settings.matching_game.form.title'
13
+ )
14
+ "
15
+ ref="title"
16
+ ></v-text-field>
17
+ <v-textarea
18
+ v-model="block.metadata.config.instructions"
19
+ outlined
20
+ auto-grow
21
+ :counter="255"
22
+ :label="
23
+ $t(
24
+ 'plugin.games.components.settings.matching_game.form.instructions'
25
+ )
26
+ "
27
+ ></v-textarea>
28
+ </v-container>
29
+ <v-divider class="my-4 primary"></v-divider>
30
+ <v-container class="pa-0">
31
+ <p>
32
+ {{
33
+ $t(
34
+ 'plugin.games.components.content.blocks.matching_game.terms'
35
+ )
36
+ }}
37
+ </p>
38
+ <SortableExpansionPanel
39
+ v-model="block.metadata.config.answerObjects"
40
+ @change="onDragged"
41
+ @click:close="onConfirmDeleteAnswer($event)"
42
+ >
43
+ <template #header="{ item, index }">
44
+ {{
45
+ item.display
46
+ ? block.metadata.config.answerObjects[index]
47
+ .display
48
+ : $t(
49
+ 'plugin.games.components.content.blocks.matching_game.click_here'
50
+ )
51
+ }}
52
+ </template>
53
+ <template #body="{ index }">
54
+ <v-container>
55
+ <v-flex xs12>
56
+ <p color="primary" class="p-label">
33
57
  {{
34
58
  $t(
35
- 'plugin.games.components.content.blocks.matching_game.terms'
59
+ 'plugin.games.components.content.blocks.matching_game.term'
36
60
  )
37
61
  }}
38
- </h3>
39
- </v-expansion-panel-header>
40
- <v-expansion-panel-content>
41
- <draggable
62
+ </p>
63
+ <v-text-field
42
64
  v-model="
43
- block.metadata.config.answerObjects
65
+ block.metadata.config.answerObjects[
66
+ index
67
+ ].display
44
68
  "
45
- class="d-flex flex-column mb-6"
46
- group="cards"
47
- @change="onDragged"
69
+ outlined
70
+ :autofocus="true"
71
+ ></v-text-field>
72
+ </v-flex>
73
+ <v-flex xs12>
74
+ <p color="primary" class="p-label">
75
+ {{
76
+ $t(
77
+ 'plugin.games.components.content.blocks.matching_game.prompts'
78
+ )
79
+ }}
80
+ </p>
81
+ </v-flex>
82
+
83
+ <SortableExpansionPanel
84
+ v-model="block.metadata.config.prompts[index]"
85
+ @click:close="
86
+ onConfirmDeletePrompt($event, index)
87
+ "
88
+ >
89
+ <template
90
+ #header="{
91
+ item: prompt,
92
+ index: indexPrompt,
93
+ }"
94
+ >
95
+ <span v-if="!prompt.toggle">
96
+ {{
97
+ prompt.prompt
98
+ ? block.metadata.config.prompts[
99
+ index
100
+ ][indexPrompt].prompt
101
+ : $t(
102
+ 'plugin.games.components.content.blocks.matching_game.click_here'
103
+ )
104
+ }}
105
+ </span>
106
+ <span v-if="prompt.toggle">{{
107
+ prompt.file && prompt.file !== null
108
+ ? prompt.file.name
109
+ : $t(
110
+ 'plugin.games.components.content.blocks.matching_game.image'
111
+ )
112
+ }}</span>
113
+ </template>
114
+ <template
115
+ #body="{ item: prompt, index: indexPrompt }"
48
116
  >
49
- <v-container
50
- v-for="(item, index) in block.metadata
51
- .config.answerObjects"
52
- :key="'bucket_' + index"
53
- fluid
54
- grid-list
55
- class="cardOutline"
56
- elevation="0"
57
- outlined
58
- tile
59
- >
60
- <v-layout row wrap outlined>
61
- <v-flex
62
- xs10
63
- :class="bottomBorder(index)"
117
+ <v-container>
118
+ <v-container class="pa-0">
119
+ <v-row
120
+ class="ma-1 d-flex align-center justify-space-between"
64
121
  >
65
- <p
66
- class="text-truncate pa-0 ma-0 pTagContainer"
67
- @click="onOpenEditor(index)"
68
- v-on:keyup.enter="
69
- onOpenEditor(index)
70
- "
71
- @mouseover="onHover"
72
- @mouseleave="onHoverLeave"
73
- :class="cursor"
74
- tabindex="0"
122
+ <v-col
123
+ cols="6"
124
+ color="primary"
125
+ class="p-label d-flex align-center justify-start mb-0 pa-0"
75
126
  >
76
- <v-icon class="pl-2"
77
- >mdi-drag-vertical</v-icon
78
- >
79
- <span class="ellipsisText">
80
- {{
81
- item.display
82
- ? block.metadata
83
- .config
84
- .answerObjects[
85
- index
86
- ].display
87
- : $t(
88
- 'plugin.games.components.content.blocks.matching_game.click_here'
89
- )
90
- }}
91
- </span>
92
- </p>
93
- </v-flex>
94
- <v-flex
95
- xs2
96
- class="sideBorder d-flex justify-center"
97
- :class="bottomBorder(index)"
98
- >
99
- <v-icon
100
- @click="
101
- onConfirmDeleteAnswer(
102
- item
127
+ {{
128
+ $t(
129
+ 'plugin.games.components.content.blocks.matching_game.prompt'
103
130
  )
104
- "
105
- >mdi-delete-outline</v-icon
131
+ }}
132
+ </v-col>
133
+ <v-col
134
+ cols="6"
135
+ class="d-flex justify-end pa-0"
106
136
  >
107
- </v-flex>
108
- <v-container v-if="item.expand">
109
- <v-flex xs12 class="pt-4">
110
- <p
111
- color="primary"
112
- class="labelChanges"
113
- >
114
- {{
115
- $t(
116
- 'plugin.games.components.content.blocks.matching_game.term'
117
- )
118
- }}
119
- </p>
120
- <v-text-field
121
- v-if="item.expand"
137
+ <v-btn
122
138
  outlined
123
- :autofocus="true"
124
- v-model="
125
- block.metadata
126
- .config
127
- .answerObjects[
139
+ class="pa-0 mr-2 btn-text-file-toggle"
140
+ @click="
141
+ block.metadata.config.prompts[
128
142
  index
129
- ].display
143
+ ][
144
+ indexPrompt
145
+ ].toggle = false
130
146
  "
131
- ></v-text-field>
132
- </v-flex>
133
- <v-flex xs12 class="pt-4">
134
- <p
135
- color="primary"
136
- class="labelChanges"
147
+ ><v-icon
148
+ >mdi-alpha-t</v-icon
149
+ ></v-btn
137
150
  >
138
- {{
139
- $t(
140
- 'plugin.games.components.content.blocks.matching_game.prompts'
141
- )
142
- }}
143
- </p>
144
- </v-flex>
145
- <template
146
- v-for="(
147
- prompt, indexPrompt
148
- ) in block.metadata.config
149
- .prompts"
150
- >
151
- <v-container
152
- :key="indexPrompt"
153
- class="pa-0 d-flex flex-wrap align-center cardOutline"
154
- v-if="
155
- onPromptAnswer(
156
- prompt,
157
- item
158
- )
151
+ <v-btn
152
+ outlined
153
+ class="pa-0 btn-text-file-toggle"
154
+ @click="
155
+ block.metadata.config.prompts[
156
+ index
157
+ ][
158
+ indexPrompt
159
+ ].toggle = true
159
160
  "
161
+ ><v-icon
162
+ >mdi-image-area</v-icon
163
+ ></v-btn
160
164
  >
161
- <v-flex
162
- xs10
163
- :class="
164
- bottomBorder(
165
- indexPrompt,
166
- true
167
- )
168
- "
169
- class="rightSideBorder"
170
- >
171
- <p
172
- class="text-truncate pa-0 ma-0 pTagContainer"
173
- @click="
174
- onOpenEditor(
175
- indexPrompt,
176
- true
177
- )
178
- "
179
- v-on:keyup.enter="
180
- onOpenEditor(
181
- indexPrompt,
182
- true
183
- )
184
- "
185
- @mouseover="
186
- onHover
187
- "
188
- @mouseleave="
189
- onHoverLeave
190
- "
191
- :class="cursor"
192
- tabindex="0"
193
- >
194
- <v-icon
195
- class="pl-2"
196
- >mdi-drag-vertical</v-icon
197
- >
198
- <span
199
- v-if="
200
- !prompt.toggle
201
- "
202
- class="ellipsisText"
203
- >
204
- {{
205
- prompt.prompt
206
- ? block
207
- .metadata
208
- .config
209
- .prompts[
210
- indexPrompt
211
- ]
212
- .prompt
213
- : $t(
214
- 'plugin.games.components.content.blocks.matching_game.click_here'
215
- )
216
- }}
217
- </span>
218
- <span
219
- v-if="
220
- prompt.toggle
221
- "
222
- class="ellipsisText"
223
- >{{ prompt.file &&
224
- prompt.file !==
225
- null
226
- ? prompt
227
- .file
228
- .name
229
- : $t(
230
- 'plugin.games.components.content.blocks.matching_game.image'
231
- )
232
- }}</span
233
- >
234
- </p>
235
- </v-flex>
236
- <v-flex
237
- xs2
238
- class="d-flex justify-center setHeight"
239
- :class="
240
- bottomBorder(
241
- indexPrompt,
242
- true
243
- )
244
- "
245
- >
246
- <v-icon
247
- @click="
248
- onConfirmDelete(
249
- prompt
250
- )
251
- "
252
- >mdi-delete-outline</v-icon
253
- >
254
- </v-flex>
255
-
256
- <v-flex
257
- xs12
258
- v-if="prompt.expand"
259
- class="pa-4"
260
- >
261
- <v-row
262
- class="ma-1 d-flex align-center justify-space-between"
263
- >
264
- <div
265
- color="primary mb-0"
266
- class="labelChanges d-flex align-center"
267
- >
268
- {{
269
- $t(
270
- 'plugin.games.components.content.blocks.matching_game.prompt'
271
- )
272
- }}
273
- </div>
274
- <div
275
- class="justify-end"
276
- >
277
- <v-btn
278
- outlined
279
- class="pa-0 customButton"
280
- @click="
281
- prompt.toggle = false
282
- "
283
- ><v-icon
284
- >mdi-alpha-t</v-icon
285
- ></v-btn
286
- >
287
- <v-btn
288
- outlined
289
- class="pa-0 customButton"
290
- @click="
291
- prompt.toggle = true
292
- "
293
- ><v-icon
294
- >mdi-image-area</v-icon
295
- ></v-btn
296
- >
297
- </div>
298
- </v-row>
299
- <v-text-field
300
- v-if="
301
- prompt.expand &&
302
- !prompt.toggle
303
- "
304
- outlined
305
- :autofocus="
306
- true
307
- "
308
- v-model="
309
- block
310
- .metadata
311
- .config
312
- .prompts[
313
- indexPrompt
314
- ].prompt
315
- "
316
- ></v-text-field>
317
- <v-container
318
- v-if="
319
- prompt.expand &&
320
- prompt.toggle
321
- "
322
- class="pa-0"
323
- >
324
- <v-text-field
325
- class="pt-3 pb-3"
326
- v-if="
327
- prompt.toggle
328
- "
329
- v-model="
330
- prompt.altText
331
- "
332
- :hide-details="
333
- true
334
- "
335
- dense
336
- outlined
337
- :autofocus="
338
- true
339
- "
340
- :label="
341
- $t(
342
- 'plugin.games.components.content.blocks.matching_game.alt_image'
343
- )
344
- "
345
- ></v-text-field>
346
- <v-text-field
347
- class="pt-3 pb-3"
348
- v-if="
349
- prompt.toggle
350
- "
351
- v-model="
352
- prompt.ariaDescribedBy
353
- "
354
- :hide-details="
355
- true
356
- "
357
- dense
358
- outlined
359
- :label="
360
- $t(
361
- 'plugin.games.components.content.blocks.matching_game.aria_described'
362
- )
363
- "
364
- ></v-text-field>
365
- <ContentBlockAsset
366
- v-if="
367
- prompt.toggle
368
- "
369
- id="contentBlockAsset"
370
- mimes="image/png,image/jpeg"
371
- v-model="
372
- prompt.file
373
- "
374
- ></ContentBlockAsset>
375
- </v-container>
376
- </v-flex>
377
- </v-container>
378
- </template>
379
- <p
380
- @mouseover="onHover"
381
- @mouseleave="onHoverLeave"
382
- @click="onAddPrompt(index)"
383
- v-on:keyup.enter="
384
- onAddPrompt(index)
385
- "
386
- class="fullWidth"
387
- :class="cursor"
388
- tabindex="0"
389
- >
390
- <v-icon
391
- class="primary addIcon"
392
- >mdi-plus</v-icon
393
- >
394
- {{
395
- $t(
396
- 'plugin.games.components.content.blocks.matching_game.add_prompt'
397
- )
398
- }}
399
- </p>
400
- </v-container>
401
- </v-layout>
165
+ </v-col>
166
+ </v-row>
167
+ </v-container>
168
+ <v-container class="pa-0">
169
+ <v-text-field
170
+ v-if="!prompt.toggle"
171
+ v-model="
172
+ block.metadata.config
173
+ .prompts[index][
174
+ indexPrompt
175
+ ].prompt
176
+ "
177
+ outlined
178
+ :autofocus="true"
179
+ ></v-text-field>
180
+ </v-container>
181
+ <v-container
182
+ v-if="prompt.toggle"
183
+ class="pa-0"
184
+ >
185
+ <v-text-field
186
+ v-model="
187
+ block.metadata.config
188
+ .prompts[index][
189
+ indexPrompt
190
+ ].altText
191
+ "
192
+ class="pt-3 pb-3"
193
+ v-if="prompt.toggle"
194
+ :hide-details="true"
195
+ dense
196
+ outlined
197
+ :autofocus="true"
198
+ :label="
199
+ $t(
200
+ 'plugin.games.components.content.blocks.matching_game.alt_image'
201
+ )
202
+ "
203
+ ></v-text-field>
204
+ <v-text-field
205
+ v-if="prompt.toggle"
206
+ v-model="
207
+ block.metadata.config
208
+ .prompts[index][
209
+ indexPrompt
210
+ ].ariaDescribedBy
211
+ "
212
+ class="pt-3 pb-3"
213
+ :hide-details="true"
214
+ dense
215
+ outlined
216
+ :label="
217
+ $t(
218
+ 'plugin.games.components.content.blocks.matching_game.aria_described'
219
+ )
220
+ "
221
+ ></v-text-field>
222
+ <ContentBlockAsset
223
+ v-if="prompt.toggle"
224
+ v-model="
225
+ block.metadata.config
226
+ .prompts[index][
227
+ indexPrompt
228
+ ].file
229
+ "
230
+ class="content-block-asset"
231
+ mimes="image/png,image/jpeg"
232
+ ></ContentBlockAsset>
233
+ </v-container>
402
234
  </v-container>
403
- </draggable>
404
- <br />
405
- <p
406
- @mouseover="onHover"
407
- @mouseleave="onHoverLeave"
408
- @click="onAddAnswer"
409
- v-on:keyup.enter="onAddAnswer"
410
- class="fullWidth"
411
- :class="cursor"
412
- tabindex="0"
235
+ </template>
236
+ </SortableExpansionPanel>
237
+ <v-row justify="center" class="my-4">
238
+ <v-btn
239
+ color="primary"
240
+ @click="onAddPrompt(index)"
413
241
  >
414
- <v-icon class="primary addIcon"
415
- >mdi-plus</v-icon
416
- >
242
+ <v-icon>mdi-plus</v-icon>
417
243
  {{
418
244
  $t(
419
- 'plugin.games.components.content.blocks.matching_game.add_answer'
245
+ 'plugin.games.components.content.blocks.matching_game.add_prompt'
420
246
  )
421
247
  }}
422
- </p>
423
- <br />
424
- </v-expansion-panel-content>
425
- </v-expansion-panel>
426
- </v-expansion-panels>
427
- </v-container>
428
- </div>
429
- <v-textarea
430
- class="mt-2"
431
- outlined
432
- auto-grow
433
- v-model="block.metadata.config.feedback_correct"
434
- :counter="255"
435
- :label="
436
- $t(
437
- 'plugin.games.components.settings.matching_game.form.feedback.correct'
438
- )
439
- "
440
- ></v-textarea>
441
- <v-textarea
442
- outlined
443
- auto-grow
444
- v-model="block.metadata.config.feedback_incorrect"
445
- :counter="255"
446
- :label="
447
- $t(
448
- 'plugin.games.components.settings.matching_game.form.feedback.incorrect'
449
- )
450
- "
451
- ></v-textarea>
248
+ </v-btn>
249
+ </v-row>
250
+ </v-container>
251
+ </template>
252
+ </SortableExpansionPanel>
253
+ </v-container>
254
+ <v-container class="pa-0">
255
+ <v-row justify="center" class="my-4">
256
+ <v-btn color="primary" @click="onAddAnswer">
257
+ <v-icon>mdi-plus</v-icon>
258
+ {{
259
+ $t(
260
+ 'plugin.games.components.content.blocks.matching_game.add_answer'
261
+ )
262
+ }}
263
+ </v-btn>
264
+ </v-row>
265
+ <v-textarea
266
+ v-model="block.metadata.config.feedback_correct"
267
+ class="mt-2"
268
+ outlined
269
+ auto-grow
270
+ :counter="255"
271
+ :label="
272
+ $t(
273
+ 'plugin.games.components.settings.matching_game.form.feedback.correct'
274
+ )
275
+ "
276
+ ></v-textarea>
277
+ <v-textarea
278
+ v-model="block.metadata.config.feedback_incorrect"
279
+ outlined
280
+ auto-grow
281
+ :counter="255"
282
+ :label="
283
+ $t(
284
+ 'plugin.games.components.settings.matching_game.form.feedback.incorrect'
285
+ )
286
+ "
287
+ ></v-textarea>
288
+ </v-container>
452
289
  </v-form>
453
290
  <div v-if="loading" class="text-center">
454
291
  <v-progress-circular
@@ -463,18 +300,21 @@
463
300
 
464
301
  <script>
465
302
  import BaseContentSettings from '~/components/Content/Tool/BaseContentSettings.js'
466
- import draggable from 'vuedraggable'
467
303
  import _ from 'lodash'
304
+ import SortableExpansionPanel from '~/components/SortableExpansionPanel.vue'
305
+
468
306
  export default {
469
307
  name: 'MatchingGameManager',
470
308
  extends: BaseContentSettings,
471
- components: { draggable },
309
+ components: { SortableExpansionPanel },
472
310
  beforeMount() {
473
311
  if (_.isEmpty(this.block)) {
474
312
  this.block = {}
475
313
  }
476
314
  if (_.isEmpty(this.block.body)) {
477
- this.block.body = 'Matching Game'
315
+ this.block.body = this.$t(
316
+ 'plugin.games.components.settings.matching_game.form.title'
317
+ )
478
318
  }
479
319
  if (_.isEmpty(this.block.metadata)) {
480
320
  this.block.metadata = {}
@@ -483,23 +323,29 @@ export default {
483
323
  this.block.metadata.config = {}
484
324
  }
485
325
  if (_.isEmpty(this.block.metadata.config.title)) {
486
- this.block.metadata.config.title = ''
326
+ this.block.metadata.config.title = this.$t(
327
+ 'plugin.games.components.settings.matching_game.form.title'
328
+ )
487
329
  }
488
330
  if (_.isEmpty(this.block.metadata.config.instructions)) {
489
331
  this.block.metadata.config.instructions = ''
490
332
  }
491
333
  if (_.isEmpty(this.block.metadata.config.feedback_correct)) {
492
- this.block.metadata.config.feedback_correct = ''
334
+ this.block.metadata.config.feedback_correct = this.$t(
335
+ 'plugin.games.components.settings.bucket_game.form.feedback.correct_default'
336
+ )
493
337
  }
494
338
  if (_.isEmpty(this.block.metadata.config.feedback_incorrect)) {
495
- this.block.metadata.config.feedback_incorrect = ''
496
- }
497
- if (_.isEmpty(this.block.metadata.config.prompts)) {
498
- this.block.metadata.config.prompts = []
339
+ this.block.metadata.config.feedback_incorrect = this.$t(
340
+ 'plugin.games.components.settings.bucket_game.form.feedback.incorrect_default'
341
+ )
499
342
  }
500
343
  if (_.isEmpty(this.block.metadata.config.answerObjects)) {
501
344
  this.block.metadata.config.answerObjects = []
502
- this.onAddAnswer
345
+ this.onAddAnswer()
346
+ }
347
+ if (_.isEmpty(this.block.metadata.config.prompts)) {
348
+ this.block.metadata.config.prompts = []
503
349
  }
504
350
  },
505
351
  beforeDestroy() {
@@ -511,75 +357,34 @@ export default {
511
357
  return {
512
358
  valid: true,
513
359
  loading: false,
514
- default_item: {
515
- id: 0,
516
- display: '',
517
- expand: true,
518
- },
519
- cursor: '',
520
- openPanel: '',
521
- expansionPanel: false,
522
360
  }
523
361
  },
524
- watch: {
525
- expansionPanel(val) {
526
- if (val == undefined) {
527
- this.closeAllExpandedAreas()
528
- }
529
- },
530
- },
531
- mounted() {
532
- if (this.block.metadata.config.answerObjects.length === 0) {
533
- this.onAddAnswer()
534
- }
535
- if (this.block.metadata.config.prompts.length === 0) {
536
- this.onAddPrompt()
537
- }
538
- this.closeAllExpandedAreas()
539
- },
362
+ mounted() {},
540
363
  methods: {
541
- closeAllExpandedAreas() {
542
- this.block.metadata.config.prompts.forEach((element) => {
543
- element.expand = false
544
- })
545
- this.block.metadata.config.answerObjects.forEach((element) => {
546
- element.expand = false
547
- })
548
- },
549
- onPromptAnswer(prompt, answer) {
550
- if (answer.id == prompt.answer.id) {
551
- return true
552
- } else {
553
- return false
554
- }
555
- },
556
364
  onAddPrompt(index = 0) {
557
- this.block.metadata.config.prompts.forEach((element) => {
558
- element.expand = false
559
- })
365
+ if (this.block.metadata.config.prompts[index] === undefined) {
366
+ // forces the component to track the state by making this an observable
367
+ this.$set(this.block.metadata.config.prompts, index, [])
368
+ }
560
369
  let default_prompt = {
561
- id: 0,
370
+ id: index,
562
371
  toggle: false,
563
372
  prompt: '',
564
373
  file: null,
565
374
  altText: '',
566
375
  ariaDescribedBy: '',
567
376
  answer: this.block.metadata.config.answerObjects[index],
568
- expand: true,
569
377
  }
570
- default_prompt.id = this.block.metadata.config.prompts.length + 1
571
- this.block.metadata.config.prompts.push(default_prompt)
378
+ this.block.metadata.config.prompts[index].push(default_prompt)
572
379
  },
573
380
  onAddAnswer() {
574
- this.block.metadata.config.answerObjects.forEach((element) => {
575
- element.expand = false
576
- })
577
- const addObj = _.cloneDeep(this.default_item)
578
- addObj.id = this.block.metadata.config.answerObjects.length + 1
579
- this.openPanel = this.block.metadata.config.answerObjects.length
381
+ let addObj = {
382
+ id: this.block.metadata.config.answerObjects.length,
383
+ display: '',
384
+ }
580
385
  this.block.metadata.config.answerObjects.push(addObj)
581
386
  },
582
- onConfirmDelete(item) {
387
+ onConfirmDeletePrompt(promptIndex, answerIndex) {
583
388
  this.$toast.info(this.$t('shared.forms.confirm_delete_text'), {
584
389
  icon: 'mdi-help',
585
390
  duration: null,
@@ -594,19 +399,16 @@ export default {
594
399
  text: this.$t('shared.forms.confirm'),
595
400
  // router navigation
596
401
  onClick: (e, toastObject) => {
597
- const deleteIndex =
598
- this.block.metadata.config.prompts.indexOf(item)
599
- this.block.metadata.config.prompts.splice(
600
- deleteIndex,
601
- 1
602
- )
402
+ this.block.metadata.config.prompts[
403
+ answerIndex
404
+ ].splice(promptIndex, 1)
603
405
  toastObject.goAway(0)
604
406
  },
605
407
  },
606
408
  ],
607
409
  })
608
410
  },
609
- onConfirmDeleteAnswer(item) {
411
+ onConfirmDeleteAnswer(index) {
610
412
  this.$toast.info(this.$t('shared.forms.confirm_delete_subject'), {
611
413
  icon: 'mdi-help',
612
414
  duration: null,
@@ -621,90 +423,74 @@ export default {
621
423
  text: this.$t('shared.forms.confirm'),
622
424
  // router navigation
623
425
  onClick: (e, toastObject) => {
624
- const deleteIndex =
625
- this.block.metadata.config.answerObjects.indexOf(
626
- item
627
- )
628
426
  this.block.metadata.config.answerObjects.splice(
629
- deleteIndex,
427
+ index,
630
428
  1
631
429
  )
632
- this.block.metadata.config.prompts =
633
- this.block.metadata.config.prompts.filter(
634
- (element) => {
635
- if (element.answer.id !== item.id) {
636
- return element
637
- }
638
- }
639
- )
640
- let startId = 1
430
+ // needs to be above prompt being deleted cause that will change the order
431
+ // we're using the previous order to grab the associated prompts in loop below
432
+ const promptArray = _.cloneDeep(
433
+ this.block.metadata.config.prompts
434
+ )
435
+ // delete prompts associated with answer
436
+ this.block.metadata.config.prompts.splice(index, 1)
437
+ // need to reorder the answers in vase one was deleted in the middle or front
438
+ // reorder prompts to stick with the answers if their id was shifted
439
+ let holderArray = []
641
440
  this.block.metadata.config.answerObjects.forEach(
642
- (element) => {
643
- element.id = startId
644
- startId = startId + 1
441
+ function (element, i) {
442
+ // use elements id to figure out answers that are in old index position
443
+ const promptVar = promptArray[element.id]
444
+ ? promptArray[element.id]
445
+ : []
446
+ if (holderArray[i] === undefined) {
447
+ holderArray[i] = []
448
+ }
449
+ // to not nest another layer deeper of array in array loop over objects and push into
450
+ // the correct new index
451
+ if (promptVar.length > 0) {
452
+ promptVar.forEach((prompt) => {
453
+ prompt.answer.id = i
454
+ holderArray[i].push(prompt)
455
+ })
456
+ }
457
+ element.id = i
645
458
  }
646
459
  )
460
+ this.block.metadata.config.prompts = holderArray
647
461
  toastObject.goAway(0)
648
462
  },
649
463
  },
650
464
  ],
651
465
  })
652
466
  },
653
- onHover(index) {
654
- this.cursor = 'changePointer'
655
- },
656
- onHoverLeave() {
657
- this.cursor = ''
658
- },
659
- onOpenEditor(index, prompt = null) {
660
- if (prompt === null) {
661
- this.block.metadata.config.answerObjects[index].expand =
662
- !this.block.metadata.config.answerObjects[index].expand
663
- this.block.metadata.config.answerObjects.forEach((element) => {
664
- let getIndex =
665
- this.block.metadata.config.answerObjects.indexOf(
666
- element
667
- )
668
- if (index !== getIndex) {
669
- element.expand = false
670
- }
671
- })
672
- } else {
673
- this.block.metadata.config.prompts[index].expand =
674
- !this.block.metadata.config.prompts[index].expand
675
- this.block.metadata.config.prompts.forEach((element) => {
676
- let getIndex =
677
- this.block.metadata.config.prompts.indexOf(element)
678
- if (index !== getIndex) {
679
- element.expand = false
680
- }
681
- })
682
- }
683
- },
684
467
  onDragged() {
685
- let counter = 1
686
- this.block.metadata.config.answerObjects.forEach((element) => {
687
- element.id = counter
688
- counter = counter + 1
689
- })
690
- },
691
- bottomBorder(index, prompt = null) {
692
- if (prompt === null) {
693
- if (
694
- this.block.metadata.config.answerObjects[index].expand ===
695
- true
696
- ) {
697
- return 'bottomBorder'
698
- } else {
699
- return null
468
+ const promptArray = _.cloneDeep(this.block.metadata.config.prompts)
469
+ let holderArray = []
470
+ this.block.metadata.config.answerObjects.forEach(function (
471
+ element,
472
+ i
473
+ ) {
474
+ // use elements id to figure out answers that are in old index position
475
+ const promptVar = promptArray[element.id]
476
+ ? promptArray[element.id]
477
+ : []
478
+ if (holderArray[i] === undefined) {
479
+ holderArray[i] = []
700
480
  }
701
- } else {
702
- if (this.block.metadata.config.prompts[index].expand === true) {
703
- return 'bottomBorder'
704
- } else {
705
- return null
481
+ // to not nest another layer deeper of array in array loop over objects and push into
482
+ // the correct new index
483
+ if (promptVar.length > 0) {
484
+ promptVar.forEach((prompt) => {
485
+ prompt.answer.id = i
486
+ holderArray[i].push(prompt)
487
+ })
706
488
  }
707
- }
489
+ // reindexing the answer objects
490
+ element.id = i
491
+ })
492
+ // holder array now has new answer positions
493
+ this.block.metadata.config.prompts = holderArray
708
494
  },
709
495
  },
710
496
  }
@@ -714,62 +500,15 @@ export default {
714
500
  .v-progress-circular {
715
501
  margin: 1rem;
716
502
  }
717
- .fullWidth {
718
- display: flex;
719
- justify-content: center;
720
- align-items: center;
721
- font-weight: bold;
722
- font-size: 16px;
723
- }
724
- #contentBlockAsset {
725
- max-width: 251px;
726
- }
727
- .customButton {
728
- min-width: 34px !important;
729
- }
730
- .changePointer {
731
- cursor: pointer !important;
732
- }
733
- .addIcon {
734
- margin-right: 5px;
503
+ .btn-text-file-toggle {
504
+ min-width: 44px !important;
505
+ min-height: 44px !important;
735
506
  }
736
- .v-expansion-panel-content >>> .v-expansion-panel-content__wrap {
737
- padding: 0 !important;
738
- }
739
- .pTagContainer {
740
- height: 45px;
741
- display: flex;
742
- align-items: center;
743
- }
744
- .ellipsisText {
745
- white-space: nowrap;
746
- overflow: hidden;
747
- text-overflow: ellipsis;
748
- }
749
- .itemHeight {
750
- display: flex;
751
- align-content: center;
752
- justify-content: space-between;
753
- }
754
- .bottomBorder {
755
- border-bottom: 2px solid var(--v-primary-base);
756
- }
757
- .setHeight {
758
- height: 47px;
759
- }
760
- .cardOutline {
761
- border: solid 2px var(--v-primary-base);
762
- border-radius: 3px !important;
763
- margin-bottom: 8px;
764
- }
765
- .sideBorder {
766
- border-left: 2px solid var(--v-primary-base);
767
- }
768
- .rightSideBorder {
769
- border-right: 2px solid var(--v-primary-base);
770
- }
771
- .labelChanges {
507
+ .p-label {
772
508
  font-size: 16px;
773
509
  font-weight: 500;
774
510
  }
511
+ .content-block-asset {
512
+ max-width: 330px;
513
+ }
775
514
  </style>