@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/slideshow/SlideShow.vue CHANGED
@@ -1,6 +1,6 @@
1
1
  <template>
2
2
  <div>
3
- <div class="header-description pa-0">
3
+ <div>
4
4
  <h2
5
5
  v-if="block.metadata.config.title"
6
6
  :aria-label="
@@ -25,7 +25,7 @@
25
25
  <template v-if="block.metadata.config.slides.length !== 0">
26
26
  <v-carousel
27
27
  v-model="block.metadata.config.currentSlide"
28
- :hide-delimiters="hideDeliminators"
28
+ hide-delimiters
29
29
  >
30
30
  <template #prev="{ on, attrs }">
31
31
  <v-btn
@@ -53,41 +53,52 @@
53
53
  ><v-icon>mdi-chevron-right</v-icon></v-btn
54
54
  >
55
55
  </template>
56
- <v-container
57
- class="pa-0 ma-0"
56
+ <v-carousel-item
58
57
  v-for="(slide, index) in block.metadata.config.slides"
59
58
  :key="index"
60
59
  >
61
- <v-carousel-item>
62
- <v-sheet
63
- height="85%"
64
- class="fill-height d-flex flex-column"
60
+ <v-sheet
61
+ height="90%"
62
+ class="fill-height d-flex flex-column"
63
+ >
64
+ <div class="container-header">
65
+ <h4>
66
+ {{ slide['header'] }}
67
+ </h4>
68
+ <p class="mb-0">
69
+ {{ slide['description'] }}
70
+ </p>
71
+ </div>
72
+ <div
73
+ style="overflow: auto"
74
+ class="pl-15 pr-15 container-image"
65
75
  >
66
- <div class="pa-0 ma-0">
67
- <h4 class="header-description">
68
- {{ slide['header'] }}
69
- </h4>
70
- <p class="header-description">
71
- {{ slide['description'] }}
72
- </p>
73
- </div>
74
- <div style="overflow: auto" class="pl-15 pr-15">
75
- <v-img
76
- v-if="slide['imageAsset']"
77
- :src="getImageUrl(slide['imageAsset'])"
78
- :alt="
79
- getImageAlt(
80
- slide['imageAsset'],
81
- slide['imageAlt']
82
- )
83
- "
84
- height="100%"
85
- contain
86
- />
87
- </div>
88
- </v-sheet>
89
- </v-carousel-item>
90
- </v-container>
76
+ <v-img
77
+ v-if="slide['imageAsset']"
78
+ :src="getImageUrl(slide['imageAsset'])"
79
+ :alt="
80
+ getImageAlt(
81
+ slide['imageAsset'],
82
+ slide['imageAlt']
83
+ )
84
+ "
85
+ height="100%"
86
+ contain
87
+ />
88
+ </div>
89
+ </v-sheet>
90
+ <div class="d-flex justify-end">
91
+ {{
92
+ $t(
93
+ 'windward.games.shared.content_blocks.out_of',
94
+ [
95
+ index + 1,
96
+ block.metadata.config.slides.length,
97
+ ]
98
+ )
99
+ }}
100
+ </div>
101
+ </v-carousel-item>
91
102
  </v-carousel>
92
103
  </template>
93
104
  </div>
@@ -132,37 +143,7 @@ export default {
132
143
  prev: {},
133
144
  }
134
145
  },
135
- computed: {
136
- hideDeliminators() {
137
- const condition1 =
138
- window.innerWidth <= 1483 ||
139
- this.block.metadata.config.slides.length >= 13
140
- const condition2 =
141
- this.block.metadata.config.slides.length >= 12 &&
142
- window.innerWidth <= 1692
143
- const condition3 =
144
- this.block.metadata.config.slides.length >= 11 &&
145
- window.innerWidth <= 1634
146
- const condition4 =
147
- this.block.metadata.config.slides.length >= 10 &&
148
- window.innerWidth <= 1571
149
- const condition5 =
150
- this.block.metadata.config.slides.length >= 9 &&
151
- window.innerWidth <= 1518
152
-
153
- if (
154
- condition1 ||
155
- condition2 ||
156
- condition3 ||
157
- condition4 ||
158
- condition5
159
- ) {
160
- return true
161
- } else {
162
- return false
163
- }
164
- },
165
- },
146
+ computed: {},
166
147
  watch: {
167
148
  render(newValue) {
168
149
  this.block.metadata.config.currentSlide = 0
@@ -185,42 +166,11 @@ export default {
185
166
  }
186
167
  </script>
187
168
  <style scoped>
188
- .img-sizing {
189
- height: 100% !important;
190
- width: 100% !important;
191
- object-fit: contain;
192
- max-width: 87%;
193
- }
194
- .sheet-height {
169
+ .container-image {
195
170
  height: 100%;
196
- position: relative;
197
- }
198
- .fullHeight {
199
- height: 75% !important;
200
- }
201
- .seventy {
202
- height: 70% !important;
203
- }
204
- .sixty {
205
- height: 60% !important;
206
- }
207
- .fifty {
208
- height: 50% !important;
209
- }
210
- .forty {
211
- height: 40% !important;
212
- }
213
- .thirty {
214
- height: 30% !important;
215
- }
216
- .twenty {
217
- height: 20% !important;
218
- }
219
- .ten {
220
- height: 10% !important;
221
171
  }
222
- .header-description {
223
- padding-left: 75px;
224
- padding-right: 75px;
172
+ .container-header {
173
+ padding-left: 60px;
174
+ padding-right: 60px;
225
175
  }
226
176
  </style>
package/components/content/blocks/wordJumble/WordJumble.vue CHANGED
@@ -16,7 +16,7 @@
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()"
21
21
  >
22
22
  <template #prev="{ on, attrs }">
@@ -49,110 +49,134 @@
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
- <span class="span-bold"
55
- >{{
56
- $t(
57
- 'windward.games.components.content.blocks.word_jumble.clue'
58
- )
59
- }}
60
- </span>
61
- {{ word.hint }}
62
- </p>
63
- </v-row>
64
- <v-row class="d-flex justify-center ma-2">
65
- <p v-if="render" class="pa-3 mb-0 p-clue-jumble">
66
- {{ word.shuffledWord }}
67
- </p>
68
- <p v-if="!render" class="pa-3 mb-0 p-clue-jumble">
69
- {{ word.value }}
70
- </p>
71
- </v-row>
72
- <v-container
73
- v-if="showFeedback"
74
- fluid
75
- :key="'feedback'"
76
- :class="feedbackStatus"
77
- class="pa-0"
52
+ <v-sheet
53
+ height="90%"
54
+ class="fill-height d-flex flex-column"
78
55
  >
79
- <br />
80
- <v-row>
81
- <v-col></v-col>
82
- <v-col class="d-flex justify-center">{{
83
- feedback
84
- ? feedback
85
- : $t(
86
- 'windward.games.components.content.blocks.bucket_game.form.feedback.feedback_here'
87
- )
88
- }}</v-col>
89
- <v-col class="d-flex justify-end pl-4">
56
+ <v-row class="d-flex justify-center ma-2">
57
+ <p class="pa-3 mb-0 p-clue-jumble">
58
+ <span class="span-bold"
59
+ >{{
60
+ $t(
61
+ 'windward.games.components.content.blocks.word_jumble.clue'
62
+ )
63
+ }}
64
+ </span>
65
+ {{ word.hint }}
66
+ </p>
67
+ </v-row>
68
+ <v-row class="d-flex justify-center ma-2">
69
+ <p
70
+ v-if="render"
71
+ class="pa-3 mb-0 p-clue-jumble"
72
+ >
73
+ {{ word.shuffledWord }}
74
+ </p>
75
+ <p
76
+ v-if="!render"
77
+ class="pa-3 mb-0 p-clue-jumble"
78
+ >
79
+ {{ word.value }}
80
+ </p>
81
+ </v-row>
82
+ <v-container
83
+ v-if="showFeedback"
84
+ fluid
85
+ :key="'feedback'"
86
+ :class="feedbackStatus"
87
+ class="pa-0"
88
+ >
89
+ <br />
90
+ <v-row>
91
+ <v-col></v-col>
92
+ <v-col class="d-flex justify-center">{{
93
+ feedback
94
+ ? feedback
95
+ : $t(
96
+ 'windward.games.components.content.blocks.bucket_game.form.feedback.feedback_here'
97
+ )
98
+ }}</v-col>
99
+ <v-col class="d-flex justify-end pl-4">
100
+ <v-btn
101
+ v-if="
102
+ feedbackStatus ===
103
+ 'container-feedback-success'
104
+ "
105
+ class="mr-5"
106
+ elevation="0"
107
+ color="success"
108
+ @click="onSlideChanged(true)"
109
+ >{{ $t('shared.forms.continue') }}
110
+ </v-btn>
111
+ <v-container
112
+ v-if="
113
+ feedbackStatus ===
114
+ 'container-feedback-error'
115
+ "
116
+ class="d-flex justify-end"
117
+ @click="onHideFeedback"
118
+ ><v-icon
119
+ class="icon--error"
120
+ color="error"
121
+ >mdi-close-circle</v-icon
122
+ >
123
+ </v-container>
124
+ </v-col>
125
+ </v-row>
126
+ <br />
127
+ </v-container>
128
+ <v-row class="justify-center mt-4">
129
+ <Jumble
130
+ :key="updateJumble"
131
+ :value="word"
132
+ :reveal="showAnswer"
133
+ :reset="resetValue"
134
+ @input="getResponse($event)"
135
+ ></Jumble>
136
+ </v-row>
137
+ <v-row class="d-flex mt-8">
138
+ <v-col class="d-flex justify-end">
139
+ <v-btn
140
+ :disabled="disableButtons"
141
+ color="primary"
142
+ elevation="0"
143
+ @click="onCheckAnswer(word)"
144
+ >{{
145
+ $t(
146
+ 'windward.games.components.content.blocks.word_jumble.check'
147
+ )
148
+ }}
149
+ </v-btn>
150
+ </v-col>
151
+ <v-col class="d-flex justify-start">
90
152
  <v-btn
91
- v-if="
92
- feedbackStatus ===
93
- 'container-feedback-success'
94
- "
95
- class="mr-5"
153
+ :disabled="disableButtons"
154
+ color="primary"
96
155
  elevation="0"
97
- color="success"
98
- @click="onSlideChanged(true)"
99
- >{{ $t('shared.forms.continue') }}
156
+ outlined
157
+ @click="onRevealAnswer"
158
+ >{{
159
+ $t(
160
+ 'windward.games.components.content.blocks.word_jumble.reveal'
161
+ )
162
+ }}
100
163
  </v-btn>
101
- <v-container
102
- v-if="
103
- feedbackStatus ===
104
- 'container-feedback-error'
105
- "
106
- class="d-flex justify-end"
107
- @click="onHideFeedback"
108
- ><v-icon
109
- class="icon--error"
110
- color="error"
111
- >mdi-close-circle</v-icon
112
- >
113
- </v-container>
114
164
  </v-col>
115
165
  </v-row>
116
- <br />
166
+ </v-sheet>
167
+ <v-container>
168
+ <v-row class="d-flex justify-end align-end">
169
+ {{
170
+ $t(
171
+ 'windward.games.shared.content_blocks.out_of',
172
+ [
173
+ index + 1,
174
+ block.metadata.config.words.length,
175
+ ]
176
+ )
177
+ }}
178
+ </v-row>
117
179
  </v-container>
118
- <v-row class="justify-center mt-4">
119
- <Jumble
120
- :key="updateJumble"
121
- :value="word"
122
- :reveal="showAnswer"
123
- :reset="resetValue"
124
- @input="getResponse($event)"
125
- ></Jumble>
126
- </v-row>
127
- <v-row class="d-flex mt-8">
128
- <v-col class="d-flex justify-end">
129
- <v-btn
130
- :disabled="disableButtons"
131
- color="primary"
132
- elevation="0"
133
- @click="onCheckAnswer(word)"
134
- >{{
135
- $t(
136
- 'windward.games.components.content.blocks.word_jumble.check'
137
- )
138
- }}
139
- </v-btn>
140
- </v-col>
141
- <v-col class="d-flex justify-start">
142
- <v-btn
143
- :disabled="disableButtons"
144
- color="primary"
145
- elevation="0"
146
- outlined
147
- @click="onRevealAnswer"
148
- >{{
149
- $t(
150
- 'windward.games.components.content.blocks.word_jumble.reveal'
151
- )
152
- }}
153
- </v-btn>
154
- </v-col>
155
- </v-row>
156
180
  </v-carousel-item>
157
181
  </v-carousel>
158
182
  </template>
@@ -222,37 +246,6 @@ export default {
222
246
  shuffledWord: '',
223
247
  }
224
248
  },
225
- computed: {
226
- hideDeliminators() {
227
- const condition1 =
228
- window.innerWidth <= 1483 ||
229
- this.block.metadata.config.words.length >= 13
230
- const condition2 =
231
- this.block.metadata.config.words.length >= 12 &&
232
- window.innerWidth <= 1692
233
- const condition3 =
234
- this.block.metadata.config.words.length >= 11 &&
235
- window.innerWidth <= 1634
236
- const condition4 =
237
- this.block.metadata.config.words.length >= 10 &&
238
- window.innerWidth <= 1571
239
- const condition5 =
240
- this.block.metadata.config.words.length >= 9 &&
241
- window.innerWidth <= 1518
242
-
243
- if (
244
- condition1 ||
245
- condition2 ||
246
- condition3 ||
247
- condition4 ||
248
- condition5
249
- ) {
250
- return true
251
- } else {
252
- return false
253
- }
254
- },
255
- },
256
249
  watch: {
257
250
  render(newValue) {
258
251
  this.updateJumble = Crypto.id()
package/components/settings/BucketGameSettingsManager.vue CHANGED
@@ -354,6 +354,7 @@ export default {
354
354
  title: '',
355
355
  color: colors.blueGrey.lighten5,
356
356
  expand: true,
357
+ nested_answers: []
357
358
  }
358
359
  this.block.metadata.config.bucket_titles.push(emptyString)
359
360
  },
package/i18n/en-US/components/content/blocks/multiple_choice.ts CHANGED
@@ -5,5 +5,4 @@ export default {
5
5
  hint_title: 'Hint',
6
6
  answer_feedback: 'Answer Feedback',
7
7
  total_points: 'Total Points for Course',
8
- out_of: ' out of ',
9
8
  }
package/i18n/en-US/shared/content_blocks.ts CHANGED
@@ -15,4 +15,5 @@ export default {
15
15
  game: 'Activities',
16
16
  multimedia: 'Multimedia Files',
17
17
  },
18
+ out_of: '{0} out of {1}'
18
19
  }
package/i18n/es-ES/components/content/blocks/multiple_choice.ts CHANGED
@@ -5,5 +5,4 @@ export default {
5
5
  hint_title: 'Pista',
6
6
  answer_feedback: 'Comentarios de respuesta',
7
7
  total_points: 'Puntos totales por Curso',
8
- out_of: 'fuera de',
9
8
  }
package/i18n/es-ES/shared/content_blocks.ts CHANGED
@@ -15,4 +15,5 @@ export default {
15
15
  game: 'Actividades',
16
16
  multimedia: 'Archivos multimedia',
17
17
  },
18
+ out_of: '{0} fuera de {1}',
18
19
  }
package/i18n/sv-SE/components/content/blocks/multiple_choice.ts CHANGED
@@ -5,5 +5,4 @@ export default {
5
5
  hint_title: 'Tips',
6
6
  answer_feedback: 'Svara feedback',
7
7
  total_points: 'Totala poäng för Kurs',
8
- out_of: ' out of ',
9
8
  }
package/i18n/sv-SE/shared/content_blocks.ts CHANGED
@@ -15,4 +15,5 @@ export default {
15
15
  game: 'Aktiviteter',
16
16
  multimedia: 'Multimediafiler',
17
17
  },
18
+ out_of: '{0} ut ur {1}',
18
19
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@windward/games",
3
- "version": "0.8.1",
3
+ "version": "0.9.0",
4
4
  "description": "Windward UI Plugin Games",
5
5
  "main": "plugin.js",
6
6
  "scripts": {
package/test/settings/BucketGameManager.spec.js CHANGED
@@ -47,8 +47,8 @@ describe('Bucket game manager', () => {
47
47
  })
48
48
  wrapper.vm.onAddBucket()
49
49
  expect(wrapper.vm.block.metadata.config.bucket_titles).toEqual([
50
- { title: '', color: '#eceff1', expand: false },
51
- { title: '', color: '#eceff1', expand: true },
50
+ { title: '', color: '#eceff1', expand: false, nested_answers: [] },
51
+ { title: '', color: '#eceff1', expand: true, nested_answers: [] },
52
52
  ])
53
53
  })
54
54
 
@@ -98,7 +98,7 @@ describe('Bucket game manager', () => {
98
98
  })
99
99
  wrapper.vm.onConfirmDeleteBucket(0)
100
100
  expect(wrapper.vm.block.metadata.config.bucket_titles).toEqual([
101
- { title: '', color: '#eceff1', expand: true },
101
+ { title: '', color: '#eceff1', expand: true, nested_answers: [] },
102
102
  ])
103
103
  })
104
104