@windward/games 0.8.1 → 0.9.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.
Files changed (18) hide show
  1. package/components/content/blocks/crosswordPuzzle/CrosswordPuzzle.vue +4 -24
  2. package/components/content/blocks/dragDrop/BucketGame.vue +98 -20
  3. package/components/content/blocks/flashcards/Flashcard.vue +8 -4
  4. package/components/content/blocks/flashcards/FlashcardSlides.vue +13 -38
  5. package/components/content/blocks/matchingGame/MatchingGame.vue +3 -3
  6. package/components/content/blocks/multipleChoice/MultipleChoice.vue +18 -118
  7. package/components/content/blocks/sevenStrikes/SevenStikes.vue +158 -165
  8. package/components/content/blocks/slideshow/SlideShow.vue +49 -99
  9. package/components/content/blocks/wordJumble/WordJumble.vue +122 -129
  10. package/components/settings/BucketGameSettingsManager.vue +1 -0
  11. package/i18n/en-US/components/content/blocks/multiple_choice.ts +0 -1
  12. package/i18n/en-US/shared/content_blocks.ts +1 -0
  13. package/i18n/es-ES/components/content/blocks/multiple_choice.ts +0 -1
  14. package/i18n/es-ES/shared/content_blocks.ts +1 -0
  15. package/i18n/sv-SE/components/content/blocks/multiple_choice.ts +0 -1
  16. package/i18n/sv-SE/shared/content_blocks.ts +1 -0
  17. package/package.json +1 -1
  18. package/test/settings/BucketGameManager.spec.js +3 -3
package/components/content/blocks/multipleChoice/MultipleChoice.vue CHANGED
@@ -14,7 +14,7 @@
14
14
  </p>
15
15
  </v-col>
16
16
  </v-row>
17
- <v-carousel height="auto" :hide-delimiters="hideDeliminators">
17
+ <v-carousel height="auto" hide-delimiters>
18
18
  <template #prev="{ on, attrs }">
19
19
  <v-btn
20
20
  variant="elevated"
@@ -42,7 +42,7 @@
42
42
  >
43
43
  </template>
44
44
  <v-carousel-item
45
- v-for="question in block.metadata.config.questions"
45
+ v-for="(question, index) in block.metadata.config.questions"
46
46
  :key="question.id"
47
47
  >
48
48
  <v-col class="d-flex justify-center">
@@ -134,9 +134,9 @@
134
134
  >
135
135
  </v-row>
136
136
  </v-col>
137
- <v-layout>
138
- <v-flex xs4></v-flex>
139
- <v-flex xs4>
137
+ <v-container>
138
+ <v-row class="d-flex justify-center">
139
+ <v-col></v-col>
140
140
  <v-col align="center" tabindex="0">
141
141
  {{
142
142
  $t(
@@ -153,32 +153,19 @@
153
153
  style="pointer-events: none"
154
154
  ></v-progress-linear>
155
155
  </v-col>
156
- </v-flex>
157
- <v-flex xs4></v-flex>
158
- </v-layout>
159
- <v-layout v-if="mountCourseCounter" class="mb-6">
160
- <v-flex xs8></v-flex>
161
- <v-flex xs4>
162
- <v-col>
163
- <p>
164
- {{
165
- $t(
166
- 'windward.games.components.content.blocks.multiple_choice.total_points'
167
- )
168
- }}
169
- </p>
170
- <p>
171
- {{ studentAmountCorrect }}
172
- {{
173
- $t(
174
- 'windward.games.components.content.blocks.multiple_choice.out_of'
175
- )
176
- }}
177
- {{ totalQuestionsMultipleChoice }}
178
- </p>
179
- </v-col>
180
- </v-flex>
181
- </v-layout>
156
+ <v-col></v-col>
157
+ </v-row>
158
+ </v-container>
159
+ <v-container>
160
+ <v-row class="d-flex justify-end">
161
+ {{
162
+ $t('windward.games.shared.content_blocks.out_of', [
163
+ index + 1,
164
+ block.metadata.config.questions.length,
165
+ ])
166
+ }}
167
+ </v-row>
168
+ </v-container>
182
169
  </v-carousel-item>
183
170
  <DialogBox
184
171
  v-model="dialog"
@@ -223,9 +210,6 @@ import Crypto from '~/helpers/Crypto'
223
210
  import { mapGetters } from 'vuex'
224
211
  import BaseContentBlock from '~/components/Content/Blocks/BaseContentBlock'
225
212
  import DialogBox from '~/components/Core/DialogBox.vue'
226
- import UserContentBlockState from '~/models/UserContentBlockState'
227
- import ContentBlock from '~/models/ContentBlock'
228
- import Course from '~/models/Course'
229
213
 
230
214
  export default {
231
215
  name: 'MultipleChoice',
@@ -262,8 +246,6 @@ export default {
262
246
  hintText: '',
263
247
  answerDescriptionModal: false,
264
248
  answerDescription: '',
265
- studentAmountCorrect: null,
266
- totalQuestionsMultipleChoice: null,
267
249
  studentResponses: [],
268
250
  mountCourseCounter: false,
269
251
  }
@@ -293,89 +275,8 @@ export default {
293
275
  }
294
276
  return 0
295
277
  },
296
- hideDeliminators() {
297
- const condition1 =
298
- window.innerWidth <= 1483 ||
299
- this.block.metadata.config.questions.length >= 13
300
- const condition2 =
301
- this.block.metadata.config.questions.length >= 12 &&
302
- window.innerWidth <= 1692
303
- const condition3 =
304
- this.block.metadata.config.questions.length >= 11 &&
305
- window.innerWidth <= 1634
306
- const condition4 =
307
- this.block.metadata.config.questions.length >= 10 &&
308
- window.innerWidth <= 1571
309
- const condition5 =
310
- this.block.metadata.config.questions.length >= 9 &&
311
- window.innerWidth <= 1518
312
-
313
- if (
314
- condition1 ||
315
- condition2 ||
316
- condition3 ||
317
- condition4 ||
318
- condition5
319
- ) {
320
- return true
321
- } else {
322
- return false
323
- }
324
- },
325
- },
326
- watch: {
327
- render(newValue) {
328
- if (newValue) {
329
- this.onTotalAmountOfQuestions()
330
- }
331
- },
332
- },
333
- mounted() {
334
- //this.mountCourseCounter = false
335
- this.onAmountCorrect()
336
- //this.onTotalAmountOfQuestions()
337
278
  },
338
279
  methods: {
339
- async onAmountCorrect() {
340
- let correct = 0
341
- // grabs user state to get the total amount of questions a studentanswered correctly
342
- let userState = await UserContentBlockState.where({
343
- 'metadata->block->tag': 'plugin-games-multiple-choice',
344
- course_user_id: this.enrollment.id,
345
- }).get()
346
- userState.forEach((state) => {
347
- state.metadata.studentResponses.forEach((element) => {
348
- if (element.isStudentCorrect === true) {
349
- correct = correct + 1
350
- }
351
- })
352
- })
353
- // need to wait till correct has the new value to set the var
354
- setTimeout(() => {
355
- // sets total
356
- this.studentAmountCorrect = correct
357
- this.mountCourseCounter = true
358
- }, 1000)
359
- },
360
- async onTotalAmountOfQuestions() {
361
- let multipleChoiceTotalQuestions = 0
362
- // get total amount of questions via content block route
363
- let multipleChoiceBlocks = await ContentBlock.where(
364
- 'tag',
365
- 'plugin-games-multiple-choice'
366
- )
367
- .for(new Course({ id: this.course.id }))
368
- .get()
369
-
370
- multipleChoiceBlocks.forEach((element) => {
371
- element.block.metadata.config.questions.forEach((question) => {
372
- multipleChoiceTotalQuestions =
373
- multipleChoiceTotalQuestions + 1
374
- })
375
- })
376
-
377
- this.totalQuestionsMultipleChoice = multipleChoiceTotalQuestions
378
- },
379
280
  onAnswerDescription(question) {
380
281
  //launches modal and displays anwer description
381
282
  this.dialog = true
@@ -397,7 +298,6 @@ export default {
397
298
  clonedQuestion.student_response = answer
398
299
 
399
300
  if (answer.correctAnswer === true) {
400
- this.studentAmountCorrect = this.studentAmountCorrect + 1
401
301
  clonedQuestion.isStudentCorrect = true
402
302
  } else {
403
303
  clonedQuestion.isStudentCorrect = false
package/components/content/blocks/sevenStrikes/SevenStikes.vue CHANGED
@@ -10,13 +10,13 @@
10
10
  )
11
11
  }}
12
12
  </h2>
13
- <p>{{ block.metadata.config.instructions }}</p>
13
+ <p class="pb-0">{{ block.metadata.config.instructions }}</p>
14
14
  </v-col>
15
15
  <v-col class="pa-0">
16
16
  <template>
17
17
  <v-carousel
18
18
  v-model="block.metadata.config.currentWord"
19
- :hide-delimiters="hideDeliminators"
19
+ hide-delimiters
20
20
  @change="onSlideChanged($event)"
21
21
  >
22
22
  <template #prev="{ on, attrs }">
@@ -49,146 +49,170 @@
49
49
  v-for="(word, index) in block.metadata.config.words"
50
50
  :key="index"
51
51
  >
52
- <v-row class="d-flex justify-center ma-2">
53
- <p class="pa-3 mb-0 p-clue-jumble">
54
- {{ word.hint }}
55
- </p>
56
- </v-row>
57
- <v-container
58
- v-if="showFeedback"
59
- fluid
60
- :key="'feedback'"
61
- :class="feedbackStatus"
52
+ <v-sheet
53
+ height="90%"
54
+ class="fill-height d-flex flex-column"
62
55
  >
63
- <v-row class="pa-4">
64
- <v-col></v-col>
65
- <v-col
66
- class="d-flex justify-center align-center"
67
- >{{
68
- feedback
69
- ? feedback
70
- : $t(
71
- 'windward.games.components.content.blocks.bucket_game.form.feedback.feedback_here'
72
- )
73
- }}</v-col
74
- >
75
- <v-col class="d-flex justify-end pl-4">
76
- <v-btn
77
- v-if="
78
- feedbackStatus === 'successOutline'
79
- "
80
- class="mr-5"
81
- color="success"
82
- elevation="0"
83
- @click="onChangeSlide(index + 1)"
84
- >{{ $t('shared.forms.continue') }}
85
- </v-btn>
86
- <v-container
87
- v-if="feedbackStatus === 'errorOutline'"
88
- class="d-flex justify-end"
89
- @click="onHideFeedback"
90
- ><v-icon
91
- class="icon--error"
92
- color="error"
93
- >mdi-close-circle</v-icon
94
- >
95
- </v-container>
96
- </v-col>
97
- </v-row>
98
- </v-container>
99
- <v-container>
100
- <v-row
101
- class="justify-center mt-2"
102
- v-if="word.splitWord"
56
+ <div class="d-flex justify-center mt-2">
57
+ <p class="p-clue-jumble pb-0">
58
+ {{ word.hint }}
59
+ </p>
60
+ </div>
61
+ <v-container
62
+ v-if="showFeedback"
63
+ fluid
64
+ :key="'feedback'"
65
+ :class="feedbackStatus"
103
66
  >
104
- <div
105
- v-for="(
106
- letter, splitIndex
107
- ) in word.splitWord"
108
- :key="splitIndex"
109
- >
110
- <div
111
- :ref="'input' + splitIndex"
112
- class="container-text-area ml-1 mr-1"
113
- maxlength="1"
67
+ <v-row class="pa-4">
68
+ <v-col></v-col>
69
+ <v-col
70
+ class="d-flex justify-center align-center"
71
+ >{{
72
+ feedback
73
+ ? feedback
74
+ : $t(
75
+ 'windward.games.components.content.blocks.bucket_game.form.feedback.feedback_here'
76
+ )
77
+ }}</v-col
114
78
  >
115
- <div v-if="letter.show === true">
116
- {{ letter.letter }}
117
- </div>
118
- </div>
119
- </div>
120
- </v-row>
121
- <v-row class="justify-center mt-8">
122
- <div
123
- v-for="(
124
- strike, strikeIndex
125
- ) in sevenStrikesCounter"
126
- :key="strikeIndex"
79
+ <v-col class="d-flex justify-end pl-4">
80
+ <v-btn
81
+ v-if="
82
+ feedbackStatus ===
83
+ 'container-success-outline'
84
+ "
85
+ class="mr-5"
86
+ color="success"
87
+ elevation="0"
88
+ @click="onChangeSlide(index + 1)"
89
+ >{{ $t('shared.forms.continue') }}
90
+ </v-btn>
91
+ <v-container
92
+ v-if="
93
+ feedbackStatus ===
94
+ 'container-error-outline'
95
+ "
96
+ class="d-flex justify-end"
97
+ @click="onHideFeedback"
98
+ ><v-icon
99
+ class="icon--error"
100
+ color="error"
101
+ >mdi-close-circle</v-icon
102
+ >
103
+ </v-container>
104
+ </v-col>
105
+ </v-row>
106
+ </v-container>
107
+ <v-container>
108
+ <v-row
109
+ class="justify-center mt-2"
110
+ v-if="word.splitWord"
127
111
  >
128
112
  <div
129
- v-if="strike.strike === false"
130
- :ref="'strike' + strikeIndex"
131
- class="container-strike-area d-flex justify-center align-center"
132
- maxlength="1"
113
+ v-for="(
114
+ letter, splitIndex
115
+ ) in word.splitWord"
116
+ :key="splitIndex"
133
117
  >
134
- X
118
+ <div
119
+ :ref="'input' + splitIndex"
120
+ class="container-text-area ml-1 mr-1"
121
+ maxlength="1"
122
+ >
123
+ <div v-if="letter.show === true">
124
+ {{ letter.letter }}
125
+ </div>
126
+ </div>
135
127
  </div>
128
+ </v-row>
129
+ <v-row class="justify-center mt-8">
136
130
  <div
137
- class="container-strike"
138
- v-if="strike.strike === true"
131
+ v-for="(
132
+ strike, strikeIndex
133
+ ) in sevenStrikesCounter"
134
+ :key="strikeIndex"
139
135
  >
140
- X
136
+ <div
137
+ v-if="strike.strike === false"
138
+ :ref="'strike' + strikeIndex"
139
+ class="container-strike-area d-flex justify-center align-center"
140
+ maxlength="1"
141
+ >
142
+ X
143
+ </div>
144
+ <div
145
+ class="container-strike"
146
+ v-if="strike.strike === true"
147
+ >
148
+ X
149
+ </div>
141
150
  </div>
151
+ </v-row>
152
+ <div>
153
+ <keyboard
154
+ v-if="!showFeedback"
155
+ :key="index"
156
+ :keyboardClass="
157
+ keyBoardClass + '-' + index
158
+ "
159
+ @onChange="onChange"
160
+ @onKeyPress="onKeyPress"
161
+ :input="input"
162
+ />
142
163
  </div>
143
- </v-row>
144
- <div>
145
- <keyboard
146
- v-if="!showFeedback"
147
- :key="index"
148
- :keyboardClass="keyBoardClass + '-' + index"
149
- @onChange="onChange"
150
- @onKeyPress="onKeyPress"
151
- :input="input"
152
- />
153
- </div>
154
- <v-row
155
- class="justify-center mt-12"
156
- v-if="showFeedback"
157
- >
158
- <v-btn
159
- color="primary"
160
- class="ml-4"
161
- outlined
162
- elevation="0"
163
- @click="onRevealAnswer"
164
- >{{
165
- $t(
166
- 'windward.games.components.content.blocks.seven_strikes.reveal'
167
- )
168
- }}</v-btn
169
- >
170
- <v-btn
171
- color="primary"
172
- class="ml-4"
173
- outlined
174
- elevation="0"
175
- @click="onSlideChanged(index)"
176
- >{{
177
- $t(
178
- 'windward.games.components.content.blocks.seven_strikes.again'
179
- )
180
- }}</v-btn
181
- >
182
- <v-btn
183
- @click="onChangeSlide(index + 1)"
184
- color="primary ml-4"
185
- elevation="0"
186
- >{{
187
- $t(
188
- 'windward.games.components.content.blocks.seven_strikes.next'
189
- )
190
- }}</v-btn
164
+ <v-row
165
+ class="justify-center mt-12"
166
+ v-if="showFeedback"
191
167
  >
168
+ <v-btn
169
+ color="primary"
170
+ class="ml-4"
171
+ outlined
172
+ elevation="0"
173
+ @click="onRevealAnswer"
174
+ >{{
175
+ $t(
176
+ 'windward.games.components.content.blocks.seven_strikes.reveal'
177
+ )
178
+ }}</v-btn
179
+ >
180
+ <v-btn
181
+ color="primary"
182
+ class="ml-4"
183
+ outlined
184
+ elevation="0"
185
+ @click="onSlideChanged(index)"
186
+ >{{
187
+ $t(
188
+ 'windward.games.components.content.blocks.seven_strikes.again'
189
+ )
190
+ }}</v-btn
191
+ >
192
+ <v-btn
193
+ @click="onChangeSlide(index + 1)"
194
+ color="primary ml-4"
195
+ elevation="0"
196
+ >{{
197
+ $t(
198
+ 'windward.games.components.content.blocks.seven_strikes.next'
199
+ )
200
+ }}</v-btn
201
+ >
202
+ </v-row>
203
+ </v-container>
204
+ </v-sheet>
205
+ <v-container>
206
+ <v-row class="d-flex justify-end align-end">
207
+ {{
208
+ $t(
209
+ 'windward.games.shared.content_blocks.out_of',
210
+ [
211
+ index + 1,
212
+ block.metadata.config.words.length,
213
+ ]
214
+ )
215
+ }}
192
216
  </v-row>
193
217
  </v-container>
194
218
  </v-carousel-item>
@@ -263,37 +287,6 @@ export default {
263
287
  onStrike: 0,
264
288
  }
265
289
  },
266
- computed: {
267
- hideDeliminators() {
268
- const condition1 =
269
- window.innerWidth <= 1483 ||
270
- this.block.metadata.config.words.length >= 13
271
- const condition2 =
272
- this.block.metadata.config.words.length >= 12 &&
273
- window.innerWidth <= 1692
274
- const condition3 =
275
- this.block.metadata.config.words.length >= 11 &&
276
- window.innerWidth <= 1634
277
- const condition4 =
278
- this.block.metadata.config.words.length >= 10 &&
279
- window.innerWidth <= 1571
280
- const condition5 =
281
- this.block.metadata.config.words.length >= 9 &&
282
- window.innerWidth <= 1518
283
-
284
- if (
285
- condition1 ||
286
- condition2 ||
287
- condition3 ||
288
- condition4 ||
289
- condition5
290
- ) {
291
- return true
292
- } else {
293
- return false
294
- }
295
- },
296
- },
297
290
  watch: {
298
291
  render(newValue) {
299
292
  if (newValue) {
@@ -373,7 +366,7 @@ export default {
373
366
  thatIsIncorrect() {
374
367
  this.showFeedback = true
375
368
  // updates class
376
- this.feedbackStatus = 'errorOutline'
369
+ this.feedbackStatus = 'container-error-outline'
377
370
  // gets custom or standard feedback
378
371
  if (
379
372
  !_.isEmpty(this.block.metadata.config.feedback_incorrect) &&
@@ -388,7 +381,7 @@ export default {
388
381
  },
389
382
  thatIsCorrect() {
390
383
  this.showFeedback = true
391
- this.feedbackStatus = 'successOutline'
384
+ this.feedbackStatus = 'container-success-outline'
392
385
  if (
393
386
  !_.isEmpty(this.block.metadata.config.feedback_correct) &&
394
387
  this.block.metadata.config.feedback_correct !== ''
@@ -455,11 +448,11 @@ export default {
455
448
  .p-clue-jumble {
456
449
  font-size: 20px;
457
450
  }
458
- .errorOutline {
451
+ .container-error-outline {
459
452
  border: 4px solid var(--v-error-base);
460
453
  color: var(--v-error-base);
461
454
  }
462
- .successOutline {
455
+ .container-success-outline {
463
456
  border: 4px solid var(--v-success-base);
464
457
  color: var(--v-success-base);
465
458
  }