@pocketprep/ui-kit 3.4.70 → 3.4.72

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

@@ -143,6 +143,10 @@
                         :review-mode="reviewMode"
                         :show-answers="showMatrixAnswers"
                         class="uikit-question-matrix-choices-container__radio-btns"
+                        :class="{
+                            'uikit-question-matrix-choices-container__radio-btns--three-columns':
+                                numberOfMatrixColumnLabels === 3,
+                        }"
                         :choices="getRadioRowChoices(rowIndex)"
                         :is-dark-mode="isDarkMode"
                         :disabled="false"
@@ -488,22 +492,17 @@ export default class MatrixChoicesContainer extends Vue {
     }
 
     &__column-row-header {
-        width: 286px;
-
-        &--tablet-landscape {
-            width: 285px;
-        }
-
-        &--tablet-portrait {
-            width: 275px;
-        }
+        width: 290px;
+        margin-right: 16px;
 
         &--two-columns {
-            width: 303px;
+            width: 288px;
+            margin-right: 16px;
         }
 
         &--radio-btn-three-columns {
-            width: 276px;
+            width: 290px;
+            margin-right: 16px;
         }
     }
 
@@ -512,7 +511,7 @@ export default class MatrixChoicesContainer extends Vue {
         hyphens: auto;
 
         &:not(:last-child) {
-            margin-right: 11px;
+            margin-right: 16px;
         }
 
         &--tablet-landscape {
@@ -528,14 +527,16 @@ export default class MatrixChoicesContainer extends Vue {
         }
 
         &--two-columns {
+            width: 88px;
+
             &:not(:last-child) {
-                margin-right: 24px;
+                margin-right: 16px;
             }
         }
 
         &--radio-btn-three-columns {
             &:not(:last-child) {
-                margin-right: 15px;
+                margin-right: 16px;
             }
         }
     }
@@ -622,7 +623,7 @@ export default class MatrixChoicesContainer extends Vue {
     }
 
     &__choice-text {
-        width: 303px;
+        width: 279px;
         min-height: fit-content;
         color: $brand-black;
         font-size: 16.5px;
@@ -633,12 +634,12 @@ export default class MatrixChoicesContainer extends Vue {
 
         &--two-columns {
             width: 279px;
-            margin-right: 24px;
+            margin-right: 14px;
         }
 
         &--radio-btn-two-columns {
             width: 279px;
-            margin-right: 12px;
+            margin-right: 14px;
         }
 
         &--dark {
@@ -668,7 +669,11 @@ export default class MatrixChoicesContainer extends Vue {
         display: flex;
 
         &--two-columns {
-            width: 80px;
+            width: 88px;
+
+            &:not(&:last-child) {
+                margin-right: 16px;
+            }
         }
 
         .uikit-checkbox--disabled {
@@ -677,14 +682,13 @@ export default class MatrixChoicesContainer extends Vue {
     }
 
     &__clickable-checkbox {
-        width: 36px;
-        height: 36px;
+        width: 40px;
+        height: 40px;
         cursor: pointer;
         display: flex;
         align-items: center;
         justify-content: center;
-        margin-top: -8px;
-        margin-left: -8px;
+        margin-top: -10px;
 
         &--review {
             cursor: default;
@@ -718,6 +722,13 @@ export default class MatrixChoicesContainer extends Vue {
         }
     }
 
+    &__radio-btns {
+        &--three-columns {
+            position: relative;
+            left: 6px;
+        }
+    }
+
     &__radio-btn-correct-answer-icon {
         margin-top: -10px;
         width: 21px;

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

@@ -92,7 +92,11 @@ const selectChoice = (choiceKey: string) => {
         width: 72px;
 
         &--two-options {
-            width: 80px;
+            width: 88px;
+
+            &:first-child {
+                margin-right: 16px;
+            }
         }
 
         &:last-child {

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

@@ -424,6 +424,17 @@ export default class MobileMatrixChoicesContainer extends Vue {
 
     convertSelectedMatrixChoiceToRadioBtnGrid () {
         const radioBtnGrid = this.defaultRadioButtonGrid
+
+        const columnMatrixLabels = this.question.matrixLabels?.rows
+        const defaultSelectedColumnLabels: string[][] = []
+        if (columnMatrixLabels) {
+            columnMatrixLabels.forEach(() => {
+                defaultSelectedColumnLabels.push([])
+            })
+
+            this.selectedColumnHeaders = defaultSelectedColumnLabels
+        }
+
         this.selectedMatrixChoices.forEach(choice => {
             const rowIndex = Number(choice.substring(1, choice.indexOf('_'))) - 1
             const columnIndex = Number(choice.split('_').pop()) - 1

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

@@ -163,7 +163,8 @@ export default class Summary extends Vue {
     @Prop({ default: [] }) keywordDefinitions!: { keyword: string; definition: string }[]
 
     get isQuestionCorrect () {
-        return (!this.isMatrixQuestion && this.isCorrect) || (this.isMatrixQuestion && this.isMatrixQuestionCorrect)
+        return (!this.isMatrixQuestion && this.isCorrect) || 
+            (this.isMatrixQuestion && this.isMatrixQuestionCorrect && !this.isUnanswered)
     }
 
     get summary () {

package/lib/components/Quiz/Question.vue

@@ -135,6 +135,7 @@
                     'uikit-question__choices--correct': showAnswers && isMCR && isCorrect,
                     'uikit-question__choices--incorrect': 
                         showAnswers && (isMCR || isUnanswered) && !isCorrect && !isTeachReview,
+                    'uikit-question__choices--matrix': isMatrixQuestion,
                     'uikit-question__choices--unanswered': showAnswers && !isMCR && isUnanswered && !isCorrect,
                     'uikit-question__choices--show-stats': globalMetrics,
                     'uikit-question__choices--no-actions': !(isMCR || isUnanswered || isMatrixQuestion)
@@ -831,7 +832,7 @@ export default class Question extends Vue {
         if (!this.isMatrixQuestion) {
             return this.selectedChoices.length === 0
         }
-        return this.selectedMatrixChoices.length === 0
+        return (this.selectedMatrixChoices.length === 0 || !this.allMatrixRowsAreAnswered)
     }
 
     get prompt () {
@@ -1896,6 +1897,10 @@ export default class Question extends Vue {
         &--incorrect#{&}--unanswered:not(&--show-stats) {
             margin-bottom: 71px;
         }
+
+        &--matrix {
+            max-width: 518px;
+        }
     }
 
     &__unanswered-label {

package/package.json

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