@pocketprep/ui-kit 3.4.89 → 3.5.0

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

@@ -6,12 +6,12 @@
     >
         <div 
             v-dark="isDarkMode" 
-            v-breakpoint:questionEl="breakpoints" 
+            v-breakpoint="breakpointsWithEl" 
             class="uikit-question-matrix-choices-container__columns"
         >
             <div 
                 v-dark="isDarkMode"
-                v-breakpoint:questionEl="breakpoints"
+                v-breakpoint="breakpointsWithEl"
                 class="uikit-question-matrix-choices-container__column-row-header"
                 :class="{
                     'uikit-question-matrix-choices-container__column-row-header--two-columns': 
@@ -34,7 +34,7 @@
                     v-for="(columnLabel, index) in matrixColumnLabels"
                     :key="index"
                     v-dark="isDarkMode"
-                    v-breakpoint:questionEl="breakpoints"
+                    v-breakpoint="breakpointsWithEl"
                     v-html="columnLabel"
                 />
             </div>
@@ -50,7 +50,7 @@
                     (showMatrixAnswers || reviewMode) && isTeachGroupReview,
             }"
             v-dark="isDarkMode"
-            v-breakpoint:questionEl="breakpoints"
+            v-breakpoint="breakpointsWithEl"
         >
             <div 
                 class="uikit-question-matrix-choices-container__choices"
@@ -61,7 +61,7 @@
                         numberOfMatrixColumnLabels === 2,
                 }"
                 v-dark="isDarkMode"
-                v-breakpoint:questionEl="breakpoints"
+                v-breakpoint="breakpointsWithEl"
                 v-for="(rowLabel, rowIndex) in matrixRowLabels"
                 :key="rowIndex"
             >
@@ -76,7 +76,7 @@
                             question.type === 'Matrix Radio Button' && numberOfMatrixColumnLabels === 2,
                     }"
                     v-dark="isDarkMode"
-                    v-breakpoint:questionEl="breakpoints"
+                    v-breakpoint="breakpointsWithEl"
                     v-html="rowLabel"
                 />
                 <template 
@@ -103,7 +103,7 @@
                             v-for="(columnLabel, columnIndex) in matrixColumnLabels"
                             :key="columnIndex"
                             v-dark="isDarkMode"
-                            v-breakpoint:questionEl="breakpoints"
+                            v-breakpoint="breakpointsWithEl"
                         >
                             <Checkbox
                                 v-if="(showMatrixAnswers || reviewMode) &&
@@ -115,7 +115,7 @@
                                 :checkbox-styles="checkboxContainerStyling(rowIndex, columnIndex)"
                             />
                             <div 
-                                v-else 
+                                v-else
                                 class="uikit-question-matrix-choices-container__clickable-checkbox"
                                 :class="{
                                     'uikit-question-matrix-choices-container__clickable-checkbox--review': 
@@ -126,7 +126,7 @@
                                     checkboxClicked(rowIndex, columnIndex)"
                             >
                                 <Checkbox
-                                    :model-value="matrixCheckboxGrid[rowIndex][columnIndex]"
+                                    :model-value="matrixCheckboxGrid[rowIndex]?.[columnIndex] || false"
                                     :is-dark-mode="isDarkMode"
                                     :disabled="showMatrixAnswers || reviewMode"
                                     :checkbox-styles="checkboxContainerStyling(rowIndex, columnIndex)"
@@ -163,7 +163,6 @@
                         :is-dark-mode="isDarkMode"
                         :disabled="false"
                         :question-el="questionEl"
-                        :breakpoints="breakpoints"
                         @update:modelValue="updateRadioRowSelection(rowIndex, $event)"
                     >
                         <template #optionIcon="{ optionIcon }">
@@ -189,272 +188,260 @@
     </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 MatrixRadioGroup from './MatrixRadioGroup.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 { ref, computed, onMounted, watch } from 'vue'
+
+const emit = defineEmits<{
+    'emitSelectedMatrixChoice': [matrixChoiceKeys: TMatrixChoiceKey[]]
+}>()
+
+const {
+    // questionEl is used by the breakpoint directive
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    questionEl,
+    question,
+    isMatrixQuestionCorrect,
+    reviewMode,
+    isDarkMode,
+    breakpointsWithEl,
+    showMatrixAnswers,
+    matrixAnswerKeys,
+    selectedMatrixChoices,
+    isTeachGroupReview,
+} = useQuestionContext()
+
+const matrixCheckboxGrid = ref<boolean[][] | undefined>(undefined)
+const matrixRadioGrid = ref<IRadioOptions[] | undefined>(undefined)
+const brandColors = BrandColors
+
+const defaultCheckboxGrid = computed(() => {
+    return matrixChoiceLayout.value?.map(row => {
+        const choiceRow = row.map(() => false)
+        return choiceRow
+    })
+})
 
-@Component({
-    components: {
-        Icon,
-        Checkbox,
-        MatrixRadioGroup,
-        PocketButton,
-    },
-    directives: {
-        dark,
-        breakpoint,
-    },
+const defaultRadioButtonGrid = computed(() => {
+    return matrixChoiceLayout.value?.map(row => {
+        return {
+            choices: row as TMatrixChoiceKey[],
+            value: null as TMatrixChoiceKey | null,
+        }
+    })
 })
-export default class MatrixChoicesContainer 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({ default: false }) isTeachGroupReview!: boolean
-
-    matrixCheckboxGrid: boolean[][] | undefined = undefined
-    matrixRadioGrid: IRadioOptions[] | undefined = undefined
-    columnIndex = 0
-    rowIndex = 0
-    brandColors = BrandColors
-
-    get defaultCheckboxGrid () {
-        return this.matrixChoiceLayout?.map(row => {
-            const choiceRow = row.map(() => false)
-            return choiceRow
-        })
-    }
 
-    get defaultRadioButtonGrid () {
-        return this.matrixChoiceLayout?.map(row => {
-            return {
-                choices: row as TMatrixChoiceKey[],
-                value: null as TMatrixChoiceKey | null,
-            }
-        })
-    }
+const matrixChoiceLayout = computed(() => {
+    return question.value.matrixChoiceLayout
+})
 
-    get matrixRowLabels () {
-        return this.question.matrixLabels?.rows
-    }
+const matrixRowLabels = computed(() => {
+    return question.value.matrixLabels?.rows
+})
 
-    get matrixColumnLabels () {
-        return this.question.matrixLabels?.columns
-    }
+const matrixColumnLabels = computed(() => {
+    return question.value.matrixLabels?.columns
+})
 
-    get numberOfMatrixColumnLabels () {
-        return this.question.matrixLabels?.columns.length || 0
-    }
+const numberOfMatrixColumnLabels = computed(() => {
+    return question.value.matrixLabels?.columns.length || 0
+})
 
-    get matrixColumnLabelsForRows () {
-        return this.question.matrixLabels?.columnLabelForRows
+const matrixColumnLabelsForRows = computed(() => {
+    return question.value.matrixLabels?.columnLabelForRows
+})
+
+onMounted(() => {
+    if (question.value.type === 'Matrix Checkbox') {
+        matrixCheckboxGrid.value = convertSelectedMatrixChoiceToCheckboxGrid()
     }
+    
+    if (question.value.type === 'Matrix Radio Button') {
+        matrixRadioGrid.value = convertSelectedMatrixChoiceToRadioBtnGrid()
+    }
+})
 
-    mounted () {
-        if (this.question.type === 'Matrix Checkbox') {
-            this.matrixCheckboxGrid = this.convertSelectedMatrixChoiceToCheckboxGrid()
+const convertSelectedMatrixChoiceToCheckboxGrid = () => {
+    const checkboxGrid = defaultCheckboxGrid.value
+    selectedMatrixChoices.value.forEach(choice => {
+        const rowIndex = Number(choice.substring(1, choice.indexOf('_'))) - 1
+        const colIndex = Number(choice.split('_').pop()) - 1
+        const row = checkboxGrid && checkboxGrid[rowIndex]
+        if (row) {
+            row[colIndex] = true
         }
-        
-        if (this.question.type === 'Matrix Radio Button') {
-            this.matrixRadioGrid = this.convertSelectedMatrixChoiceToRadioBtnGrid()
+    })
+    return checkboxGrid
+}
+
+const convertSelectedMatrixChoiceToRadioBtnGrid = () => {
+    const radioBtnGrid = defaultRadioButtonGrid.value
+    selectedMatrixChoices.value.forEach(choice => {
+        const rowIndex = Number(choice.substring(1, choice.indexOf('_'))) - 1
+        const row = radioBtnGrid && radioBtnGrid[rowIndex]
+        if (row) {
+            row.value = choice
         }
-    }
+    })
+    return radioBtnGrid
+}
 
-    convertSelectedMatrixChoiceToCheckboxGrid () {
-        const checkboxGrid = this.defaultCheckboxGrid
-        this.selectedMatrixChoices.forEach(choice => {
-            const rowIndex = Number(choice.substring(1, choice.indexOf('_'))) - 1
-            const colIndex = Number(choice.split('_').pop()) - 1
-            if (checkboxGrid && checkboxGrid[rowIndex]) {
-                checkboxGrid[rowIndex][colIndex] = true
-            }
-        })
-        return checkboxGrid
-    }
+const getRadioRowSelection = (rowIndex: number) => {
+    return matrixRadioGrid.value?.[rowIndex]?.value
+}
 
-    convertSelectedMatrixChoiceToRadioBtnGrid () {
-        const radioBtnGrid = this.defaultRadioButtonGrid
-        this.selectedMatrixChoices.forEach(choice => {
-            const rowIndex = Number(choice.substring(1, choice.indexOf('_'))) - 1
-            if (radioBtnGrid && radioBtnGrid[rowIndex]) {
-                radioBtnGrid[rowIndex].value = choice
-            }
-        })
-        return radioBtnGrid
-    }
+const getRadioRowChoices = (rowIndex: number) => {
+    const choices = matrixRadioGrid.value?.[rowIndex]?.choices
+    return choices
+}
 
-    getRadioRowSelection (rowIndex: number) {
-        return this.matrixRadioGrid?.[rowIndex]?.value
+const updateRadioRowSelection = (rowIndex: number, choiceKey: TMatrixChoiceKey | null) => {
+    const row = matrixRadioGrid.value?.[rowIndex]
+    if (row) {
+        row.value = choiceKey
     }
+}
 
-    getRadioRowChoices (rowIndex: number) {
-        const choices = this.matrixRadioGrid?.[rowIndex]?.choices
-        return choices
+const selectedChoiceKey = (rowIndex: number, colIndex: number) => {
+    const row = rowIndex += 1
+    const column = colIndex += 1
+    if (selectedMatrixChoices && matrixAnswerKeys) {
+        const matrixSelectedChoiceKey = selectedMatrixChoices.value.find((choice) => {
+            const substring = choice.substring(1)
+            return substring === `${row}_${column}`
+        })
+        return matrixSelectedChoiceKey
     }
+    return undefined
+}
 
-    updateRadioRowSelection (rowIndex: number, choiceKey: TMatrixChoiceKey) {
-        const row = this.matrixRadioGrid?.[rowIndex]
-        if (row) {
-            row.value = choiceKey
+const correctlySelectedChoice = (rowIndex: number, colIndex: number) => {
+    if (selectedMatrixChoices.value && matrixAnswerKeys.value) {
+        const selectedChoice = selectedChoiceKey(rowIndex, colIndex)
+        if (selectedChoice && selectedChoice.startsWith('a') && matrixAnswerKeys.value.includes(selectedChoice)) {
+            return true
         }
     }
+    return false
+}
 
-    selectedChoiceKey (rowIndex: number, colIndex: number) {
-        const row = rowIndex += 1
-        const column = colIndex += 1
-        if (this.selectedMatrixChoices && this.matrixAnswerKeys) {
-            const matrixSelectedChoiceKey = this.selectedMatrixChoices.find((choice) => {
-                const substring = choice.substring(1)
-                return substring === `${row}_${column}`
-            })
-            return matrixSelectedChoiceKey
+const incorrectlySelectedChoice = (rowIndex: number, colIndex: number) => {
+    if (selectedMatrixChoices.value && matrixAnswerKeys.value) {
+        const selectedChoice = selectedChoiceKey(rowIndex, colIndex)
+        if (selectedChoice && selectedChoice.startsWith('d')) {
+            return true
         }
-        return undefined
     }
+    return false
+}
+                    
+const correctAnswerButNotSelected = (rowIndex: number, colIndex: number) => {
+    const selectedChoice = selectedChoiceKey(rowIndex, colIndex)
+    const answerKey = matrixAnswerKeys.value.find(choice => choice === `a${rowIndex + 1}_${colIndex + 1}`)
+    return answerKey && !selectedChoice
+}
 
-    correctlySelectedChoice (rowIndex: number, colIndex: number) {
-        if (this.selectedMatrixChoices && this.matrixAnswerKeys) {
-            const selectedChoice = this.selectedChoiceKey(rowIndex, colIndex)
-            if (selectedChoice && selectedChoice.startsWith('a') && this.matrixAnswerKeys.includes(selectedChoice)) {
-                return true
-            }
-        }
-        return false
-    }
+const checkboxContainerStyling = (rowIndex: number, columnIndex: number) => {
+    const isReviewMode = showMatrixAnswers.value || reviewMode
 
-    incorrectlySelectedChoice (rowIndex: number, colIndex: number) {
-        if (this.selectedMatrixChoices && this.matrixAnswerKeys) {
-            const selectedChoice = this.selectedChoiceKey(rowIndex, colIndex)
-            if (selectedChoice && selectedChoice.startsWith('d')) {
-                return true
-            }
+    // check box is correctlySelected
+    if (isReviewMode && correctlySelectedChoice(rowIndex, columnIndex)) {
+        const borderColor = isDarkMode ? brandColors.jungleGreen : brandColors.cadaverous
+        return {
+            borderColor: `${borderColor} !important`,
+            background: `${borderColor} !important`,
         }
-        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}`)
-        return answerKey && !selectedChoice
-    }
-
-    checkboxContainerStyling (rowIndex: number, columnIndex: number) {
-        const isReviewMode = this.showMatrixAnswers || this.reviewMode
-        const incorrectlySelectedChoice = this.incorrectlySelectedChoice(rowIndex, columnIndex)
-
-        // 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`,
-            }
-        }
 
-        if (isReviewMode && incorrectlySelectedChoice) {
-            return {
-                background: `${this.brandColors.steel} !important`,
-                border: `1px solid ${this.brandColors.steel} !important`,
-            }
-        }
-
-        if (isReviewMode && this.correctAnswerButNotSelected(rowIndex, columnIndex)) {
-            return {
-                background: 'transparent !important',
-                border: `1px solid ${this.brandColors.slate} !important`,
-            }
+    if (isReviewMode && incorrectlySelectedChoice(rowIndex, columnIndex)) {
+        return {
+            background: `${brandColors.steel} !important`,
+            border: `1px solid ${brandColors.steel} !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`,
-            }
+    if (isReviewMode && correctAnswerButNotSelected(rowIndex, columnIndex)) {
+        return {
+            background: 'transparent !important',
+            border: `1px solid ${brandColors.slate} !important`,
         }
     }
+}
 
-    checkboxClicked (rowIndex: number, columnIndex: number) {
-        if (this.matrixCheckboxGrid && this.matrixCheckboxGrid[rowIndex]) {
-            this.matrixCheckboxGrid[rowIndex][columnIndex] = !this.matrixCheckboxGrid[rowIndex][columnIndex]
+const checkboxCheckStyling = (rowIndex: number, columnIndex: number) => {
+    const isReviewMode = showMatrixAnswers.value || reviewMode
+    if (isReviewMode && correctAnswerButNotSelected(rowIndex, columnIndex)) {
+        const color = isDarkMode ? brandColors.jungleGreen : brandColors.cadaverous
+        return {
+            color: `${color} !important`,
         }
     }
+}
 
-    @Emit('emitSelectedMatrixChoice')
-    emitSelectedMatrixChoice (matrixChoiceKeys: TMatrixChoiceKey[]) {
-        return matrixChoiceKeys
+const checkboxClicked = (rowIndex: number, columnIndex: number) => {
+    const row = matrixCheckboxGrid.value?.[rowIndex]
+    if (row) {
+        row[columnIndex] = !row[columnIndex]
     }
+}
 
-    @Watch('matrixCheckboxGrid', { deep: true })
-    matrixCheckboxGridChange () {
-        if (this.matrixChoiceLayout && this.matrixCheckboxGrid) {
-            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
+const emitSelectedMatrixChoice = (matrixChoiceKeys: TMatrixChoiceKey[]) => {
+    emit('emitSelectedMatrixChoice', matrixChoiceKeys)
+}
+
+watch(matrixCheckboxGrid, () => {
+    if (matrixChoiceLayout.value && matrixCheckboxGrid.value) {
+        const selectedCheckboxChoices: TMatrixChoiceKey[] = []
+
+        matrixCheckboxGrid.value?.forEach((row, rowIndex) => {
+            row.forEach((choice, choiceIndex) => {
+                if (
+                    choice && 
+                        matrixChoiceLayout.value?.[rowIndex] && 
+                        matrixChoiceLayout.value?.[rowIndex]?.[choiceIndex]
+                ) {
+                    const choiceKey = matrixChoiceLayout.value?.[rowIndex]?.[choiceIndex] as TMatrixChoiceKey | null
+                    if (choiceKey) {
                         selectedCheckboxChoices.push(choiceKey)
                     }
-                })
-            })  
-            this.emitSelectedMatrixChoice(selectedCheckboxChoices)
-        }
+                }
+            })
+        })  
+        emitSelectedMatrixChoice(selectedCheckboxChoices)
     }
+}, { deep: true })
 
-    @Watch('matrixRadioGrid', { deep: true })
-    matrixRadioGridChange () {
-        if (this.matrixChoiceLayout && this.matrixRadioGrid) {
-            const selectedRadioButtonChoices: TMatrixChoiceKey[] = []
+watch(matrixRadioGrid, () => {
+    if (matrixChoiceLayout.value && matrixRadioGrid.value) {
+        const selectedRadioButtonChoices: TMatrixChoiceKey[] = []
 
-            this.matrixRadioGrid.forEach((row, rowIndex) => {
-                const choiceKey = row.value
-                if (choiceKey && this.matrixChoiceLayout[rowIndex]) {
-                    selectedRadioButtonChoices.push(choiceKey)
-                }
-            }) 
-            this.emitSelectedMatrixChoice(selectedRadioButtonChoices)
-        }
+        matrixRadioGrid.value?.forEach((row, rowIndex) => {
+            const choiceKey = row.value
+            if (choiceKey && matrixChoiceLayout.value?.[rowIndex]) {
+                selectedRadioButtonChoices.push(choiceKey)
+            }
+        }) 
+        emitSelectedMatrixChoice(selectedRadioButtonChoices)
     }
+}, { deep: true })
 
-    @Watch('selectedMatrixChoices')
-    selectedMatrixChoicesChange () {
-        if ((this.reviewMode || this.showMatrixAnswers) && this.question.type === 'Matrix Checkbox') {
-            const selectedCheckboxGrid = this.convertSelectedMatrixChoiceToCheckboxGrid() 
-            this.matrixCheckboxGrid = selectedCheckboxGrid ? selectedCheckboxGrid : this.defaultCheckboxGrid
-        }
+watch(selectedMatrixChoices, () => {
+    if ((reviewMode || showMatrixAnswers.value) && question.value.type === 'Matrix Checkbox') {
+        const selectedCheckboxGrid = convertSelectedMatrixChoiceToCheckboxGrid() 
+        matrixCheckboxGrid.value = selectedCheckboxGrid ? selectedCheckboxGrid : defaultCheckboxGrid.value
+    }
 
-        if ((this.reviewMode || this.showMatrixAnswers) && this.question.type === 'Matrix Radio Button') {
-            const selectedRadioBtnGrid = this.convertSelectedMatrixChoiceToRadioBtnGrid() 
-            this.matrixRadioGrid = selectedRadioBtnGrid
-        }
+    if ((reviewMode || showMatrixAnswers.value) && question.value.type === 'Matrix Radio Button') {
+        const selectedRadioBtnGrid = convertSelectedMatrixChoiceToRadioBtnGrid() 
+        matrixRadioGrid.value = selectedRadioBtnGrid
     }
-}
+})
 
 </script>
 

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

@@ -1,25 +1,26 @@
 <script setup lang="ts">
 import RadioButton from '../../Forms/RadioButton.vue'
 import { dark as vDark } from '../../../directives'
+import type { TMatrixChoiceKey } from '../question'
 
 defineProps<{
     isDarkMode: boolean
-    choices: string[]
+    choices?: TMatrixChoiceKey[]
     labels?: string[]
     showAnswers: boolean
     disabled: boolean
 }>()
 
-const selectedChoice = defineModel<string>()
+const selectedChoice = defineModel<TMatrixChoiceKey | null>({ default: null })
 
-const selectChoice = (choiceKey: string) => {
+const selectChoice = (choiceKey: TMatrixChoiceKey) => {
     selectedChoice.value = choiceKey
 }
 </script>
 
 <template>
     <ul
-        v-if="choices.length"
+        v-if="choices && choices.length"
         class="uikit-matrix-radio-group"
         :class="{'uikit-matrix-radio-group--disabled': showAnswers}"
         v-dark="isDarkMode"