@pocketprep/ui-kit 3.4.67 → 3.4.69

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 (10) hide show
  1. package/dist/@pocketprep/ui-kit.js +226 -222
  2. package/dist/@pocketprep/ui-kit.js.map +1 -1
  3. package/dist/@pocketprep/ui-kit.umd.cjs +5 -5
  4. package/dist/@pocketprep/ui-kit.umd.cjs.map +1 -1
  5. package/dist/style.css +1 -1
  6. package/lib/components/Quiz/Question/MatrixChoicesContainer.vue +32 -2
  7. package/lib/components/Quiz/Question/MatrixRadioGroup.vue +6 -0
  8. package/lib/components/Quiz/Question/MobileMatrixChoicesContainer.vue +0 -2
  9. package/lib/components/Quiz/Question.vue +13 -14
  10. package/package.json +1 -1
package/lib/components/Quiz/Question/MatrixChoicesContainer.vue CHANGED
@@ -15,7 +15,9 @@
15
15
  class="uikit-question-matrix-choices-container__column-row-header"
16
16
  :class="{
17
17
  'uikit-question-matrix-choices-container__column-row-header--two-columns':
18
- numberOfMatrixColumnLabels === 2
18
+ numberOfMatrixColumnLabels === 2,
19
+ 'uikit-question-matrix-choices-container__column-row-header--radio-btn--three-columns':
20
+ question.type === 'Matrix Radio Button' && numberOfMatrixColumnLabels === 3
19
21
  }"
20
22
  v-html="matrixColumnLabelsForRows"
21
23
  />
@@ -23,7 +25,9 @@
23
25
  class="uikit-question-matrix-choices-container__column-header"
24
26
  :class="{
25
27
  'uikit-question-matrix-choices-container__column-header--two-columns':
26
- numberOfMatrixColumnLabels === 2
28
+ numberOfMatrixColumnLabels === 2,
29
+ 'uikit-question-matrix-choices-container__column-header--radio-btn--three-columns':
30
+ question.type === 'Matrix Radio Button' && numberOfMatrixColumnLabels === 3
27
31
  }"
28
32
  lang="de"
29
33
  v-for="(columnLabel, index) in matrixColumnLabels"
@@ -49,6 +53,8 @@
49
53
  <div
50
54
  class="uikit-question-matrix-choices-container__choices"
51
55
  :class="{
56
+ 'uikit-question-matrix-choices-container__choices--checkbox':
57
+ question.type === 'Matrix Checkbox',
52
58
  'uikit-question-matrix-choices-container__choices--two-columns':
53
59
  numberOfMatrixColumnLabels === 2
54
60
  }"
@@ -60,6 +66,8 @@
60
66
  <div
61
67
  class="uikit-question-matrix-choices-container__choice-text"
62
68
  :class="{
69
+ 'uikit-question-matrix-choices-container__choice-text--checkbox':
70
+ question.type === 'Matrix Checkbox',
63
71
  'uikit-question-matrix-choices-container__choice-text--two-columns':
64
72
  numberOfMatrixColumnLabels === 2
65
73
  }"
@@ -471,6 +479,10 @@ export default class MatrixChoicesContainer extends Vue {
471
479
  &--mobile {
472
480
  display: none;
473
481
  }
482
+
483
+ p {
484
+ margin: 0;
485
+ }
474
486
  }
475
487
 
476
488
  &__column-row-header {
@@ -487,6 +499,10 @@ export default class MatrixChoicesContainer extends Vue {
487
499
  &--two-columns {
488
500
  width: 303px;
489
501
  }
502
+
503
+ &--radio-btn--three-columns {
504
+ width: 265px;
505
+ }
490
506
  }
491
507
 
492
508
  &__column-header {
@@ -514,6 +530,12 @@ export default class MatrixChoicesContainer extends Vue {
514
530
  margin-right: 24px;
515
531
  }
516
532
  }
533
+
534
+ &--radio-btn--three-columns {
535
+ &:not(:last-child) {
536
+ margin-right: 15px;
537
+ }
538
+ }
517
539
  }
518
540
 
519
541
  &__choices-container {
@@ -595,6 +617,10 @@ export default class MatrixChoicesContainer extends Vue {
595
617
  &--mobile {
596
618
  display: none;
597
619
  }
620
+
621
+ &--checkbox {
622
+ padding-bottom: 0;
623
+ }
598
624
  }
599
625
 
600
626
  &__choice-text {
@@ -627,6 +653,10 @@ export default class MatrixChoicesContainer extends Vue {
627
653
  p {
628
654
  margin: 0;
629
655
  }
656
+
657
+ &--checkbox {
658
+ margin-bottom: 12px;
659
+ }
630
660
  }
631
661
 
632
662
  &__mobile-choices {
package/lib/components/Quiz/Question/MatrixRadioGroup.vue CHANGED
@@ -21,6 +21,7 @@ const selectChoice = (choiceKey: string) => {
21
21
  <ul
22
22
  v-if="choices.length"
23
23
  class="uikit-matrix-radio-group"
24
+ :class="{'uikit-matrix-radio-group--disabled': showAnswers}"
24
25
  v-dark="isDarkMode"
25
26
  role="radiogroup"
26
27
  >
@@ -75,6 +76,11 @@ const selectChoice = (choiceKey: string) => {
75
76
  list-style: none;
76
77
  margin: 0;
77
78
  padding: 0;
79
+ cursor: pointer;
80
+
81
+ &--disabled {
82
+ cursor: default;
83
+ }
78
84
 
79
85
  &__option {
80
86
  display: flex;
package/lib/components/Quiz/Question/MobileMatrixChoicesContainer.vue CHANGED
@@ -627,8 +627,6 @@ export default class MobileMatrixChoicesContainer extends Vue {
627
627
 
628
628
  &__row-label-correct-icon,
629
629
  &__row-label-incorrect-icon {
630
- width: 21px;
631
- height: 22px;
632
630
  position: absolute;
633
631
  right: 0;
634
632
  margin-right: 12px;
package/lib/components/Quiz/Question.vue CHANGED
@@ -273,13 +273,8 @@
273
273
  :isCorrect="isCorrect"
274
274
  />
275
275
  </template>
276
- <template #showNamesTable="{
277
- choiceKey,
278
- }" >
279
- <slot
280
- name="showNamesTable"
281
- :choiceKey="choiceKey"
282
- />
276
+ <template #explanationBottomExperiment>
277
+ <slot name="explanationBottomExperiment" />
283
278
  </template>
284
279
  </MatrixChoicesContainer>
285
280
  <MobileMatrixChoicesContainer
@@ -301,12 +296,14 @@
301
296
  @emitSelectedMatrixChoice="selectMatrixChoice"
302
297
  @emitAnsweredMatrixRowIndex="answeredMatrixRowIndex"
303
298
  >
304
- <template #motivationalMoment="{
305
- isCorrect,
306
- choiceKey,
307
- showAnswers,
308
- answerKeys,
309
- }">
299
+ <template
300
+ #motivationalMoment="{
301
+ isCorrect,
302
+ choiceKey,
303
+ showAnswers,
304
+ answerKeys,
305
+ }"
306
+ >
310
307
  <slot
311
308
  name="motivationalMoment"
312
309
  :showAnswers="showAnswers"
@@ -315,8 +312,10 @@
315
312
  :isCorrect="isCorrect"
316
313
  />
317
314
  </template>
315
+ <template #explanationBottomExperiment>
316
+ <slot name="explanationBottomExperiment" />
317
+ </template>
318
318
  </MobileMatrixChoicesContainer>
319
- <slot name="unansweredFlaggedNamesTable" />
320
319
  </div>
321
320
  <Summary
322
321
  v-if="((isMCR && showAnswers) || (isMatrixQuestion && showMatrixAnswers)) && !showPaywall"
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@pocketprep/ui-kit",
3
- "version": "3.4.67",
3
+ "version": "3.4.69",
4
4
  "description": "Pocket Prep UI Kit",
5
5
  "author": "pocketprep",
6
6
  "scripts": {