@pocketprep/ui-kit 3.4.74 → 3.4.76

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

@@ -21,21 +21,23 @@
                 }"
                 v-html="matrixColumnLabelsForRows"
             />
-            <div
-                class="uikit-question-matrix-choices-container__column-header"
-                :class="{
-                    'uikit-question-matrix-choices-container__column-header--two-columns': 
-                        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"
-                :key="index"
-                v-dark="isDarkMode"
-                v-breakpoint:questionEl="breakpoints"
-                v-html="columnLabel"
-            />
+            <div class="uikit-question-matrix-choices-container__column-headers">
+                <div
+                    class="uikit-question-matrix-choices-container__column-header"
+                    :class="{
+                        'uikit-question-matrix-choices-container__column-header--two-columns': 
+                            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"
+                    :key="index"
+                    v-dark="isDarkMode"
+                    v-breakpoint:questionEl="breakpoints"
+                    v-html="columnLabel"
+                />
+            </div>
         </div>
         <div 
             class="uikit-question-matrix-choices-container__choices-container"
@@ -404,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) => {
@@ -424,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)
         }
     }
 
@@ -439,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)
@@ -477,6 +464,7 @@ export default class MatrixChoicesContainer extends Vue {
 
 .uikit-question-matrix-choices-container {
     width: 100%;
+
     &__columns {
         display: flex;
         padding: 0px 1px 0px 14px;
@@ -516,6 +504,12 @@ export default class MatrixChoicesContainer extends Vue {
         }
     }
 
+    &__column-headers {
+        display: flex;
+        align-items: flex-end;
+        min-width: 214px;
+    }
+
     &__column-header {
         width: 56px;
         hyphens: auto;
@@ -626,7 +620,6 @@ export default class MatrixChoicesContainer extends Vue {
 
     &__choice-text {
         width: 279px;
-        min-width: 279px;
         min-height: fit-content;
         color: $brand-black;
         font-size: 16.5px;
@@ -669,6 +662,7 @@ export default class MatrixChoicesContainer extends Vue {
 
     &__checkboxes {
         display: flex;
+        min-width: 201px;
 
         &--three-columns {
             margin-left: -8px;
@@ -699,6 +693,11 @@ export default class MatrixChoicesContainer extends Vue {
             &:not(&:last-child) {
                 margin-right: 4px;
             }
+
+            &:last-child {
+                width: 40px;
+                min-width: 40px;
+            }
         }
 
         .uikit-checkbox--disabled {
@@ -753,6 +752,8 @@ export default class MatrixChoicesContainer extends Vue {
     }
 
     &__radio-btns {
+        min-width: 201px;
+        
         &--three-columns {
             position: relative;
             left: 6px;

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.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.74",
+  "version": "3.4.76",
   "description": "Pocket Prep UI Kit",
   "author": "pocketprep",
   "scripts": {