@windward/games 0.1.2 → 0.1.3
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.
|
@@ -60,20 +60,18 @@
|
|
|
60
60
|
group="people"
|
|
61
61
|
:move="onMoveCallback"
|
|
62
62
|
>
|
|
63
|
-
<v-row
|
|
63
|
+
<v-row class="col-md-10">
|
|
64
64
|
<v-card
|
|
65
65
|
v-if="mainAnswer[0]"
|
|
66
|
-
class="pa-2 flex-fill"
|
|
66
|
+
class="pa-2 d-flex justify-center flex-fill"
|
|
67
67
|
outlined
|
|
68
68
|
tile
|
|
69
69
|
>
|
|
70
70
|
<v-icon>mdi-drag-vertical</v-icon>
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
: ''
|
|
76
|
-
}}</span>
|
|
71
|
+
<TextViewer
|
|
72
|
+
v-model="mainAnswer[counter].display"
|
|
73
|
+
class="d-flex align-center"
|
|
74
|
+
></TextViewer>
|
|
77
75
|
</v-card>
|
|
78
76
|
</v-row>
|
|
79
77
|
</draggable>
|
|
@@ -98,7 +96,9 @@
|
|
|
98
96
|
: ''
|
|
99
97
|
"
|
|
100
98
|
>
|
|
101
|
-
<v-card-text
|
|
99
|
+
<v-card-text
|
|
100
|
+
class="d-flex justify-center text-center"
|
|
101
|
+
>
|
|
102
102
|
<draggable
|
|
103
103
|
v-model="items[bindex]"
|
|
104
104
|
:key="'bucket - ' + bindex"
|
|
@@ -108,18 +108,15 @@
|
|
|
108
108
|
:move="checkMove"
|
|
109
109
|
tabindex="0"
|
|
110
110
|
>
|
|
111
|
-
<
|
|
112
|
-
|
|
111
|
+
<TextViewer
|
|
112
|
+
v-model="
|
|
113
113
|
block.metadata.config
|
|
114
|
-
.bucket_titles[bindex]
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
</div>
|
|
121
|
-
</draggable></v-card-text
|
|
122
|
-
>
|
|
114
|
+
.bucket_titles[bindex].title
|
|
115
|
+
"
|
|
116
|
+
class="d-flex align-center"
|
|
117
|
+
></TextViewer>
|
|
118
|
+
</draggable>
|
|
119
|
+
</v-card-text>
|
|
123
120
|
</v-card>
|
|
124
121
|
</v-row>
|
|
125
122
|
</v-row>
|
|
@@ -135,28 +132,26 @@
|
|
|
135
132
|
group="people"
|
|
136
133
|
:move="onMoveCallback"
|
|
137
134
|
>
|
|
138
|
-
<v-row
|
|
135
|
+
<v-row class="col-md-10">
|
|
139
136
|
<v-card
|
|
140
137
|
v-if="
|
|
141
138
|
block.metadata.config.bucket_answers[
|
|
142
139
|
startingIndex
|
|
143
140
|
]
|
|
144
141
|
"
|
|
145
|
-
class="pa-2 flex-fill"
|
|
142
|
+
class="pa-2 d-flex justify-center flex-fill"
|
|
146
143
|
outlined
|
|
147
144
|
tile
|
|
148
145
|
>
|
|
149
146
|
<v-icon>mdi-drag-vertical</v-icon>
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
|
|
157
|
-
|
|
158
|
-
: ''
|
|
159
|
-
}}</span>
|
|
147
|
+
<TextViewer
|
|
148
|
+
v-model="
|
|
149
|
+
block.metadata.config.bucket_answers[
|
|
150
|
+
startingIndex
|
|
151
|
+
][startingIndex].display
|
|
152
|
+
"
|
|
153
|
+
class="d-flex align-center"
|
|
154
|
+
></TextViewer>
|
|
160
155
|
</v-card>
|
|
161
156
|
</v-row>
|
|
162
157
|
</draggable>
|
|
@@ -179,7 +174,9 @@
|
|
|
179
174
|
.color
|
|
180
175
|
"
|
|
181
176
|
>
|
|
182
|
-
<v-card-text
|
|
177
|
+
<v-card-text
|
|
178
|
+
class="d-flex justify-center text-center"
|
|
179
|
+
>
|
|
183
180
|
<draggable
|
|
184
181
|
:key="'bucket - ' + bindex"
|
|
185
182
|
disabled
|
|
@@ -188,15 +185,15 @@
|
|
|
188
185
|
@change="change($event, bindex)"
|
|
189
186
|
tabindex="0"
|
|
190
187
|
>
|
|
191
|
-
<
|
|
192
|
-
|
|
188
|
+
<TextViewer
|
|
189
|
+
v-model="
|
|
193
190
|
block.metadata.config.bucket_titles[
|
|
194
191
|
bindex
|
|
195
192
|
].title
|
|
196
|
-
|
|
197
|
-
|
|
198
|
-
|
|
199
|
-
>
|
|
193
|
+
"
|
|
194
|
+
class="d-flex align-center"
|
|
195
|
+
></TextViewer> </draggable
|
|
196
|
+
></v-card-text>
|
|
200
197
|
</v-card>
|
|
201
198
|
</v-row>
|
|
202
199
|
</v-row>
|
|
@@ -250,10 +247,11 @@ import draggable from 'vuedraggable'
|
|
|
250
247
|
import _ from 'lodash'
|
|
251
248
|
import CrudTable from '../../CrudTable'
|
|
252
249
|
import BaseContentBlock from '~/components/Content/Blocks/BaseContentBlock'
|
|
250
|
+
import TextViewer from '~/components/Text/TextViewer.vue'
|
|
253
251
|
|
|
254
252
|
export default {
|
|
255
253
|
name: 'BucketGame',
|
|
256
|
-
components: { CrudTable, draggable },
|
|
254
|
+
components: { CrudTable, draggable, TextViewer },
|
|
257
255
|
extends: BaseContentBlock,
|
|
258
256
|
beforeMount() {
|
|
259
257
|
if (_.isEmpty(this.block)) {
|
|
@@ -333,7 +331,7 @@ export default {
|
|
|
333
331
|
watch: {
|
|
334
332
|
render(newValue) {
|
|
335
333
|
if (newValue) {
|
|
336
|
-
this.
|
|
334
|
+
this.onReset()
|
|
337
335
|
}
|
|
338
336
|
},
|
|
339
337
|
},
|
|
@@ -400,42 +398,76 @@ export default {
|
|
|
400
398
|
const item = evt.draggedContext.element
|
|
401
399
|
const itemIdx = evt.draggedContext.futureIndex
|
|
402
400
|
this.items[item.bucket_index].indexOf(item)
|
|
403
|
-
|
|
401
|
+
// checks if this is a list we can move our item too
|
|
402
|
+
const checkIfItemInAnswerList = this.checkIfInList(
|
|
403
|
+
this.block.metadata.config.bucket_answers,
|
|
404
|
+
item
|
|
405
|
+
)
|
|
404
406
|
if (
|
|
405
407
|
this.items[item.bucket_index].indexOf(item) === -1 &&
|
|
406
|
-
|
|
407
|
-
item.bucket_index
|
|
408
|
-
].indexOf(item) !== -1
|
|
408
|
+
checkIfItemInAnswerList
|
|
409
409
|
) {
|
|
410
410
|
return true
|
|
411
411
|
}
|
|
412
412
|
|
|
413
413
|
return false
|
|
414
414
|
},
|
|
415
|
+
// checking manually if item belongs in array provided. Reference is broken by
|
|
416
|
+
// clicking action panel so can't find the item with functions like indexOf
|
|
417
|
+
checkIfInList(array, item, bucket_index = null) {
|
|
418
|
+
let index = item.bucket_index
|
|
419
|
+
if (bucket_index) {
|
|
420
|
+
index = bucket_index
|
|
421
|
+
}
|
|
422
|
+
let isInList = false
|
|
423
|
+
array[index].forEach((element) => {
|
|
424
|
+
if (
|
|
425
|
+
element.bucket_index === item.bucket_index &&
|
|
426
|
+
element.display === item.display &&
|
|
427
|
+
element.display_value === item.display_value &&
|
|
428
|
+
element.feedback === item.feedback &&
|
|
429
|
+
element.id === item.id
|
|
430
|
+
) {
|
|
431
|
+
isInList = true
|
|
432
|
+
}
|
|
433
|
+
})
|
|
434
|
+
return isInList
|
|
435
|
+
},
|
|
415
436
|
change(evt, bucket_index) {
|
|
416
437
|
this.allow_drag = false
|
|
417
438
|
if (
|
|
418
|
-
this.
|
|
439
|
+
this.checkIfInList(
|
|
440
|
+
this.items,
|
|
441
|
+
evt.added.element,
|
|
442
|
+
bucket_index
|
|
443
|
+
) &&
|
|
419
444
|
!_.isEmpty(
|
|
420
445
|
this.block.metadata.config.bucket_answers[bucket_index]
|
|
421
446
|
) &&
|
|
422
|
-
this.
|
|
423
|
-
|
|
424
|
-
|
|
425
|
-
|
|
447
|
+
this.checkIfInList(
|
|
448
|
+
this.block.metadata.config.bucket_answers,
|
|
449
|
+
evt.added.element,
|
|
450
|
+
bucket_index
|
|
451
|
+
)
|
|
426
452
|
) {
|
|
427
453
|
this.feedback = evt.added.element.feedback
|
|
428
454
|
? evt.added.element.feedback
|
|
429
455
|
: this.block.metadata.config.feedback_correct
|
|
430
|
-
|
|
431
|
-
|
|
432
|
-
|
|
433
|
-
|
|
434
|
-
|
|
456
|
+
// determines if answer is correct and then sees if that was the last answer
|
|
457
|
+
// needs to be nested in here because this.mainAnswer is bound to :list on draggable
|
|
458
|
+
// list changes the array so when it is using the last object in the array it looks like the array is empty
|
|
459
|
+
if (this.mainAnswer.length === 0) {
|
|
460
|
+
this.feedback = this.$t(
|
|
461
|
+
'windward.games.components.content.blocks.matching_game.congratulations_feedback'
|
|
462
|
+
)
|
|
463
|
+
} else {
|
|
464
|
+
this.status = 'successOutline'
|
|
465
|
+
}
|
|
435
466
|
} else {
|
|
436
467
|
let items = this.items[bucket_index]
|
|
437
468
|
const indexOfAddedElement = items.indexOf(evt.added.element)
|
|
438
469
|
this.items[bucket_index].splice(indexOfAddedElement, 1)
|
|
470
|
+
// puts item back into mutable array for draggable component
|
|
439
471
|
this.mainAnswer.push(evt.added.element)
|
|
440
472
|
this.feedback = this.block.metadata.config.feedback_incorrect
|
|
441
473
|
this.status = 'errorOutline'
|
|
@@ -43,15 +43,15 @@
|
|
|
43
43
|
>
|
|
44
44
|
<template #header="{ item }">
|
|
45
45
|
{{
|
|
46
|
-
item.title
|
|
47
|
-
? item.title
|
|
46
|
+
stripHtml(item.title)
|
|
47
|
+
? stripHtml(item.title)
|
|
48
48
|
: $t(
|
|
49
49
|
'windward.games.components.settings.bucket_game.form.enter_text'
|
|
50
50
|
)
|
|
51
51
|
}}
|
|
52
52
|
</template>
|
|
53
53
|
<template #body="{ index }">
|
|
54
|
-
<v-container>
|
|
54
|
+
<v-container :key="expansionPanelKey">
|
|
55
55
|
<v-flex xs12>
|
|
56
56
|
<p class="p-label">
|
|
57
57
|
{{
|
|
@@ -60,15 +60,13 @@
|
|
|
60
60
|
)
|
|
61
61
|
}}
|
|
62
62
|
</p>
|
|
63
|
-
<
|
|
63
|
+
<TextEditor
|
|
64
64
|
v-model="
|
|
65
65
|
block.metadata.config.bucket_titles[
|
|
66
66
|
index
|
|
67
67
|
].title
|
|
68
68
|
"
|
|
69
|
-
|
|
70
|
-
:autofocus="true"
|
|
71
|
-
></v-text-field>
|
|
69
|
+
></TextEditor>
|
|
72
70
|
</v-flex>
|
|
73
71
|
<v-flex xs12>
|
|
74
72
|
<p class="p-label">
|
|
@@ -116,15 +114,15 @@
|
|
|
116
114
|
>
|
|
117
115
|
<template #header="{ item }">
|
|
118
116
|
{{
|
|
119
|
-
item.display
|
|
120
|
-
? item.display
|
|
117
|
+
stripHtml(item.display)
|
|
118
|
+
? stripHtml(item.display)
|
|
121
119
|
: $t(
|
|
122
120
|
'windward.games.components.settings.bucket_game.form.enter_text'
|
|
123
121
|
)
|
|
124
122
|
}}
|
|
125
123
|
</template>
|
|
126
124
|
<template #body="{ index: answerIndex }">
|
|
127
|
-
<v-container>
|
|
125
|
+
<v-container :key="expansionPanelKey">
|
|
128
126
|
<v-flex xs12>
|
|
129
127
|
<p class="p-label mb-0">
|
|
130
128
|
{{
|
|
@@ -133,16 +131,14 @@
|
|
|
133
131
|
)
|
|
134
132
|
}}
|
|
135
133
|
</p>
|
|
136
|
-
<
|
|
134
|
+
<TextEditor
|
|
137
135
|
v-model="
|
|
138
136
|
block.metadata.config
|
|
139
137
|
.bucket_answers[index][
|
|
140
138
|
answerIndex
|
|
141
139
|
].display
|
|
142
140
|
"
|
|
143
|
-
|
|
144
|
-
:autofocus="true"
|
|
145
|
-
></v-text-field>
|
|
141
|
+
></TextEditor>
|
|
146
142
|
<p class="p-label mb-0">
|
|
147
143
|
{{
|
|
148
144
|
$t(
|
|
@@ -251,6 +247,8 @@ import {
|
|
|
251
247
|
ContentViewer,
|
|
252
248
|
} from '@windward/core/utils'
|
|
253
249
|
import colors from 'vuetify/lib/util/colors'
|
|
250
|
+
import TextEditor from '~/components/Text/TextEditor'
|
|
251
|
+
import Crypto from '~/helpers/Crypto'
|
|
254
252
|
import BaseContentSettings from '~/components/Content/Tool/BaseContentSettings.js'
|
|
255
253
|
import SortableExpansionPanel from '~/components/SortableExpansionPanel.vue'
|
|
256
254
|
|
|
@@ -262,6 +260,7 @@ export default {
|
|
|
262
260
|
MathLiveWrapper,
|
|
263
261
|
ContentViewer,
|
|
264
262
|
SortableExpansionPanel,
|
|
263
|
+
TextEditor,
|
|
265
264
|
},
|
|
266
265
|
beforeMount() {
|
|
267
266
|
if (_.isEmpty(this.block)) {
|
|
@@ -309,6 +308,7 @@ export default {
|
|
|
309
308
|
valid: true,
|
|
310
309
|
loading: false,
|
|
311
310
|
panel: 0,
|
|
311
|
+
expansionPanelKey: '0',
|
|
312
312
|
swatches: [
|
|
313
313
|
[colors.grey.lighten1, colors.blueGrey.lighten5],
|
|
314
314
|
[colors.brown.lighten3, colors.red.lighten3],
|
|
@@ -338,6 +338,8 @@ export default {
|
|
|
338
338
|
})
|
|
339
339
|
})
|
|
340
340
|
this.block.metadata.config.bucket_answers = answerArray
|
|
341
|
+
// update expansion panel so that the text editor follows its parent element
|
|
342
|
+
this.expansionPanelKey = Crypto.id()
|
|
341
343
|
},
|
|
342
344
|
onAddBucket() {
|
|
343
345
|
this.block.metadata.config.bucket_titles.forEach((element) => {
|
|
@@ -431,6 +433,9 @@ export default {
|
|
|
431
433
|
],
|
|
432
434
|
})
|
|
433
435
|
},
|
|
436
|
+
stripHtml(htmlString) {
|
|
437
|
+
return htmlString.replace(/(<([^>]+)>)/gi, '')
|
|
438
|
+
},
|
|
434
439
|
},
|
|
435
440
|
}
|
|
436
441
|
</script>
|