@pocketprep/ui-kit 3.4.68 → 3.4.70

package/lib/components/Quiz/Question/MatrixChoicesContainer.vue

@@ -15,7 +15,9 @@
                 class="uikit-question-matrix-choices-container__column-row-header"
                 :class="{
                     'uikit-question-matrix-choices-container__column-row-header--two-columns': 
-                        numberOfMatrixColumnLabels === 2 
+                        numberOfMatrixColumnLabels === 2,
+                    'uikit-question-matrix-choices-container__column-row-header--radio-btn-three-columns': 
+                        question.type === 'Matrix Radio Button' && numberOfMatrixColumnLabels === 3
                 }"
                 v-html="matrixColumnLabelsForRows"
             />
@@ -23,7 +25,9 @@
                 class="uikit-question-matrix-choices-container__column-header"
                 :class="{
                     'uikit-question-matrix-choices-container__column-header--two-columns': 
-                        numberOfMatrixColumnLabels === 2 
+                        numberOfMatrixColumnLabels === 2,
+                    'uikit-question-matrix-choices-container__column-header--radio-btn-three-columns':
+                        question.type === 'Matrix Radio Button' && numberOfMatrixColumnLabels === 3
                 }"
                 lang="de"
                 v-for="(columnLabel, index) in matrixColumnLabels"
@@ -52,7 +56,7 @@
                     'uikit-question-matrix-choices-container__choices--checkbox': 
                         question.type === 'Matrix Checkbox',
                     'uikit-question-matrix-choices-container__choices--two-columns': 
-                        numberOfMatrixColumnLabels === 2
+                        numberOfMatrixColumnLabels === 2,
                 }"
                 v-dark="isDarkMode"
                 v-breakpoint:questionEl="breakpoints"
@@ -65,7 +69,9 @@
                         'uikit-question-matrix-choices-container__choice-text--checkbox': 
                             question.type === 'Matrix Checkbox',
                         'uikit-question-matrix-choices-container__choice-text--two-columns': 
-                            numberOfMatrixColumnLabels === 2
+                            numberOfMatrixColumnLabels === 2,
+                        'uikit-question-matrix-choices-container__choice-text--radio-btn-two-columns': 
+                            question.type === 'Matrix Radio Button' && numberOfMatrixColumnLabels === 2,
                     }"
                     v-dark="isDarkMode"
                     v-breakpoint:questionEl="breakpoints"
@@ -133,7 +139,7 @@
                             matrixRadioGrid[rowIndex]"
                 >
                     <MatrixRadioGroup
-                        :modelValue="getRadioRowSelection(rowIndex)"
+                        :model-value="getRadioRowSelection(rowIndex)"
                         :review-mode="reviewMode"
                         :show-answers="showMatrixAnswers"
                         class="uikit-question-matrix-choices-container__radio-btns"
@@ -150,13 +156,13 @@
                                     v-if="optionIcon.isCorrect"
                                     v-dark="isDarkMode"
                                     type="correct"
-                                    class="uikit-question-matrix-choices-container__correct-answer-icon"
+                                    class="uikit-question-matrix-choices-container__radio-btn-correct-answer-icon"
                                 />
                                 <Icon
                                     v-else
                                     v-dark="isDarkMode"
                                     type="incorrect"
-                                    class="uikit-question-matrix-choices-container__incorrect-answer-icon"
+                                    class="uikit-question-matrix-choices-container__radio-btn-incorrect-answer-icon"
                                 />
                             </template>
                         </template>
@@ -226,7 +232,7 @@ export default class MatrixChoicesContainer extends Vue {
         return this.matrixChoiceLayout?.map(row => {
             return {
                 choices: row as TMatrixChoiceKey[],
-                value: null,
+                value: null as TMatrixChoiceKey | null,
             }
         })
     }
@@ -249,11 +255,11 @@ export default class MatrixChoicesContainer extends Vue {
 
     mounted () {
         if (this.question.type === 'Matrix Checkbox') {
-            this.matrixCheckboxGrid = this.defaultCheckboxGrid
+            this.matrixCheckboxGrid = this.convertSelectedMatrixChoiceToCheckboxGrid()
         }
         
         if (this.question.type === 'Matrix Radio Button') {
-            this.matrixRadioGrid = this.defaultRadioButtonGrid
+            this.matrixRadioGrid = this.convertSelectedMatrixChoiceToRadioBtnGrid()
         }
     }
 
@@ -270,7 +276,7 @@ export default class MatrixChoicesContainer extends Vue {
     }
 
     convertSelectedMatrixChoiceToRadioBtnGrid () {
-        const radioBtnGrid = this.matrixRadioGrid
+        const radioBtnGrid = this.defaultRadioButtonGrid
         this.selectedMatrixChoices.forEach(choice => {
             const rowIndex = Number(choice.substring(1, choice.indexOf('_'))) - 1
             if (radioBtnGrid && radioBtnGrid[rowIndex]) {
@@ -482,7 +488,7 @@ export default class MatrixChoicesContainer extends Vue {
     }
 
     &__column-row-header {
-        width: 284px;
+        width: 286px;
 
         &--tablet-landscape {
             width: 285px;
@@ -495,6 +501,10 @@ export default class MatrixChoicesContainer extends Vue {
         &--two-columns {
             width: 303px;
         }
+
+        &--radio-btn-three-columns {
+            width: 276px;
+        }
     }
 
     &__column-header {
@@ -522,6 +532,12 @@ export default class MatrixChoicesContainer extends Vue {
                 margin-right: 24px;
             }
         }
+
+        &--radio-btn-three-columns {
+            &:not(:last-child) {
+                margin-right: 15px;
+            }
+        }
     }
 
     &__choices-container {
@@ -584,7 +600,7 @@ export default class MatrixChoicesContainer extends Vue {
         background: $white;
         box-shadow: 0px 1px 4px 0px rgba(71, 89, 103, 0.30);
         display: flex;
-        padding: 12px 10px 12px 14px;
+        padding: 12px 10px 0 14px;
         position: relative;
         transition: 0.1s padding ease;
         align-items: flex-start;
@@ -603,10 +619,6 @@ export default class MatrixChoicesContainer extends Vue {
         &--mobile {
             display: none;
         }
-
-        &--checkbox {
-            padding-bottom: 0;
-        }
     }
 
     &__choice-text {
@@ -617,12 +629,18 @@ export default class MatrixChoicesContainer extends Vue {
         font-weight: 500;
         line-height: 23px;
         letter-spacing: -0.1px;
+        margin-bottom: 12px;
 
         &--two-columns {
             width: 279px;
             margin-right: 24px;
         }
 
+        &--radio-btn-two-columns {
+            width: 279px;
+            margin-right: 12px;
+        }
+
         &--dark {
             color: $barely-background;
         }
@@ -639,10 +657,6 @@ export default class MatrixChoicesContainer extends Vue {
         p {
             margin: 0;
         }
-
-        &--checkbox {
-            margin-bottom: 12px;
-        }
     }
 
     &__mobile-choices {
@@ -703,5 +717,27 @@ export default class MatrixChoicesContainer extends Vue {
             color: $rosa;
         }
     }
+
+    &__radio-btn-correct-answer-icon {
+        margin-top: -10px;
+        width: 21px;
+        height: 22px;
+        color: $cadaverous;
+
+        &--dark {
+            color: $jungle-green;
+        }
+    }
+
+    &__radio-btn-incorrect-answer-icon {
+        margin-top: -10px;
+        width: 21px;
+        height: 22px;
+        color: $pepper;
+
+        &--dark {
+            color: $rosa;
+        }
+    }
 }
 </style>

package/lib/components/Quiz/Question/MatrixRadioGroup.vue

@@ -36,19 +36,24 @@ const selectChoice = (choiceKey: string) => {
             v-for="(choice) in choices"
             :key="choice"
         >
-            <RadioButton
-                class="uikit-matrix-radio-group__radio-btn"
-                :selected="choice === selectedChoice"
-                :disabled="disabled"
-                :isDarkMode="isDarkMode"
-                :color="showAnswers
-                    ? selectedChoice?.startsWith('a')
-                        ? 'green'
-                        : 'gray'
-                    : 'blue'
-                "
+            <div 
+                class="uikit-matrix-radio-group__radio-btn-div"
                 @click="!disabled && !showAnswers && selectChoice(choice)"
-            />
+                @keypress.enter="!disabled && !showAnswers && selectChoice(choice)"
+            >
+                <RadioButton
+                    class="uikit-matrix-radio-group__radio-btn"
+                    :selected="choice === selectedChoice"
+                    :disabled="disabled"
+                    :isDarkMode="isDarkMode"
+                    :color="showAnswers
+                        ? selectedChoice?.startsWith('a')
+                            ? 'green'
+                            : 'gray'
+                        : 'blue'
+                    "
+                />
+            </div>
             <div class="uikit-matrix-radio-group__option-icon">
                 <slot
                     name="optionIcon"
@@ -76,7 +81,6 @@ const selectChoice = (choiceKey: string) => {
     list-style: none;
     margin: 0;
     padding: 0;
-    cursor: pointer;
 
     &--disabled {
         cursor: default;
@@ -100,5 +104,15 @@ const selectChoice = (choiceKey: string) => {
         display: flex;
         align-items: center;
     }
+
+    &__radio-btn-div {
+        width: 40px;
+        height: 40px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        margin-top: -10px;
+        cursor: pointer;
+    }
 }
 </style>

package/lib/components/Quiz/Question/MobileMatrixChoicesContainer.vue

@@ -63,7 +63,6 @@
                         class="uikit-question-mobile-matrix-choices-container__selected-choice-labels-container"
                     >
                         <div
-   
                             v-dark="isDarkMode"
                             v-for="(colHeader, colHeaderIndex) in selectedColumnHeaders"
                             :key="colHeaderIndex"
@@ -220,7 +219,7 @@ export default class MobileMatrixChoicesContainer extends Vue {
         return this.matrixChoiceLayout?.map(row => {
             return {
                 choices: row as TMatrixChoiceKey[],
-                value: null,
+                value: null as TMatrixChoiceKey | null,
             }
         })
     }
@@ -235,11 +234,11 @@ export default class MobileMatrixChoicesContainer extends Vue {
 
     mounted () {
         if (this.question.type === 'Matrix Checkbox') {
-            this.matrixCheckboxGrid = this.defaultCheckboxGrid
+            this.matrixCheckboxGrid = this.convertSelectedMatrixChoiceToCheckboxGrid()
         }
 
         if (this.question.type === 'Matrix Radio Button') {
-            this.matrixRadioGrid = this.defaultRadioButtonGrid
+            this.matrixRadioGrid = this.convertSelectedMatrixChoiceToRadioBtnGrid()
         }
 
         this.question.matrixChoiceLayout?.forEach(() => {
@@ -424,7 +423,7 @@ export default class MobileMatrixChoicesContainer extends Vue {
     }
 
     convertSelectedMatrixChoiceToRadioBtnGrid () {
-        const radioBtnGrid = this.matrixRadioGrid
+        const radioBtnGrid = this.defaultRadioButtonGrid
         this.selectedMatrixChoices.forEach(choice => {
             const rowIndex = Number(choice.substring(1, choice.indexOf('_'))) - 1
             const columnIndex = Number(choice.split('_').pop()) - 1
@@ -683,7 +682,6 @@ export default class MobileMatrixChoicesContainer extends Vue {
         color: $ash;
         font-size: 14px;
         font-weight: 500;
-        height: 19px;
         margin-right: 4px;
 
         &--dark {
@@ -716,6 +714,10 @@ export default class MobileMatrixChoicesContainer extends Vue {
             color: $barely-background;
         }
 
+        .uikit-checkbox {
+            min-width: 18px;
+        }
+
         .uikit-checkbox--disabled {
             background: transparent;
         }

package/lib/components/Quiz/Question/MobileMatrixRadioGroup.vue

@@ -104,7 +104,7 @@ const stripText = (string?: string) => {
         display: flex;
         align-items: center;
         padding-left: 15px;
-        height: 47px;
+        min-height: 47px;
         max-width: 325px;
         border: 0.5px solid rgba($pewter, 0.85);
         border-top: none;

package/lib/components/Quiz/Question/Summary.vue

@@ -15,7 +15,7 @@
             v-breakpoint:questionEl="breakpoints"
             type="tertiary-small"
             class="uikit-question-summary__summary-toggle-explanation"
-            :class="{ 'uikit-question-summary__summary-toggle-explanation': reviewMode }"
+            :class="{ 'uikit-question-summary__summary-toggle-explanation--review-mode': reviewMode }"
             :is-dark-mode="isDarkMode"
             :aria-expanded="showExplanation ? 'true' : 'false'"
             @click="toggleSummaryExplanation"
@@ -229,11 +229,7 @@ export default class Summary extends Vue {
         padding: 0;
 
         &--review-mode {
-            display: none;
-
-            &.uikit-question-summary__summary-toggle-explanation--tablet-portrait {
-                display: block;
-            }
+            display: block;
         }
     }
 

package/lib/components/Quiz/Question.vue

@@ -154,7 +154,7 @@
                 "
             >
                 <div
-                    v-if="(showAnswers || showMatrixAnswers) && !isMCR && isUnanswered && !isCorrect && !isTeachReview"
+                    v-if="showAnswers && !isMCR && !isMatrixQuestion && isUnanswered && !isCorrect && !isTeachReview"
                     v-dark="isDarkMode"
                     class="uikit-question__unanswered-label"
                 >
@@ -843,11 +843,11 @@ export default class Question extends Vue {
         })
     }
 
-    mounted () {
+    created () {
         if (this.reviewMode) {
             this.startReviewMode()
         }
-
+        
         if (!this.isMatrixQuestion && this.previousChoices) {
             this.updateSelectedChoices(this.previousChoices)
         }
@@ -855,7 +855,9 @@ export default class Question extends Vue {
         if (this.isMatrixQuestion && this.previousMatrixChoices) {
             this.updateSelectedMatrixChoices(this.previousMatrixChoices)
         }
+    }
 
+    mounted () {
         if (this.initialShowAnswers) {
             this.showAnswers = this.initialShowAnswers
             this.showMatrixAnswers = this.initialShowAnswers

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pocketprep/ui-kit",
-  "version": "3.4.68",
+  "version": "3.4.70",
   "description": "Pocket Prep UI Kit",
   "author": "pocketprep",
   "scripts": {