@pocketprep/ui-kit 3.4.63 → 3.4.65

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

@@ -40,7 +40,8 @@
                     (showMatrixAnswers || reviewMode) && isMatrixQuestionCorrect,
                 'uikit-question-matrix-choices-container__choices-container--incorrect': 
                     (showMatrixAnswers || reviewMode) && !isMatrixQuestionCorrect,
-                
+                'uikit-question-matrix-choices-container__choices-container--teach-group-review': 
+                    (showMatrixAnswers || reviewMode) && isTeachGroupReview,
             }"
             v-dark="isDarkMode"
             v-breakpoint:questionEl="breakpoints"
@@ -202,6 +203,7 @@ export default class MatrixChoicesContainer extends Vue {
     @Prop() matrixAnswerKeys!: TMatrixChoiceKey[]
     @Prop() matrixDistractorKeys!: TMatrixChoiceKey[]
     @Prop() selectedMatrixChoices!: TMatrixChoiceKey[]
+    @Prop({ default: false }) isTeachGroupReview!: boolean
 
     matrixCheckboxGrid: boolean[][] | undefined = undefined
     matrixRadioGrid: IRadioOptions[] | undefined = undefined
@@ -556,6 +558,16 @@ export default class MatrixChoicesContainer extends Vue {
         &--mobile {
             display: none;
         }
+
+        &--teach-group-review {
+            &::after {
+                display: none;
+            }
+
+            &--dark::after {
+                display: none;
+            }
+        }
     }
 
     &__choices {

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

@@ -396,6 +396,19 @@ export default class MobileMatrixChoicesContainer extends Vue {
 
     convertSelectedMatrixChoiceToCheckboxGrid () {
         const checkboxGrid = this.defaultCheckboxGrid
+
+        // Reset this.selectedColumnHeaders string[][] in case in headers are still in the arrays
+        // Let selectedMatrixChoices set those columns
+        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
@@ -417,6 +430,9 @@ export default class MobileMatrixChoicesContainer extends Vue {
             const columnIndex = Number(choice.split('_').pop()) - 1
             if (this.selectedColumnHeaders[rowIndex] && this.question.matrixLabels?.columns[columnIndex]) {
                 const columnHeader = this.question.matrixLabels?.columns[columnIndex]
+                // In case a column header is still in selectedColumnHeaders, remove it first and let
+                // selectedMatrixChoices add selected column header based on selected choices
+                this.selectedColumnHeaders[rowIndex].pop()
                 this.selectedColumnHeaders[rowIndex].push(columnHeader)
             }
             if (radioBtnGrid && radioBtnGrid[rowIndex]) {
@@ -429,6 +445,18 @@ export default class MobileMatrixChoicesContainer extends Vue {
     checkboxRowClicked (rowIndex: number, columnIndex: number) {
         if (this.matrixCheckboxGrid && this.matrixCheckboxGrid[rowIndex]) {
             this.matrixCheckboxGrid[rowIndex][columnIndex] = !this.matrixCheckboxGrid[rowIndex][columnIndex]
+            const columnHeader = this.question.matrixLabels?.columns[columnIndex]
+
+            if (this.selectedColumnHeaders && this.selectedColumnHeaders[rowIndex] && columnHeader) {
+                if (this.selectedColumnHeaders[rowIndex].includes(columnHeader)) {
+                    const columnHeaderIndex = this.selectedColumnHeaders[rowIndex].indexOf(columnHeader)
+                    if (columnHeaderIndex !== -1) {
+                        this.selectedColumnHeaders[rowIndex].splice(columnHeaderIndex, 1)
+                    }
+                } else {
+                    this.selectedColumnHeaders[rowIndex].push(columnHeader)
+                }
+            }
         }
     }
 
@@ -469,29 +497,6 @@ export default class MobileMatrixChoicesContainer extends Vue {
         }
     }
 
-    @Watch('matrixCheckboxGrid', { deep: true })
-    addRemoveCheckboxColumnHeaders () {
-        if (this.matrixCheckboxGrid) {
-            const selectedCheckboxColumnLabels: string[][] = []
-            this.matrixCheckboxGrid.forEach((row, rowIndex) => {
-                selectedCheckboxColumnLabels.push([])
-                row.forEach((choice, choiceIndex) => {
-                    if (
-                        choice 
-                        && this.question.matrixLabels?.columns 
-                        && this.question.matrixLabels?.columns[choiceIndex]
-                    ) {
-                        const columnLabel = this.question.matrixLabels?.columns[choiceIndex]
-                        if (selectedCheckboxColumnLabels[rowIndex]) {
-                            selectedCheckboxColumnLabels[rowIndex].push(columnLabel)
-                        }
-                    }
-                })
-                this.selectedColumnHeaders = selectedCheckboxColumnLabels
-            })
-        }
-    }
-
     @Watch('matrixRadioGrid', { deep: true })
     matrixRadioGridChange () {
         if (this.matrixChoiceLayout && this.matrixRadioGrid && (!this.reviewMode || !this.showMatrixAnswers)) {

package/lib/components/Quiz/Question.vue

@@ -255,6 +255,7 @@
                     :is-dark-mode="isDarkMode"
                     :question-el="questionEl"
                     :breakpoints="breakpoints"
+                    :is-teach-group-review="isTeachGroupReview"
                     @emitSelectedMatrixChoice="selectMatrixChoice"
                     @emitAnsweredMatrixRowIndex="answeredMatrixRowIndex"
                 > 
@@ -570,6 +571,7 @@ export default class Question extends Vue {
     @Prop({ default: false }) showPaywall!: boolean
     @Prop({ default: false }) hideReferences!: boolean
     @Prop({ default: false }) isTeachReview!: boolean
+    @Prop({ default: false }) isTeachGroupReview!: boolean
     @Prop({ default: [] }) keywordDefinitions!: { keyword: string; definition: string }[]
 
     hoverChoiceKey: TChoiceKey | null = null

package/package.json

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