@pocketprep/ui-kit 3.8.4 → 3.9.0

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

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { computed, onMounted, ref, watch } from 'vue'
 import { dark as vDark } from '../../../directives'
-import type { TChoiceKey  } from './../question'
+import type { TChoiceKey } from './../question'
 import { useQuestionContext } from './composables'
 import { stripHtmlTags } from '../../../utils'
 import Icon from '../../Icons/Icon.vue'
@@ -45,7 +45,7 @@ const choiceKeysByLabelIndexObj = computed(() => {
     // Create an object with the keys being the mpmc label indexes
     // and the values being an array of corresponding choiceKeys to the mpmc label
     const groupedChoiceKeyByLabelIndex: { [key: number]: TChoiceKey[] } = {}
-    
+
     questionChoices.value?.forEach(choice => {
         const labelIndex = choice.labelIndex
 
@@ -62,10 +62,10 @@ const choiceKeysByLabelIndexObj = computed(() => {
 
 const choiceTextsByLabelIndex = computed(() => {
     const grouped: { [key: number]: string[] } = {}
-    
+
     questionChoices.value?.forEach(choice => {
         const labelIndex = choice.labelIndex
-    
+
         if (labelIndex !== undefined) {
             if (!grouped[labelIndex]) {
                 grouped[labelIndex] = []
@@ -79,7 +79,7 @@ const choiceTextsByLabelIndex = computed(() => {
 
 const selectedChoiceTextsByLabelIndex = computed(() => {
     const selectedTexts: { [key: number]: string } = {}
-    
+
     mpmcRadioGrid.value?.forEach((part, labelIndex) => {
         if (part.value) {
             const choiceIndex = choiceKeysByLabelIndexObj.value[labelIndex]?.findIndex(key => key === part.value)
@@ -91,7 +91,7 @@ const selectedChoiceTextsByLabelIndex = computed(() => {
             }
         }
     })
-    
+
     return selectedTexts
 })
 
@@ -183,7 +183,7 @@ watch(mpmcRadioGrid, () => {
     if (mpmcRadioGrid.value && (!reviewMode.value || !showMPMCAnswers.value)) {
         const selectedRadioButtonChoices: TChoiceKey[] = []
 
-        mpmcRadioGrid.value.forEach((part) => {
+        mpmcRadioGrid.value.forEach(part => {
             if (part.value) {
                 selectedRadioButtonChoices.push(part.value)
             }
@@ -201,7 +201,7 @@ watch(showMPMCAnswers, () => {
 
 watch(selectedMPMCChoices, () => {
     if ((reviewMode.value || showMPMCAnswers.value)) {
-        const selectedRadioBtnGrid = convertSelectedMPMCChoiceToRadioBtnGrid() 
+        const selectedRadioBtnGrid = convertSelectedMPMCChoiceToRadioBtnGrid()
         mpmcRadioGrid.value = selectedRadioBtnGrid
     }
 })
@@ -215,14 +215,14 @@ watch(selectedMPMCChoices, () => {
         <div
             class="uikit-question-mpmc-choices-container__choices-container"
             :class="{
-                'uikit-question-mpmc-choices-container__choices-container--correct': 
+                'uikit-question-mpmc-choices-container__choices-container--correct':
                     (showMPMCAnswers || reviewMode) && isMPMCQuestionCorrect,
-                'uikit-question-mpmc-choices-container__choices-container--incorrect': 
+                'uikit-question-mpmc-choices-container__choices-container--incorrect':
                     (showMPMCAnswers || reviewMode) && !isMPMCQuestionCorrect,
             }"
             v-dark="isDarkMode"
         >
-            <div 
+            <div
                 v-for="(label, labelIndex) in mpmcLabels"
                 class="uikit-question-mpmc-choices-container__part-container"
                 :key="labelIndex"
@@ -249,16 +249,16 @@ watch(selectedMPMCChoices, () => {
                     <Icon
                         v-if="(showMPMCAnswers || reviewMode) && correctPart(labelIndex)"
                         v-dark="isDarkMode"
-                        class="uikit-question-mpmc-choices-container__part-label-correct-icon"   
+                        class="uikit-question-mpmc-choices-container__part-label-correct-icon"
                         type="check"
                     />
                     <Icon
                         v-if="(showMPMCAnswers || reviewMode) && !correctPart(labelIndex)"
                         v-dark="isDarkMode"
-                        class="uikit-question-mpmc-choices-container__part-label-incorrect-icon"   
+                        class="uikit-question-mpmc-choices-container__part-label-incorrect-icon"
                         type="incorrect"
                     />
-                    <div 
+                    <div
                         class="uikit-question-mpmc-choices-container__part-label"
                         :class="{
                             'uikit-question-mpmc-choices-container__part-label--review-mode':
@@ -277,7 +277,7 @@ watch(selectedMPMCChoices, () => {
                             type="accordionArrow"
                         />
                     </div>
-                    <div 
+                    <div
                         v-if="selectedChoiceTextsByLabelIndex[labelIndex]"
                         class="uikit-question-mpmc-choices-container__selected-choice-text"
                         v-dark="isDarkMode"
@@ -285,7 +285,7 @@ watch(selectedMPMCChoices, () => {
                         {{ selectedChoiceTextsByLabelIndex[labelIndex] }}
                     </div>
                 </div>
-                <div 
+                <div
                     v-if="expandedPartNumbers.includes(labelIndex)"
                 >
                     <MPMCRadioGroup
@@ -468,4 +468,4 @@ watch(selectedMPMCChoices, () => {
         max-width: 492px;
     }
 }
-</style>
+</style>

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

@@ -87,12 +87,12 @@ const radioButtonColor = (choice: TChoiceKey) => {
                 :color="radioButtonColor(choice)"
                 @click="!disabled && !showAnswers && selectChoice(choice)"
             />
-            <div 
+            <div
                 v-if="choicesText && choicesText.length > 0"
                 v-dark="props.isDarkMode"
                 class="uikit-mpmc-radio-group__choice-text"
                 :class="{
-                    'uikit-mpmc-radio-group__choice-text--distractor': 
+                    'uikit-mpmc-radio-group__choice-text--distractor':
                         showAnswers && choice?.startsWith('d')
                 }"
                 @click="!disabled && !showAnswers && selectChoice(choice)"

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

@@ -4,19 +4,19 @@
         class="uikit-question-matrix-choices-container"
         ref="uikit-question-matrix-choices-container"
     >
-        <div 
-            v-dark="isDarkMode" 
-            v-breakpoint="breakpointsWithEl" 
+        <div
+            v-dark="isDarkMode"
+            v-breakpoint="breakpointsWithEl"
             class="uikit-question-matrix-choices-container__columns"
         >
-            <div 
+            <div
                 v-dark="isDarkMode"
                 v-breakpoint="breakpointsWithEl"
                 class="uikit-question-matrix-choices-container__column-row-header"
                 :class="{
-                    'uikit-question-matrix-choices-container__column-row-header--two-columns': 
+                    'uikit-question-matrix-choices-container__column-row-header--two-columns':
                         numberOfMatrixColumnLabels === 2,
-                    'uikit-question-matrix-choices-container__column-row-header--radio-btn-three-columns': 
+                    'uikit-question-matrix-choices-container__column-row-header--radio-btn-three-columns':
                         question.type === 'Matrix Radio Button' && numberOfMatrixColumnLabels === 3
                 }"
                 v-html="matrixColumnLabelsForRows"
@@ -25,7 +25,7 @@
                 <div
                     class="uikit-question-matrix-choices-container__column-header"
                     :class="{
-                        'uikit-question-matrix-choices-container__column-header--two-columns': 
+                        '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
@@ -39,25 +39,25 @@
                 />
             </div>
         </div>
-        <div 
+        <div
             class="uikit-question-matrix-choices-container__choices-container"
             :class="{
-                'uikit-question-matrix-choices-container__choices-container--correct': 
+                'uikit-question-matrix-choices-container__choices-container--correct':
                     (showMatrixAnswers || reviewMode) && isMatrixQuestionCorrect,
-                'uikit-question-matrix-choices-container__choices-container--incorrect': 
+                'uikit-question-matrix-choices-container__choices-container--incorrect':
                     (showMatrixAnswers || reviewMode) && !isMatrixQuestionCorrect,
-                'uikit-question-matrix-choices-container__choices-container--teach-group-review': 
+                'uikit-question-matrix-choices-container__choices-container--teach-group-review':
                     (showMatrixAnswers || reviewMode) && isTeachGroupReview,
             }"
             v-dark="isDarkMode"
             v-breakpoint="breakpointsWithEl"
         >
-            <div 
+            <div
                 class="uikit-question-matrix-choices-container__choices"
                 :class="{
-                    'uikit-question-matrix-choices-container__choices--checkbox': 
+                    'uikit-question-matrix-choices-container__choices--checkbox':
                         question.type === 'Matrix Checkbox',
-                    'uikit-question-matrix-choices-container__choices--two-columns': 
+                    'uikit-question-matrix-choices-container__choices--two-columns':
                         numberOfMatrixColumnLabels === 2,
                 }"
                 v-dark="isDarkMode"
@@ -68,18 +68,18 @@
                 <div
                     class="uikit-question-matrix-choices-container__choice-text"
                     :class="{
-                        'uikit-question-matrix-choices-container__choice-text--checkbox': 
+                        'uikit-question-matrix-choices-container__choice-text--checkbox':
                             question.type === 'Matrix Checkbox',
-                        'uikit-question-matrix-choices-container__choice-text--two-columns': 
+                        'uikit-question-matrix-choices-container__choice-text--two-columns':
                             numberOfMatrixColumnLabels === 2,
-                        'uikit-question-matrix-choices-container__choice-text--radio-btn-two-columns': 
+                        'uikit-question-matrix-choices-container__choice-text--radio-btn-two-columns':
                             question.type === 'Matrix Radio Button' && numberOfMatrixColumnLabels === 2,
                     }"
                     v-dark="isDarkMode"
                     v-breakpoint="breakpointsWithEl"
                     v-html="rowLabel"
                 />
-                <template 
+                <template
                     v-if="
                         question.type === 'Matrix Checkbox' &&
                             matrixCheckboxGrid &&
@@ -95,9 +95,9 @@
                         <div
                             class="uikit-question-matrix-choices-container__checkbox"
                             :class="{
-                                'uikit-question-matrix-choices-container__checkbox--two-columns': 
+                                'uikit-question-matrix-choices-container__checkbox--two-columns':
                                     numberOfMatrixColumnLabels === 2,
-                                'uikit-question-matrix-choices-container__checkbox--review': 
+                                'uikit-question-matrix-choices-container__checkbox--review':
                                     showMatrixAnswers || reviewMode,
                             }"
                             v-for="(columnLabel, columnIndex) in matrixColumnLabels"
@@ -114,15 +114,15 @@
                                 :checkbox-check-styles="checkboxCheckStyling(rowIndex, columnIndex)"
                                 :checkbox-styles="checkboxContainerStyling(rowIndex, columnIndex)"
                             />
-                            <div 
+                            <div
                                 v-else
                                 class="uikit-question-matrix-choices-container__clickable-checkbox"
                                 :class="{
-                                    'uikit-question-matrix-choices-container__clickable-checkbox--review': 
-                                        showMatrixAnswers || reviewMode 
+                                    'uikit-question-matrix-choices-container__clickable-checkbox--review':
+                                        showMatrixAnswers || reviewMode
                                 }"
                                 @click="!(showMatrixAnswers || reviewMode) && checkboxClicked(rowIndex, columnIndex)"
-                                @keypress.enter="!(showMatrixAnswers || reviewMode) && 
+                                @keypress.enter="!(showMatrixAnswers || reviewMode) &&
                                     checkboxClicked(rowIndex, columnIndex)"
                             >
                                 <Checkbox
@@ -134,7 +134,7 @@
                             </div>
                             <Icon
                                 v-if="
-                                    (showMatrixAnswers || reviewMode) && 
+                                    (showMatrixAnswers || reviewMode) &&
                                         (incorrectlySelectedChoice(rowIndex, columnIndex) ||
                                             correctAnswerButNotSelected(rowIndex, columnIndex))"
                                 class="uikit-question-matrix-choices-container__incorrect-answer-icon"
@@ -144,7 +144,7 @@
                         </div>
                     </div>
                 </template>
-                <template 
+                <template
                     v-if="
                         question.type === 'Matrix Radio Button' &&
                             matrixRadioGrid &&
@@ -260,7 +260,7 @@ onMounted(() => {
     if (question.value.type === 'Matrix Checkbox') {
         matrixCheckboxGrid.value = convertSelectedMatrixChoiceToCheckboxGrid()
     }
-    
+
     if (question.value.type === 'Matrix Radio Button') {
         matrixRadioGrid.value = convertSelectedMatrixChoiceToRadioBtnGrid()
     }
@@ -311,7 +311,7 @@ const selectedChoiceKey = (rowIndex: number, colIndex: number) => {
     const row = rowIndex += 1
     const column = colIndex += 1
     if (selectedMatrixChoices && matrixAnswerKeys) {
-        const matrixSelectedChoiceKey = selectedMatrixChoices.value.find((choice) => {
+        const matrixSelectedChoiceKey = selectedMatrixChoices.value.find(choice => {
             const substring = choice.substring(1)
             return substring === `${row}_${column}`
         })
@@ -339,14 +339,14 @@ const incorrectlySelectedChoice = (rowIndex: number, colIndex: number) => {
     }
     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
 }
 
-const checkboxContainerStyling = (rowIndex: number, columnIndex: number) => {
+const checkboxContainerStyling = (rowIndex: number, columnIndex: number): Record<string, string> | undefined => {
     const isReviewMode = showMatrixAnswers.value || reviewMode.value
 
     // check box is correctlySelected
@@ -407,7 +407,7 @@ watch(matrixCheckboxGrid, () => {
                     }
                 }
             })
-        })  
+        })
         emitSelectedMatrixChoice(selectedCheckboxChoices)
     }
 }, { deep: true })
@@ -421,19 +421,19 @@ watch(matrixRadioGrid, () => {
             if (choiceKey && matrixChoiceLayout.value?.[rowIndex]) {
                 selectedRadioButtonChoices.push(choiceKey)
             }
-        }) 
+        })
         emitSelectedMatrixChoice(selectedRadioButtonChoices)
     }
 }, { deep: true })
 
 watch(selectedMatrixChoices, () => {
     if ((reviewMode.value || showMatrixAnswers.value) && question.value.type === 'Matrix Checkbox') {
-        const selectedCheckboxGrid = convertSelectedMatrixChoiceToCheckboxGrid() 
+        const selectedCheckboxGrid = convertSelectedMatrixChoiceToCheckboxGrid()
         matrixCheckboxGrid.value = selectedCheckboxGrid ? selectedCheckboxGrid : defaultCheckboxGrid.value
     }
 
     if ((reviewMode.value || showMatrixAnswers.value) && question.value.type === 'Matrix Radio Button') {
-        const selectedRadioBtnGrid = convertSelectedMatrixChoiceToRadioBtnGrid() 
+        const selectedRadioBtnGrid = convertSelectedMatrixChoiceToRadioBtnGrid()
         matrixRadioGrid.value = selectedRadioBtnGrid
     }
 })
@@ -573,7 +573,7 @@ watch(selectedMatrixChoices, () => {
         border-radius: 5px;
         border: 1px solid rgba($pewter, 0.85);
         background: $white;
-        box-shadow: 0px 1px 4px 0px rgba(71, 89, 103, 0.30);
+        box-shadow: 0px 1px 4px 0px rgb(71, 89, 103, 0.30);
         display: flex;
         padding: 12px 10px 0 14px;
         position: relative;
@@ -591,7 +591,7 @@ watch(selectedMatrixChoices, () => {
         }
 
         &--dark {
-            border: 1px solid rgba(136, 163, 182, 0.85);
+            border: 1px solid rgb(136, 163, 182, 0.85);
             background: $brand-black;
         }
 
@@ -627,7 +627,7 @@ watch(selectedMatrixChoices, () => {
         &--tablet-portrait {
             width: 279px;
         }
-        
+
         &--mobile {
             font-size: 16px;
             font-weight: 600;
@@ -735,7 +735,7 @@ watch(selectedMatrixChoices, () => {
 
     &__radio-btns {
         min-width: 201px;
-        
+
         &--three-columns {
             position: relative;
             left: 6px;
@@ -766,4 +766,4 @@ watch(selectedMatrixChoices, () => {
         }
     }
 }
-</style>
+</style>

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

@@ -4,11 +4,11 @@ import { dark as vDark } from '../../../directives'
 import type { TMatrixChoiceKey } from '../question'
 
 defineProps<{
-    isDarkMode: boolean
+    isDarkMode?: boolean
     choices?: TMatrixChoiceKey[]
     labels?: string[]
-    showAnswers: boolean
-    disabled: boolean
+    showAnswers?: boolean
+    disabled?: boolean
 }>()
 
 const selectedChoice = defineModel<TMatrixChoiceKey | null>({ default: null })
@@ -29,15 +29,15 @@ const selectChoice = (choiceKey: TMatrixChoiceKey) => {
         <li
             class="uikit-matrix-radio-group__option"
             :class="{
-                'uikit-matrix-radio-group__option--two-options': 
-                    choices.length === 2 
+                'uikit-matrix-radio-group__option--two-options':
+                    choices.length === 2
             }"
             v-dark="isDarkMode"
             role="radio"
             v-for="(choice) in choices"
             :key="choice"
         >
-            <div 
+            <div
                 class="uikit-matrix-radio-group__radio-btn-div"
                 @click="!disabled && !showAnswers && selectChoice(choice)"
                 @keypress.enter="!disabled && !showAnswers && selectChoice(choice)"

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

@@ -6,16 +6,15 @@
         <div
             class="uikit-question-mobile-matrix-choices-container__choices-container"
             :class="{
-                'uikit-question-mobile-matrix-choices-container__choices-container--correct': 
+                'uikit-question-mobile-matrix-choices-container__choices-container--correct':
                     (showMatrixAnswers || reviewMode) && isMatrixQuestionCorrect,
-                'uikit-question-mobile-matrix-choices-container__choices-container--incorrect': 
+                'uikit-question-mobile-matrix-choices-container__choices-container--incorrect':
                     (showMatrixAnswers || reviewMode) && !isMatrixQuestionCorrect,
-                
             }"
             v-dark="isDarkMode"
             v-breakpoint="breakpointsWithEl"
         >
-            <div 
+            <div
                 class="uikit-question-mobile-matrix-choices-container__row-container"
                 v-for="(rowLabel, rowIndex) in matrixRowLabels"
                 :key="rowIndex"
@@ -35,16 +34,16 @@
                     <Icon
                         v-if="(showMatrixAnswers || reviewMode) && correctRow(rowIndex)"
                         v-dark="isDarkMode"
-                        class="uikit-question-mobile-matrix-choices-container__row-label-correct-icon"   
+                        class="uikit-question-mobile-matrix-choices-container__row-label-correct-icon"
                         type="check"
                     />
                     <Icon
                         v-if="(showMatrixAnswers || reviewMode) && !correctRow(rowIndex)"
                         v-dark="isDarkMode"
-                        class="uikit-question-mobile-matrix-choices-container__row-label-incorrect-icon"   
+                        class="uikit-question-mobile-matrix-choices-container__row-label-incorrect-icon"
                         type="incorrect"
                     />
-                    <div 
+                    <div
                         class="uikit-question-mobile-matrix-choices-container__row-label"
                         :class="{
                             'uikit-question-mobile-matrix-choices-container__row-label--review-mode':
@@ -83,7 +82,7 @@
                         </div>
                     </div>
                 </div>
-                <div 
+                <div
                     v-if="
                         expandedRowNumbers.includes(rowIndex) &&
                             question.type === 'Matrix Checkbox' &&
@@ -96,7 +95,7 @@
                         v-for="(column, columnIndex) in matrixColumnLabels"
                         :key="columnIndex"
                         @click="!(showMatrixAnswers || reviewMode) && checkboxRowClicked(rowIndex, columnIndex)"
-                        @keypress.enter="!(showMatrixAnswers || reviewMode) && 
+                        @keypress.enter="!(showMatrixAnswers || reviewMode) &&
                             checkboxRowClicked(rowIndex, columnIndex)"
                     >
                         <Checkbox
@@ -129,9 +128,9 @@
                         </div>
                     </div>
                 </div>
-                <div 
-                    v-if="expandedRowNumbers.includes(rowIndex) && 
-                        question.type === 'Matrix Radio Button' && 
+                <div
+                    v-if="expandedRowNumbers.includes(rowIndex) &&
+                        question.type === 'Matrix Radio Button' &&
                         matrixRadioGrid && matrixRadioGrid[rowIndex]"
                 >
                     <MobileMatrixRadioGroup
@@ -159,7 +158,7 @@ import Checkbox from '../../Forms/Checkbox.vue'
 import MobileMatrixRadioGroup from './MobileMatrixRadioGroup.vue'
 import { dark as vDark, breakpoint as vBreakpoint } from '../../../directives'
 import { useQuestionContext } from './composables'
-import type { IRadioOptions, TMatrixChoiceKey  } from './../question'
+import type { IRadioOptions, TMatrixChoiceKey } from './../question'
 import BrandColors from '../../../pocketprep-export.module.scss'
 import { computed, onMounted, ref, watch } from 'vue'
 import { stripHtmlTags } from '../../../utils'
@@ -242,7 +241,7 @@ 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 matrixSelectedChoiceKey = selectedMatrixChoices.value.find(choice => {
             const substring = choice.substring(1)
             return substring === `${row}_${column}`
         })
@@ -295,14 +294,14 @@ const incorrectlySelectedChoice = (rowIndex: number, columnIndex: number) => {
     }
     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
 }
 
-const checkboxContainerStyling = (rowIndex: number, columnIndex: number) => {
+const checkboxContainerStyling = (rowIndex: number, columnIndex: number): Record<string, string> | undefined => {
     const isReviewMode = showMatrixAnswers.value || reviewMode.value
 
     // check box is correctlySelected
@@ -342,10 +341,10 @@ const checkboxCheckStyling = (rowIndex: number, columnIndex: number) => {
 const correctRow = (rowIndex: number) => {
     if (matrixChoiceLayout.value?.[rowIndex]) {
         if (
-            question?.value.type === 'Matrix Checkbox' && 
-            matrixCheckboxGrid.value?.[rowIndex]
+            question?.value.type === 'Matrix Checkbox'
+            && matrixCheckboxGrid.value?.[rowIndex]
         ) {
-            const correctAnswerKeys = matrixChoiceLayout.value[rowIndex]?.filter(choice => 
+            const correctAnswerKeys = matrixChoiceLayout.value[rowIndex]?.filter(choice =>
                 choice.startsWith('a')
             )
             const selectedAnswerKeys = matrixCheckboxGrid.value[rowIndex]?.map((choice, choiceIndex) => {
@@ -355,13 +354,13 @@ const correctRow = (rowIndex: number) => {
                 const selectedChoice = selectedChoiceKey(rowIndex, choiceIndex)
                 return selectedChoice?.startsWith('a')
             })
-            return !selectedAnswerKeys?.some(choice => choice?.startsWith('d')) && 
-                (correctAnswerKeys?.length === correctSelectedKeys?.length)
+            return !selectedAnswerKeys?.some(choice => choice?.startsWith('d'))
+                && (correctAnswerKeys?.length === correctSelectedKeys?.length)
         }
 
         if (
-            question?.value.type === 'Matrix Radio Button' && 
-            matrixRadioGrid.value?.[rowIndex]
+            question?.value.type === 'Matrix Radio Button'
+            && matrixRadioGrid.value?.[rowIndex]
         ) {
             const rowVal = matrixRadioGrid.value[rowIndex]?.value
             if (rowVal) {
@@ -504,7 +503,7 @@ watch(matrixRadioGrid, () => {
     if (matrixChoiceLayout.value && matrixRadioGrid.value && (!reviewMode.value || !showMatrixAnswers.value)) {
         const selectedRadioButtonChoices: TMatrixChoiceKey[] = []
 
-        matrixRadioGrid.value.forEach((row) => {
+        matrixRadioGrid.value.forEach(row => {
             if (row.value) {
                 selectedRadioButtonChoices.push(row.value)
             }
@@ -522,12 +521,12 @@ watch(showMatrixAnswers, () => {
 
 watch(selectedMatrixChoices, () => {
     if ((reviewMode.value || showMatrixAnswers.value) && question.value.type === 'Matrix Checkbox') {
-        const selectedCheckboxGrid = convertSelectedMatrixChoiceToCheckboxGrid() 
+        const selectedCheckboxGrid = convertSelectedMatrixChoiceToCheckboxGrid()
         matrixCheckboxGrid.value = selectedCheckboxGrid ? selectedCheckboxGrid : defaultCheckboxGrid.value
     }
 
     if ((reviewMode.value || showMatrixAnswers.value) && question.value.type === 'Matrix Radio Button') {
-        const selectedRadioBtnGrid = convertSelectedMatrixChoiceToRadioBtnGrid() 
+        const selectedRadioBtnGrid = convertSelectedMatrixChoiceToRadioBtnGrid()
         matrixRadioGrid.value = selectedRadioBtnGrid
     }
 })
@@ -588,7 +587,7 @@ watch(selectedMatrixChoices, () => {
 
     &__row-container {
         margin-bottom: 9px;
-        box-shadow: 0px 1px 4px 0px rgba(71, 89, 103, 0.30);
+        box-shadow: 0px 1px 4px 0px rgb(71, 89, 103, 0.30);
         border: 0.5px solid ($pewter, 0.85);
         border-radius: 5px;
 
@@ -742,4 +741,4 @@ watch(selectedMatrixChoices, () => {
         max-width: 492px;
     }
 }
-</style>
+</style>

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

@@ -68,12 +68,12 @@ const radioButtonColor = (choice: TMatrixChoiceKey) => {
                 :color="radioButtonColor(choice)"
                 @click="!disabled && !showAnswers && selectChoice(choice)"
             />
-            <div 
+            <div
                 v-if="labels"
                 v-dark="props.isDarkMode"
                 class="uikit-mobile-matrix-radio-group__label"
                 :class="{
-                    'uikit-mobile-matrix-radio-group__label--distractor': 
+                    'uikit-mobile-matrix-radio-group__label--distractor':
                         showAnswers && choice?.startsWith('d')
                 }"
                 @click="!disabled && !showAnswers && selectChoice(choice)"

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

@@ -35,7 +35,7 @@
             @click.stop="emitTogglePassageImageLongAlt"
             @mousedown.prevent
         >
-            <span 
+            <span
                 class="uikit-question-passage-and-image__toggle-passage-image-description-text"
             >
                 Image Description
@@ -43,7 +43,7 @@
             <Icon
                 class="uikit-question-passage-and-image__toggle-passage-image-description-icon"
                 :class="{
-                    'uikit-question-passage-and-image__toggle-passage-image-description-icon--up': 
+                    'uikit-question-passage-and-image__toggle-passage-image-description-icon--up':
                         showPassageImageLongAlt,
                 }"
                 type="accordionArrow"
@@ -208,4 +208,4 @@ const emitMoveFocusToPrompt = () => {
         }
     }
 }
-</style>
+</style>