@windward/games 0.2.2 → 0.3.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 (22) hide show
  1. package/components/content/blocks/dragDrop/SortingGame.vue +35 -27
  2. package/components/content/blocks/multipleChoice/MultipleChoice.vue +8 -8
  3. package/components/content/blocks/multipleChoice/QuestionDialog.vue +25 -13
  4. package/components/content/blocks/quizshowGame/AnswerPanel.vue +1 -1
  5. package/components/content/blocks/quizshowGame/Gridview.vue +1 -1
  6. package/components/content/blocks/wordJumble/WordJumble.vue +1 -0
  7. package/components/settings/BucketGameSettingsManager.vue +20 -4
  8. package/components/settings/CrosswordPuzzleSettingsManager.vue +19 -10
  9. package/components/settings/FlashCardSlidesManager.vue +44 -23
  10. package/components/settings/MatchingGameManager.vue +26 -8
  11. package/components/settings/MultipleChoiceSettingsManager.vue +33 -78
  12. package/components/settings/QuizShowSettingsManager.vue +19 -11
  13. package/components/settings/SevenStrikesSettingsManager.vue +16 -5
  14. package/components/settings/SlideShowManager.vue +15 -4
  15. package/components/settings/SortingGameSettingsManager.vue +18 -8
  16. package/components/settings/WordJumbleSettingsManager.vue +21 -10
  17. package/jest.config.js +0 -1
  18. package/package.json +2 -2
  19. package/test/__mocks__/componentsMock.js +3 -1
  20. package/test/__mocks__/modelMock.js +13 -84
  21. package/test/blocks/multipleChoice/MultipleChoice.spec.js +1 -1
  22. package/test/settings/WordJumbleManager.spec.js +3 -0
package/components/settings/FlashCardSlidesManager.vue CHANGED
@@ -3,6 +3,7 @@
3
3
  <v-form ref="outer-form" v-model="valid" v-if="!loading">
4
4
  <v-container class="pa-0">
5
5
  <v-text-field
6
+ ref="title"
6
7
  v-model="block.metadata.config.title"
7
8
  outlined
8
9
  :counter="50"
@@ -11,17 +12,18 @@
11
12
  'windward.games.components.settings.bucket_game.form.title'
12
13
  )
13
14
  "
14
- ref="title"
15
+ :disabled="render"
15
16
  ></v-text-field>
16
17
  <v-textarea
18
+ v-model="block.metadata.config.instructions"
17
19
  outlined
18
20
  auto-grow
19
- v-model="block.metadata.config.instructions"
20
21
  :label="
21
22
  $t(
22
23
  'windward.games.components.settings.bucket_game.form.instructions'
23
24
  )
24
25
  "
26
+ :disabled="render"
25
27
  ></v-textarea>
26
28
  </v-container>
27
29
  <v-divider class="my-4 primary"></v-divider>
@@ -35,10 +37,11 @@
35
37
  </p>
36
38
  <SortableExpansionPanel
37
39
  v-model="block.metadata.config.cards"
38
- @click:close="onDelete($event)"
39
40
  v-bind:currentPanel.sync="
40
41
  block.metadata.config.currentSlide
41
42
  "
43
+ :disabled="render"
44
+ @click:close="onDelete($event)"
42
45
  >
43
46
  <template #header="{ item, index }">
44
47
  {{
@@ -83,6 +86,7 @@
83
86
  !block.metadata.config.cards[index]
84
87
  .side
85
88
  "
89
+ :disabled="render"
86
90
  >{{
87
91
  $t(
88
92
  'windward.games.components.settings.flashcard.form.front'
@@ -94,6 +98,7 @@
94
98
  block.metadata.config.cards[index]
95
99
  .side
96
100
  "
101
+ :disabled="render"
97
102
  >
98
103
  {{
99
104
  $t(
@@ -111,12 +116,12 @@
111
116
  v-if="
112
117
  !block.metadata.config.cards[index].side
113
118
  "
114
- outlined
115
- auto-grow
116
119
  v-model="
117
120
  block.metadata.config.cards[index].back
118
121
  .header
119
122
  "
123
+ outlined
124
+ auto-grow
120
125
  :counter="255"
121
126
  :label="
122
127
  $t(
@@ -124,6 +129,7 @@
124
129
  )
125
130
  "
126
131
  required
132
+ :disabled="render"
127
133
  />
128
134
  <v-card
129
135
  elevation="0"
@@ -138,22 +144,23 @@
138
144
  )
139
145
  }}
140
146
  </v-card-title>
141
- <textEditor
142
- outlined
143
- auto-grow
144
- menubar="edit"
145
- toolbar="undo redo | italic underline strikethrough removeformat | mathButton"
147
+ <TextEditor
146
148
  v-model="
147
149
  block.metadata.config.cards[index]
148
150
  .front.text
149
151
  "
152
+ outlined
153
+ auto-grow
154
+ menubar="edit"
155
+ toolbar="undo redo | italic underline strikethrough removeformat | mathButton"
150
156
  :label="
151
157
  $t(
152
158
  'windward.games.components.settings.flashcard.form.text'
153
159
  )
154
160
  "
155
161
  required
156
- />
162
+ :disabled="render"
163
+ ></TextEditor>
157
164
  </v-card>
158
165
  <v-card
159
166
  outlined
@@ -168,18 +175,19 @@
168
175
  )
169
176
  }}
170
177
  </v-card-text>
171
- <textEditor
172
- outlined
173
- auto-grow
174
- menubar="edit"
175
- toolbar="undo redo | italic underline strikethrough removeformat | mathButton"
178
+ <TextEditor
176
179
  v-model="
177
180
  block.metadata.config.cards[index]
178
181
  .back.text
179
182
  "
183
+ outlined
184
+ auto-grow
185
+ menubar="edit"
186
+ toolbar="undo redo | italic underline strikethrough removeformat | mathButton"
180
187
  label="Text"
181
188
  required
182
- />
189
+ :disabled="render"
190
+ ></TextEditor>
183
191
  </v-card>
184
192
  <br />
185
193
  <ContentBlockAsset
@@ -191,6 +199,7 @@
191
199
  .img
192
200
  "
193
201
  mimes="image/png,image/jpeg"
202
+ :disabled="render"
194
203
  @click:file="onImageSelect"
195
204
  >
196
205
  <template #title>
@@ -217,6 +226,7 @@
217
226
  .img
218
227
  "
219
228
  mimes="image/png,image/jpeg"
229
+ :disabled="render"
220
230
  @click:file="onImageSelect"
221
231
  >
222
232
  <template #title>
@@ -240,13 +250,14 @@
240
250
  v-show="
241
251
  block.metadata.config.cards[index].side
242
252
  "
243
- outlined
244
253
  v-model="
245
254
  block.metadata.config.cards[index].front
246
255
  .altText
247
256
  "
248
- label="Alt Text"
257
+ outlined
258
+ :label="$t('shared.accessibility.alt_text')"
249
259
  required
260
+ :disabled="render"
250
261
  ></v-textarea>
251
262
  <v-textarea
252
263
  auto-grow
@@ -258,8 +269,9 @@
258
269
  block.metadata.config.cards[index].back
259
270
  .altText
260
271
  "
261
- label="Alt Text"
272
+ :label="$t('shared.accessibility.alt_text')"
262
273
  required
274
+ :disabled="render"
263
275
  ></v-textarea>
264
276
  <v-row
265
277
  class="d-flex justify-space-around pt-8"
@@ -308,7 +320,11 @@
308
320
  </v-container>
309
321
  <v-container class="pa-0">
310
322
  <v-row justify="center" class="my-4">
311
- <v-btn color="primary" @click="onAddCard">
323
+ <v-btn
324
+ color="primary"
325
+ :disabled="render"
326
+ @click="onAddCard"
327
+ >
312
328
  <v-icon>mdi-plus</v-icon>
313
329
  {{
314
330
  $t(
@@ -337,10 +353,10 @@ import {
337
353
  MathLiveWrapper,
338
354
  ContentViewer,
339
355
  } from '@windward/core/utils'
340
- import BaseContentSettings from '~/components/Content/Tool/BaseContentSettings.js'
356
+ import BaseContentSettings from '~/components/Content/Settings/BaseContentSettings.js'
341
357
  import ContentBlockAsset from '~/components/Content/ContentBlockAsset.vue'
342
358
  import TextEditor from '~/components/Text/TextEditor.vue'
343
- import SortableExpansionPanel from '~/components/SortableExpansionPanel.vue'
359
+ import SortableExpansionPanel from '~/components/Core/SortableExpansionPanel.vue'
344
360
 
345
361
  export default {
346
362
  name: 'FlashCardSlidesManager',
@@ -406,6 +422,11 @@ export default {
406
422
  },
407
423
  },
408
424
  methods: {
425
+ onBeforeSave() {
426
+ this.block.metadata.config.cards.forEach((element) => {
427
+ element.side = true
428
+ })
429
+ },
409
430
  onAddCard() {
410
431
  this.block.metadata.config.cards.forEach((element) => {
411
432
  element.expand = false
package/components/settings/MatchingGameManager.vue CHANGED
@@ -3,6 +3,7 @@
3
3
  <v-form ref="form" v-model="valid" v-if="!loading">
4
4
  <v-container class="pa-0">
5
5
  <v-text-field
6
+ ref="title"
6
7
  v-model="block.metadata.config.title"
7
8
  outlined
8
9
  :counter="50"
@@ -12,7 +13,7 @@
12
13
  'windward.games.components.settings.matching_game.form.title'
13
14
  )
14
15
  "
15
- ref="title"
16
+ :disabled="render"
16
17
  ></v-text-field>
17
18
  <v-textarea
18
19
  v-model="block.metadata.config.instructions"
@@ -24,6 +25,7 @@
24
25
  'windward.games.components.settings.matching_game.form.instructions'
25
26
  )
26
27
  "
28
+ :disabled="render"
27
29
  ></v-textarea>
28
30
  </v-container>
29
31
  <v-divider class="my-4 primary"></v-divider>
@@ -37,6 +39,7 @@
37
39
  </p>
38
40
  <SortableExpansionPanel
39
41
  v-model="block.metadata.config.answerObjects"
42
+ :disabled="render"
40
43
  @change="onDragged"
41
44
  @click:close="onConfirmDeleteAnswer($event)"
42
45
  >
@@ -68,6 +71,7 @@
68
71
  "
69
72
  outlined
70
73
  :autofocus="true"
74
+ :disabled="render"
71
75
  ></v-text-field>
72
76
  </v-flex>
73
77
  <v-flex xs12>
@@ -82,6 +86,7 @@
82
86
 
83
87
  <SortableExpansionPanel
84
88
  v-model="block.metadata.config.prompts[index]"
89
+ :disabled="render"
85
90
  @click:close="
86
91
  onConfirmDeletePrompt($event, index)
87
92
  "
@@ -151,6 +156,7 @@
151
156
  text
152
157
  class="pa-0 mr-2 btn-text-file-toggle"
153
158
  value="text"
159
+ :disabled="render"
154
160
  ><v-icon
155
161
  >mdi-alpha-t</v-icon
156
162
  ></v-btn
@@ -159,6 +165,7 @@
159
165
  text
160
166
  class="pa-0 btn-text-file-toggle"
161
167
  value="image"
168
+ :disabled="render"
162
169
  ><v-icon
163
170
  >mdi-image-area</v-icon
164
171
  ></v-btn
@@ -181,6 +188,7 @@
181
188
  "
182
189
  outlined
183
190
  :autofocus="true"
191
+ :disabled="render"
184
192
  ></v-text-field>
185
193
  </v-container>
186
194
  <v-container
@@ -190,6 +198,10 @@
190
198
  class="pa-0"
191
199
  >
192
200
  <v-text-field
201
+ v-if="
202
+ prompt.textOrImage ===
203
+ 'image'
204
+ "
193
205
  v-model="
194
206
  block.metadata.config
195
207
  .prompts[index][
@@ -197,10 +209,6 @@
197
209
  ].altText
198
210
  "
199
211
  class="pt-3 pb-3"
200
- v-if="
201
- prompt.textOrImage ===
202
- 'image'
203
- "
204
212
  :hide-details="true"
205
213
  dense
206
214
  outlined
@@ -210,6 +218,7 @@
210
218
  'windward.games.components.content.blocks.matching_game.alt_image'
211
219
  )
212
220
  "
221
+ :disabled="render"
213
222
  ></v-text-field>
214
223
  <v-text-field
215
224
  v-if="
@@ -231,6 +240,7 @@
231
240
  'windward.games.components.content.blocks.matching_game.aria_described'
232
241
  )
233
242
  "
243
+ :disabled="render"
234
244
  ></v-text-field>
235
245
  <ContentBlockAsset
236
246
  v-if="
@@ -245,6 +255,7 @@
245
255
  "
246
256
  class="content-block-asset"
247
257
  mimes="image/png,image/jpeg"
258
+ :disabled="render"
248
259
  ></ContentBlockAsset>
249
260
  </v-container>
250
261
  </v-container>
@@ -253,6 +264,7 @@
253
264
  <v-row justify="center" class="my-4">
254
265
  <v-btn
255
266
  color="primary"
267
+ :disabled="render"
256
268
  @click="onAddPrompt(index)"
257
269
  >
258
270
  <v-icon>mdi-plus</v-icon>
@@ -269,7 +281,11 @@
269
281
  </v-container>
270
282
  <v-container class="pa-0">
271
283
  <v-row justify="center" class="my-4">
272
- <v-btn color="primary" @click="onAddAnswer">
284
+ <v-btn
285
+ color="primary"
286
+ :disabled="render"
287
+ @click="onAddAnswer"
288
+ >
273
289
  <v-icon>mdi-plus</v-icon>
274
290
  {{
275
291
  $t(
@@ -289,6 +305,7 @@
289
305
  'windward.games.components.settings.matching_game.form.feedback.correct'
290
306
  )
291
307
  "
308
+ :disabled="render"
292
309
  ></v-textarea>
293
310
  <v-textarea
294
311
  v-model="block.metadata.config.feedback_incorrect"
@@ -300,6 +317,7 @@
300
317
  'windward.games.components.settings.matching_game.form.feedback.incorrect'
301
318
  )
302
319
  "
320
+ :disabled="render"
303
321
  ></v-textarea>
304
322
  </v-container>
305
323
  </v-form>
@@ -315,9 +333,9 @@
315
333
  </template>
316
334
 
317
335
  <script>
318
- import BaseContentSettings from '~/components/Content/Tool/BaseContentSettings.js'
336
+ import BaseContentSettings from '~/components/Content/Settings/BaseContentSettings.js'
319
337
  import _ from 'lodash'
320
- import SortableExpansionPanel from '~/components/SortableExpansionPanel.vue'
338
+ import SortableExpansionPanel from '~/components/Core/SortableExpansionPanel.vue'
321
339
 
322
340
  export default {
323
341
  name: 'MatchingGameManager',
package/components/settings/MultipleChoiceSettingsManager.vue CHANGED
@@ -13,6 +13,7 @@
13
13
  'windward.games.components.settings.multiple_choice.title_placeholder'
14
14
  )
15
15
  "
16
+ :disabled="render"
16
17
  ></v-text-field>
17
18
  <v-textarea
18
19
  v-model="block.metadata.config.instructions"
@@ -25,6 +26,7 @@
25
26
  'windward.games.components.settings.multiple_choice.instructions'
26
27
  )
27
28
  "
29
+ :disabled="render"
28
30
  ></v-textarea>
29
31
  </v-container>
30
32
  <v-divider class="my-4 primary"></v-divider>
@@ -36,57 +38,29 @@
36
38
  )
37
39
  }}
38
40
  </p>
39
- <draggable
40
- :list="block.metadata.config.questions"
41
- group="people"
41
+ <SortableExpansionPanel
42
+ v-model="block.metadata.config.questions"
43
+ :current-panel.sync="editingIndex"
44
+ :disabled="render"
45
+ @click="onOpenModal"
46
+ @click:close="onDelete($event)"
42
47
  >
43
- <v-container
44
- v-for="(question, index) in block.metadata.config
45
- .questions"
46
- :key="index"
47
- class="container-card-outline"
48
- elevation="0"
49
- outlined
50
- tile
51
- >
52
- <v-layout row wrap outlined>
53
- <v-flex xs10>
54
- <p
55
- class="text-truncate mb-0 p-header"
56
- :class="cursor"
57
- @click="onOpenModal($event, index)"
58
- @mouseover="onHover"
59
- @mouseleave="onHoverLeave"
60
- >
61
- <v-icon class="pl-2"
62
- >mdi-drag-vertical</v-icon
63
- >
64
- <span class="span-text-ellipsis">
65
- {{
66
- question.body
67
- ? question.body
68
- : $t(
69
- 'windward.games.components.settings.bucket_game.form.enter_text'
70
- )
71
- }}
72
- </span>
73
- </p>
74
- </v-flex>
75
- <v-flex
76
- xs2
77
- class="btn-header-delete d-flex justify-center"
78
- >
79
- <v-icon
80
- class="btn-delete-icon"
81
- @click="onDelete(index)"
82
- >mdi-delete-outline</v-icon
83
- >
84
- </v-flex>
85
- </v-layout>
86
- </v-container>
87
- </draggable>
48
+ <template #header="{ item }">
49
+ {{
50
+ item.body
51
+ ? item.body
52
+ : $t(
53
+ 'windward.games.components.settings.bucket_game.form.enter_text'
54
+ )
55
+ }}
56
+ </template>
57
+ </SortableExpansionPanel>
88
58
  <v-row justify="center" class="my-4">
89
- <v-btn color="primary" @click="onOpenModal">
59
+ <v-btn
60
+ color="primary"
61
+ :disabled="render"
62
+ @click="onOpenModal"
63
+ >
90
64
  <v-icon>mdi-plus</v-icon>
91
65
  {{
92
66
  $t(
@@ -102,6 +76,7 @@
102
76
  :trigger="false"
103
77
  action-save
104
78
  :action-save-new="isNotEditing"
79
+ :disabled="render"
105
80
  @click:outside="close"
106
81
  @click:close="close"
107
82
  @keydown.esc="close"
@@ -116,6 +91,7 @@
116
91
  v-bind="attrs"
117
92
  v-on="on"
118
93
  v-model="block.metadata.config.questions[editingIndex]"
94
+ :disabled="render"
119
95
  @saveAndNew="saveAndNewCalled"
120
96
  ></QuestionDialog>
121
97
  </template>
@@ -133,17 +109,17 @@
133
109
  </div>
134
110
  </template>
135
111
  <script>
136
- import BaseContentSettings from '~/components/Content/Tool/BaseContentSettings.js'
137
- import draggable from 'vuedraggable'
138
112
  import _ from 'lodash'
139
- import DialogBox from '~/components/DialogBox.vue'
113
+ import BaseContentSettings from '~/components/Content/Settings/BaseContentSettings.js'
114
+ import SortableExpansionPanel from '~/components/Core/SortableExpansionPanel.vue'
115
+ import DialogBox from '~/components/Core/DialogBox.vue'
140
116
  import QuestionDialog from '../content/blocks/multipleChoice/QuestionDialog.vue'
141
117
  import Crypto from '~/helpers/Crypto'
142
118
 
143
119
  export default {
144
120
  name: 'MultipleChoiceSettingsManager',
145
121
  extends: BaseContentSettings,
146
- components: { draggable, QuestionDialog, DialogBox },
122
+ components: { SortableExpansionPanel, QuestionDialog, DialogBox },
147
123
  beforeMount() {
148
124
  if (_.isEmpty(this.block)) {
149
125
  this.block = {}
@@ -181,7 +157,7 @@ export default {
181
157
  this.emittedQuestion = {}
182
158
  },
183
159
  methods: {
184
- onOpenModal(event, questionIndex = null) {
160
+ onOpenModal(e, questionIndex = null) {
185
161
  //checks if modal is opening to edit or create new
186
162
  if (questionIndex !== null) {
187
163
  this.editingIndex = questionIndex
@@ -252,7 +228,7 @@ export default {
252
228
  this.editingIndex = this.block.metadata.config.questions.length - 1
253
229
  },
254
230
  onHover(index) {
255
- this.cursor = 'changePointer'
231
+ this.cursor = 'container-pointer'
256
232
  },
257
233
  onHoverLeave() {
258
234
  this.cursor = ''
@@ -262,34 +238,13 @@ export default {
262
238
  },
263
239
  close() {
264
240
  this.dialog = false
241
+ this.editingIndex = null
265
242
  },
266
243
  },
267
244
  }
268
245
  </script>
269
246
  <style lang="scss" scoped>
270
- .container-card-outline {
271
- border: solid 1px var(--v-primary-base);
272
- border-radius: 3px !important;
273
- margin-bottom: 8px;
274
- }
275
- .p-header {
276
- height: 45px;
277
- display: flex;
278
- align-items: center;
279
- }
280
- .p-header:hover {
281
- background-color: rgb(243, 243, 243);
282
- }
283
- .btn-delete-icon {
284
- color: var(--v-primary-base);
285
- }
286
- .btn-header-delete {
287
- border-left: 1px solid var(--v-primary-base);
288
- }
289
- .btn-header-delete:hover {
290
- background-color: rgb(243, 243, 243);
291
- }
292
- .changePointer {
247
+ .container-pointer {
293
248
  cursor: pointer !important;
294
249
  }
295
250
  </style>