@pocketprep/ui-kit 3.4.7 → 3.4.9
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/dist/@pocketprep/ui-kit.js +8919 -8599
- package/dist/@pocketprep/ui-kit.js.map +1 -1
- package/dist/@pocketprep/ui-kit.umd.cjs +9 -9
- package/dist/@pocketprep/ui-kit.umd.cjs.map +1 -1
- package/dist/style.css +1 -1
- package/lib/components/Quiz/Question/ChoicesContainer.vue +987 -0
- package/lib/components/Quiz/Question/DropdownExplanation.vue +1 -6
- package/lib/components/Quiz/Question/PassageAndImageDropdown.vue +1 -1
- package/lib/components/Quiz/Question/StatsSummary.vue +104 -0
- package/lib/components/Quiz/Question/Summary.vue +1 -1
- package/lib/components/Quiz/Question.vue +105 -694
- package/package.json +1 -1
|
@@ -68,7 +68,7 @@
|
|
|
68
68
|
</template>
|
|
69
69
|
|
|
70
70
|
<script lang="ts">
|
|
71
|
-
import { Component, Emit, Prop, Vue
|
|
71
|
+
import { Component, Emit, Prop, Vue } from 'vue-facing-decorator'
|
|
72
72
|
import type { Study } from '@pocketprep/types'
|
|
73
73
|
import Icon from '../../Icons/Icon.vue'
|
|
74
74
|
import PocketButton from '../../Buttons/Button.vue'
|
|
@@ -131,7 +131,6 @@ export default class DropdownExplanation extends Vue {
|
|
|
131
131
|
}
|
|
132
132
|
}
|
|
133
133
|
|
|
134
|
-
&__reference-label,
|
|
135
134
|
&__dropdown-reference-label {
|
|
136
135
|
font-weight: 600;
|
|
137
136
|
}
|
|
@@ -241,10 +240,6 @@ export default class DropdownExplanation extends Vue {
|
|
|
241
240
|
color: $white;
|
|
242
241
|
border-top-color: rgba($fog, 0.28);
|
|
243
242
|
}
|
|
244
|
-
|
|
245
|
-
p {
|
|
246
|
-
margin: 6px 0 8pt 0;
|
|
247
|
-
}
|
|
248
243
|
}
|
|
249
244
|
}
|
|
250
245
|
</style>
|
|
@@ -110,7 +110,7 @@
|
|
|
110
110
|
</template>
|
|
111
111
|
|
|
112
112
|
<script lang="ts">
|
|
113
|
-
import { Component, Emit, Prop, Vue
|
|
113
|
+
import { Component, Emit, Prop, Vue } from 'vue-facing-decorator'
|
|
114
114
|
import type { Study } from '@pocketprep/types'
|
|
115
115
|
import Icon from '../../Icons/Icon.vue'
|
|
116
116
|
import PocketButton from '../../Buttons/Button.vue'
|
|
@@ -0,0 +1,104 @@
|
|
|
1
|
+
<template>
|
|
2
|
+
<div
|
|
3
|
+
v-if="globalMetrics"
|
|
4
|
+
class="uikit-question-stats-summary"
|
|
5
|
+
>
|
|
6
|
+
<div v-dark="isDarkMode" class="uikit-question-stats-summary__stats-summary-total">
|
|
7
|
+
<div class="uikit-question-stats-summary__stats-summary-value">
|
|
8
|
+
{{ choiceScores.totalAnswered }}
|
|
9
|
+
</div>
|
|
10
|
+
<div v-dark="isDarkMode" class="uikit-question-stats-summary__stats-summary-label">
|
|
11
|
+
Studiers Answered
|
|
12
|
+
</div>
|
|
13
|
+
</div>
|
|
14
|
+
<div v-dark="isDarkMode" class="uikit-question-stats-summary__stats-summary-correct">
|
|
15
|
+
<div class="uikit-question-stats-summary__stats-summary-value">
|
|
16
|
+
{{ Math.round((choiceScores.answeredCorrectly / choiceScores.totalAnswered) * 100) }}%
|
|
17
|
+
</div>
|
|
18
|
+
<div v-dark="isDarkMode" class="uikit-question-stats-summary__stats-summary-label">
|
|
19
|
+
Answered Correctly
|
|
20
|
+
</div>
|
|
21
|
+
</div>
|
|
22
|
+
</div>
|
|
23
|
+
</template>
|
|
24
|
+
|
|
25
|
+
<script lang="ts">
|
|
26
|
+
import { Component, Vue, Prop } from 'vue-facing-decorator'
|
|
27
|
+
import type { Study } from '@pocketprep/types'
|
|
28
|
+
import { dark, breakpoint } from '../../../directives'
|
|
29
|
+
import type { TChoiceScores } from './../question'
|
|
30
|
+
|
|
31
|
+
|
|
32
|
+
@Component({
|
|
33
|
+
directives: {
|
|
34
|
+
dark,
|
|
35
|
+
breakpoint,
|
|
36
|
+
},
|
|
37
|
+
})
|
|
38
|
+
export default class StatsSummary extends Vue {
|
|
39
|
+
@Prop({ default: null }) globalMetrics!: Study.Class.GlobalQuestionMetricJSON | null
|
|
40
|
+
@Prop() choiceScores!: TChoiceScores
|
|
41
|
+
@Prop({ default: false }) isDarkMode!: boolean
|
|
42
|
+
}
|
|
43
|
+
|
|
44
|
+
</script>
|
|
45
|
+
|
|
46
|
+
<style lang="scss">
|
|
47
|
+
@import '../../../styles/colors';
|
|
48
|
+
@import '../../../styles/breakpoints';
|
|
49
|
+
|
|
50
|
+
.uikit-question-stats-summary {
|
|
51
|
+
margin-top: 24px;
|
|
52
|
+
display: flex;
|
|
53
|
+
width: 100%;
|
|
54
|
+
max-width: 492px;
|
|
55
|
+
padding-bottom: 50px;
|
|
56
|
+
|
|
57
|
+
&__stats-summary-total {
|
|
58
|
+
display: flex;
|
|
59
|
+
flex-direction: column;
|
|
60
|
+
align-items: center;
|
|
61
|
+
flex: 1;
|
|
62
|
+
margin-right: 16px;
|
|
63
|
+
background-color: rgba($sky-blue, 0.8);
|
|
64
|
+
padding: 9px 0;
|
|
65
|
+
border-radius: 6px;
|
|
66
|
+
|
|
67
|
+
&--dark {
|
|
68
|
+
background-color: $brand-black;
|
|
69
|
+
}
|
|
70
|
+
}
|
|
71
|
+
|
|
72
|
+
&__stats-summary-correct {
|
|
73
|
+
display: flex;
|
|
74
|
+
flex-direction: column;
|
|
75
|
+
align-items: center;
|
|
76
|
+
flex: 1;
|
|
77
|
+
background-color: rgba($cadaverous, 0.13);
|
|
78
|
+
padding: 9px 0;
|
|
79
|
+
border-radius: 6px;
|
|
80
|
+
|
|
81
|
+
&--dark {
|
|
82
|
+
background-color: $brand-black;
|
|
83
|
+
}
|
|
84
|
+
}
|
|
85
|
+
|
|
86
|
+
&__stats-summary-value {
|
|
87
|
+
font-weight: 600;
|
|
88
|
+
font-size: 26px;
|
|
89
|
+
letter-spacing: 0.26px;
|
|
90
|
+
line-height: 31px;
|
|
91
|
+
}
|
|
92
|
+
|
|
93
|
+
&__stats-summary-label {
|
|
94
|
+
color: $ash;
|
|
95
|
+
font-size: 13px;
|
|
96
|
+
line-height: 16px;
|
|
97
|
+
text-align: center;
|
|
98
|
+
|
|
99
|
+
&--dark {
|
|
100
|
+
color: $white;
|
|
101
|
+
}
|
|
102
|
+
}
|
|
103
|
+
}
|
|
104
|
+
</style>
|
|
@@ -112,7 +112,7 @@
|
|
|
112
112
|
</template>
|
|
113
113
|
|
|
114
114
|
<script lang="ts">
|
|
115
|
-
import { Component, Emit, Prop, Vue
|
|
115
|
+
import { Component, Emit, Prop, Vue } from 'vue-facing-decorator'
|
|
116
116
|
import type { Study } from '@pocketprep/types'
|
|
117
117
|
import Icon from '../../Icons/Icon.vue'
|
|
118
118
|
import PocketButton from '../../Buttons/Button.vue'
|