@windward/games 0.4.0 → 0.5.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.
- package/components/content/blocks/crosswordPuzzle/CrosswordPuzzle.vue +1 -1
- package/components/content/blocks/dragDrop/BucketGame.vue +6 -2
- package/components/content/blocks/matchingGame/MatchingGame.vue +318 -321
- package/components/content/blocks/multipleChoice/MultipleChoice.vue +1 -1
- package/components/content/blocks/quizshowGame/AnswerPanel.vue +2 -1
- package/components/content/blocks/quizshowGame/QuizShow.vue +1 -1
- package/components/content/blocks/wordJumble/WordJumble.vue +1 -1
- package/components/settings/MatchingGameManager.vue +26 -27
- package/i18n/en-US/components/settings/matching_game.ts +4 -0
- package/i18n/es-ES/components/settings/matching_game.ts +4 -0
- package/i18n/sv-SE/components/settings/matching_game.ts +4 -0
- package/package.json +1 -1
|
@@ -217,7 +217,7 @@
|
|
|
217
217
|
)
|
|
218
218
|
"
|
|
219
219
|
>
|
|
220
|
-
<v-col align="end" tabindex="0">
|
|
220
|
+
<v-col align="end" tabindex="0" class="pa-0">
|
|
221
221
|
{{
|
|
222
222
|
$t(
|
|
223
223
|
'windward.games.components.content.blocks.matching_game.of_complete_text_area',
|
|
@@ -233,7 +233,11 @@
|
|
|
233
233
|
style="pointer-events: none"
|
|
234
234
|
></v-progress-linear>
|
|
235
235
|
<br />
|
|
236
|
-
<v-btn
|
|
236
|
+
<v-btn
|
|
237
|
+
color="primary"
|
|
238
|
+
outlined
|
|
239
|
+
elevation="0"
|
|
240
|
+
@click="onReset"
|
|
237
241
|
>{{ $t('shared.forms.reset') }}
|
|
238
242
|
</v-btn>
|
|
239
243
|
</v-col>
|
|
@@ -23,321 +23,304 @@
|
|
|
23
23
|
}}
|
|
24
24
|
</p>
|
|
25
25
|
|
|
26
|
-
<v-container fluid :class="status"
|
|
27
|
-
<
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
@click="onExitFeedback"
|
|
49
|
-
><v-icon class="icon--error"
|
|
50
|
-
>mdi-close-circle</v-icon
|
|
51
|
-
>
|
|
52
|
-
</v-container>
|
|
53
|
-
</v-col>
|
|
26
|
+
<v-container fluid :class="status">
|
|
27
|
+
<v-row class="d-flex justify-center pa-2">{{
|
|
28
|
+
feedback
|
|
29
|
+
? feedback
|
|
30
|
+
: $t(
|
|
31
|
+
'windward.games.components.content.blocks.bucket_game.form.feedback.feedback_here'
|
|
32
|
+
)
|
|
33
|
+
}}</v-row>
|
|
34
|
+
<v-row class="d-flex justify-center pa-2">
|
|
35
|
+
<v-btn
|
|
36
|
+
v-if="status === 'successOutline'"
|
|
37
|
+
class="success mr-5"
|
|
38
|
+
elevation="0"
|
|
39
|
+
@click="onContinueGame"
|
|
40
|
+
>{{ $t('shared.forms.continue') }}
|
|
41
|
+
</v-btn>
|
|
42
|
+
<v-container
|
|
43
|
+
v-if="status === 'errorOutline'"
|
|
44
|
+
class="d-flex justify-center align-center"
|
|
45
|
+
@click="onExitFeedback"
|
|
46
|
+
><v-icon class="icon--error">mdi-close-circle</v-icon>
|
|
47
|
+
</v-container>
|
|
54
48
|
</v-row>
|
|
55
|
-
<br />
|
|
56
49
|
</v-container>
|
|
57
|
-
<
|
|
58
|
-
<v-
|
|
59
|
-
<
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
:
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
@end="onEnd"
|
|
71
|
-
>
|
|
72
|
-
<v-card
|
|
73
|
-
v-for="(answer, aindex) in block.metadata.config
|
|
74
|
-
.answerObjects"
|
|
75
|
-
:key="aindex"
|
|
76
|
-
class="pa-2 ma-2 answerCard container-outline"
|
|
77
|
-
outlined
|
|
78
|
-
>
|
|
79
|
-
<v-icon>mdi-drag-vertical</v-icon>
|
|
80
|
-
<span>
|
|
81
|
-
{{ answer.display }}
|
|
82
|
-
</span>
|
|
83
|
-
</v-card>
|
|
84
|
-
</draggable>
|
|
85
|
-
</v-row>
|
|
86
|
-
<v-row
|
|
87
|
-
v-if="render"
|
|
88
|
-
class="d-flex flex-wrap flex-row justify-center flex-fill"
|
|
50
|
+
<v-container class="pa-0">
|
|
51
|
+
<v-row>
|
|
52
|
+
<draggable
|
|
53
|
+
v-bind="dragOptions"
|
|
54
|
+
class="d-flex justify-space-between flex-wrap col-md-12"
|
|
55
|
+
:list="block.metadata.config.answerObjects"
|
|
56
|
+
:disabled="!allowDrag"
|
|
57
|
+
:group="{
|
|
58
|
+
name: 'people',
|
|
59
|
+
pull: 'clone',
|
|
60
|
+
put: false,
|
|
61
|
+
}"
|
|
62
|
+
@end="onEnd"
|
|
89
63
|
>
|
|
90
|
-
<v-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
>
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
class="dragArea list-group"
|
|
130
|
-
:key="mainPrompt['prompt']"
|
|
131
|
-
v-bind="dragOptions"
|
|
132
|
-
disabled
|
|
133
|
-
group="people"
|
|
134
|
-
tabindex="0"
|
|
64
|
+
<v-card
|
|
65
|
+
v-for="(answer, aindex) in block.metadata.config
|
|
66
|
+
.answerObjects"
|
|
67
|
+
:key="aindex"
|
|
68
|
+
class="pa-2 ma-2 answerCard container-outline"
|
|
69
|
+
outlined
|
|
70
|
+
>
|
|
71
|
+
<v-icon>mdi-drag-vertical</v-icon>
|
|
72
|
+
<span>
|
|
73
|
+
{{ answer.display }}
|
|
74
|
+
</span>
|
|
75
|
+
</v-card>
|
|
76
|
+
</draggable>
|
|
77
|
+
</v-row>
|
|
78
|
+
<v-row
|
|
79
|
+
v-if="render"
|
|
80
|
+
class="d-flex flex-wrap flex-row justify-center flex-fill"
|
|
81
|
+
>
|
|
82
|
+
<v-row align="center" class="col-md-12">
|
|
83
|
+
<v-card
|
|
84
|
+
v-if="mainPrompt['textOrImage'] === 'text'"
|
|
85
|
+
class="flex-fill bucket"
|
|
86
|
+
min-height="5em"
|
|
87
|
+
outlined
|
|
88
|
+
tile
|
|
89
|
+
color="secondary"
|
|
90
|
+
>
|
|
91
|
+
<v-card-text class="text-center">
|
|
92
|
+
<draggable
|
|
93
|
+
class="dragArea list-group"
|
|
94
|
+
:key="mainPrompt['prompt']"
|
|
95
|
+
v-bind="dragOptions"
|
|
96
|
+
disabled
|
|
97
|
+
group="people"
|
|
98
|
+
tabindex="0"
|
|
99
|
+
>
|
|
100
|
+
<div
|
|
101
|
+
class="card_text secondary"
|
|
102
|
+
color="secondary"
|
|
135
103
|
>
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
mainPrompt[
|
|
142
|
-
'ariaDescribedBy'
|
|
143
|
-
]
|
|
144
|
-
)
|
|
145
|
-
"
|
|
146
|
-
:alt="
|
|
147
|
-
getFileAlt(
|
|
148
|
-
mainPrompt.file,
|
|
149
|
-
mainPrompt['altText']
|
|
150
|
-
)
|
|
151
|
-
"
|
|
152
|
-
:src="
|
|
153
|
-
getFilePublicUrl(
|
|
154
|
-
mainPrompt.file
|
|
155
|
-
)
|
|
156
|
-
"
|
|
157
|
-
></v-img>
|
|
158
|
-
</div>
|
|
159
|
-
</draggable>
|
|
160
|
-
</v-card-text>
|
|
161
|
-
</v-card>
|
|
162
|
-
</v-row>
|
|
104
|
+
{{ mainPrompt['prompt'] }}
|
|
105
|
+
</div>
|
|
106
|
+
</draggable>
|
|
107
|
+
</v-card-text>
|
|
108
|
+
</v-card>
|
|
163
109
|
</v-row>
|
|
164
|
-
<v-row
|
|
165
|
-
v-
|
|
166
|
-
|
|
167
|
-
|
|
168
|
-
|
|
169
|
-
|
|
170
|
-
|
|
171
|
-
|
|
172
|
-
|
|
173
|
-
|
|
174
|
-
|
|
175
|
-
|
|
176
|
-
|
|
177
|
-
|
|
178
|
-
|
|
179
|
-
|
|
180
|
-
|
|
181
|
-
|
|
182
|
-
|
|
183
|
-
|
|
184
|
-
|
|
185
|
-
|
|
186
|
-
|
|
187
|
-
|
|
188
|
-
|
|
189
|
-
|
|
110
|
+
<v-row align="center" class="col-md-10">
|
|
111
|
+
<v-card
|
|
112
|
+
v-if="mainPrompt['textOrImage'] === 'image'"
|
|
113
|
+
class="pa-2 flex-fill bucket"
|
|
114
|
+
min-height="5em"
|
|
115
|
+
outlined
|
|
116
|
+
tile
|
|
117
|
+
>
|
|
118
|
+
<v-card-text>
|
|
119
|
+
<draggable
|
|
120
|
+
v-if="mainPrompt.file"
|
|
121
|
+
class="dragArea list-group"
|
|
122
|
+
:key="mainPrompt['prompt']"
|
|
123
|
+
v-bind="dragOptions"
|
|
124
|
+
disabled
|
|
125
|
+
group="people"
|
|
126
|
+
tabindex="0"
|
|
127
|
+
>
|
|
128
|
+
<div :id="mainPrompt.file.id">
|
|
129
|
+
<v-img
|
|
130
|
+
:aria-describedby="
|
|
131
|
+
getFileAriaDescribedBy(
|
|
132
|
+
mainPrompt.file,
|
|
133
|
+
mainPrompt[
|
|
134
|
+
'ariaDescribedBy'
|
|
135
|
+
]
|
|
136
|
+
)
|
|
137
|
+
"
|
|
138
|
+
:alt="
|
|
139
|
+
getFileAlt(
|
|
140
|
+
mainPrompt.file,
|
|
141
|
+
mainPrompt['altText']
|
|
142
|
+
)
|
|
143
|
+
"
|
|
144
|
+
:src="
|
|
145
|
+
getFilePublicUrl(
|
|
146
|
+
mainPrompt.file
|
|
147
|
+
)
|
|
148
|
+
"
|
|
149
|
+
></v-img>
|
|
150
|
+
</div>
|
|
151
|
+
</draggable>
|
|
152
|
+
</v-card-text>
|
|
153
|
+
</v-card>
|
|
154
|
+
</v-row>
|
|
155
|
+
</v-row>
|
|
156
|
+
<v-row
|
|
157
|
+
v-if="!render && block.metadata.config.prompts.length > 0"
|
|
158
|
+
class="d-flex flex-wrap flex-row justify-center flex-fill"
|
|
159
|
+
>
|
|
160
|
+
<v-row align="center" class="col-md-12">
|
|
161
|
+
<v-card
|
|
162
|
+
v-if="
|
|
163
|
+
block.metadata.config.prompts[startingIndex][
|
|
164
|
+
startingIndex
|
|
165
|
+
].textOrImage === 'text'
|
|
166
|
+
"
|
|
167
|
+
class="pa-2 flex-fill bucket"
|
|
168
|
+
min-height="5em"
|
|
169
|
+
outlined
|
|
170
|
+
tile
|
|
171
|
+
color="secondary"
|
|
172
|
+
>
|
|
173
|
+
<v-card-text class="text-center">
|
|
174
|
+
<draggable
|
|
175
|
+
v-bind="dragOptions"
|
|
176
|
+
class="dragArea list-group"
|
|
177
|
+
disabled
|
|
178
|
+
group="people"
|
|
179
|
+
tabindex="0"
|
|
180
|
+
>
|
|
181
|
+
<div
|
|
182
|
+
class="card_text secondary"
|
|
183
|
+
color="secondary"
|
|
190
184
|
>
|
|
191
|
-
|
|
192
|
-
class="card_text secondary"
|
|
193
|
-
color="secondary"
|
|
194
|
-
>
|
|
195
|
-
{{
|
|
196
|
-
block.metadata.config.prompts[
|
|
197
|
-
startingIndex
|
|
198
|
-
][startingIndex].prompt
|
|
199
|
-
}}
|
|
200
|
-
</div>
|
|
201
|
-
</draggable>
|
|
202
|
-
</v-card-text>
|
|
203
|
-
</v-card>
|
|
204
|
-
</v-row>
|
|
205
|
-
<v-row align="center" class="col-md-10">
|
|
206
|
-
<v-card
|
|
207
|
-
v-if="
|
|
208
|
-
block.metadata.config.prompts[
|
|
209
|
-
startingIndex
|
|
210
|
-
][startingIndex].textOrImage === 'image' &&
|
|
211
|
-
block.metadata.config.prompts[
|
|
212
|
-
startingIndex
|
|
213
|
-
][startingIndex].file
|
|
214
|
-
"
|
|
215
|
-
class="pa-2 flex-fill bucket"
|
|
216
|
-
min-height="5em"
|
|
217
|
-
outlined
|
|
218
|
-
tile
|
|
219
|
-
>
|
|
220
|
-
<v-card-text>
|
|
221
|
-
<draggable
|
|
222
|
-
v-bind="dragOptions"
|
|
223
|
-
class="dragArea list-group"
|
|
224
|
-
:key="
|
|
185
|
+
{{
|
|
225
186
|
block.metadata.config.prompts[
|
|
226
187
|
startingIndex
|
|
227
|
-
][
|
|
188
|
+
][startingIndex].prompt
|
|
189
|
+
}}
|
|
190
|
+
</div>
|
|
191
|
+
</draggable>
|
|
192
|
+
</v-card-text>
|
|
193
|
+
</v-card>
|
|
194
|
+
</v-row>
|
|
195
|
+
<v-row align="center" class="col-md-10">
|
|
196
|
+
<v-card
|
|
197
|
+
v-if="
|
|
198
|
+
block.metadata.config.prompts[startingIndex][
|
|
199
|
+
startingIndex
|
|
200
|
+
].textOrImage === 'image' &&
|
|
201
|
+
block.metadata.config.prompts[startingIndex][
|
|
202
|
+
startingIndex
|
|
203
|
+
].file
|
|
204
|
+
"
|
|
205
|
+
class="pa-2 flex-fill bucket"
|
|
206
|
+
min-height="5em"
|
|
207
|
+
outlined
|
|
208
|
+
tile
|
|
209
|
+
>
|
|
210
|
+
<v-card-text>
|
|
211
|
+
<draggable
|
|
212
|
+
v-bind="dragOptions"
|
|
213
|
+
class="dragArea list-group"
|
|
214
|
+
:key="
|
|
215
|
+
block.metadata.config.prompts[
|
|
216
|
+
startingIndex
|
|
217
|
+
]['prompt']
|
|
218
|
+
"
|
|
219
|
+
disabled
|
|
220
|
+
group="people"
|
|
221
|
+
tabindex="0"
|
|
222
|
+
>
|
|
223
|
+
<div
|
|
224
|
+
:id="
|
|
225
|
+
block.metadata.config.prompts[
|
|
226
|
+
startingIndex
|
|
227
|
+
][startingIndex].file.id
|
|
228
228
|
"
|
|
229
|
-
disabled
|
|
230
|
-
group="people"
|
|
231
|
-
tabindex="0"
|
|
232
229
|
>
|
|
233
|
-
<
|
|
234
|
-
:
|
|
235
|
-
|
|
236
|
-
|
|
237
|
-
|
|
230
|
+
<v-img
|
|
231
|
+
:aria-describedby="
|
|
232
|
+
getFileAriaDescribedBy(
|
|
233
|
+
block.metadata.config
|
|
234
|
+
.prompts[startingIndex][
|
|
235
|
+
startingIndex
|
|
236
|
+
].file,
|
|
237
|
+
block.metadata.config
|
|
238
|
+
.prompts[startingIndex][
|
|
239
|
+
startingIndex
|
|
240
|
+
]['ariaDescribedBy']
|
|
241
|
+
)
|
|
242
|
+
"
|
|
243
|
+
:alt="
|
|
244
|
+
getFileAlt(
|
|
245
|
+
block.metadata.config
|
|
246
|
+
.prompts[startingIndex][
|
|
247
|
+
startingIndex
|
|
248
|
+
].file,
|
|
249
|
+
block.metadata.config
|
|
250
|
+
.prompts[startingIndex][
|
|
251
|
+
startingIndex
|
|
252
|
+
]['altText']
|
|
253
|
+
)
|
|
254
|
+
"
|
|
255
|
+
:src="
|
|
256
|
+
getFilePublicUrl(
|
|
257
|
+
block.metadata.config
|
|
258
|
+
.prompts[startingIndex][
|
|
259
|
+
startingIndex
|
|
260
|
+
].file
|
|
261
|
+
)
|
|
238
262
|
"
|
|
239
|
-
>
|
|
240
|
-
|
|
241
|
-
|
|
242
|
-
|
|
243
|
-
|
|
244
|
-
.prompts[
|
|
245
|
-
startingIndex
|
|
246
|
-
][startingIndex].file,
|
|
247
|
-
block.metadata.config
|
|
248
|
-
.prompts[
|
|
249
|
-
startingIndex
|
|
250
|
-
][startingIndex][
|
|
251
|
-
'ariaDescribedBy'
|
|
252
|
-
]
|
|
253
|
-
)
|
|
254
|
-
"
|
|
255
|
-
:alt="
|
|
256
|
-
getFileAlt(
|
|
257
|
-
block.metadata.config
|
|
258
|
-
.prompts[
|
|
259
|
-
startingIndex
|
|
260
|
-
][startingIndex].file,
|
|
261
|
-
block.metadata.config
|
|
262
|
-
.prompts[
|
|
263
|
-
startingIndex
|
|
264
|
-
][startingIndex][
|
|
265
|
-
'altText'
|
|
266
|
-
]
|
|
267
|
-
)
|
|
268
|
-
"
|
|
269
|
-
:src="
|
|
270
|
-
getFilePublicUrl(
|
|
271
|
-
block.metadata.config
|
|
272
|
-
.prompts[
|
|
273
|
-
startingIndex
|
|
274
|
-
][startingIndex].file
|
|
275
|
-
)
|
|
276
|
-
"
|
|
277
|
-
></v-img>
|
|
278
|
-
</div>
|
|
279
|
-
</draggable>
|
|
280
|
-
</v-card-text>
|
|
281
|
-
</v-card>
|
|
282
|
-
</v-row>
|
|
263
|
+
></v-img>
|
|
264
|
+
</div>
|
|
265
|
+
</draggable>
|
|
266
|
+
</v-card-text>
|
|
267
|
+
</v-card>
|
|
283
268
|
</v-row>
|
|
284
|
-
|
|
285
|
-
|
|
286
|
-
|
|
287
|
-
|
|
288
|
-
|
|
289
|
-
|
|
290
|
-
|
|
291
|
-
|
|
292
|
-
|
|
293
|
-
|
|
294
|
-
|
|
269
|
+
</v-row>
|
|
270
|
+
<v-container
|
|
271
|
+
class="d-flex flex-wrap flex-row justify-center flex-fill"
|
|
272
|
+
align="end"
|
|
273
|
+
>
|
|
274
|
+
<v-row>
|
|
275
|
+
<!-- <v-flex xs8></v-flex> -->
|
|
276
|
+
<v-col cols="12" lg="6" md="7" sm="6"></v-col>
|
|
277
|
+
<v-col cols="12" lg="6" md="5" sm="6">
|
|
278
|
+
<v-row
|
|
279
|
+
align="end"
|
|
280
|
+
tabindex="0"
|
|
281
|
+
:aria-label="
|
|
282
|
+
$t(
|
|
283
|
+
'windward.games.components.content.blocks.matching_game.of_complete',
|
|
284
|
+
[completedAmount, totalAmountQuestions]
|
|
285
|
+
)
|
|
286
|
+
"
|
|
287
|
+
>
|
|
288
|
+
<v-col align="end" tabindex="0" class="pa-0">
|
|
289
|
+
{{
|
|
295
290
|
$t(
|
|
296
|
-
'windward.games.components.content.blocks.matching_game.
|
|
291
|
+
'windward.games.components.content.blocks.matching_game.of_complete_text_area',
|
|
297
292
|
[
|
|
298
293
|
completedAmount,
|
|
299
294
|
totalAmountQuestions,
|
|
300
295
|
]
|
|
301
296
|
)
|
|
302
|
-
|
|
303
|
-
|
|
304
|
-
|
|
305
|
-
|
|
297
|
+
}}
|
|
298
|
+
<v-progress-linear
|
|
299
|
+
v-model="completedPercent"
|
|
300
|
+
color="primary"
|
|
301
|
+
outlined
|
|
302
|
+
rounded
|
|
303
|
+
height="15"
|
|
304
|
+
style="pointer-events: none"
|
|
305
|
+
></v-progress-linear>
|
|
306
|
+
<br />
|
|
307
|
+
<v-btn
|
|
308
|
+
color="primary"
|
|
309
|
+
outlined
|
|
310
|
+
elevation="0"
|
|
311
|
+
@click="onReset"
|
|
312
|
+
>{{
|
|
306
313
|
$t(
|
|
307
|
-
'windward.games.components.content.blocks.matching_game.
|
|
308
|
-
[
|
|
309
|
-
completedAmount,
|
|
310
|
-
totalAmountQuestions,
|
|
311
|
-
]
|
|
314
|
+
'windward.games.components.content.blocks.matching_game.reset'
|
|
312
315
|
)
|
|
313
316
|
}}
|
|
314
|
-
|
|
315
|
-
|
|
316
|
-
|
|
317
|
-
|
|
318
|
-
|
|
319
|
-
height="15"
|
|
320
|
-
style="pointer-events: none"
|
|
321
|
-
></v-progress-linear>
|
|
322
|
-
<br />
|
|
323
|
-
<v-btn
|
|
324
|
-
color="primary"
|
|
325
|
-
outlined
|
|
326
|
-
elevation="0"
|
|
327
|
-
@click="onReset"
|
|
328
|
-
>{{
|
|
329
|
-
$t(
|
|
330
|
-
'windward.games.components.content.blocks.matching_game.reset'
|
|
331
|
-
)
|
|
332
|
-
}}
|
|
333
|
-
</v-btn>
|
|
334
|
-
</v-col>
|
|
335
|
-
</v-row>
|
|
336
|
-
</v-flex>
|
|
337
|
-
</v-layout>
|
|
338
|
-
</v-container>
|
|
317
|
+
</v-btn>
|
|
318
|
+
</v-col>
|
|
319
|
+
</v-row>
|
|
320
|
+
</v-col>
|
|
321
|
+
</v-row>
|
|
339
322
|
</v-container>
|
|
340
|
-
</
|
|
323
|
+
</v-container>
|
|
341
324
|
</div>
|
|
342
325
|
<br />
|
|
343
326
|
</div>
|
|
@@ -371,12 +354,12 @@ export default {
|
|
|
371
354
|
}
|
|
372
355
|
if (_.isEmpty(this.block.metadata.config.feedback_correct)) {
|
|
373
356
|
this.block.metadata.config.feedback_correct = this.$t(
|
|
374
|
-
'windward.games.components.settings.
|
|
357
|
+
'windward.games.components.settings.matching_game.form.correct_match'
|
|
375
358
|
)
|
|
376
359
|
}
|
|
377
360
|
if (_.isEmpty(this.block.metadata.config.feedback_incorrect)) {
|
|
378
361
|
this.block.metadata.config.feedback_incorrect = this.$t(
|
|
379
|
-
'windward.games.components.settings.
|
|
362
|
+
'windward.games.components.settings.matching_game.form.incorrect_match'
|
|
380
363
|
)
|
|
381
364
|
}
|
|
382
365
|
if (_.isEmpty(this.block.metadata.config.prompts)) {
|
|
@@ -471,45 +454,59 @@ export default {
|
|
|
471
454
|
}
|
|
472
455
|
},
|
|
473
456
|
onEnd(evt, originalEvent) {
|
|
457
|
+
// if dragged to nowhere do not set target
|
|
458
|
+
const draggedToNowhere = evt.to === evt.from
|
|
474
459
|
if (!this.render) {
|
|
475
460
|
this.mainPrompt =
|
|
476
461
|
this.block.metadata.config.prompts[this.startingIndex]
|
|
477
462
|
}
|
|
478
463
|
let draggedElement = ''
|
|
479
464
|
let target = ''
|
|
480
|
-
if (
|
|
481
|
-
|
|
482
|
-
|
|
483
|
-
|
|
484
|
-
|
|
485
|
-
|
|
486
|
-
element
|
|
487
|
-
|
|
488
|
-
|
|
489
|
-
|
|
490
|
-
|
|
491
|
-
|
|
492
|
-
|
|
493
|
-
|
|
494
|
-
|
|
495
|
-
|
|
496
|
-
|
|
497
|
-
|
|
498
|
-
|
|
499
|
-
|
|
500
|
-
|
|
501
|
-
|
|
502
|
-
|
|
503
|
-
|
|
504
|
-
|
|
465
|
+
if (!draggedToNowhere) {
|
|
466
|
+
if (this.mainPrompt.textOrImage === 'text') {
|
|
467
|
+
draggedElement =
|
|
468
|
+
this.block.metadata.config.answerObjects[evt.oldIndex]
|
|
469
|
+
this.block.metadata.config.prompts.forEach(
|
|
470
|
+
(outerElement) => {
|
|
471
|
+
const getMain = outerElement.find((element) => {
|
|
472
|
+
return (
|
|
473
|
+
element.prompt ==
|
|
474
|
+
evt.to.firstChild.textContent.trim()
|
|
475
|
+
)
|
|
476
|
+
})
|
|
477
|
+
if (getMain) {
|
|
478
|
+
target = getMain
|
|
479
|
+
}
|
|
480
|
+
}
|
|
481
|
+
)
|
|
482
|
+
} else {
|
|
483
|
+
draggedElement =
|
|
484
|
+
this.block.metadata.config.answerObjects[evt.oldIndex]
|
|
485
|
+
this.block.metadata.config.prompts.forEach(
|
|
486
|
+
(outerElement) => {
|
|
487
|
+
const mainElement = outerElement.find((element) => {
|
|
488
|
+
return (
|
|
489
|
+
element.file?.id ==
|
|
490
|
+
evt.to.firstElementChild.id
|
|
491
|
+
)
|
|
492
|
+
})
|
|
493
|
+
if (mainElement) {
|
|
494
|
+
target = mainElement
|
|
495
|
+
}
|
|
496
|
+
}
|
|
497
|
+
)
|
|
498
|
+
}
|
|
505
499
|
}
|
|
500
|
+
//set feedback information here
|
|
506
501
|
if (_.isUndefined(target) || _.isEmpty(target)) {
|
|
507
502
|
console.log('dragged to nowhere')
|
|
508
503
|
} else if (draggedElement.id !== target.answer.id) {
|
|
509
504
|
this.feedback = this.block.metadata.config.feedback_incorrect
|
|
510
505
|
this.status = 'errorOutline'
|
|
511
506
|
} else if (draggedElement.id === target.answer.id) {
|
|
512
|
-
this.feedback =
|
|
507
|
+
this.feedback = !_.isEmpty(target.matchExplanation)
|
|
508
|
+
? target.matchExplanation
|
|
509
|
+
: this.block.metadata.config.feedback_correct
|
|
513
510
|
this.solvedQuestions.push(target)
|
|
514
511
|
this.status = 'successOutline'
|
|
515
512
|
this.allowDrag = false
|
|
@@ -188,6 +188,11 @@
|
|
|
188
188
|
indexPrompt
|
|
189
189
|
].prompt
|
|
190
190
|
"
|
|
191
|
+
:label="
|
|
192
|
+
$t(
|
|
193
|
+
'windward.games.components.settings.matching_game.form.prompt_body'
|
|
194
|
+
)
|
|
195
|
+
"
|
|
191
196
|
outlined
|
|
192
197
|
:autofocus="true"
|
|
193
198
|
:disabled="render"
|
|
@@ -279,6 +284,22 @@
|
|
|
279
284
|
:disabled="render"
|
|
280
285
|
></ContentBlockAsset>
|
|
281
286
|
</v-container>
|
|
287
|
+
<v-container class="pa-0">
|
|
288
|
+
<v-text-field
|
|
289
|
+
v-model="
|
|
290
|
+
block.metadata.config
|
|
291
|
+
.prompts[index][
|
|
292
|
+
indexPrompt
|
|
293
|
+
].matchExplanation
|
|
294
|
+
"
|
|
295
|
+
:label="
|
|
296
|
+
$t(
|
|
297
|
+
'windward.games.components.settings.matching_game.form.correct_match_label'
|
|
298
|
+
)
|
|
299
|
+
"
|
|
300
|
+
outlined
|
|
301
|
+
></v-text-field>
|
|
302
|
+
</v-container>
|
|
282
303
|
</v-container>
|
|
283
304
|
</template>
|
|
284
305
|
</SortableExpansionPanel>
|
|
@@ -317,31 +338,6 @@
|
|
|
317
338
|
}}
|
|
318
339
|
</v-btn>
|
|
319
340
|
</v-row>
|
|
320
|
-
<v-textarea
|
|
321
|
-
v-model="block.metadata.config.feedback_correct"
|
|
322
|
-
class="mt-2"
|
|
323
|
-
outlined
|
|
324
|
-
auto-grow
|
|
325
|
-
:counter="255"
|
|
326
|
-
:label="
|
|
327
|
-
$t(
|
|
328
|
-
'windward.games.components.settings.matching_game.form.feedback.correct'
|
|
329
|
-
)
|
|
330
|
-
"
|
|
331
|
-
:disabled="render"
|
|
332
|
-
></v-textarea>
|
|
333
|
-
<v-textarea
|
|
334
|
-
v-model="block.metadata.config.feedback_incorrect"
|
|
335
|
-
outlined
|
|
336
|
-
auto-grow
|
|
337
|
-
:counter="255"
|
|
338
|
-
:label="
|
|
339
|
-
$t(
|
|
340
|
-
'windward.games.components.settings.matching_game.form.feedback.incorrect'
|
|
341
|
-
)
|
|
342
|
-
"
|
|
343
|
-
:disabled="render"
|
|
344
|
-
></v-textarea>
|
|
345
341
|
</v-container>
|
|
346
342
|
</v-form>
|
|
347
343
|
<div v-if="loading" class="text-center">
|
|
@@ -389,12 +385,12 @@ export default {
|
|
|
389
385
|
}
|
|
390
386
|
if (_.isEmpty(this.block.metadata.config.feedback_correct)) {
|
|
391
387
|
this.block.metadata.config.feedback_correct = this.$t(
|
|
392
|
-
'windward.games.components.settings.
|
|
388
|
+
'windward.games.components.settings.matching_game.form.correct_match'
|
|
393
389
|
)
|
|
394
390
|
}
|
|
395
391
|
if (_.isEmpty(this.block.metadata.config.feedback_incorrect)) {
|
|
396
392
|
this.block.metadata.config.feedback_incorrect = this.$t(
|
|
397
|
-
'windward.games.components.settings.
|
|
393
|
+
'windward.games.components.settings.matching_game.form.incorrect_match'
|
|
398
394
|
)
|
|
399
395
|
}
|
|
400
396
|
if (_.isEmpty(this.block.metadata.config.answerObjects)) {
|
|
@@ -427,6 +423,9 @@ export default {
|
|
|
427
423
|
id: index,
|
|
428
424
|
textOrImage: 'text',
|
|
429
425
|
prompt: '',
|
|
426
|
+
matchExplanation: this.$t(
|
|
427
|
+
'windward.games.components.settings.matching_game.form.correct_match'
|
|
428
|
+
),
|
|
430
429
|
file: null,
|
|
431
430
|
altText: '',
|
|
432
431
|
ariaDescribedBy: '',
|
|
@@ -2,6 +2,10 @@ export default {
|
|
|
2
2
|
form: {
|
|
3
3
|
title: 'Matching Game',
|
|
4
4
|
instructions: 'Instructions',
|
|
5
|
+
prompt_body: 'Prompt Body',
|
|
6
|
+
correct_match: 'This match is correct.',
|
|
7
|
+
incorrect_match: 'That’s an incorrect match. Try again.',
|
|
8
|
+
correct_match_label: 'Explanation of the correct match',
|
|
5
9
|
feedback: {
|
|
6
10
|
correct: 'feedback when correct',
|
|
7
11
|
incorrect: 'feedback when incorrect',
|
|
@@ -2,6 +2,10 @@ export default {
|
|
|
2
2
|
form: {
|
|
3
3
|
title: 'Juego de Correspondencias',
|
|
4
4
|
instructions: 'Instrucciones',
|
|
5
|
+
prompt_body: 'Cuerpo rápido',
|
|
6
|
+
correct_match: 'Esta coincidencia es correcta.',
|
|
7
|
+
incorrect_match: 'Esa es una coincidencia incorrecta. Intentar otra vez.',
|
|
8
|
+
correct_match_label: 'Explicación de la coincidencia correcta.',
|
|
5
9
|
feedback: {
|
|
6
10
|
correct: 'comentarios cuando sea correcto',
|
|
7
11
|
incorrect: 'comentarios cuando son incorrectos',
|
|
@@ -2,6 +2,10 @@ export default {
|
|
|
2
2
|
form: {
|
|
3
3
|
title: 'Matchande Spel',
|
|
4
4
|
instructions: 'Instruktioner',
|
|
5
|
+
prompt_body: 'Snabb kropp',
|
|
6
|
+
correct_match: 'Denna matchning är korrekt',
|
|
7
|
+
incorrect_match: 'Det är en felaktig matchning. Försök igen.',
|
|
8
|
+
correct_match_label: 'Förklaring av rätt matchning',
|
|
5
9
|
feedback: {
|
|
6
10
|
correct: 'feedback när korrekt',
|
|
7
11
|
incorrect: 'feedback when incorrect',
|