@windward/games 0.0.10 → 0.1.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 (80) hide show
  1. package/components/content/CrudTable.vue +2 -2
  2. package/components/content/blocks/crosswordPuzzle/CrosswordClues.vue +4 -2
  3. package/components/content/blocks/crosswordPuzzle/CrosswordPuzzle.vue +14 -12
  4. package/components/content/blocks/dragDrop/BucketGame.vue +14 -15
  5. package/components/content/blocks/dragDrop/SortingGame.vue +4 -4
  6. package/components/content/blocks/flashcards/CardFace.vue +38 -39
  7. package/components/content/blocks/flashcards/Flashcard.vue +109 -28
  8. package/components/content/blocks/flashcards/FlashcardSlides.vue +1 -2
  9. package/components/content/blocks/matchingGame/MatchingGame.vue +15 -14
  10. package/components/content/blocks/multipleChoice/MultipleChoice.vue +186 -225
  11. package/components/content/blocks/multipleChoice/QuestionDialog.vue +7 -7
  12. package/components/content/blocks/quizshowGame/AnswerPanel.vue +9 -9
  13. package/components/content/blocks/quizshowGame/Gridview.vue +20 -24
  14. package/components/content/blocks/quizshowGame/QuizShow.vue +6 -6
  15. package/components/content/blocks/quizshowGame/feedbackIcons.vue +4 -2
  16. package/components/content/blocks/sevenStrikes/SevenStikes.vue +153 -108
  17. package/components/content/blocks/sevenStrikes/keyboard.vue +9 -2
  18. package/components/content/blocks/slideshow/SlideShow.vue +3 -3
  19. package/components/content/blocks/wordJumble/Jumble.vue +0 -2
  20. package/components/content/blocks/wordJumble/WordJumble.vue +117 -60
  21. package/components/settings/BucketGameSettingsManager.vue +20 -20
  22. package/components/settings/CrosswordPuzzleSettingsManager.vue +114 -181
  23. package/components/settings/FlashCardSlidesManager.vue +46 -63
  24. package/components/settings/MatchingGameManager.vue +19 -19
  25. package/components/settings/MultipleChoiceSettingsManager.vue +130 -140
  26. package/components/settings/QuizShowSettingsManager.vue +17 -17
  27. package/components/settings/SevenStrikesSettingsManager.vue +131 -193
  28. package/components/settings/SlideShowManager.vue +9 -9
  29. package/components/settings/SortingGameSettingsManager.vue +11 -11
  30. package/components/settings/WordJumbleSettingsManager.vue +40 -12
  31. package/i18n/en-US/components/content/blocks/flashcard.ts +1 -0
  32. package/i18n/en-US/components/content/blocks/word_jumble.ts +2 -0
  33. package/i18n/en-US/components/settings/bucket_game.ts +3 -2
  34. package/i18n/en-US/components/settings/flashcard.ts +1 -0
  35. package/i18n/en-US/components/settings/seven_strikes.ts +1 -1
  36. package/i18n/en-US/index.ts +2 -1
  37. package/i18n/es-ES/components/content/blocks/flashcard.ts +1 -0
  38. package/i18n/es-ES/components/content/blocks/word_jumble.ts +2 -0
  39. package/i18n/es-ES/components/settings/bucket_game.ts +3 -2
  40. package/i18n/es-ES/components/settings/flashcard.ts +1 -0
  41. package/i18n/es-ES/components/settings/seven_strikes.ts +2 -2
  42. package/i18n/es-ES/index.ts +2 -1
  43. package/i18n/index.ts +11 -0
  44. package/i18n/sv-SE/components/content/blocks/flashcard.ts +1 -0
  45. package/i18n/sv-SE/components/content/blocks/word_jumble.ts +2 -0
  46. package/i18n/sv-SE/components/settings/bucket_game.ts +2 -2
  47. package/i18n/sv-SE/components/settings/flashcard.ts +1 -0
  48. package/i18n/sv-SE/components/settings/seven_strikes.ts +1 -1
  49. package/i18n/sv-SE/index.ts +2 -1
  50. package/package.json +1 -1
  51. package/plugin.js +33 -34
  52. package/test/Feature/LocaleKeys.spec.js +11 -0
  53. package/test/__mocks__/componentsMock.js +12 -0
  54. package/test/__mocks__/fileMock.js +1 -0
  55. package/test/__mocks__/modelMock.js +88 -0
  56. package/test/__mocks__/styleMock.js +1 -0
  57. package/test/blocks/crossword/CrosswordPuzzle.spec.js +1 -1
  58. package/test/blocks/dragDrop/BucketGame.spec.js +1 -1
  59. package/test/blocks/dragDrop/SortingGame.spec.js +1 -1
  60. package/test/blocks/flashcards/CardFace.spec.js +1 -1
  61. package/test/blocks/flashcards/FlashCardSlides.spec.js +1 -1
  62. package/test/blocks/flashcards/Flashcard.spec.js +1 -1
  63. package/test/blocks/matchingGame/MatchingGame.spec.js +1 -1
  64. package/test/blocks/multipleChoice/MultipleChoice.spec.js +1 -1
  65. package/test/blocks/multipleChoice/QuestionDialog.spec.js +1 -1
  66. package/test/blocks/quizShow/quizShow.spec.js +1 -1
  67. package/test/blocks/sevenStrikes/sevenStrikes.spec.js +1 -1
  68. package/test/blocks/slideshow/slideshow.spec.js +1 -1
  69. package/test/blocks/wordJumble/Jumble.spec.js +1 -1
  70. package/test/blocks/wordJumble/WordJumble.spec.js +1 -1
  71. package/test/mocks.js +8 -2
  72. package/test/settings/BucketGameManager.spec.js +4 -4
  73. package/test/settings/CrosswordPuzzleManager.spec.js +6 -11
  74. package/test/settings/FlashCardSlidesManager.spec.js +1 -1
  75. package/test/settings/MatchingGameManager.spec.js +1 -1
  76. package/test/settings/MultipleChoiceGameManager.spec.js +1 -1
  77. package/test/settings/SevenStrikesManager.spec.js +1 -1
  78. package/test/settings/SlideShowManager.spec.js +1 -1
  79. package/test/settings/SortingGameManager.spec.js +1 -1
  80. package/test/settings/WordJumbleManager.spec.js +1 -4
package/components/content/blocks/matchingGame/MatchingGame.vue CHANGED
@@ -4,7 +4,7 @@
4
4
  <h3
5
5
  :aria-label="
6
6
  $t(
7
- 'plugin.games.components.content.blocks.matching_game.match_game_title'
7
+ 'windward.games.components.content.blocks.matching_game.match_game_title'
8
8
  )
9
9
  "
10
10
  tabindex="0"
@@ -18,7 +18,7 @@
18
18
  <p tabindex="0">
19
19
  {{
20
20
  $t(
21
- 'plugin.games.components.content.blocks.matching_game.description'
21
+ 'windward.games.components.content.blocks.matching_game.description'
22
22
  )
23
23
  }}
24
24
  </p>
@@ -31,7 +31,7 @@
31
31
  feedback
32
32
  ? feedback
33
33
  : $t(
34
- 'plugin.games.components.content.blocks.bucket_game.form.feedback.feedback_here'
34
+ 'windward.games.components.content.blocks.bucket_game.form.feedback.feedback_here'
35
35
  )
36
36
  }}</v-col>
37
37
  <v-col class="d-flex justify-end pl-4">
@@ -284,7 +284,7 @@
284
284
  tabindex="0"
285
285
  :aria-label="
286
286
  $t(
287
- 'plugin.games.components.content.blocks.matching_game.of_complete',
287
+ 'windward.games.components.content.blocks.matching_game.of_complete',
288
288
  [
289
289
  completedAmount,
290
290
  totalAmountQuestions,
@@ -295,7 +295,7 @@
295
295
  <v-col align="end" tabindex="0">
296
296
  {{
297
297
  $t(
298
- 'plugin.games.components.content.blocks.matching_game.of_complete_text_area',
298
+ 'windward.games.components.content.blocks.matching_game.of_complete_text_area',
299
299
  [
300
300
  completedAmount,
301
301
  totalAmountQuestions,
@@ -308,6 +308,7 @@
308
308
  outlined
309
309
  rounded
310
310
  height="15"
311
+ style="pointer-events: none"
311
312
  ></v-progress-linear>
312
313
  <br />
313
314
  <v-btn
@@ -316,7 +317,7 @@
316
317
  @click="onReset"
317
318
  >{{
318
319
  $t(
319
- 'plugin.games.components.content.blocks.matching_game.reset'
320
+ 'windward.games.components.content.blocks.matching_game.reset'
320
321
  )
321
322
  }}
322
323
  </v-btn>
@@ -352,7 +353,7 @@ export default {
352
353
  }
353
354
  if (_.isEmpty(this.block.metadata.config.title)) {
354
355
  this.block.metadata.config.title = this.$t(
355
- 'plugin.games.components.settings.matching_game.form.title'
356
+ 'windward.games.components.settings.matching_game.form.title'
356
357
  )
357
358
  }
358
359
  if (_.isEmpty(this.block.metadata.config.instructions)) {
@@ -360,12 +361,12 @@ export default {
360
361
  }
361
362
  if (_.isEmpty(this.block.metadata.config.feedback_correct)) {
362
363
  this.block.metadata.config.feedback_correct = this.$t(
363
- 'plugin.games.components.settings.bucket_game.form.feedback.correct_default'
364
+ 'windward.games.components.settings.bucket_game.form.feedback.correct_default'
364
365
  )
365
366
  }
366
367
  if (_.isEmpty(this.block.metadata.config.feedback_incorrect)) {
367
368
  this.block.metadata.config.feedback_incorrect = this.$t(
368
- 'plugin.games.components.settings.bucket_game.form.feedback.incorrect_default'
369
+ 'windward.games.components.settings.bucket_game.form.feedback.incorrect_default'
369
370
  )
370
371
  }
371
372
  if (_.isEmpty(this.block.metadata.config.prompts)) {
@@ -401,7 +402,7 @@ export default {
401
402
  data() {
402
403
  return {
403
404
  feedback: this.$t(
404
- 'plugin.games.components.content.blocks.matching_game.default_feedback'
405
+ 'windward.games.components.content.blocks.matching_game.default_feedback'
405
406
  ),
406
407
  gameCompleted: false,
407
408
  shufflePrompts: [],
@@ -517,7 +518,7 @@ export default {
517
518
  this.solvedQuestions.length === this.flattenedPrompts.length
518
519
  ) {
519
520
  this.feedback = this.$t(
520
- 'plugin.games.components.content.blocks.matching_game.congratulations_feedback'
521
+ 'windward.games.components.content.blocks.matching_game.congratulations_feedback'
521
522
  )
522
523
  this.gameCompleted = true
523
524
  this.status = 'default'
@@ -528,7 +529,7 @@ export default {
528
529
  this.status = 'default'
529
530
  this.allowDrag = true
530
531
  this.feedback = this.$t(
531
- 'plugin.games.components.content.blocks.matching_game.default_feedback'
532
+ 'windward.games.components.content.blocks.matching_game.default_feedback'
532
533
  )
533
534
  },
534
535
  onContinueGame() {
@@ -539,7 +540,7 @@ export default {
539
540
  this.mainPrompt = this.shufflePrompts.shift()
540
541
  this.allowDrag = true
541
542
  this.feedback = this.$t(
542
- 'plugin.games.components.content.blocks.matching_game.default_feedback'
543
+ 'windward.games.components.content.blocks.matching_game.default_feedback'
543
544
  )
544
545
  },
545
546
  onReset() {
@@ -550,7 +551,7 @@ export default {
550
551
  this.gameCompleted = false
551
552
  this.allowDrag = true
552
553
  this.feedback = this.$t(
553
- 'plugin.games.components.content.blocks.matching_game.default_feedback'
554
+ 'windward.games.components.content.blocks.matching_game.default_feedback'
554
555
  )
555
556
  this.setMainPrompt()
556
557
  },
package/components/content/blocks/multipleChoice/MultipleChoice.vue CHANGED
@@ -3,215 +3,181 @@
3
3
  <v-row>
4
4
  <v-col>
5
5
  <h3>{{ block.metadata.config.title }}</h3>
6
- <p>{{ block.metadata.config.instructions }}</p>
6
+ <p class="mb-0">{{ block.metadata.config.instructions }}</p>
7
7
  </v-col>
8
8
  </v-row>
9
- <v-row>
10
- <v-col class="pa-0">
11
- <v-carousel height="600">
12
- <v-container>
13
- <v-carousel-item
14
- v-for="question in block.metadata.config.questions"
15
- :key="question.id"
16
- >
17
- <v-col class="d-flex justify-center">
18
- <p class="questionBody">{{ question.body }}</p>
19
- </v-col>
20
- <v-container :key="updateKey">
21
- <v-row
22
- v-for="answer in question.answer_options"
23
- :key="answer.id"
24
- class="mb-2"
25
- >
26
- <v-col
27
- cols="12"
28
- md="2"
29
- class="d-flex justify-end"
30
- >
9
+ <v-carousel height="600">
10
+ <v-carousel-item
11
+ v-for="question in block.metadata.config.questions"
12
+ :key="question.id"
13
+ >
14
+ <v-col class="d-flex justify-center">
15
+ <p>{{ question.body }}</p>
16
+ </v-col>
17
+ <v-container :key="updateKey">
18
+ <v-row
19
+ v-for="answer in question.answer_options"
20
+ :key="answer.id"
21
+ class="mb-2"
22
+ >
23
+ <v-col cols="12" md="1" class="d-flex justify-end">
24
+ <v-icon
25
+ :class="handleIconClass(question, answer)"
26
+ >{{ handleIcon(question, answer) }}</v-icon
27
+ >
28
+ </v-col>
29
+ <v-col cols="12" md="10" class="pa-0">
30
+ <v-card
31
+ class="container-answer-option pa-2"
32
+ :disabled="answer.disabled"
33
+ :class="onIsThisCorrect(answer, question)"
34
+ outlined
35
+ tile
36
+ @click="onChooseAnswer(answer, question)"
37
+ >
38
+ <div class="d-flex justify-space-between">
39
+ <p class="mb-0">
40
+ {{
41
+ getCharacter(question, answer) +
42
+ '. ' +
43
+ answer.value
44
+ }}
45
+ </p>
46
+ <div>
31
47
  <v-icon
32
48
  :class="
33
- handleIconClass(
49
+ handleInformationClass(
34
50
  question,
35
51
  answer
36
52
  )
37
53
  "
38
- >{{
39
- handleIcon(question, answer)
40
- }}</v-icon
41
- >
42
- </v-col>
43
- <v-col cols="12" md="8" class="pa-0">
44
- <v-card
45
- class="optionOutline pa-2"
46
- :disabled="answer.disabled"
47
- :class="
48
- onIsThisCorrect(
49
- answer,
50
- question
51
- )
52
- "
53
- outlined
54
- tile
55
54
  @click="
56
- onChooseAnswer(answer, question)
55
+ onAnswerDescription(question)
57
56
  "
58
- >
59
- <div
60
- class="d-flex justify-space-between"
61
- >
62
- <p class="mb-0">
63
- {{
64
- getCharacter(
65
- question,
66
- answer
67
- ) +
68
- ': ' +
69
- answer.value
70
- }}
71
- </p>
72
- <div>
73
- <v-icon
74
- :class="
75
- handleInformationClass(
76
- question,
77
- answer
78
- )
79
- "
80
- @click="
81
- onAnswerDescription(
82
- question
83
- )
84
- "
85
- >{{
86
- handleInformationOutline(
87
- question,
88
- answer
89
- )
90
- }}</v-icon
91
- >
92
- </div>
93
- </div>
94
- </v-card>
95
- </v-col>
96
- <v-col cols="12" md="2"></v-col>
97
- </v-row>
98
- </v-container>
99
- <v-col cols="12" md="12">
100
- <v-row class="d-flex justify-center">
101
- <v-btn
102
- color="primary"
103
- outlined
104
- class="mr-4 hintButton"
105
- @click="onHint(question)"
106
- >{{
107
- $t(
108
- 'plugin.games.components.content.blocks.multiple_choice.hint'
109
- )
110
- }}</v-btn
111
- >
112
- <v-btn
113
- color="primary fiftyButton"
114
- outlined
115
- :disabled="
116
- question.answer_options.length !==
117
- 4 || question.fiftyFifty
118
- "
119
- class="ml-4 fiftyButton"
120
- @click="onFifty(question)"
121
- >{{
122
- $t(
123
- 'plugin.games.components.content.blocks.multiple_choice.fifty'
124
- )
125
- }}</v-btn
126
- >
127
- </v-row>
128
- </v-col>
129
- <v-layout class="mt-2">
130
- <v-flex xs4></v-flex>
131
- <v-flex xs4>
132
- <v-col align="center" tabindex="0">
133
- {{
134
- $t(
135
- 'plugin.games.components.content.blocks.matching_game.of_complete_text_area',
136
- [
137
- completedAmount,
138
- totalAmountQuestions,
139
- ]
140
- )
141
- }}
142
- <v-progress-linear
143
- color="success"
144
- outlined
145
- v-model="completedPercent"
146
- rounded
147
- height="15"
148
- ></v-progress-linear>
149
- </v-col>
150
- </v-flex>
151
- <v-flex xs4></v-flex>
152
- </v-layout>
153
- <v-layout class="mt-2" v-if="mountCourseCounter">
154
- <v-flex xs8></v-flex>
155
- <v-flex xs4>
156
- <v-col>
157
- <p>
158
- {{
159
- $t(
160
- 'plugin.games.components.content.blocks.multiple_choice.total_points'
161
- )
162
- }}
163
- </p>
164
- <p>
165
- {{ studentAmountCorrect }}
166
- {{
167
- $t(
168
- 'plugin.games.components.content.blocks.multiple_choice.out_of'
57
+ >{{
58
+ handleInformationOutline(
59
+ question,
60
+ answer
169
61
  )
170
- }}
171
- {{ totalQuestionsMultipleChoice }}
172
- </p>
173
- </v-col>
174
- </v-flex>
175
- </v-layout>
176
- </v-carousel-item>
177
- <Dialog
178
- v-model="dialog"
179
- :trigger="false"
180
- @click:outside="close"
181
- @click:close="close"
182
- @keydown.esc="close"
183
- >
184
- <template #title>
185
- <div v-if="hint">
186
- {{
187
- $t(
188
- 'plugin.games.components.content.blocks.multiple_choice.hint_title'
189
- )
190
- }}
191
- </div>
192
- <div v-if="answerDescriptionModal">
193
- {{
194
- $t(
195
- 'plugin.games.components.content.blocks.multiple_choice.answer_feedback'
196
- )
197
- }}
198
- </div>
199
- </template>
200
- <template #form="{ on, attrs }">
201
- <div v-bind="attrs" v-on="on">
202
- <div v-if="hint">
203
- {{ hintText }}
204
- </div>
205
- <div v-if="answerDescriptionModal">
206
- {{ answerDescription }}
62
+ }}</v-icon
63
+ >
207
64
  </div>
208
65
  </div>
209
- </template>
210
- </Dialog>
211
- </v-container>
212
- </v-carousel>
213
- </v-col>
214
- </v-row>
66
+ </v-card>
67
+ </v-col>
68
+ <v-col cols="12" md="1"></v-col>
69
+ </v-row>
70
+ </v-container>
71
+ <v-col cols="12" md="12">
72
+ <v-row class="d-flex justify-center">
73
+ <v-btn
74
+ color="primary"
75
+ outlined
76
+ class="mr-4 btn-hint"
77
+ @click="onHint(question)"
78
+ >{{
79
+ $t(
80
+ 'windward.games.components.content.blocks.multiple_choice.hint'
81
+ )
82
+ }}</v-btn
83
+ >
84
+ <v-btn
85
+ color="primary"
86
+ outlined
87
+ :disabled="
88
+ question.answer_options.length !== 4 ||
89
+ question.fiftyFifty
90
+ "
91
+ class="ml-4 btn-fifty"
92
+ @click="onFifty(question)"
93
+ >{{
94
+ $t(
95
+ 'windward.games.components.content.blocks.multiple_choice.fifty'
96
+ )
97
+ }}</v-btn
98
+ >
99
+ </v-row>
100
+ </v-col>
101
+ <v-layout class="mt-2">
102
+ <v-flex xs4></v-flex>
103
+ <v-flex xs4>
104
+ <v-col align="center" tabindex="0">
105
+ {{
106
+ $t(
107
+ 'windward.games.components.content.blocks.matching_game.of_complete_text_area',
108
+ [completedAmount, totalAmountQuestions]
109
+ )
110
+ }}
111
+ <v-progress-linear
112
+ color="success"
113
+ outlined
114
+ v-model="completedPercent"
115
+ rounded
116
+ height="15"
117
+ ></v-progress-linear>
118
+ </v-col>
119
+ </v-flex>
120
+ <v-flex xs4></v-flex>
121
+ </v-layout>
122
+ <v-layout class="mt-2" v-if="mountCourseCounter">
123
+ <v-flex xs8></v-flex>
124
+ <v-flex xs4>
125
+ <v-col>
126
+ <p>
127
+ {{
128
+ $t(
129
+ 'windward.games.components.content.blocks.multiple_choice.total_points'
130
+ )
131
+ }}
132
+ </p>
133
+ <p>
134
+ {{ studentAmountCorrect }}
135
+ {{
136
+ $t(
137
+ 'windward.games.components.content.blocks.multiple_choice.out_of'
138
+ )
139
+ }}
140
+ {{ totalQuestionsMultipleChoice }}
141
+ </p>
142
+ </v-col>
143
+ </v-flex>
144
+ </v-layout>
145
+ </v-carousel-item>
146
+ <Dialog
147
+ v-model="dialog"
148
+ :trigger="false"
149
+ @click:outside="close"
150
+ @click:close="close"
151
+ @keydown.esc="close"
152
+ >
153
+ <template #title>
154
+ <div v-if="hint">
155
+ {{
156
+ $t(
157
+ 'windward.games.components.content.blocks.multiple_choice.hint_title'
158
+ )
159
+ }}
160
+ </div>
161
+ <div v-if="answerDescriptionModal">
162
+ {{
163
+ $t(
164
+ 'windward.games.components.content.blocks.multiple_choice.answer_feedback'
165
+ )
166
+ }}
167
+ </div>
168
+ </template>
169
+ <template #form="{ on, attrs }">
170
+ <div v-bind="attrs" v-on="on">
171
+ <div v-if="hint">
172
+ {{ hintText }}
173
+ </div>
174
+ <div v-if="answerDescriptionModal">
175
+ {{ answerDescription }}
176
+ </div>
177
+ </div>
178
+ </template>
179
+ </Dialog>
180
+ </v-carousel>
215
181
  </v-container>
216
182
  </template>
217
183
  <script>
@@ -239,7 +205,9 @@ export default {
239
205
  this.block.metadata.config = {}
240
206
  }
241
207
  if (_.isEmpty(this.block.metadata.config.title)) {
242
- this.block.metadata.config.title = ''
208
+ this.block.metadata.config.title = this.$t(
209
+ 'windward.games.components.content.blocks.multiple_choice.game_title'
210
+ )
243
211
  }
244
212
  if (_.isEmpty(this.block.metadata.config.instructions)) {
245
213
  this.block.metadata.config.instructions = ''
@@ -398,7 +366,7 @@ export default {
398
366
  true
399
367
  ) {
400
368
  if (answer.correctAnswer === true) {
401
- return 'studentAnswerCorrect'
369
+ return 'container-student-correct'
402
370
  } else {
403
371
  return ''
404
372
  }
@@ -411,14 +379,14 @@ export default {
411
379
  studentsQuestionResponse.student_response
412
380
  .correctAnswer !== true
413
381
  ) {
414
- return 'incorrectBorder'
382
+ return 'container-incorrect-border'
415
383
  }
416
384
  } else if (
417
385
  studentsQuestionResponse.student_response.correctAnswer !==
418
386
  true
419
387
  ) {
420
388
  if (answer.correctAnswer === true) {
421
- return 'correctBorder'
389
+ return 'container-correct-border'
422
390
  }
423
391
  }
424
392
  }
@@ -465,15 +433,15 @@ export default {
465
433
  answer.correctAnswer === true &&
466
434
  studentsQuestionResponse.student_response.chosen === true
467
435
  ) {
468
- return 'isCorrect'
436
+ return 'icon-main-correct'
469
437
  }
470
438
  //requirements for correct and unchosen
471
439
  if (answer.correctAnswer === true && answer.chosen === false) {
472
- return 'isCorrect'
440
+ return 'icon-main-correct'
473
441
  }
474
442
  // requirements for wrong and chosen
475
443
  if (answer.correctAnswer !== true && answer.chosen === true) {
476
- return 'isIncorrect'
444
+ return 'icon-main-incorrect'
477
445
  }
478
446
  }
479
447
  },
@@ -506,12 +474,12 @@ export default {
506
474
  )
507
475
  if (studentsQuestionResponse) {
508
476
  if (answer.correctAnswer === true && answer.chosen === true) {
509
- return 'informationCorrect'
477
+ return 'icon-information-correct'
510
478
  } else if (
511
479
  answer.correctAnswer === true &&
512
480
  answer.chosen === false
513
481
  ) {
514
- return 'isCorrect'
482
+ return 'icon-main-correct'
515
483
  }
516
484
  }
517
485
  },
@@ -581,44 +549,37 @@ export default {
581
549
  }
582
550
  </script>
583
551
  <style scoped>
584
- .questionBody {
585
- font-size: 18px;
552
+ .container-answer-option {
553
+ border: 1px solid var(--v-primary-base);
554
+ border-radius: 4px !important;
586
555
  }
587
- .optionOutline {
588
- border: 2px solid var(--v-primary-base);
589
- border-radius: 3px;
556
+ .container-correct-border {
557
+ border: 1px solid var(--v-success-base);
590
558
  }
591
- .correctBorder {
592
- border: 3px solid var(--v-success-base);
593
- }
594
- .incorrectBorder {
559
+ .container-incorrect-border {
595
560
  background-color: var(--v-error-base);
596
- border: 2px solid var(--v-error-base);
561
+ border: 1px solid var(--v-error-base);
597
562
  color: white;
598
563
  }
599
- .studentAnswerCorrect {
564
+ .container-student-correct {
600
565
  background-color: var(--v-success-base);
601
566
  color: white;
602
567
  }
603
- .isCorrect {
568
+ .icon-main-correct {
604
569
  color: var(--v-success-base);
605
570
  }
606
- .isIncorrect {
571
+ .icon-main-incorrect {
607
572
  color: var(--v-error-base);
608
573
  }
609
- .informationCorrect {
574
+ .icon-information-correct {
610
575
  color: white;
611
576
  }
612
- .iconStudentCorrect {
613
- color: var(--v-success-base);
614
- border-radius: 25px;
615
- }
616
577
  /* need important below to override vuetify preset width for buttons */
617
- .hintButton {
578
+ .btn-hint {
618
579
  min-width: 20% !important;
619
580
  margin-right: 16px;
620
581
  }
621
- .fiftyButton {
582
+ .btn-fifty {
622
583
  min-width: 20% !important;
623
584
  margin-right: 16px;
624
585
  }