@windward/games 0.0.7 → 0.0.8

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 (11) 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/wordJumble/WordJumble.vue +11 -5
  4. package/components/settings/BucketGameSettingsManager.vue +306 -369
  5. package/components/settings/SortingGameSettingsManager.vue +181 -152
  6. package/components/settings/WordJumbleSettingsManager.vue +145 -137
  7. package/i18n/en-US/components/content/blocks/word_jumble.ts +1 -1
  8. package/i18n/en-US/components/settings/bucket_game.ts +5 -2
  9. package/i18n/en-US/components/settings/sorting_game.ts +2 -0
  10. package/i18n/en-US/components/settings/word_jumble.ts +1 -1
  11. 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/wordJumble/WordJumble.vue CHANGED
@@ -1,7 +1,7 @@
1
1
  <template>
2
2
  <v-container>
3
3
  <v-col class="pa-0">
4
- <h3>
4
+ <h1>
5
5
  {{
6
6
  block.metadata.config.title
7
7
  ? block.metadata.config.title
@@ -9,7 +9,7 @@
9
9
  'plugin.games.components.content.blocks.word_jumble.title'
10
10
  )
11
11
  }}
12
- </h3>
12
+ </h1>
13
13
  <p>{{ block.metadata.config.instructions }}</p>
14
14
  </v-col>
15
15
  <v-col class="pa-0">
@@ -109,16 +109,22 @@ export default {
109
109
  this.block.metadata.config = {}
110
110
  }
111
111
  if (_.isEmpty(this.block.metadata.config.title)) {
112
- this.block.metadata.config.title = ''
112
+ this.block.metadata.config.title = this.$t(
113
+ 'plugin.games.components.content.blocks.word_jumble.title'
114
+ )
113
115
  }
114
116
  if (_.isEmpty(this.block.metadata.config.instructions)) {
115
117
  this.block.metadata.config.instructions = ''
116
118
  }
117
119
  if (_.isEmpty(this.block.metadata.config.feedback_correct)) {
118
- this.block.metadata.config.feedback_correct = ''
120
+ this.block.metadata.config.feedback_correct = this.$t(
121
+ 'plugin.games.components.settings.bucket_game.form.feedback.correct_default'
122
+ )
119
123
  }
120
124
  if (_.isEmpty(this.block.metadata.config.feedback_incorrect)) {
121
- this.block.metadata.config.feedback_incorrect = ''
125
+ this.block.metadata.config.feedback_incorrect = this.$t(
126
+ 'plugin.games.components.settings.bucket_game.form.feedback.incorrect_default'
127
+ )
122
128
  }
123
129
  if (_.isEmpty(this.block.metadata.config.words)) {
124
130
  this.block.metadata.config.words = []