@pocketprep/ui-kit 3.4.75 → 3.4.77

package/lib/components/Forms/RadioButton.vue

@@ -28,6 +28,8 @@ defineProps<{
 .uikit-radio-btn {
     width: 18px;
     height: 18px;
+    min-height: 18px;
+    min-width: 18px;
     border: 1px solid $steel;
     background: $white;
     border-radius: 18px;

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

@@ -406,16 +406,10 @@ export default class MatrixChoicesContainer extends Vue {
         return matrixChoiceKeys
     }
 
-    @Emit('emitAnsweredMatrixRowIndex')
-    emitAnsweredMatrixRowIndex (answeredRowIndexes: number[]) {
-        return answeredRowIndexes
-    }
-
     @Watch('matrixCheckboxGrid', { deep: true })
     matrixCheckboxGridChange () {
         if (this.matrixChoiceLayout && this.matrixCheckboxGrid) {
             const selectedCheckboxChoices: TMatrixChoiceKey[] = []
-            const answeredCheckBoxRowIndexes: number[] = []
 
             this.matrixCheckboxGrid.forEach((row, rowIndex) => {
                 row.forEach((choice, choiceIndex) => {
@@ -426,14 +420,10 @@ export default class MatrixChoicesContainer extends Vue {
                     ) {
                         const choiceKey = this.matrixChoiceLayout[rowIndex][choiceIndex] as TMatrixChoiceKey
                         selectedCheckboxChoices.push(choiceKey)
-                        if (!answeredCheckBoxRowIndexes.some(index => index === rowIndex)) {
-                            answeredCheckBoxRowIndexes.push(rowIndex)
-                        }
                     }
                 })
             })  
             this.emitSelectedMatrixChoice(selectedCheckboxChoices)
-            this.emitAnsweredMatrixRowIndex(answeredCheckBoxRowIndexes)
         }
     }
 
@@ -441,16 +431,11 @@ export default class MatrixChoicesContainer extends Vue {
     matrixRadioGridChange () {
         if (this.matrixChoiceLayout && this.matrixRadioGrid) {
             const selectedRadioButtonChoices: TMatrixChoiceKey[] = []
-            const answeredRadioBtnRowIndexes: number[] = []
 
             this.matrixRadioGrid.forEach((row, rowIndex) => {
                 const choiceKey = row.value
                 if (choiceKey && this.matrixChoiceLayout[rowIndex]) {
                     selectedRadioButtonChoices.push(choiceKey)
-                    if (!answeredRadioBtnRowIndexes.some(index => index === rowIndex)) {
-                        answeredRadioBtnRowIndexes.push(rowIndex)
-                    }
-                    this.emitAnsweredMatrixRowIndex(answeredRadioBtnRowIndexes)
                 }
             }) 
             this.emitSelectedMatrixChoice(selectedRadioButtonChoices)

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

@@ -475,16 +475,11 @@ export default class MobileMatrixChoicesContainer extends Vue {
         return matrixChoiceKeys
     }
 
-    @Emit('emitAnsweredMatrixRowIndex')
-    emitAnsweredMatrixRowIndex (answeredRowIndexes: number[]) {
-        return answeredRowIndexes
-    }
 
     @Watch('matrixCheckboxGrid', { deep: true })
     matrixCheckboxGridChange () {
         if (this.matrixChoiceLayout && this.matrixCheckboxGrid && (!this.reviewMode || !this.showMatrixAnswers)) {
             const selectedCheckboxChoices: TMatrixChoiceKey[] = []
-            const answeredCheckBoxRowIndexes: number[] = []
 
             this.matrixCheckboxGrid.forEach((row, rowIndex) => {
                 row.forEach((choice, choiceIndex) => {
@@ -495,15 +490,11 @@ export default class MobileMatrixChoicesContainer extends Vue {
                     ) {
                         const choiceKey = this.matrixChoiceLayout[rowIndex][choiceIndex] as TMatrixChoiceKey
                         selectedCheckboxChoices.push(choiceKey)
-                        if (!answeredCheckBoxRowIndexes.some(index => index === rowIndex)) {
-                            answeredCheckBoxRowIndexes.push(rowIndex)
-                        }
                     }
                 })
             })
 
             this.emitSelectedMatrixChoice(selectedCheckboxChoices)
-            this.emitAnsweredMatrixRowIndex(answeredCheckBoxRowIndexes)
         }
     }
 
@@ -511,19 +502,14 @@ export default class MobileMatrixChoicesContainer extends Vue {
     matrixRadioGridChange () {
         if (this.matrixChoiceLayout && this.matrixRadioGrid && (!this.reviewMode || !this.showMatrixAnswers)) {
             const selectedRadioButtonChoices: TMatrixChoiceKey[] = []
-            const answeredRadioBtnRowIndexes: number[] = []
 
-            this.matrixRadioGrid.forEach((row, index) => {
+            this.matrixRadioGrid.forEach((row) => {
                 if (row.value) {
                     selectedRadioButtonChoices.push(row.value)
-                    if (!answeredRadioBtnRowIndexes.some(rowIndex => rowIndex === index)) {
-                        answeredRadioBtnRowIndexes.push(index)
-                    }
                 }
             })
 
             this.emitSelectedMatrixChoice(selectedRadioButtonChoices)
-            this.emitAnsweredMatrixRowIndex(answeredRadioBtnRowIndexes)
         }
     }
 

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

@@ -102,9 +102,9 @@ const stripText = (string?: string) => {
 
     &__option {
         display: flex;
-        align-items: center;
-        padding-left: 15px;
-        min-height: 47px;
+        align-items: flex-start;
+        align-self: stretch;
+        padding: 11px 15px 12px 15px;
         max-width: 325px;
         border: 0.5px solid rgba($pewter, 0.85);
         border-top: none;

package/lib/components/Quiz/Question.vue

@@ -258,7 +258,6 @@
                     :breakpoints="breakpoints"
                     :is-teach-group-review="isTeachGroupReview"
                     @emitSelectedMatrixChoice="selectMatrixChoice"
-                    @emitAnsweredMatrixRowIndex="answeredMatrixRowIndex"
                 > 
                     <template #motivationalMoment="{
                         isCorrect,
@@ -295,7 +294,6 @@
                     :question-el="questionEl"
                     :breakpoints="breakpoints"
                     @emitSelectedMatrixChoice="selectMatrixChoice"
-                    @emitAnsweredMatrixRowIndex="answeredMatrixRowIndex"
                 > 
                     <template
                         #motivationalMoment="{
@@ -399,7 +397,7 @@
                     </PocketButton>
                     <PocketButton
                         v-else-if="isMatrixQuestion && !showMatrixAnswers && !hideAnswer"
-                        :disabled="!allMatrixRowsAreAnswered"
+                        :disabled="!isMatrixQuestionAnswered"
                         :is-dark-mode="isDarkMode"
                         @click="clickCheckMatrixAnswer"
                     >
@@ -579,8 +577,6 @@ export default class Question extends Vue {
     choiceStrikes: TChoiceKey[] = []
     selectedChoices: TChoiceKey[] = []
     selectedMatrixChoices: TMatrixChoiceKey[] = []
-    answeredMatrixRowIndexes: number[] = []
-    allMatrixRowsAreAnswered = false
     showAnswers = false
     showMatrixAnswers = false
     showExplanation = false
@@ -828,11 +824,33 @@ export default class Question extends Vue {
         return scores
     }
 
+    get isMatrixQuestionAnswered () {
+        // Matrix questions are answered if each row has a selected choice
+        if (this.isMatrixQuestion) {
+            const answeredRowNums = this.selectedMatrixChoices.map(choice => {
+                if (choice as TMatrixChoiceKey) {
+                    return Number(choice.split('_')[0]?.slice(1))
+                }
+                return
+            })
+
+            const matrixRows = this.question.matrixChoiceLayout || []
+            const isEveryRowAnswered = matrixRows.every((row, index) => {
+                const rowNum = index + 1
+                const hasSelectedChoiceForRow = answeredRowNums.includes(rowNum)
+                return hasSelectedChoiceForRow
+            })
+            return isEveryRowAnswered
+        }
+        return false
+    }
+
     get isUnanswered () {
         if (!this.isMatrixQuestion) {
             return this.selectedChoices.length === 0
         }
-        return (this.selectedMatrixChoices.length === 0 || !this.allMatrixRowsAreAnswered)
+
+        return !this.isMatrixQuestionAnswered
     }
 
     get prompt () {
@@ -1191,14 +1209,6 @@ export default class Question extends Vue {
         this.selectedMatrixChoices = matrixChoiceKeys
     }
 
-    answeredMatrixRowIndex (answeredRowIndexes: number[]) {
-        if (this.showMatrixAnswers) {
-            return
-        }
-        this.answeredMatrixRowIndexes = answeredRowIndexes
-        this.allMatrixRowsAreAnswered = this.answeredMatrixRowIndexes.length === this.question.matrixLabels?.rows.length
-    }
-
     togglePassageImageLongAlt () {
         this.showPassageImageLongAlt = !this.showPassageImageLongAlt
 

package/package.json

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