@windward/games 0.0.7 → 0.0.9

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 (16) hide show
  1. package/components/content/blocks/dragDrop/BucketGame.vue +18 -6
  2. package/components/content/blocks/dragDrop/SortingGame.vue +127 -55
  3. package/components/content/blocks/quizshowGame/AnswerPanel.vue +73 -83
  4. package/components/content/blocks/quizshowGame/QuizShow.vue +40 -30
  5. package/components/content/blocks/wordJumble/WordJumble.vue +11 -5
  6. package/components/settings/BucketGameSettingsManager.vue +306 -369
  7. package/components/settings/QuizShowSettingsManager.vue +228 -201
  8. package/components/settings/SortingGameSettingsManager.vue +181 -152
  9. package/components/settings/WordJumbleSettingsManager.vue +145 -137
  10. package/i18n/en-US/components/content/blocks/quizshow_game.ts +1 -1
  11. package/i18n/en-US/components/content/blocks/word_jumble.ts +1 -1
  12. package/i18n/en-US/components/settings/bucket_game.ts +5 -2
  13. package/i18n/en-US/components/settings/quizshow_game.ts +8 -2
  14. package/i18n/en-US/components/settings/sorting_game.ts +2 -0
  15. package/i18n/en-US/components/settings/word_jumble.ts +1 -1
  16. package/package.json +1 -1
package/components/content/blocks/dragDrop/BucketGame.vue CHANGED
@@ -1,9 +1,9 @@
1
1
  <template>
2
2
  <div>
3
3
  <div>
4
- <h3 class="title" aria-label="bucket game title" tabindex="0">
4
+ <h1 aria-label="bucket game title" tabindex="0">
5
5
  {{ block.metadata.config.title }}
6
- </h3>
6
+ </h1>
7
7
 
8
8
  <p tabindex="0">
9
9
  {{ block.metadata.config.instructions }}
@@ -63,6 +63,8 @@
63
63
 
64
64
  <span class="text-justify">{{
65
65
  mainAnswer[counter].display
66
+ ? mainAnswer[counter].display
67
+ : ''
66
68
  }}</span>
67
69
  </v-card>
68
70
  </v-row>
@@ -134,7 +136,11 @@
134
136
  <span class="text-justify">{{
135
137
  block.metadata.config.bucket_answers[
136
138
  startingIndex
137
- ][startingIndex].display
139
+ ][startingIndex]
140
+ ? block.metadata.config.bucket_answers[
141
+ startingIndex
142
+ ][startingIndex].display
143
+ : ''
138
144
  }}</span>
139
145
  </v-card>
140
146
  </v-row>
@@ -244,16 +250,22 @@ export default {
244
250
  this.block.metadata.config = {}
245
251
  }
246
252
  if (_.isEmpty(this.block.metadata.config.title)) {
247
- this.block.metadata.config.title = ''
253
+ this.block.metadata.config.title = this.$t(
254
+ 'plugin.games.components.content.blocks.bucket_game.game_title'
255
+ )
248
256
  }
249
257
  if (_.isEmpty(this.block.metadata.config.instructions)) {
250
258
  this.block.metadata.config.instructions = ''
251
259
  }
252
260
  if (_.isEmpty(this.block.metadata.config.feedback_correct)) {
253
- this.block.metadata.config.feedback_correct = ''
261
+ this.block.metadata.config.feedback_correct = this.$t(
262
+ 'plugin.games.components.settings.bucket_game.form.feedback.correct_default'
263
+ )
254
264
  }
255
265
  if (_.isEmpty(this.block.metadata.config.feedback_incorrect)) {
256
- this.block.metadata.config.feedback_incorrect = ''
266
+ this.block.metadata.config.feedback_incorrect = this.$t(
267
+ 'plugin.games.components.settings.bucket_game.form.feedback.incorrect_default'
268
+ )
257
269
  }
258
270
  if (_.isEmpty(this.block.metadata.config.bucket_titles)) {
259
271
  this.block.metadata.config.bucket_titles = []
package/components/content/blocks/dragDrop/SortingGame.vue CHANGED
@@ -6,17 +6,14 @@
6
6
  {{ block.metadata.config.instructions }}
7
7
  </p>
8
8
  <v-container :key="'feedback'" :class="feedbackClass()">
9
- <br />
10
9
  <v-row
11
- class="d-flex justify-space-around"
10
+ class="d-flex justify-space-around pa-4"
12
11
  align="center"
13
12
  justify="center"
14
13
  >{{ feedback }}
15
14
  </v-row>
16
- <br />
17
15
  </v-container>
18
- <br />
19
- <div v-if="render">
16
+ <v-container v-if="render">
20
17
  <draggable
21
18
  v-model="input"
22
19
  :disabled="disabled"
@@ -25,22 +22,39 @@
25
22
  v-bind="dragOptions"
26
23
  @change="onDragChange"
27
24
  >
28
- <v-card
25
+ <v-row
26
+ class="justify-center align-center"
29
27
  v-for="index in input.length"
30
28
  :key="'bucket_' + index"
31
- :class="'pa-2 flex-fill bucket ' + bucketStateClass(index)"
32
- outlined
33
- tile
34
29
  >
35
- <v-icon>mdi-gesture-tap-hold</v-icon>
36
- <v-icon v-if="success[index - 1]" color="green"
37
- >mdi-check-bold
38
- </v-icon>
39
- <v-icon v-if="fail[index - 1]" color="red"
40
- >mdi-close</v-icon
30
+ <v-col
31
+ cols="1"
32
+ v-if="graded"
33
+ class="d-flex justify-end pa-0"
41
34
  >
42
- {{ input[index - 1].value }}
43
- </v-card>
35
+ <v-icon v-if="success[index - 1]" class="icon--success"
36
+ >mdi-check
37
+ </v-icon>
38
+ <v-icon v-if="fail[index - 1]" class="icon--error ma-0"
39
+ >mdi-close</v-icon
40
+ >
41
+ </v-col>
42
+ <v-col cols="11">
43
+ <v-card
44
+ :class="
45
+ 'pa-2 flex-fill bucket ' +
46
+ bucketStateClass(index)
47
+ "
48
+ outlined
49
+ tile
50
+ >
51
+ <v-icon :class="iconClass(index)"
52
+ >mdi-drag-vertical</v-icon
53
+ >
54
+ {{ input[index - 1].value }}
55
+ </v-card>
56
+ </v-col>
57
+ </v-row>
44
58
  </draggable>
45
59
  <v-container>
46
60
  <v-row
@@ -48,7 +62,7 @@
48
62
  class="d-flex justify-end"
49
63
  >
50
64
  <v-spacer class="col-lg-1" />
51
- <v-btn color="secondary" @click="checkAnswers">
65
+ <v-btn color="primary" @click="checkAnswers">
52
66
  {{
53
67
  $t(
54
68
  'plugin.games.components.content.blocks.sorting_game.check_answers'
@@ -63,16 +77,17 @@
63
77
  <v-btn
64
78
  v-if="isFail()"
65
79
  color="primary"
80
+ outlined
66
81
  class=" "
67
82
  @click="continueGame"
68
83
  >{{ $t('shared.forms.continue') }} </v-btn
69
84
  >&nbsp;&nbsp;
70
- <v-btn color="secondary" class="" @click="reset"
85
+ <v-btn color="primary" class="" @click="reset"
71
86
  >{{ $t('shared.forms.reset') }}
72
87
  </v-btn>
73
88
  </v-row>
74
89
  </v-container>
75
- </div>
90
+ </v-container>
76
91
  <div v-if="!render">
77
92
  <draggable
78
93
  v-model="block.metadata.config.answer"
@@ -82,23 +97,34 @@
82
97
  v-bind="dragOptions"
83
98
  @change="onDragChange"
84
99
  >
85
- <v-card
100
+ <v-row
101
+ class="justify-center align-center"
86
102
  v-for="index in block.metadata.config.answer.length"
87
103
  :key="'bucket_' + index"
88
- :class="'pa-2 flex-fill bucket ' + bucketStateClass(index)"
89
- elevation="0"
90
- outlined
91
- tile
92
104
  >
93
- <v-icon>mdi-gesture-tap-hold</v-icon>
94
- <v-icon v-if="success[index - 1]" color="green"
95
- >mdi-check-bold
96
- </v-icon>
97
- <v-icon v-if="fail[index - 1]" color="red"
98
- >mdi-close</v-icon
99
- >
100
- {{ block.metadata.config.answer[index - 1].value }}
101
- </v-card>
105
+ <v-col cols="1" v-if="graded">
106
+ <v-icon v-if="success[index - 1]" color="success"
107
+ >mdi-check-bold
108
+ </v-icon>
109
+ <v-icon v-if="fail[index - 1]" color="error"
110
+ >mdi-close</v-icon
111
+ >
112
+ </v-col>
113
+ <v-col cols="11">
114
+ <v-card
115
+ :class="
116
+ 'pa-2 flex-fill bucket ' +
117
+ bucketStateClass(index)
118
+ "
119
+ elevation="0"
120
+ outlined
121
+ tile
122
+ >
123
+ <v-icon>mdi-drag-vertical</v-icon>
124
+ {{ block.metadata.config.answer[index - 1].value }}
125
+ </v-card>
126
+ </v-col>
127
+ </v-row>
102
128
  </draggable>
103
129
  </div>
104
130
  </div>
@@ -123,6 +149,21 @@ export default {
123
149
  if (_.isEmpty(this.block.metadata.config)) {
124
150
  this.block.metadata.config = {}
125
151
  }
152
+ if (_.isEmpty(this.block.metadata.config.title)) {
153
+ this.block.metadata.config.title = this.$t(
154
+ 'plugin.games.components.settings.sorting_game.sortable_game'
155
+ )
156
+ }
157
+ if (_.isEmpty(this.block.metadata.config.feedback_correct)) {
158
+ this.block.metadata.config.feedback_correct = this.$t(
159
+ 'plugin.games.components.settings.bucket_game.form.feedback.correct_default'
160
+ )
161
+ }
162
+ if (_.isEmpty(this.block.metadata.config.feedback_incorrect)) {
163
+ this.block.metadata.config.feedback_incorrect = this.$t(
164
+ 'plugin.games.components.settings.bucket_game.form.feedback.incorrect_default'
165
+ )
166
+ }
126
167
  if (_.isEmpty(this.block.metadata.config.answer)) {
127
168
  this.block.metadata.config.answer = []
128
169
  }
@@ -139,6 +180,7 @@ export default {
139
180
  feedback: 'feedback here',
140
181
  success: [],
141
182
  fail: [],
183
+ graded: false,
142
184
  seed: 123,
143
185
  answer: [],
144
186
  }
@@ -150,6 +192,20 @@ export default {
150
192
  }
151
193
  },
152
194
  },
195
+ watch: {
196
+ render(newValue) {
197
+ if (newValue) {
198
+ this.input = this.shuffle(
199
+ _.cloneDeep(this.block.metadata.config.answer)
200
+ )
201
+ }
202
+ },
203
+ },
204
+ mounted() {
205
+ this.input = this.shuffle(
206
+ _.cloneDeep(this.block.metadata.config.answer)
207
+ )
208
+ },
153
209
  methods: {
154
210
  shuffle(array) {
155
211
  let currentIndex = array.length,
@@ -189,6 +245,7 @@ export default {
189
245
  },
190
246
  reset() {
191
247
  this.disabled = false
248
+ this.graded = false
192
249
  this.success = []
193
250
  this.fail = []
194
251
  this.input = this.shuffle(
@@ -199,6 +256,7 @@ export default {
199
256
  },
200
257
  continueGame() {
201
258
  this.disabled = false
259
+ this.graded = false
202
260
  this.success = []
203
261
  this.fail = []
204
262
  this.feedback = this.block.metadata.config.feedback_default
@@ -219,7 +277,6 @@ export default {
219
277
  },
220
278
  isFail() {
221
279
  let result = false
222
- let counter = 0
223
280
  this.fail.forEach(function (item) {
224
281
  if (item === true) {
225
282
  result = true
@@ -230,10 +287,10 @@ export default {
230
287
  feedbackClass() {
231
288
  let result = ''
232
289
  if (this.isSuccess()) {
233
- result = 'success '
290
+ result = 'container-feedback-success '
234
291
  }
235
292
  if (this.isFail()) {
236
- result = 'error '
293
+ result = 'container-feedback-error '
237
294
  }
238
295
  return result
239
296
  },
@@ -258,7 +315,7 @@ export default {
258
315
  if (this.isFail()) {
259
316
  this.feedback = this.block.metadata.config.feedback_incorrect
260
317
  }
261
-
318
+ this.graded = true
262
319
  this.seed = Math.floor(Math.random() * 100)
263
320
  },
264
321
  bucketStateClass(index) {
@@ -270,34 +327,49 @@ export default {
270
327
  }
271
328
  return ''
272
329
  },
330
+ iconClass(index) {
331
+ if (this.success[index - 1] || this.fail[index - 1]) {
332
+ return 'icon-inner'
333
+ }
334
+ return ''
335
+ },
273
336
  },
274
337
  }
275
338
  </script>
276
339
 
277
340
  <style scoped>
278
- .ghost {
279
- opacity: 0.5;
280
- background: #c8ebfb;
341
+ .container-feedback-success {
342
+ border: 4px solid var(--v-success-base);
343
+ color: var(--v-success-base);
344
+ }
345
+ .container-feedback-error {
346
+ border: 4px solid var(--v-error-base);
347
+ color: var(--v-error-base);
281
348
  }
282
349
  .bucket {
283
- border: solid 2px black;
284
- color: black;
350
+ border: solid 1px black;
351
+ border-radius: 4px !important;
285
352
  cursor: pointer;
286
- padding: 0.3em;
287
- margin: 0.3em;
288
- vertical-align: middle;
289
- display: inline-block;
290
- }
291
- .bucket--default {
292
- border: dashed 2px #5cb2f1;
293
- background-color: #ffffff;
294
353
  }
295
354
  .bucket--error {
296
- border: dashed 2px #dc3d1a;
297
- background-color: #fff1f1;
355
+ background-color: var(--v-error-base);
356
+ color: white;
298
357
  }
299
358
  .bucket--success {
300
- border: dashed 2px #76b778;
301
- background-color: #f1fff3;
359
+ background-color: var(--v-success-base);
360
+ color: white;
361
+ }
362
+ .icon-inner {
363
+ color: white;
364
+ }
365
+ .icon--error {
366
+ background-color: var(--v-error-base);
367
+ color: white;
368
+ border-radius: 25px;
369
+ }
370
+ .icon--success {
371
+ background-color: var(--v-success-base);
372
+ color: white;
373
+ border-radius: 25px;
302
374
  }
303
375
  </style>
package/components/content/blocks/quizshowGame/AnswerPanel.vue CHANGED
@@ -31,13 +31,15 @@
31
31
  v-if="editMode"
32
32
  v-model="question.text"
33
33
  :counter="255"
34
- maxlength="255"
35
34
  :label="
36
35
  $t(
37
36
  'plugin.games.components.content.blocks.quizshow_game.form.question'
38
37
  )
39
38
  "
40
39
  @input=""
40
+ prepend-inner-icon="mdi-help"
41
+ :autofocus="true"
42
+ rows="2"
41
43
  ></v-textarea>
42
44
  <v-card flat v-if="!editMode" v-html="question.text"></v-card>
43
45
  </v-row>
@@ -46,31 +48,31 @@
46
48
  justify="center"
47
49
  class="pa-4 mb-4 font-weight-bold text-capitalize"
48
50
  >
49
- <v-text-field
51
+ <v-textarea
50
52
  v-if="editMode"
51
53
  v-model="question.feedback"
52
54
  :counter="255"
53
- maxlength="255"
54
55
  :label="
55
56
  $t(
56
- 'plugin.games.components.content.blocks.quizshow_game.feedback.feedback'
57
+ 'plugin.games.components.content.blocks.quizshow_game.feedback.answer'
57
58
  )
58
59
  "
59
- ></v-text-field>
60
+ rows="2"
61
+ prepend-inner-icon="mdi-comment"
62
+ ></v-textarea>
60
63
  </v-row>
61
64
 
62
65
  <div class="d-flex flex-column">
63
66
  <v-row
64
67
  v-for="(choice, choice_index) in question.choices"
65
68
  :key="choice_index"
69
+ :class="!editMode ? 'pb-4' : ''"
66
70
  >
67
- <v-card
68
- v-ripple
69
- v-if="!editMode"
70
- @click="getUserInput(choice_index)"
71
- class="ma-1 pa-5 justify-start flex-fill"
72
- :class="generateButtonColor(choice_index)"
73
- :outlined="generateButtonOutline(choice_index)"
71
+ <v-col
72
+ cols="12"
73
+ md="2"
74
+ class="d-flex justify-end"
75
+ align-self="center"
74
76
  >
75
77
  <v-icon
76
78
  color="success"
@@ -81,8 +83,8 @@
81
83
  choice_index === userInput
82
84
  "
83
85
  >
84
- mdi-check-circle-outline</v-icon
85
- >
86
+ mdi-check-circle
87
+ </v-icon>
86
88
  <v-icon
87
89
  color="error"
88
90
  v-if="
@@ -92,42 +94,52 @@
92
94
  choice_index === userInput
93
95
  "
94
96
  >
95
- mdi-close-circle-outline</v-icon
97
+ mdi-close-circle
98
+ </v-icon>
99
+ <v-radio-group v-if="editMode" v-model="question.answer">
100
+ <v-radio
101
+ :ref="'checkbox' + choice_index"
102
+ :value="choice_index"
103
+ @click="onSetAnswer(choice_index)"
104
+ ></v-radio>
105
+ </v-radio-group>
106
+ </v-col>
107
+ <v-col cols="12" md="8" class="pa-0">
108
+ <v-card
109
+ v-ripple
110
+ v-if="!editMode"
111
+ @click="getUserInput(choice_index)"
112
+ class="pa-2 answer_display"
113
+ :class="generateButtonColor(choice_index)"
114
+ outlined
96
115
  >
97
- <span v-html="mathToHtml(choice.text)"></span>
98
- <v-icon
99
- class="info-icon"
100
- v-if="generateButtonColor(choice_index) === 'success'"
101
- @click="onFeedback"
102
- >mdi-information</v-icon
116
+ <span v-html="mathToHtml(choice.text)"></span>
117
+ <v-icon
118
+ class="info-icon"
119
+ v-if="
120
+ generateButtonColor(choice_index) === 'success'
121
+ "
122
+ @click="onFeedback"
123
+ >mdi-information
124
+ </v-icon>
125
+ </v-card>
126
+ <v-text-field
127
+ class="pa-0"
128
+ v-if="editMode"
129
+ v-model="question.choices[choice_index].text"
130
+ :label="
131
+ $t(
132
+ 'plugin.games.components.content.blocks.quizshow_game.form.choice'
133
+ )
134
+ "
135
+ outlined
136
+ @input=""
137
+ append-icon="mdi-delete-outline"
138
+ color="primary"
139
+ @click:append="deleteItem(choice)"
103
140
  >
104
- </v-card>
105
- <v-text-field
106
- v-if="editMode"
107
- v-model="question.choices[choice_index].text"
108
- :counter="255"
109
- maxlength="255"
110
- :label="
111
- $t(
112
- 'plugin.games.components.content.blocks.quizshow_game.form.choice'
113
- )
114
- "
115
- outlined
116
- @input=""
117
- ></v-text-field>
118
- <v-switch
119
- v-if="editMode"
120
- :disabled="
121
- !question.choices[choice_index].is_answer &&
122
- question.answer !== null
123
- "
124
- v-model="question.choices[choice_index].is_answer"
125
- :label="`is answer`"
126
- @click="setAnswer(choice_index)"
127
- ></v-switch>
128
- <v-icon v-if="editMode" @click="deleteItem(choice)">
129
- mdi-delete
130
- </v-icon>
141
+ </v-text-field>
142
+ </v-col>
131
143
  </v-row>
132
144
  </div>
133
145
  <v-row
@@ -139,7 +151,7 @@
139
151
  v-if="editMode"
140
152
  @click="addChoice"
141
153
  class="ma-1 pa-5 justify-start"
142
- color="secondary"
154
+ color="primary"
143
155
  outlined
144
156
  >
145
157
  {{
@@ -247,25 +259,9 @@ export default {
247
259
  userInput: this.userInput,
248
260
  })
249
261
  },
250
- generateButtonOutline(index) {
251
- if (this.userInput === null) {
252
- return true
253
- }
254
- if (this.question.choices[index].is_answer) {
255
- return false
256
- }
257
- if (
258
- this.userInput !== this.question.answer &&
259
- index === this.userInput
260
- ) {
261
- return false
262
- } else {
263
- return true
264
- }
265
- },
266
262
  generateButtonColor(index) {
267
263
  if (this.userInput === null) {
268
- return 'answer_display'
264
+ return ''
269
265
  }
270
266
  if (this.question.choices[index].is_answer) {
271
267
  return 'success'
@@ -276,7 +272,7 @@ export default {
276
272
  ) {
277
273
  return 'error'
278
274
  } else {
279
- return 'answer_display'
275
+ return ''
280
276
  }
281
277
  },
282
278
  click() {
@@ -294,12 +290,12 @@ export default {
294
290
  this.emitUserInput()
295
291
  }
296
292
  },
297
- setAnswer(index) {
298
- if (this.question.answer === null) {
299
- this.question.answer = index
300
- } else if (this.question.answer === index) {
301
- this.question.answer = null
302
- }
293
+ onSetAnswer(answerIndex) {
294
+ const context = this
295
+ this.question.choices.forEach(function (value, index) {
296
+ context.question.choices[index].is_answer = false
297
+ })
298
+ this.question.choices[answerIndex].is_answer = true
303
299
  },
304
300
  addChoice() {
305
301
  this.question.choices.push({ text: '', is_answer: false })
@@ -319,20 +315,14 @@ export default {
319
315
  </script>
320
316
 
321
317
  <style scoped>
322
- .bucket {
323
- box-shadow: 0px 2px 3px #0000004a;
324
- color: black;
325
- cursor: pointer;
326
- padding: 0.3em;
327
- margin: 0.3em;
328
- vertical-align: middle;
329
- display: inline-block;
330
- }
331
318
  .answer_display {
332
- outline: var(--v-secondary-base) solid 2px;
319
+ outline: var(--v-primary-base) solid 2px;
333
320
  }
334
321
  .info-icon {
335
322
  position: relative;
336
323
  float: right;
337
324
  }
325
+ .clickable {
326
+ cursor: pointer !important;
327
+ }
338
328
  </style>