@pocketprep/ui-kit 3.4.57 → 3.4.58

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

@@ -49,7 +49,7 @@
                 class="uikit-question-matrix-choices-container__choices"
                 :class="{
                     'uikit-question-matrix-choices-container__choices--two-columns': 
-                        numberOfMatrixColumnLabels === 2 
+                        numberOfMatrixColumnLabels === 2
                 }"
                 v-dark="isDarkMode"
                 v-breakpoint:questionEl="breakpoints"
@@ -60,7 +60,7 @@
                     class="uikit-question-matrix-choices-container__choice-text"
                     :class="{
                         'uikit-question-matrix-choices-container__choice-text--two-columns': 
-                            numberOfMatrixColumnLabels === 2 
+                            numberOfMatrixColumnLabels === 2
                     }"
                     v-dark="isDarkMode"
                     v-breakpoint:questionEl="breakpoints"
@@ -90,20 +90,33 @@
                             :is-dark-mode="isDarkMode"
                             :disabled="showMatrixAnswers || reviewMode"
                             :checkbox-check-styles="checkboxCheckStyling(rowIndex, columnIndex)"
-                        />
-                        <Checkbox
-                            v-else
-                            v-model="matrixCheckboxGrid[rowIndex][columnIndex]"
-                            :is-dark-mode="isDarkMode"
-                            :disabled="showMatrixAnswers || reviewMode"
                             :checkbox-styles="checkboxContainerStyling(rowIndex, columnIndex)"
                         />
+                        <div 
+                            v-else 
+                            class="uikit-question-matrix-choices-container__clickable-checkbox"
+                            :class="{
+                                'uikit-question-matrix-choices-container__clickable-checkbox--review': 
+                                    showMatrixAnswers || reviewMode 
+                            }"
+                            @click="!(showMatrixAnswers || reviewMode) && checkboxClicked(rowIndex, columnIndex)"
+                            @keypress.enter="!(showMatrixAnswers || reviewMode) && 
+                                checkboxClicked(rowIndex, columnIndex)"
+                        >
+                            <Checkbox
+                                :model-value="matrixCheckboxGrid[rowIndex][columnIndex]"
+                                :is-dark-mode="isDarkMode"
+                                :disabled="showMatrixAnswers || reviewMode"
+                                :checkbox-styles="checkboxContainerStyling(rowIndex, columnIndex)"
+                            />
+                        </div>
                         <Icon
                             v-if="
                                 (showMatrixAnswers || reviewMode) && 
                                     (incorrectlySelectedChoice(rowIndex, columnIndex) ||
                                         correctAnswerButNotSelected(rowIndex, columnIndex))"
                             class="uikit-question-matrix-choices-container__incorrect-answer-icon"
+                            v-dark="isDarkMode"
                             type="incorrect"
                         />
                     </div>
@@ -130,11 +143,13 @@
                             <template v-if="optionIcon.isVisible">
                                 <Icon
                                     v-if="optionIcon.isCorrect"
+                                    v-dark="isDarkMode"
                                     type="correct"
                                     class="uikit-question-matrix-choices-container__correct-answer-icon"
                                 />
                                 <Icon
                                     v-else
+                                    v-dark="isDarkMode"
                                     type="incorrect"
                                     class="uikit-question-matrix-choices-container__incorrect-answer-icon"
                                 />
@@ -333,6 +348,13 @@ export default class MatrixChoicesContainer extends Vue {
                 border: `1px solid ${this.brandColors.steel} !important`,
             }
         }
+
+        if (isReviewMode && this.correctAnswerButNotSelected(rowIndex, columnIndex)) {
+            return {
+                background: 'transparent !important',
+                border: `1px solid ${this.brandColors.slate} !important`,
+            }
+        }
     }
 
     checkboxCheckStyling (rowIndex: number, columnIndex: number) {
@@ -345,6 +367,12 @@ export default class MatrixChoicesContainer extends Vue {
         }
     }
 
+    checkboxClicked (rowIndex: number, columnIndex: number) {
+        if (this.matrixCheckboxGrid && this.matrixCheckboxGrid[rowIndex]) {
+            this.matrixCheckboxGrid[rowIndex][columnIndex] = !this.matrixCheckboxGrid[rowIndex][columnIndex]
+        }
+    }
+
     @Emit('emitSelectedMatrixChoice')
     emitSelectedMatrixChoice (matrixChoiceKeys: TMatrixChoiceKey[]) {
         return matrixChoiceKeys
@@ -426,7 +454,7 @@ export default class MatrixChoicesContainer extends Vue {
     &__columns {
         display: flex;
         padding: 0px 1px 0px 14px;
-        align-items: center;
+        align-items: flex-end;
         width: 100%;
         height: 32px;
         margin-bottom: 16px;
@@ -464,7 +492,7 @@ export default class MatrixChoicesContainer extends Vue {
         hyphens: auto;
 
         &:not(:last-child) {
-            margin-right: 8px;
+            margin-right: 11px;
         }
 
         &--tablet-landscape {
@@ -473,6 +501,12 @@ export default class MatrixChoicesContainer extends Vue {
             }
         }
 
+        &--tablet-portrait {
+            &:not(:last-child) {
+                margin-right: 14px;
+            }
+        }
+
         &--two-columns {
             &:not(:last-child) {
                 margin-right: 24px;
@@ -533,7 +567,7 @@ export default class MatrixChoicesContainer extends Vue {
         padding: 12px 10px 12px 14px;
         position: relative;
         transition: 0.1s padding ease;
-        align-items: center;
+        align-items: flex-start;
         gap: 16px;
         margin-bottom: 9px;
 
@@ -586,7 +620,6 @@ export default class MatrixChoicesContainer extends Vue {
     &__checkbox {
         width: 56px;
         display: flex;
-        align-items: center;
 
         &--two-columns {
             width: 80px;
@@ -597,18 +630,46 @@ export default class MatrixChoicesContainer extends Vue {
         }
     }
 
+    &__clickable-checkbox {
+        width: 36px;
+        height: 36px;
+        cursor: pointer;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        margin-top: -8px;
+        margin-left: -8px;
+
+        &--review {
+            cursor: default;
+            display: block;
+            margin-top: 0;
+            margin-left: 0;
+            width: 20px;
+        }
+    }
+
     &__correct-answer-icon {
         margin-left: 6px;
         width: 21px;
         height: 22px;
         color: $cadaverous;
+
+        &--dark {
+            color: $jungle-green;
+        }
     }
 
     &__incorrect-answer-icon {
         margin-left: 6px;
+        margin-top: -2px;
         width: 21px;
         height: 22px;
         color: $pepper;
+
+        &--dark {
+            color: $rosa;
+        }
     }
 }
 </style>

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

@@ -34,11 +34,13 @@
                 >
                     <Icon
                         v-if="(showMatrixAnswers || reviewMode) && correctRow(rowIndex)"
+                        v-dark="isDarkMode"
                         class="uikit-question-mobile-matrix-choices-container__row-label-correct-icon"   
                         type="check"
                     />
                     <Icon
                         v-if="(showMatrixAnswers || reviewMode) && !correctRow(rowIndex)"
+                        v-dark="isDarkMode"
                         class="uikit-question-mobile-matrix-choices-container__row-label-incorrect-icon"   
                         type="incorrect"
                     />
@@ -80,7 +82,6 @@
                                             stripText(selectedColumnHeaders[rowIndex][colHeaderIndex]) : 
                                             `${stripText(selectedColumnHeaders[rowIndex][colHeaderIndex])},`
                                     }}
-
                                 </div>
                             </template>
                         </div>
@@ -98,6 +99,8 @@
                         v-dark="isDarkMode"
                         v-for="(column, columnIndex) in matrixColumnLabels"
                         :key="columnIndex"
+                        @click="checkboxRowClicked(rowIndex, columnIndex)"
+                        @keypress.enter="checkboxRowClicked(rowIndex, columnIndex)"
                     >
                         <Checkbox
                             v-if="(showMatrixAnswers || reviewMode) &&
@@ -106,10 +109,11 @@
                             :is-dark-mode="isDarkMode"
                             :disabled="showMatrixAnswers || reviewMode"
                             :checkbox-check-styles="checkboxCheckStyling(rowIndex, columnIndex)"
+                            :checkbox-styles="checkboxContainerStyling(rowIndex, columnIndex)"
                         />
                         <Checkbox
                             v-else
-                            v-model="matrixCheckboxGrid[rowIndex][columnIndex]"
+                            :model-value="matrixCheckboxGrid[rowIndex][columnIndex]"
                             :is-dark-mode="isDarkMode"
                             :disabled="showMatrixAnswers || reviewMode"
                             :checkbox-styles="checkboxContainerStyling(rowIndex, columnIndex)"
@@ -251,9 +255,9 @@ export default class MobileMatrixChoicesContainer extends Vue {
         }
     }
 
-    selectedChoiceKey (rowIndex: number, colIndex: number) {
+    selectedChoiceKey (rowIndex: number, columnIndex: number) {
         const row = rowIndex += 1
-        const column = colIndex += 1
+        const column = columnIndex += 1
         if (this.selectedMatrixChoices.length && this.matrixAnswerKeys.length) {
             const matrixSelectedChoiceKey = this.selectedMatrixChoices.find((choice) => {
                 const substring = choice.substring(1)
@@ -289,9 +293,9 @@ export default class MobileMatrixChoicesContainer extends Vue {
         }
     }
 
-    correctlySelectedChoice (rowIndex: number, colIndex: number) {
+    correctlySelectedChoice (rowIndex: number, columnIndex: number) {
         if (this.selectedMatrixChoices && this.matrixAnswerKeys) {
-            const selectedChoice = this.selectedChoiceKey(rowIndex, colIndex)
+            const selectedChoice = this.selectedChoiceKey(rowIndex, columnIndex)
             if (selectedChoice && selectedChoice.startsWith('a') && this.matrixAnswerKeys.includes(selectedChoice)) {
                 return true
             }
@@ -299,9 +303,9 @@ export default class MobileMatrixChoicesContainer extends Vue {
         return false
     }
 
-    incorrectlySelectedChoice (rowIndex: number, colIndex: number) {
+    incorrectlySelectedChoice (rowIndex: number, columnIndex: number) {
         if (this.selectedMatrixChoices && this.matrixAnswerKeys) {
-            const selectedChoice = this.selectedChoiceKey(rowIndex, colIndex)
+            const selectedChoice = this.selectedChoiceKey(rowIndex, columnIndex)
             if (selectedChoice && selectedChoice.startsWith('d')) {
                 return true
             }
@@ -309,9 +313,9 @@ export default class MobileMatrixChoicesContainer extends Vue {
         return false
     }
                         
-    correctAnswerButNotSelected (rowIndex: number, colIndex: number) {
-        const selectedChoice = this.selectedChoiceKey(rowIndex, colIndex)
-        const answerKey = this.matrixAnswerKeys.find(choice => choice === `a${rowIndex + 1}_${colIndex + 1}`)
+    correctAnswerButNotSelected (rowIndex: number, columnIndex: number) {
+        const selectedChoice = this.selectedChoiceKey(rowIndex, columnIndex)
+        const answerKey = this.matrixAnswerKeys.find(choice => choice === `a${rowIndex + 1}_${columnIndex + 1}`)
         return answerKey && !selectedChoice
     }
 
@@ -334,6 +338,13 @@ export default class MobileMatrixChoicesContainer extends Vue {
                 border: `1px solid ${this.brandColors.steel} !important`,
             }
         }
+
+        if (isReviewMode && this.correctAnswerButNotSelected(rowIndex, columnIndex)) {
+            return {
+                background: 'transparent !important',
+                border: `1px solid ${this.brandColors.slate} !important`,
+            }
+        }
     }
 
     checkboxCheckStyling (rowIndex: number, columnIndex: number) {
@@ -386,11 +397,11 @@ export default class MobileMatrixChoicesContainer extends Vue {
         const checkboxGrid = this.defaultCheckboxGrid
         this.selectedMatrixChoices.forEach(choice => {
             const rowIndex = Number(choice.substring(1, choice.indexOf('_'))) - 1
-            const colIndex = Number(choice.split('_').pop()) - 1
+            const columnIndex = Number(choice.split('_').pop()) - 1
             if (checkboxGrid && checkboxGrid[rowIndex]) {
-                checkboxGrid[rowIndex][colIndex] = true
-                if (this.selectedColumnHeaders[rowIndex] && this.question.matrixLabels?.columns[colIndex]) {
-                    const columnHeader = this.question.matrixLabels?.columns[colIndex]
+                checkboxGrid[rowIndex][columnIndex] = true
+                if (this.selectedColumnHeaders[rowIndex] && this.question.matrixLabels?.columns[columnIndex]) {
+                    const columnHeader = this.question.matrixLabels?.columns[columnIndex]
                     this.selectedColumnHeaders[rowIndex].push(columnHeader)
                 }
             }
@@ -402,9 +413,9 @@ export default class MobileMatrixChoicesContainer extends Vue {
         const radioBtnGrid = this.matrixRadioGrid
         this.selectedMatrixChoices.forEach(choice => {
             const rowIndex = Number(choice.substring(1, choice.indexOf('_'))) - 1
-            const colIndex = Number(choice.split('_').pop()) - 1
-            if (this.selectedColumnHeaders[rowIndex] && this.question.matrixLabels?.columns[colIndex]) {
-                const columnHeader = this.question.matrixLabels?.columns[colIndex]
+            const columnIndex = Number(choice.split('_').pop()) - 1
+            if (this.selectedColumnHeaders[rowIndex] && this.question.matrixLabels?.columns[columnIndex]) {
+                const columnHeader = this.question.matrixLabels?.columns[columnIndex]
                 this.selectedColumnHeaders[rowIndex].push(columnHeader)
             }
             if (radioBtnGrid && radioBtnGrid[rowIndex]) {
@@ -414,6 +425,12 @@ export default class MobileMatrixChoicesContainer extends Vue {
         return radioBtnGrid
     }
 
+    checkboxRowClicked (rowIndex: number, columnIndex: number) {
+        if (this.matrixCheckboxGrid && this.matrixCheckboxGrid[rowIndex]) {
+            this.matrixCheckboxGrid[rowIndex][columnIndex] = !this.matrixCheckboxGrid[rowIndex][columnIndex]
+        }
+    }
+
     @Emit('emitSelectedMatrixChoice')
     emitSelectedMatrixChoice (matrixChoiceKeys: TMatrixChoiceKey[]) {
         return matrixChoiceKeys
@@ -529,7 +546,7 @@ export default class MobileMatrixChoicesContainer extends Vue {
     }
 
     &__choices-container {
-        cursor: default;
+        cursor: pointer;
         position: relative;
         outline: none;
         transition: 0.1s width ease;
@@ -604,6 +621,8 @@ export default class MobileMatrixChoicesContainer extends Vue {
 
     &__row-label-correct-icon,
     &__row-label-incorrect-icon {
+        width: 21px;
+        height: 22px;
         position: absolute;
         right: 0;
         margin-right: 12px;

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

@@ -4,6 +4,9 @@
         v-breakpoint:questionEl="breakpoints"
         ref="uikit-question-summary"
         class="uikit-question-summary"
+        :class="{
+            'uikit-question-summary--matrix-question-review-mode': isMatrixQuestion && reviewMode,
+        }"
     >
         <div class="uikit-question-summary__summary-title">
             {{ isQuestionCorrect ? 'Correct': isUnanswered ? 'Unanswered' : 'Incorrect' }}
@@ -37,6 +40,10 @@
             v-breakpoint:questionEl="breakpoints"
             ref="uikit-question-summary__summary-dropdown-explanation"
             class="uikit-question-summary__summary-dropdown-explanation"
+            :class="{
+                'uikit-question-summary__summary-dropdown-explanation--matrix-question-review-mode': 
+                    isMatrixQuestion && reviewMode,
+            }"
         >
             <slot name="explanationTopExperiment"></slot>
             <div
@@ -201,6 +208,10 @@ export default class Summary extends Vue {
         box-shadow: 0 1px 4px 0 rgba($jet, 0.3);
     }
 
+    &--matrix-question-review-mode#{&}--tablet-landscape {
+        display: inline-block;
+    }
+
     &--tablet-portrait {
         display: inline-block;
     }
@@ -290,6 +301,10 @@ export default class Summary extends Vue {
     &__summary-dropdown-explanation {
         display: none;
 
+        &--matrix-question-review-mode#{&}--tablet-landscape {
+            display: inline-block;
+        }
+
         &--tablet-portrait {
             display: block;
         }

package/lib/components/Quiz/Question.vue

@@ -31,6 +31,7 @@
                 'uikit-question__main--show-side': (showExplanation && !showPaywall) || showPassageAndImage,
                 'uikit-question__main--unanswered': showAnswers && !isMCR && isUnanswered && !isCorrect,
                 'uikit-question__main--mcr': isMCR,
+                'uikit-question__main--matrix-question-review-mode': isMatrixQuestion && reviewMode,
             }"
         >
             <slot name="context">
@@ -394,8 +395,8 @@
                         Check Answer
                     </PocketButton>
                     <PocketButton
-                        v-if="!showMatrixAnswers && !hideAnswer && isMatrixQuestion && allMatrixRowsAreAnswered"
-                        :disabled="!selectedMatrixChoices.length"
+                        v-else-if="isMatrixQuestion && !showMatrixAnswers && !hideAnswer"
+                        :disabled="!allMatrixRowsAreAnswered"
                         :is-dark-mode="isDarkMode"
                         @click="clickCheckMatrixAnswer"
                     >
@@ -432,6 +433,7 @@
             class="uikit-question__right-side"
             :class="{
                 'uikit-question__right-side--explanation': showExplanation && !showPaywall,
+                'uikit-question__right-side--matrix-question-review-mode': isMatrixQuestion && reviewMode,
             }"
         >
             <PassageAndImage
@@ -1561,6 +1563,11 @@ export default class Question extends Vue {
             overflow-y: visible;
             padding: 0 17px;
         }
+
+        &--matrix-question-review-mode#{&}--tablet-landscape:not(&--tablet-portrait) {
+            width: 100%;
+            padding-right: 0;
+        }
     }
 
     &__right-side {
@@ -1576,6 +1583,10 @@ export default class Question extends Vue {
             display: none;
         }
 
+        &--matrix-question-review-mode#{&}--tablet-landscape {
+            display: none;
+        }
+
         &--explanation {
             padding-top: 58px;
             padding-right: 11px;

package/package.json

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