@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/content/blocks/dragDrop/SortingGame.vue CHANGED
@@ -16,12 +16,12 @@
16
16
  }}</v-col>
17
17
  <v-col cols="2">
18
18
  <v-row
19
- v-if="isFail() || isSuccess()"
19
+ v-if="onFail() || onSuccess()"
20
20
  class="d-flex justify-end"
21
21
  >
22
22
  <v-container
23
- v-if="isFail()"
24
- @click="continueGame"
23
+ v-if="onFail()"
24
+ @click="onContinueGame"
25
25
  class="d-flex justify-end"
26
26
  ><v-icon class="icon--error"
27
27
  >mdi-close-circle</v-icon
@@ -40,7 +40,7 @@
40
40
  v-bind="dragOptions"
41
41
  @change="onDragChange"
42
42
  >
43
- <v-row v-for="index in input.length" :key="'bucket_' + index">
43
+ <v-row v-for="index in input.length" :key="'sortable_' + index">
44
44
  <v-col cols="1" md="1" class="d-flex justify-end pa-0">
45
45
  <v-icon v-if="success[index - 1]" class="icon--success"
46
46
  >mdi-check-circle
@@ -53,7 +53,7 @@
53
53
  <v-card
54
54
  :class="
55
55
  'pa-2 flex-fill container-outline ' +
56
- bucketStateClass(index)
56
+ sortableStateClass(index)
57
57
  "
58
58
  outlined
59
59
  tile
@@ -69,11 +69,15 @@
69
69
  </draggable>
70
70
  <v-container class="mt-3">
71
71
  <v-row
72
- v-if="!isFail() && !isSuccess()"
72
+ v-if="!onFail() && !onSuccess()"
73
73
  class="d-flex justify-center"
74
74
  >
75
75
  <v-spacer class="col-lg-1" />
76
- <v-btn color="primary" elevation="0" @click="checkAnswers">
76
+ <v-btn
77
+ color="primary"
78
+ elevation="0"
79
+ @click="onCheckAnswers"
80
+ >
77
81
  {{
78
82
  $t(
79
83
  'windward.games.components.content.blocks.sorting_game.check_answers'
@@ -82,17 +86,21 @@
82
86
  </v-btn>
83
87
  </v-row>
84
88
  <v-row
85
- v-if="isFail() || isSuccess()"
89
+ v-if="onFail() || onSuccess()"
86
90
  class="d-flex justify-center"
87
91
  >
88
92
  <v-btn
89
- v-if="isFail()"
93
+ v-if="onFail()"
90
94
  color="primary"
91
95
  text
92
- @click="continueGame"
96
+ @click="onContinueGame"
93
97
  >{{ $t('shared.forms.try_again') }} </v-btn
94
98
  >&nbsp;&nbsp;
95
- <v-btn color="primary" elevation="0" @click="reset" outlined
99
+ <v-btn
100
+ color="primary"
101
+ elevation="0"
102
+ @click="onReset"
103
+ outlined
96
104
  >{{ $t('shared.forms.reset') }}
97
105
  </v-btn>
98
106
  </v-row>
@@ -110,7 +118,7 @@
110
118
  <v-row
111
119
  class="justify-center align-center"
112
120
  v-for="index in block.metadata.config.answer.length"
113
- :key="'bucket_' + index"
121
+ :key="'sortable_' + index"
114
122
  >
115
123
  <v-col cols="1" v-if="graded">
116
124
  <v-icon v-if="success[index - 1]" color="success"
@@ -124,7 +132,7 @@
124
132
  <v-card
125
133
  :class="
126
134
  'pa-2 flex-fill container-outline ' +
127
- bucketStateClass(index)
135
+ sortableStateClass(index)
128
136
  "
129
137
  elevation="0"
130
138
  outlined
@@ -253,7 +261,7 @@ export default {
253
261
  resolve(true)
254
262
  })
255
263
  },
256
- reset() {
264
+ onReset() {
257
265
  this.disabled = false
258
266
  this.graded = false
259
267
  this.success = []
@@ -264,7 +272,7 @@ export default {
264
272
  this.feedback = this.block.metadata.config.feedback_default
265
273
  this.seed = Math.floor(Math.random() * 100)
266
274
  },
267
- continueGame() {
275
+ onContinueGame() {
268
276
  this.disabled = false
269
277
  this.graded = false
270
278
  this.success = []
@@ -272,7 +280,7 @@ export default {
272
280
  this.feedback = this.block.metadata.config.feedback_default
273
281
  this.seed = Math.floor(Math.random() * 100)
274
282
  },
275
- isSuccess() {
283
+ onSuccess() {
276
284
  let result = false
277
285
  let successCounter = 0
278
286
  this.success.forEach(function (item) {
@@ -285,7 +293,7 @@ export default {
285
293
  }
286
294
  return result
287
295
  },
288
- isFail() {
296
+ onFail() {
289
297
  let result = false
290
298
  this.fail.forEach(function (item) {
291
299
  if (item === true) {
@@ -296,15 +304,15 @@ export default {
296
304
  },
297
305
  feedbackClass() {
298
306
  let result = ''
299
- if (this.isSuccess()) {
307
+ if (this.onSuccess()) {
300
308
  result = 'container-feedback-success '
301
309
  }
302
- if (this.isFail()) {
310
+ if (this.onFail()) {
303
311
  result = 'container-feedback-error '
304
312
  }
305
313
  return result
306
314
  },
307
- checkAnswers() {
315
+ onCheckAnswers() {
308
316
  const self = this
309
317
  this.disabled = true
310
318
 
@@ -318,22 +326,22 @@ export default {
318
326
  }
319
327
  })
320
328
 
321
- if (this.isSuccess()) {
329
+ if (this.onSuccess()) {
322
330
  this.feedback = this.block.metadata.config.feedback_correct
323
331
  this.emitCompleted()
324
332
  }
325
- if (this.isFail()) {
333
+ if (this.onFail()) {
326
334
  this.feedback = this.block.metadata.config.feedback_incorrect
327
335
  }
328
336
  this.graded = true
329
337
  this.seed = Math.floor(Math.random() * 100)
330
338
  },
331
- bucketStateClass(index) {
339
+ sortableStateClass(index) {
332
340
  if (this.success[index - 1]) {
333
- return 'bucket--success'
341
+ return 'sortable--success'
334
342
  }
335
343
  if (this.fail[index - 1]) {
336
- return 'bucket--error'
344
+ return 'sortable--error'
337
345
  }
338
346
  return ''
339
347
  },
@@ -356,11 +364,11 @@ export default {
356
364
  border: 4px solid var(--v-error-base);
357
365
  color: var(--v-error-base);
358
366
  }
359
- .bucket--error {
367
+ .sortable--error {
360
368
  background-color: var(--v-error-base);
361
369
  color: white;
362
370
  }
363
- .bucket--success {
371
+ .sortable--success {
364
372
  background-color: var(--v-success-base);
365
373
  color: white;
366
374
  }
package/components/content/blocks/multipleChoice/MultipleChoice.vue CHANGED
@@ -6,7 +6,7 @@
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"
@@ -38,7 +38,7 @@
38
38
  <v-col class="d-flex justify-center">
39
39
  <p>{{ question.body }}</p>
40
40
  </v-col>
41
- <v-container :key="updateKey">
41
+ <v-container :key="updateKey" class="pl-16 pr-16">
42
42
  <v-row
43
43
  v-for="answer in question.answer_options"
44
44
  :key="answer.id"
@@ -122,7 +122,7 @@
122
122
  >
123
123
  </v-row>
124
124
  </v-col>
125
- <v-layout class="mt-2">
125
+ <v-layout>
126
126
  <v-flex xs4></v-flex>
127
127
  <v-flex xs4>
128
128
  <v-col align="center" tabindex="0">
@@ -144,7 +144,7 @@
144
144
  </v-flex>
145
145
  <v-flex xs4></v-flex>
146
146
  </v-layout>
147
- <v-layout class="mt-2" v-if="mountCourseCounter">
147
+ <v-layout v-if="mountCourseCounter" class="mb-6">
148
148
  <v-flex xs8></v-flex>
149
149
  <v-flex xs4>
150
150
  <v-col>
@@ -206,11 +206,11 @@
206
206
  </v-container>
207
207
  </template>
208
208
  <script>
209
- import BaseContentBlock from '~/components/Content/Blocks/BaseContentBlock'
210
- import DialogBox from '~/components/DialogBox.vue'
211
209
  import _ from 'lodash'
212
210
  import Crypto from '~/helpers/Crypto'
213
211
  import { mapGetters } from 'vuex'
212
+ import BaseContentBlock from '~/components/Content/Blocks/BaseContentBlock'
213
+ import DialogBox from '~/components/Core/DialogBox.vue'
214
214
  import UserContentBlockState from '~/models/UserContentBlockState'
215
215
  import ContentBlock from '~/models/ContentBlock'
216
216
  import Course from '~/models/Course'
@@ -290,9 +290,9 @@ export default {
290
290
  },
291
291
  },
292
292
  mounted() {
293
- this.mountCourseCounter = false
293
+ //this.mountCourseCounter = false
294
294
  this.onAmountCorrect()
295
- this.onTotalAmountOfQuestions()
295
+ //this.onTotalAmountOfQuestions()
296
296
  },
297
297
  methods: {
298
298
  async onAmountCorrect() {
package/components/content/blocks/multipleChoice/QuestionDialog.vue CHANGED
@@ -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,30 @@
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
+ :disabled="disabled"
103
+ @click="onDelete(index)"
104
+ >
105
+ <v-icon color="error">mdi-delete-outline</v-icon>
106
+ <span class="d-sr-only">{{
107
+ $t('shared.forms.delete')
108
+ }}</span>
109
+ </v-btn>
103
110
  </v-col>
104
111
  </v-row>
105
112
  </v-container>
106
113
  <v-container class="d-flex justify-center" v-if="overLength">
107
- <v-btn @click="onAddAnswer" :class="cursor" color="primary">
114
+ <v-btn
115
+ :class="cursor"
116
+ color="primary"
117
+ :disabled="disabled"
118
+ @click="onAddAnswer"
119
+ >
108
120
  <v-icon>mdi-plus</v-icon>
109
121
  {{
110
122
  $t(
@@ -117,7 +129,7 @@
117
129
  </v-form>
118
130
  </template>
119
131
  <script>
120
- import Form from '~/components/Form'
132
+ import Form from '~/components/Core/Form'
121
133
  import _ from 'lodash'
122
134
  import Crypto from '~/helpers/Crypto'
123
135
  export default {
package/components/content/blocks/quizshowGame/AnswerPanel.vue CHANGED
@@ -211,7 +211,7 @@
211
211
  </template>
212
212
 
213
213
  <script>
214
- import DialogBox from '~/components/DialogBox.vue'
214
+ import DialogBox from '~/components/Core/DialogBox.vue'
215
215
  import { MathHelper } from '@windward/core/utils'
216
216
  import TextEditor from '~/components/Text/TextEditor.vue'
217
217
  import TextViewer from '~/components/Text/TextViewer.vue'
package/components/content/blocks/quizshowGame/Gridview.vue CHANGED
@@ -218,7 +218,7 @@
218
218
  </template>
219
219
 
220
220
  <script>
221
- import DialogBox from '~/components/DialogBox.vue'
221
+ import DialogBox from '~/components/Core/DialogBox.vue'
222
222
  import VueExcelEditor from 'vue-excel-editor/src/VueExcelEditor'
223
223
  import VueExcelColumn from 'vue-excel-editor/src/VueExcelColumn'
224
224
  import _ from 'lodash'
package/components/content/blocks/wordJumble/WordJumble.vue CHANGED
@@ -137,6 +137,7 @@
137
137
  <v-btn
138
138
  :disabled="disableButtons"
139
139
  color="primary"
140
+ outlined
140
141
  @click="onRevealAnswer"
141
142
  >{{
142
143
  $t(
package/components/settings/BucketGameSettingsManager.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.bucket_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.bucket_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>
@@ -40,6 +42,7 @@
40
42
  @change="onDragged"
41
43
  @click:close="onConfirmDeleteBucket($event)"
42
44
  :copy="false"
45
+ :disabled="render"
43
46
  >
44
47
  <template #header="{ item }">
45
48
  {{
@@ -66,6 +69,7 @@
66
69
  index
67
70
  ].title
68
71
  "
72
+ :disabled="render"
69
73
  ></TextEditor>
70
74
  </v-flex>
71
75
  <v-flex xs12>
@@ -88,6 +92,7 @@
88
92
  show-swatches
89
93
  :swatches="swatches"
90
94
  swatches-max-height="130"
95
+ :disabled="render"
91
96
  ></v-color-picker>
92
97
  </v-flex>
93
98
  <v-flex xs12>
@@ -111,6 +116,7 @@
111
116
  "
112
117
  @click:close="onConfirmDelete($event, index)"
113
118
  :copy="false"
119
+ :disabled="render"
114
120
  >
115
121
  <template #header="{ item }">
116
122
  {{
@@ -138,6 +144,7 @@
138
144
  answerIndex
139
145
  ].display
140
146
  "
147
+ :disabled="render"
141
148
  ></TextEditor>
142
149
  <p class="p-label mb-0">
143
150
  {{
@@ -154,6 +161,7 @@
154
161
  ].display_value
155
162
  "
156
163
  outlined
164
+ :disabled="render"
157
165
  ></v-text-field>
158
166
  <p class="p-label mb-0">
159
167
  {{
@@ -170,6 +178,7 @@
170
178
  ].feedback
171
179
  "
172
180
  outlined
181
+ :disabled="render"
173
182
  ></v-text-field>
174
183
  </v-flex>
175
184
  </v-container>
@@ -179,6 +188,7 @@
179
188
  <v-row justify="center" class="my-4">
180
189
  <v-btn
181
190
  color="primary"
191
+ :disabled="render"
182
192
  @click="onAddBucketAnswer(index)"
183
193
  >
184
194
  <v-icon>mdi-plus</v-icon>
@@ -194,7 +204,11 @@
194
204
  </v-container>
195
205
  <v-container class="pa-0">
196
206
  <v-row justify="center" class="my-4">
197
- <v-btn color="primary" @click="onAddBucket">
207
+ <v-btn
208
+ color="primary"
209
+ :disabled="render"
210
+ @click="onAddBucket"
211
+ >
198
212
  <v-icon>mdi-plus</v-icon>
199
213
  {{
200
214
  $t(
@@ -214,6 +228,7 @@
214
228
  'windward.games.components.settings.bucket_game.form.feedback.correct'
215
229
  )
216
230
  "
231
+ :disabled="render"
217
232
  ></v-textarea>
218
233
  <v-textarea
219
234
  v-model="block.metadata.config.feedback_incorrect"
@@ -225,6 +240,7 @@
225
240
  'windward.games.components.settings.bucket_game.form.feedback.incorrect'
226
241
  )
227
242
  "
243
+ :disabled="render"
228
244
  ></v-textarea>
229
245
  </v-container>
230
246
  </v-form>
@@ -249,8 +265,8 @@ import {
249
265
  import colors from 'vuetify/lib/util/colors'
250
266
  import TextEditor from '~/components/Text/TextEditor'
251
267
  import Crypto from '~/helpers/Crypto'
252
- import BaseContentSettings from '~/components/Content/Tool/BaseContentSettings.js'
253
- import SortableExpansionPanel from '~/components/SortableExpansionPanel.vue'
268
+ import BaseContentSettings from '~/components/Content/Settings/BaseContentSettings.js'
269
+ import SortableExpansionPanel from '~/components/Core/SortableExpansionPanel.vue'
254
270
 
255
271
  export default {
256
272
  name: 'BucketGameSettingsManager',
package/components/settings/CrosswordPuzzleSettingsManager.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
  :counter="50"
8
9
  outlined
@@ -12,7 +13,7 @@
12
13
  'windward.games.components.settings.bucket_game.form.title'
13
14
  )
14
15
  "
15
- ref="title"
16
+ :disabled="render"
16
17
  ></v-text-field>
17
18
  <v-textarea
18
19
  outlined
@@ -24,6 +25,7 @@
24
25
  'windward.games.components.settings.bucket_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>
@@ -44,6 +46,7 @@
44
46
  </p>
45
47
  <SortableExpansionPanel
46
48
  v-model="block.metadata.config.words"
49
+ :disabled="render"
47
50
  @click:close="onDelete($event)"
48
51
  >
49
52
  <template #header="{ item, index }">
@@ -65,14 +68,15 @@
65
68
  }}
66
69
  </p>
67
70
  <v-textarea
71
+ v-model="
72
+ block.metadata.config.words[index].word
73
+ "
68
74
  outlined
69
75
  :counter="20"
70
76
  maxlength="20"
71
77
  :autofocus="true"
72
78
  class="pt-4"
73
- v-model="
74
- block.metadata.config.words[index].word
75
- "
79
+ :disabled="render"
76
80
  ></v-textarea>
77
81
  <p class="p-label mb-0">
78
82
  {{
@@ -82,20 +86,25 @@
82
86
  }}
83
87
  </p>
84
88
  <v-textarea
89
+ v-model="
90
+ block.metadata.config.words[index].clue
91
+ "
85
92
  outlined
86
93
  :counter="155"
87
94
  maxlength="155"
88
95
  class="pt-4"
89
- v-model="
90
- block.metadata.config.words[index].clue
91
- "
96
+ :disabled="render"
92
97
  ></v-textarea>
93
98
  </v-container>
94
99
  </template>
95
100
  </SortableExpansionPanel>
96
101
  <v-container class="pa-0">
97
102
  <v-row justify="center" class="my-4">
98
- <v-btn color="primary" @click="onAddElement">
103
+ <v-btn
104
+ color="primary"
105
+ :disabled="render"
106
+ @click="onAddElement"
107
+ >
99
108
  <v-icon>mdi-plus</v-icon>
100
109
  {{
101
110
  $t(
@@ -120,8 +129,8 @@
120
129
 
121
130
  <script>
122
131
  import _ from 'lodash'
123
- import BaseContentSettings from '~/components/Content/Tool/BaseContentSettings.js'
124
- import SortableExpansionPanel from '~/components/SortableExpansionPanel.vue'
132
+ import BaseContentSettings from '~/components/Content/Settings/BaseContentSettings.js'
133
+ import SortableExpansionPanel from '~/components/Core/SortableExpansionPanel.vue'
125
134
 
126
135
  export default {
127
136
  name: 'CrosswordPuzzleSettingsManager',