@windward/games 0.0.6 → 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.
- package/components/content/blocks/dragDrop/BucketGame.vue +18 -6
- package/components/content/blocks/dragDrop/SortingGame.vue +127 -55
- package/components/content/blocks/flashcards/Flashcard.vue +5 -2
- package/components/content/blocks/multipleChoice/QuestionDialog.vue +1 -0
- package/components/content/blocks/sevenStrikes/SevenStikes.vue +3 -3
- package/components/content/blocks/wordJumble/WordJumble.vue +11 -5
- package/components/settings/BucketGameSettingsManager.vue +306 -369
- package/components/settings/FlashCardSlidesManager.vue +66 -25
- package/components/settings/MultipleChoiceSettingsManager.vue +1 -0
- package/components/settings/SevenStrikesSettingsManager.vue +10 -3
- package/components/settings/SortingGameSettingsManager.vue +181 -152
- package/components/settings/WordJumbleSettingsManager.vue +145 -137
- package/i18n/en-US/components/content/blocks/word_jumble.ts +1 -1
- package/i18n/en-US/components/settings/bucket_game.ts +5 -2
- package/i18n/en-US/components/settings/flashcard.ts +3 -1
- package/i18n/en-US/components/settings/sorting_game.ts +2 -0
- package/i18n/en-US/components/settings/word_jumble.ts +1 -1
- package/package.json +1 -1
|
@@ -1,9 +1,9 @@
|
|
|
1
1
|
<template>
|
|
2
2
|
<div>
|
|
3
3
|
<div>
|
|
4
|
-
<
|
|
4
|
+
<h1 aria-label="bucket game title" tabindex="0">
|
|
5
5
|
{{ block.metadata.config.title }}
|
|
6
|
-
</
|
|
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]
|
|
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 = []
|
|
@@ -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
|
-
<
|
|
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-
|
|
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-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
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
|
-
|
|
43
|
-
|
|
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="
|
|
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
|
>
|
|
70
|
-
<v-btn color="
|
|
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
|
-
</
|
|
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-
|
|
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-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
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
|
-
.
|
|
279
|
-
|
|
280
|
-
|
|
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
|
|
284
|
-
|
|
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
|
-
|
|
297
|
-
|
|
355
|
+
background-color: var(--v-error-base);
|
|
356
|
+
color: white;
|
|
298
357
|
}
|
|
299
358
|
.bucket--success {
|
|
300
|
-
|
|
301
|
-
|
|
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>
|
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
<v-card
|
|
4
4
|
@click="toggleCard"
|
|
5
5
|
v-show="value"
|
|
6
|
-
class="
|
|
6
|
+
:class="cardClass"
|
|
7
7
|
max-height="900"
|
|
8
8
|
min-height="460"
|
|
9
9
|
>
|
|
@@ -12,7 +12,7 @@
|
|
|
12
12
|
<v-card
|
|
13
13
|
@click="toggleCard"
|
|
14
14
|
v-show="!value"
|
|
15
|
-
class="
|
|
15
|
+
:class="cardClass"
|
|
16
16
|
max-height="900"
|
|
17
17
|
min-height="460"
|
|
18
18
|
>
|
|
@@ -27,6 +27,7 @@ export default {
|
|
|
27
27
|
data() {
|
|
28
28
|
return {
|
|
29
29
|
settings: {},
|
|
30
|
+
cardClass: 'animated flashcard',
|
|
30
31
|
}
|
|
31
32
|
},
|
|
32
33
|
props: {
|
|
@@ -71,6 +72,8 @@ export default {
|
|
|
71
72
|
},
|
|
72
73
|
methods: {
|
|
73
74
|
toggleCard() {
|
|
75
|
+
//only flip card when user click
|
|
76
|
+
this.cardClass = 'animated flipInY flashcard'
|
|
74
77
|
this.$emit('input', !this.value)
|
|
75
78
|
},
|
|
76
79
|
},
|
|
@@ -310,9 +310,9 @@ export default {
|
|
|
310
310
|
// rehides the displayed correct letters
|
|
311
311
|
this.block.metadata.config.words[
|
|
312
312
|
this.onSlide
|
|
313
|
-
].splitWord.forEach((
|
|
314
|
-
if (
|
|
315
|
-
|
|
313
|
+
].splitWord.forEach((letter) => {
|
|
314
|
+
if (letter.letter && letter.letter !== ' ') {
|
|
315
|
+
letter.show = false
|
|
316
316
|
}
|
|
317
317
|
})
|
|
318
318
|
}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
<template>
|
|
2
2
|
<v-container>
|
|
3
3
|
<v-col class="pa-0">
|
|
4
|
-
<
|
|
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
|
-
</
|
|
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 = []
|