@pocketprep/ui-kit 3.4.90 → 3.5.1

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

@@ -13,14 +13,14 @@
                 
             }"
             v-dark="isDarkMode"
-            v-breakpoint:questionEl="breakpoints"
+            v-breakpoint="breakpointsWithEl"
         >
             <div 
                 class="uikit-question-mobile-matrix-choices-container__row-container"
                 v-for="(rowLabel, rowIndex) in matrixRowLabels"
                 :key="rowIndex"
                 v-dark="isDarkMode"
-                v-breakpoint:questionEl="breakpoints"
+                v-breakpoint="breakpointsWithEl"
             >
                 <div
                     class="uikit-question-mobile-matrix-choices-container__row"
@@ -29,7 +29,7 @@
                             expandedRowNumbers.includes(rowIndex),
                     }"
                     v-dark="isDarkMode"
-                    v-breakpoint:questionEl="breakpoints"
+                    v-breakpoint="breakpointsWithEl"
                     @click.stop="toggleChoiceDropdown(rowIndex)"
                 >
                     <Icon
@@ -71,20 +71,13 @@
                             v-for="(colHeader, colHeaderIndex) in selectedColumnHeaders"
                             :key="colHeaderIndex"
                         >
-                            <template v-if="
-                                selectedColumnHeaders && 
-                                    selectedColumnHeaders[rowIndex] && 
-                                    selectedColumnHeaders[rowIndex][colHeaderIndex]">
+                            <template v-if="doesSelectedColumnHeaderExist(rowIndex, colHeaderIndex)">
                                 <div
                                     class="uikit-question-mobile-matrix-choices-container__selected-choice-labels"
                                     v-dark="isDarkMode"
-                                    v-breakpoint:questionEl="breakpoints"
+                                    v-breakpoint="breakpointsWithEl"
                                 >
-                                    {{ selectedColumnHeaders[rowIndex][colHeaderIndex] === 
-                                        selectedColumnHeaders[rowIndex][selectedColumnHeaders[rowIndex].length - 1] ?
-                                            stripHtmlTags(selectedColumnHeaders[rowIndex][colHeaderIndex]) : 
-                                            `${stripHtmlTags(selectedColumnHeaders[rowIndex][colHeaderIndex])},`
-                                    }}
+                                    {{ getSelectedChoiceLabels(rowIndex, colHeaderIndex) }}
                                 </div>
                             </template>
                         </div>
@@ -117,7 +110,7 @@
                         />
                         <Checkbox
                             v-else
-                            :model-value="matrixCheckboxGrid[rowIndex][columnIndex]"
+                            :model-value="matrixCheckboxGrid[rowIndex]?.[columnIndex]"
                             :is-dark-mode="isDarkMode"
                             :disabled="showMatrixAnswers || reviewMode"
                             :checkbox-styles="checkboxContainerStyling(rowIndex, columnIndex)"
@@ -128,8 +121,8 @@
                             :class="{
                                 'uikit-question-mobile-matrix-choices-container__checkbox-label--distractor':
                                     (showMatrixAnswers || reviewMode) &&
-                                    matrixChoiceLayout[rowIndex] &&
-                                    matrixChoiceLayout[rowIndex][columnIndex]?.startsWith('d'),
+                                    matrixChoiceLayout?.[rowIndex] &&
+                                    matrixChoiceLayout?.[rowIndex]?.[columnIndex]?.startsWith('d'),
                             }"
                         >
                             {{ stripHtmlTags(column) }}
@@ -151,7 +144,6 @@
                         :matrix-answer-keys="matrixAnswerKeys"
                         :is-dark-mode="isDarkMode"
                         :question-el="questionEl"
-                        :breakpoints="breakpoints"
                         :disabled="false"
                         @update:modelValue="updateRadioRowSelection(rowIndex, $event)"
                     />
@@ -161,394 +153,397 @@
     </div>
 </template>
 
-<script lang="ts">
-import { Component, Vue, Prop, Emit, Watch } from 'vue-facing-decorator'
+<script setup lang="ts">
 import Icon from '../../Icons/Icon.vue'
-import PocketButton from '../../Buttons/Button.vue'
 import Checkbox from '../../Forms/Checkbox.vue'
 import MobileMatrixRadioGroup from './MobileMatrixRadioGroup.vue'
-import { dark, breakpoint } from '../../../directives'
-import type { TBreakPointsObject, IRadioOptions, TMatrixChoiceKey  } from './../question'
-import type { Study } from '@pocketprep/types'
+import { dark as vDark, breakpoint as vBreakpoint } from '../../../directives'
+import { useQuestionContext } from './composables'
+import type { IRadioOptions, TMatrixChoiceKey  } from './../question'
 import BrandColors from '../../../pocketprep-export.module.scss'
+import { computed, onMounted, ref, watch } from 'vue'
+
+const emit = defineEmits<{
+    'emitSelectedMatrixChoice': [matrixChoiceKeys: TMatrixChoiceKey[]]
+}>()
+
+const {
+    // questionEl is used by the breakpoint directive
+    questionEl,
+    question,
+    isMatrixQuestionCorrect,
+    reviewMode,
+    isDarkMode,
+    breakpointsWithEl,
+    showMatrixAnswers,
+    matrixAnswerKeys,
+    selectedMatrixChoices,
+} = useQuestionContext()
+
+const matrixCheckboxGrid = ref<boolean[][] | undefined>(undefined)
+const matrixRadioGrid = ref<IRadioOptions[] | undefined>(undefined)
+const expandedRowNumbers = ref<number[]>([])
+const selectedColumnHeaders = ref<string[][]>([])
+const brandColors = BrandColors
+
+const stripHtmlTags = (string?: string) => {
+    if (string) {
+        const div = document.createElement('div')
+        div.innerHTML = string
+        return div.textContent || ''
+    }
+    return ''
+}
+
+const matrixChoiceLayout = computed(() => {
+    return question.value.matrixChoiceLayout
+})
 
-@Component({
-    components: {
-        Icon,
-        Checkbox,
-        PocketButton,
-        MobileMatrixRadioGroup,
-    },
-    directives: {
-        dark,
-        breakpoint,
-    },
+const defaultCheckboxGrid = computed(() => {
+    return matrixChoiceLayout.value?.map(row => {
+        const choiceRow = row.map(() => false)
+        return choiceRow
+    })
 })
-export default class MobileMatrixChoicesContainer extends Vue {
-    @Prop({ default: false }) reviewMode!: boolean
-    @Prop({ default: false }) isDarkMode!: boolean
-    @Prop({ default: null }) questionEl!: Element | null
-    @Prop({ default: {
-        'mobile': 767,
-        'tablet-portrait': 1023,
-        'tablet-landscape': 1439,
-    } }) breakpoints!: TBreakPointsObject
-    @Prop() question!: Study.Class.QuestionJSON
-    @Prop() matrixChoiceLayout!: string[][]
-    @Prop({ default: false }) showMatrixAnswers!: boolean
-    @Prop({ default: false }) isUnanswered!: boolean
-    @Prop({ default: false }) isMatrixQuestionCorrect!: boolean
-    @Prop() matrixAnswerKeys!: TMatrixChoiceKey[]
-    @Prop() matrixDistractorKeys!: TMatrixChoiceKey[]
-    @Prop() selectedMatrixChoices!: TMatrixChoiceKey[]
-    @Prop() matrixChoices!: TMatrixChoiceKey[]
-
-    matrixCheckboxGrid: boolean[][] | undefined = undefined
-    matrixRadioGrid: IRadioOptions[] | undefined = undefined
-    expandedRowNumbers: number[] = []
-    selectedColumnHeaders: string[][] = []
-    brandColors = BrandColors
-
-    stripHtmlTags (string?: string) {
-        if (string) {
-            const div = document.createElement('div')
-            div.innerHTML = string
-            return div.textContent || ''
+
+const defaultRadioButtonGrid = computed(() => {
+    return matrixChoiceLayout.value?.map(row => {
+        return {
+            choices: row as TMatrixChoiceKey[],
+            value: null as TMatrixChoiceKey | null,
         }
-        return ''
-    }
+    })
+})
 
-    get defaultCheckboxGrid () {
-        return this.matrixChoiceLayout?.map(row => {
-            const choiceRow = row.map(() => false)
-            return choiceRow
-        })
-    }
+const matrixRowLabels = computed(() => {
+    return question.value.matrixLabels?.rows
+})
 
-    get defaultRadioButtonGrid () {
-        return this.matrixChoiceLayout?.map(row => {
-            return {
-                choices: row as TMatrixChoiceKey[],
-                value: null as TMatrixChoiceKey | null,
-            }
-        })
-    }
+const matrixColumnLabels = computed(() => {
+    return question.value.matrixLabels?.columns
+})
 
-    get matrixRowLabels () {
-        return this.question.matrixLabels?.rows
+onMounted(() => {
+    if (question.value.type === 'Matrix Checkbox') {
+        matrixCheckboxGrid.value = convertSelectedMatrixChoiceToCheckboxGrid()
     }
 
-    get matrixColumnLabels () {
-        return this.question.matrixLabels?.columns
+    if (question.value.type === 'Matrix Radio Button') {
+        matrixRadioGrid.value = convertSelectedMatrixChoiceToRadioBtnGrid()
     }
 
-    mounted () {
-        if (this.question.type === 'Matrix Checkbox') {
-            this.matrixCheckboxGrid = this.convertSelectedMatrixChoiceToCheckboxGrid()
-        }
+    question.value.matrixChoiceLayout?.forEach(() => {
+        selectedColumnHeaders.value.push([])
+    })
+})
 
-        if (this.question.type === 'Matrix Radio Button') {
-            this.matrixRadioGrid = this.convertSelectedMatrixChoiceToRadioBtnGrid()
-        }
+const toggleChoiceDropdown = (rowIndex: number) => {
+    const includedRowNumberIndex = expandedRowNumbers.value.findIndex(row => row === rowIndex)
+    if (includedRowNumberIndex === -1) {
+        expandedRowNumbers.value.push(rowIndex)
+    } else {
+        expandedRowNumbers.value.splice(includedRowNumberIndex, 1)
+    }
+}
 
-        this.question.matrixChoiceLayout?.forEach(() => {
-            this.selectedColumnHeaders.push([])
+const selectedChoiceKey = (rowIndex: number, columnIndex: number) => {
+    const row = rowIndex += 1
+    const column = columnIndex += 1
+    if (selectedMatrixChoices.value.length && matrixAnswerKeys.value.length) {
+        const matrixSelectedChoiceKey = selectedMatrixChoices.value.find((choice) => {
+            const substring = choice.substring(1)
+            return substring === `${row}_${column}`
         })
-    }
 
-    toggleChoiceDropdown (rowIndex: number) {
-        const includedRowNumberIndex = this.expandedRowNumbers.findIndex(row => row === rowIndex)
-        if (includedRowNumberIndex === -1) {
-            this.expandedRowNumbers.push(rowIndex)
-        } else {
-            this.expandedRowNumbers.splice(includedRowNumberIndex, 1)
-        }
+        return matrixSelectedChoiceKey
     }
+    return undefined
+}
 
-    selectedChoiceKey (rowIndex: number, columnIndex: number) {
-        const row = rowIndex += 1
-        const column = columnIndex += 1
-        if (this.selectedMatrixChoices.length && this.matrixAnswerKeys.length) {
-            const matrixSelectedChoiceKey = this.selectedMatrixChoices.find((choice) => {
-                const substring = choice.substring(1)
-                return substring === `${row}_${column}`
-            })
-
-            return matrixSelectedChoiceKey
-        }
-        return undefined
-    }
+const getRadioRowSelection = (rowIndex: number) => {
+    return matrixRadioGrid.value?.[rowIndex]?.value
+}
 
-    getRadioRowSelection (rowIndex: number) {
-        return this.matrixRadioGrid?.[rowIndex]?.value
-    }
+const getRadioRowChoices = (rowIndex: number) => {
+    const choices = matrixRadioGrid.value?.[rowIndex]?.choices
+    return choices
+}
 
-    getRadioRowChoices (rowIndex: number) {
-        const choices = this.matrixRadioGrid?.[rowIndex]?.choices
-        return choices
-    }
+const updateRadioRowSelection = (rowIndex: number, choiceKey: TMatrixChoiceKey | null) => {
+    const row = matrixRadioGrid.value?.[rowIndex]
+    if (row) {
+        row.value = choiceKey
 
-    updateRadioRowSelection (rowIndex: number, choiceKey: TMatrixChoiceKey) {
-        const row = this.matrixRadioGrid?.[rowIndex]
-        if (row) {
-            row.value = choiceKey
-
-            // update row header label
-            const choiceKeyIndex = row.choices.findIndex(choice => choice === choiceKey)
-            const rowHeader = this.question.matrixLabels?.columns[choiceKeyIndex]
-            if (rowHeader) {
-                this.selectedColumnHeaders[rowIndex]?.pop()
-                this.selectedColumnHeaders[rowIndex]?.push(rowHeader)
-            }
+        // update row header label
+        const choiceKeyIndex = row.choices.findIndex(choice => choice === choiceKey)
+        const rowHeader = question.value.matrixLabels?.columns[choiceKeyIndex]
+        if (rowHeader) {
+            selectedColumnHeaders.value[rowIndex]?.pop()
+            selectedColumnHeaders.value[rowIndex]?.push(rowHeader)
         }
     }
+}
 
-    correctlySelectedChoice (rowIndex: number, columnIndex: number) {
-        if (this.selectedMatrixChoices && this.matrixAnswerKeys) {
-            const selectedChoice = this.selectedChoiceKey(rowIndex, columnIndex)
-            if (selectedChoice && selectedChoice.startsWith('a') && this.matrixAnswerKeys.includes(selectedChoice)) {
-                return true
-            }
+const correctlySelectedChoice = (rowIndex: number, columnIndex: number) => {
+    if (selectedMatrixChoices.value && matrixAnswerKeys.value) {
+        const selectedChoice = selectedChoiceKey(rowIndex, columnIndex)
+        if (selectedChoice && selectedChoice.startsWith('a') && matrixAnswerKeys.value.includes(selectedChoice)) {
+            return true
         }
-        return false
     }
+    return false
+}
 
-    incorrectlySelectedChoice (rowIndex: number, columnIndex: number) {
-        if (this.selectedMatrixChoices && this.matrixAnswerKeys) {
-            const selectedChoice = this.selectedChoiceKey(rowIndex, columnIndex)
-            if (selectedChoice && selectedChoice.startsWith('d')) {
-                return true
-            }
+const incorrectlySelectedChoice = (rowIndex: number, columnIndex: number) => {
+    if (selectedMatrixChoices.value && matrixAnswerKeys.value) {
+        const selectedChoice = selectedChoiceKey(rowIndex, columnIndex)
+        if (selectedChoice?.startsWith('d')) {
+            return true
         }
-        return false
-    }
-                        
-    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
     }
+    return false
+}
+                    
+const correctAnswerButNotSelected = (rowIndex: number, columnIndex: number) => {
+    const selectedChoice = selectedChoiceKey(rowIndex, columnIndex)
+    const answerKey = matrixAnswerKeys.value.find(choice => choice === `a${rowIndex + 1}_${columnIndex + 1}`)
+    return answerKey && !selectedChoice
+}
 
-    checkboxContainerStyling (rowIndex: number, columnIndex: number) {
-        const isReviewMode = this.showMatrixAnswers || this.reviewMode
-        const incorrectlySelectedChoice = this.incorrectlySelectedChoice(rowIndex, columnIndex)
+const checkboxContainerStyling = (rowIndex: number, columnIndex: number) => {
+    const isReviewMode = showMatrixAnswers.value || reviewMode.value
 
-        // check box is correctlySelected
-        if (isReviewMode && this.correctlySelectedChoice(rowIndex, columnIndex)) {
-            const borderColor = this.isDarkMode ? this.brandColors.jungleGreen : this.brandColors.cadaverous
-            return {
-                borderColor: `${borderColor} !important`,
-                background: `${borderColor} !important`,
-            }
+    // check box is correctlySelected
+    if (isReviewMode && correctlySelectedChoice(rowIndex, columnIndex)) {
+        const borderColor = isDarkMode.value ? brandColors.jungleGreen : brandColors.cadaverous
+        return {
+            borderColor: `${borderColor} !important`,
+            background: `${borderColor} !important`,
         }
+    }
 
-        if (isReviewMode && incorrectlySelectedChoice) {
-            return {
-                background: `${this.brandColors.steel} !important`,
-                border: `1px solid ${this.brandColors.steel} !important`,
-            }
+    if (isReviewMode && incorrectlySelectedChoice(rowIndex, columnIndex)) {
+        return {
+            background: `${brandColors.steel} !important`,
+            border: `1px solid ${brandColors.steel} !important`,
         }
+    }
 
-        if (isReviewMode && this.correctAnswerButNotSelected(rowIndex, columnIndex)) {
-            return {
-                background: 'transparent !important',
-                border: `1px solid ${this.brandColors.slate} !important`,
-            }
+    if (isReviewMode && correctAnswerButNotSelected(rowIndex, columnIndex)) {
+        return {
+            background: 'transparent !important',
+            border: `1px solid ${brandColors.slate} !important`,
         }
     }
+}
 
-    checkboxCheckStyling (rowIndex: number, columnIndex: number) {
-        const isReviewMode = this.showMatrixAnswers || this.reviewMode
-        if (isReviewMode && this.correctAnswerButNotSelected(rowIndex, columnIndex)) {
-            const color = this.isDarkMode ? this.brandColors.jungleGreen : this.brandColors.cadaverous
-            return {
-                color: `${color} !important`,
-            }
+const checkboxCheckStyling = (rowIndex: number, columnIndex: number) => {
+    const isReviewMode = showMatrixAnswers.value || reviewMode.value
+    if (isReviewMode && correctAnswerButNotSelected(rowIndex, columnIndex)) {
+        const color = isDarkMode.value ? brandColors.jungleGreen : brandColors.cadaverous
+        return {
+            color: `${color} !important`,
         }
     }
+}
 
-    correctRow (rowIndex: number) {
-        if (this.question?.matrixChoiceLayout && this.question?.matrixChoiceLayout[rowIndex]) {
-            if (
-                this.question?.type === 'Matrix Checkbox' && 
-                this.matrixCheckboxGrid &&
-                this.matrixCheckboxGrid[rowIndex]
-            ) {
-                const correctAnswerKeys = this.question?.matrixChoiceLayout[rowIndex].filter(choice => 
-                    choice.startsWith('a')
-                )
-                const selectedAnswerKeys = this.matrixCheckboxGrid[rowIndex].map((choice, choiceIndex) => {
-                    return this.selectedChoiceKey(rowIndex, choiceIndex)
-                })
-                const correctSelectedKeys = this.matrixCheckboxGrid[rowIndex].filter((choice, choiceIndex) => {
-                    const selectedChoice = this.selectedChoiceKey(rowIndex, choiceIndex)
-                    return selectedChoice?.startsWith('a')
-                })
-                return !selectedAnswerKeys.some(choice => choice?.startsWith('d')) && 
-                    (correctAnswerKeys.length === correctSelectedKeys.length)
-            }
+const correctRow = (rowIndex: number) => {
+    if (matrixChoiceLayout.value?.[rowIndex]) {
+        if (
+            question?.value.type === 'Matrix Checkbox' && 
+            matrixCheckboxGrid.value?.[rowIndex]
+        ) {
+            const correctAnswerKeys = matrixChoiceLayout.value[rowIndex]?.filter(choice => 
+                choice.startsWith('a')
+            )
+            const selectedAnswerKeys = matrixCheckboxGrid.value[rowIndex]?.map((choice, choiceIndex) => {
+                return selectedChoiceKey(rowIndex, choiceIndex)
+            })
+            const correctSelectedKeys = matrixCheckboxGrid.value[rowIndex]?.filter((choice, choiceIndex) => {
+                const selectedChoice = selectedChoiceKey(rowIndex, choiceIndex)
+                return selectedChoice?.startsWith('a')
+            })
+            return !selectedAnswerKeys?.some(choice => choice?.startsWith('d')) && 
+                (correctAnswerKeys?.length === correctSelectedKeys?.length)
+        }
 
-            if (
-                this.question?.type === 'Matrix Radio Button' && 
-                this.matrixRadioGrid &&
-                this.matrixRadioGrid[rowIndex]
-            ) {
-                const rowVal = this.matrixRadioGrid[rowIndex].value
-                if (rowVal) {
-                    return rowVal.startsWith('a')
-                }
-                return false
+        if (
+            question?.value.type === 'Matrix Radio Button' && 
+            matrixRadioGrid.value?.[rowIndex]
+        ) {
+            const rowVal = matrixRadioGrid.value[rowIndex]?.value
+            if (rowVal) {
+                return rowVal.startsWith('a')
             }
+            return false
         }
-        return false
     }
+    return false
+}
 
-    convertSelectedMatrixChoiceToCheckboxGrid () {
-        const checkboxGrid = this.defaultCheckboxGrid
+const convertSelectedMatrixChoiceToCheckboxGrid = () => {
+    const checkboxGrid = defaultCheckboxGrid.value
 
-        // 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([])
-            })
+    // Reset selectedColumnHeaders string[][] in case in headers are still in the arrays
+    // Let selectedMatrixChoices set those columns
+    const columnMatrixLabels = question.value.matrixLabels?.rows
+    const defaultSelectedColumnLabels: string[][] = []
+    if (columnMatrixLabels) {
+        columnMatrixLabels.forEach(() => {
+            defaultSelectedColumnLabels.push([])
+        })
 
-            this.selectedColumnHeaders = defaultSelectedColumnLabels
-        }
+        selectedColumnHeaders.value = defaultSelectedColumnLabels
+    }
 
-        this.selectedMatrixChoices.forEach(choice => {
-            const rowIndex = Number(choice.substring(1, choice.indexOf('_'))) - 1
-            const columnIndex = Number(choice.split('_').pop()) - 1
-            if (checkboxGrid && checkboxGrid[rowIndex]) {
-                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)
+    selectedMatrixChoices.value.forEach(choice => {
+        const rowIndex = Number(choice.substring(1, choice.indexOf('_'))) - 1
+        const columnIndex = Number(choice.split('_').pop()) - 1
+        const row = checkboxGrid?.[rowIndex]
+        if (row) {
+            row[columnIndex] = true
+            if (selectedColumnHeaders.value[rowIndex] && question.value.matrixLabels?.columns[columnIndex]) {
+                const columnHeader = question.value.matrixLabels?.columns[columnIndex]
+                if (columnHeader) {
+                    selectedColumnHeaders.value[rowIndex]?.push(columnHeader)
                 }
             }
-        })
-        return checkboxGrid
-    }
-
-    convertSelectedMatrixChoiceToRadioBtnGrid () {
-        const radioBtnGrid = this.defaultRadioButtonGrid
-
-        const columnMatrixLabels = this.question.matrixLabels?.rows
-        const defaultSelectedColumnLabels: string[][] = []
-        if (columnMatrixLabels) {
-            columnMatrixLabels.forEach(() => {
-                defaultSelectedColumnLabels.push([])
-            })
-
-            this.selectedColumnHeaders = defaultSelectedColumnLabels
         }
+    })
+    return checkboxGrid
+}
 
-        this.selectedMatrixChoices.forEach(choice => {
-            const rowIndex = Number(choice.substring(1, choice.indexOf('_'))) - 1
-            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]) {
-                radioBtnGrid[rowIndex].value = choice
-            }
+const convertSelectedMatrixChoiceToRadioBtnGrid = () => {
+    const radioBtnGrid = defaultRadioButtonGrid.value
+
+    const columnMatrixLabels = question.value.matrixLabels?.rows
+    const defaultSelectedColumnLabels: string[][] = []
+    if (columnMatrixLabels) {
+        columnMatrixLabels.forEach(() => {
+            defaultSelectedColumnLabels.push([])
         })
-        return radioBtnGrid
+
+        selectedColumnHeaders.value = defaultSelectedColumnLabels
     }
 
-    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]
+    selectedMatrixChoices.value.forEach(choice => {
+        const rowIndex = Number(choice.substring(1, choice.indexOf('_'))) - 1
+        const columnIndex = Number(choice.split('_').pop()) - 1
+        if (selectedColumnHeaders.value[rowIndex] && question.value.matrixLabels?.columns[columnIndex]) {
+            const columnHeader = question.value.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
+            if (columnHeader) {
+                selectedColumnHeaders.value[rowIndex]?.pop()
+                selectedColumnHeaders.value[rowIndex]?.push(columnHeader)
+            }
+        }
+        const radioBtnGridRow = radioBtnGrid?.[rowIndex]
+        if (radioBtnGridRow) {
+            radioBtnGridRow.value = choice
+        }
+    })
+    return radioBtnGrid
+}
 
-            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)
+const checkboxRowClicked = (rowIndex: number, columnIndex: number) => {
+    const matrixCheckboxGridRow = matrixCheckboxGrid.value?.[rowIndex]
+    if (matrixCheckboxGridRow) {
+        matrixCheckboxGridRow[columnIndex] = !matrixCheckboxGridRow[columnIndex]
+        const columnHeader = question.value.matrixLabels?.columns[columnIndex]
+
+        if (selectedColumnHeaders.value?.[rowIndex] && columnHeader) {
+            if (selectedColumnHeaders.value[rowIndex]?.includes(columnHeader)) {
+                const columnHeaderIndex = selectedColumnHeaders.value[rowIndex]?.indexOf(columnHeader)
+                if (columnHeaderIndex !== undefined && columnHeaderIndex !== -1) {
+                    selectedColumnHeaders.value[rowIndex]?.splice(columnHeaderIndex, 1)
                 }
+            } else {
+                selectedColumnHeaders.value[rowIndex]?.push(columnHeader)
             }
         }
     }
+}
+
+const doesSelectedColumnHeaderExist = (rowIndex: number, columnIndex: number) => {
+    return selectedColumnHeaders.value?.[rowIndex]?.[columnIndex] || false
+}
 
-    @Emit('emitSelectedMatrixChoice')
-    emitSelectedMatrixChoice (matrixChoiceKeys: TMatrixChoiceKey[]) {
-        return matrixChoiceKeys
+const getSelectedChoiceLabels = (rowIndex: number, columnIndex: number) => {
+    const columnHeadersInRow = selectedColumnHeaders.value?.[rowIndex]
+    if (!columnHeadersInRow) {
+        return
     }
+    const selectedColumnHeader = columnHeadersInRow[columnIndex]
+    const lastColumnHeader = columnHeadersInRow[columnHeadersInRow.length - 1]
+    if (!selectedColumnHeader) {
+        return ''
+    }
+
+    return selectedColumnHeader === lastColumnHeader
+        ? stripHtmlTags(selectedColumnHeader)
+        : `${stripHtmlTags(selectedColumnHeader)},`
+}
 
+const emitSelectedMatrixChoice = (matrixChoiceKeys: TMatrixChoiceKey[]) => {
+    emit('emitSelectedMatrixChoice', matrixChoiceKeys)
+}
 
-    @Watch('matrixCheckboxGrid', { deep: true })
-    matrixCheckboxGridChange () {
-        if (this.matrixChoiceLayout && this.matrixCheckboxGrid && (!this.reviewMode || !this.showMatrixAnswers)) {
-            const selectedCheckboxChoices: TMatrixChoiceKey[] = []
+watch(matrixCheckboxGrid, () => {
+    if (matrixChoiceLayout.value && matrixCheckboxGrid.value && (!reviewMode.value || !showMatrixAnswers.value)) {
+        const selectedCheckboxChoices: TMatrixChoiceKey[] = []
 
-            this.matrixCheckboxGrid.forEach((row, rowIndex) => {
-                row.forEach((choice, choiceIndex) => {
-                    if (
-                        choice && 
-                            this.matrixChoiceLayout[rowIndex] && 
-                            this.matrixChoiceLayout[rowIndex][choiceIndex]
-                    ) {
-                        const choiceKey = this.matrixChoiceLayout[rowIndex][choiceIndex] as TMatrixChoiceKey
+        matrixCheckboxGrid.value.forEach((row, rowIndex) => {
+            row.forEach((choice, choiceIndex) => {
+                if (choice && matrixChoiceLayout?.value?.[rowIndex]?.[choiceIndex]) {
+                    const choiceKey = matrixChoiceLayout.value?.[rowIndex]?.[choiceIndex] as TMatrixChoiceKey
+                    if (choiceKey) {
                         selectedCheckboxChoices.push(choiceKey)
                     }
-                })
+                }
             })
+        })
 
-            this.emitSelectedMatrixChoice(selectedCheckboxChoices)
-        }
+        emitSelectedMatrixChoice(selectedCheckboxChoices)
     }
+}, { deep: true })
 
-    @Watch('matrixRadioGrid', { deep: true })
-    matrixRadioGridChange () {
-        if (this.matrixChoiceLayout && this.matrixRadioGrid && (!this.reviewMode || !this.showMatrixAnswers)) {
-            const selectedRadioButtonChoices: TMatrixChoiceKey[] = []
+watch(matrixRadioGrid, () => {
+    if (matrixChoiceLayout.value && matrixRadioGrid.value && (!reviewMode.value || !showMatrixAnswers.value)) {
+        const selectedRadioButtonChoices: TMatrixChoiceKey[] = []
 
-            this.matrixRadioGrid.forEach((row) => {
-                if (row.value) {
-                    selectedRadioButtonChoices.push(row.value)
-                }
-            })
+        matrixRadioGrid.value.forEach((row) => {
+            if (row.value) {
+                selectedRadioButtonChoices.push(row.value)
+            }
+        })
 
-            this.emitSelectedMatrixChoice(selectedRadioButtonChoices)
-        }
+        emitSelectedMatrixChoice(selectedRadioButtonChoices)
     }
+}, { deep: true })
 
-    @Watch('showMatrixAnswers')
-    closeRows () {
-        if (this.showMatrixAnswers) {
-            this.expandedRowNumbers = []
-        }
+watch(showMatrixAnswers, () => {
+    if (showMatrixAnswers) {
+        expandedRowNumbers.value = []
     }
+})
 
-    @Watch('selectedMatrixChoices')
-    selectedMatrixChoicesChange () {
-        if ((this.reviewMode || this.showMatrixAnswers) && this.question.type === 'Matrix Checkbox') {
-            const selectedCheckboxGrid = this.convertSelectedMatrixChoiceToCheckboxGrid() 
-            this.matrixCheckboxGrid = selectedCheckboxGrid ? selectedCheckboxGrid : this.defaultCheckboxGrid
-        }
-
-        if ((this.reviewMode || this.showMatrixAnswers) && this.question.type === 'Matrix Radio Button') {
-            const selectedRadioBtnGrid = this.convertSelectedMatrixChoiceToRadioBtnGrid() 
-            this.matrixRadioGrid = selectedRadioBtnGrid
-        }
+watch(selectedMatrixChoices, () => {
+    if ((reviewMode.value || showMatrixAnswers.value) && question.value.type === 'Matrix Checkbox') {
+        const selectedCheckboxGrid = convertSelectedMatrixChoiceToCheckboxGrid() 
+        matrixCheckboxGrid.value = selectedCheckboxGrid ? selectedCheckboxGrid : defaultCheckboxGrid.value
     }
-}
 
+    if ((reviewMode.value || showMatrixAnswers.value) && question.value.type === 'Matrix Radio Button') {
+        const selectedRadioBtnGrid = convertSelectedMatrixChoiceToRadioBtnGrid() 
+        matrixRadioGrid.value = selectedRadioBtnGrid
+    }
+})
 </script>
 
 <style lang="scss">
-@import '../../../styles/colors';
-@import '../../../styles/breakpoints';
+@use '@/styles/breakpoints' as *;
+@use '@/styles/colors' as *;
 
 .uikit-question-mobile-matrix-choices-container {
     width: 100%;