@pocketprep/ui-kit 3.8.4 → 3.9.0

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

@@ -26,8 +26,8 @@
                 class="uikit-question-passage-and-image-dropdown__image-dropdown-icon"
                 type="image"
             />
-            <span 
-                v-dark="isDarkMode" 
+            <span
+                v-dark="isDarkMode"
                 class="uikit-question-passage-and-image-dropdown__passage-and-image-dropdown-text"
             >
                 {{ showPassageImageDropdown ? 'Hide' : 'Show' }}
@@ -37,7 +37,7 @@
                 v-dark="isDarkMode"
                 class="uikit-question-passage-and-image-dropdown__passage-and-image-dropdown-arrow"
                 :class="{
-                    'uikit-question-passage-and-image-dropdown__passage-and-image-dropdown-arrow--up': 
+                    'uikit-question-passage-and-image-dropdown__passage-and-image-dropdown-arrow--up':
                         showPassageImageDropdown,
                 }"
                 type="accordionArrow"
@@ -73,7 +73,7 @@
                 type="tertiary-small"
                 class="uikit-question-passage-and-image-dropdown__toggle-img-dropdown-img-description"
                 :class="{
-                    'uikit-question-passage-and-image-dropdown__toggle-img-dropdown-img-description--open': 
+                    'uikit-question-passage-and-image-dropdown__toggle-img-dropdown-img-description--open':
                         showPassageImageLongAlt,
                 }"
                 :is-dark-mode="isDarkMode"
@@ -81,7 +81,7 @@
                 @click="togglePassageImageLongAltDropdown"
                 @mousedown.prevent
             >
-                <span 
+                <span
                     class="uikit-question-passage-and-image-dropdown__toggle-img-dropdown-img-description-text"
                 >
                     Image Description
@@ -89,7 +89,7 @@
                 <Icon
                     class="uikit-question-passage-and-image-dropdown__toggle-img-dropdown-img-description-icon"
                     :class="{
-                        'uikit-question-passage-and-image-dropdown__toggle-img-dropdown-img-description-icon--up': 
+                        'uikit-question-passage-and-image-dropdown__toggle-img-dropdown-img-description-icon--up':
                             showPassageImageLongAlt,
                     }"
                     type="accordionArrow"
@@ -335,4 +335,4 @@ const togglePassageImageLongAltDropdown = () => {
         }
     }
 }
-</style>
+</style>

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

@@ -4,7 +4,7 @@
     >
         <div
             v-dark="isDarkMode"
-            v-breakpoint="breakpointsWithEl" 
+            v-breakpoint="breakpointsWithEl"
             class="uikit-question-paywall__paywall"
             :class="{ 'uikit-question-paywall__paywall--review': reviewMode }"
         >
@@ -139,4 +139,4 @@ const emitUpgradeClick = () => {
         margin-bottom: 36px;
     }
 }
-</style>
+</style>

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

@@ -172,4 +172,4 @@ const isCorrectlyAnswered = computed(() => {
         font-weight: 500;
     }
 }
-</style>
+</style>

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

@@ -46,7 +46,7 @@ import { useQuestionContext } from './composables'
 
 const {
     globalMetrics,
-    choiceScores,    
+    choiceScores,
     isDarkMode,
     isMatrixQuestion,
     isMPMCQuestion,
@@ -115,4 +115,4 @@ const {
         }
     }
 }
-</style>
+</style>

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

@@ -9,7 +9,7 @@
             'uikit-question-summary--matrix-question-review-mode': isMatrixQuestion && reviewMode,
             'uikit-question-summary--mpmc-question': isMPMCQuestion,
             'uikit-question-summary--mpmc-question-review-mode': isMPMCQuestion && reviewMode,
-            'uikit-question-summary--build-list-question-not-review-mode': 
+            'uikit-question-summary--build-list-question-not-review-mode':
                 isBuildListQuestion && !reviewMode,
         }"
     >
@@ -46,11 +46,11 @@
             ref="uikit-question-summary__summary-dropdown-explanation"
             class="uikit-question-summary__summary-dropdown-explanation"
             :class="{
-                'uikit-question-summary__summary-dropdown-explanation--matrix-question-review-mode': 
+                'uikit-question-summary__summary-dropdown-explanation--matrix-question-review-mode':
                     isMatrixQuestion && reviewMode,
-                'uikit-question-summary__summary-dropdown-explanation--mpmc-question-review-mode': 
+                'uikit-question-summary__summary-dropdown-explanation--mpmc-question-review-mode':
                     isMPMCQuestion && reviewMode,
-                'uikit-question-summary__summary-dropdown-explanation--build-list-question-review-mode': 
+                'uikit-question-summary__summary-dropdown-explanation--build-list-question-review-mode':
                     isBuildListQuestion && reviewMode,
             }"
         >
@@ -169,15 +169,15 @@ const {
 } = useQuestionContext()
 
 const isQuestionCorrect = computed(() => {
-    return ((!isMatrixQuestion.value || !isMPMCQuestion.value || !isBuildListQuestion) && isCorrect.value) || 
-        (isMatrixQuestion.value && isMatrixQuestionCorrect.value && !isUnanswered.value) ||
-        (isMPMCQuestion.value && isMPMCQuestionCorrect.value) || 
-        (isBuildListQuestion.value && isBuildListOrderCorrect.value)
+    return ((!isMatrixQuestion.value || !isMPMCQuestion.value || !isBuildListQuestion) && isCorrect.value)
+        || (isMatrixQuestion.value && isMatrixQuestionCorrect.value && !isUnanswered.value)
+        || (isMPMCQuestion.value && isMPMCQuestionCorrect.value)
+        || (isBuildListQuestion.value && isBuildListOrderCorrect.value)
 })
 
 const summary = computed(() => {
     return highlightKeywordsInText({
-        text: question.value.explanation || '', 
+        text: question.value.explanation || '',
         keywordDefinitions: keywordDefinitions.value,
         isDarkMode: isDarkMode.value,
         location: 'explanation',
@@ -371,7 +371,7 @@ const toggleSummaryExplanationImageLongAlt = () => {
         letter-spacing: -0.1px;
         line-height: 22px;
         font-weight: 400;
-        word-break: break-word;
+        overflow-wrap: anywhere;
         margin-bottom: -7px;
 
         &--dark {
@@ -434,4 +434,4 @@ const toggleSummaryExplanationImageLongAlt = () => {
         }
     }
 }
-</style>
+</style>

package/lib/components/Quiz/Question.vue

@@ -38,7 +38,7 @@
             }"
         >
             <div v-if="!showPassageAndImage && !showExplanation && !showPaywall">
-                <slot 
+                <slot
                     name="keywordDefinitionHint"
                 />
             </div>
@@ -93,7 +93,7 @@
                 v-if="question.passage || passageImageUrl"
                 ref="uikit-question__passage-and-image-dropdown"
                 class="uikit-question__passage-and-image-dropdown"
-                :class="{ 
+                :class="{
                     'uikit-question__passage-and-image-dropdown--review-mode': reviewMode,
                     'uikit-question__passage-and-image-dropdown--build-list': isBuildListQuestion,
 
@@ -120,13 +120,13 @@
                 class="uikit-question__choices"
                 :class="{
                     'uikit-question__choices--correct': showAnswers && isMCR && isCorrect,
-                    'uikit-question__choices--incorrect': 
+                    'uikit-question__choices--incorrect':
                         showAnswers && (isMCR || isUnanswered) && !isCorrect && !isTeachReview,
                     'uikit-question__choices--matrix': isMatrixQuestion,
                     'uikit-question__choices--mpmc': isMPMCQuestion,
                     'uikit-question__choices--unanswered': showAnswers && !isMCR && isUnanswered && !isCorrect,
                     'uikit-question__choices--show-stats': globalMetrics,
-                    'uikit-question__choices--no-actions': 
+                    'uikit-question__choices--no-actions':
                         !(isMCR || isUnanswered || isMatrixQuestion || isBuildListQuestion || isMPMCQuestion)
                         && !globalMetrics
                         && (
@@ -145,13 +145,13 @@
             >
                 <div
                     v-if="
-                        showAnswers 
-                            && !isMCR 
-                            && !isMatrixQuestion 
-                            && !isMPMCQuestion 
+                        showAnswers
+                            && !isMCR
+                            && !isMatrixQuestion
+                            && !isMPMCQuestion
                             && !isBuildListQuestion
-                            && isUnanswered 
-                            && !isCorrect 
+                            && isUnanswered
+                            && !isCorrect
                             && !isTeachReview
                     "
                     v-dark="isDarkMode"
@@ -166,7 +166,7 @@
                 </div>
                 <ChoicesContainer
                     v-if="
-                        question.type !== 'Matrix Checkbox' 
+                        question.type !== 'Matrix Checkbox'
                             && question.type !== 'Matrix Radio Button'
                             && question.type !== 'Multi-Part Multiple Choice'
                             && question.type !== 'Build List'"
@@ -193,7 +193,7 @@
                         showAnswers:showAnswersMM,
                         answerKeys:answerKeysMM,
                     }">
-                        <slot 
+                        <slot
                             name="motivationalMoment"
                             :showAnswers="showAnswersMM"
                             :answerKeys="answerKeysMM"
@@ -204,7 +204,7 @@
                     <template #showNamesTable="{
                         choiceKey,
                     }">
-                        <slot 
+                        <slot
                             name="showNamesTable"
                             :choiceKey="choiceKey"
                         />
@@ -219,14 +219,14 @@
                     ref="uikit-question__matrix-choices-container"
                     v-breakpoint="breakpointsWithEl"
                     @emitSelectedMatrixChoice="selectMatrixChoice"
-                > 
+                >
                     <template #motivationalMoment="{
                         isCorrect:isCorrectMM,
                         choiceKey,
                         showAnswers:showAnswersMM,
                         answerKeys:answerKeysMM,
                     }">
-                        <slot 
+                        <slot
                             name="motivationalMoment"
                             :showAnswers="showAnswersMM"
                             :answerKeys="answerKeysMM"
@@ -243,7 +243,7 @@
                     class="uikit-question__mobile-matrix-choices-container"
                     v-breakpoint="breakpointsWithEl"
                     @emitSelectedMatrixChoice="selectMatrixChoice"
-                > 
+                >
                     <template
                         #motivationalMoment="{
                             isCorrect:isCorrectMM,
@@ -252,7 +252,7 @@
                             answerKeys:answerKeysMM,
                         }"
                     >
-                        <slot 
+                        <slot
                             name="motivationalMoment"
                             :showAnswers="showAnswersMM"
                             :answerKeys="answerKeysMM"
@@ -269,7 +269,7 @@
                     class="uikit-question__mpmc-choices-container"
                     v-breakpoint="breakpointsWithEl"
                     @emitSelectedMPMCChoice="selectMPMCChoice"
-                > 
+                >
                     <template #explanationBottomExperiment>
                         <slot name="explanationBottomExperiment" />
                     </template>
@@ -287,8 +287,8 @@
             </div>
             <Summary
                 v-if="
-                    ((isMCR && showAnswers) 
-                        || (isMatrixQuestion && showMatrixAnswers)) 
+                    ((isMCR && showAnswers)
+                        || (isMatrixQuestion && showMatrixAnswers))
                         || (isMPMCQuestion && showMPMCAnswers)
                         || (isBuildListQuestion && showBuildListOrder)
                         && !showPaywall"
@@ -341,9 +341,9 @@
                 <slot name="action">
                     <PocketButton
                         v-if="
-                            !showAnswers 
-                                && !hideAnswer 
-                                && (showCheckAnswer || isMCR) 
+                            !showAnswers
+                                && !hideAnswer
+                                && (showCheckAnswer || isMCR)
                                 && !isMatrixQuestion
                                 && !isBuildListQuestion
                                 && !isMPMCQuestion
@@ -380,11 +380,11 @@
                     </PocketButton>
                     <PocketButton
                         v-else-if="(
-                            showAnswers 
-                            || showMatrixAnswers 
+                            showAnswers
+                            || showMatrixAnswers
                             || showBuildListOrder
-                            || showMPMCAnswers 
-                            || hideAnswer) 
+                            || showMPMCAnswers
+                            || hideAnswer)
                             && (questionNumber >= quizLength)
                         "
                         :is-dark-mode="isDarkMode"
@@ -394,7 +394,7 @@
                     </PocketButton>
                     <PocketButton
                         v-else-if="
-                            (showAnswers || showMatrixAnswers || showBuildListOrder || showMPMCAnswers || hideAnswer ) 
+                            (showAnswers || showMatrixAnswers || showBuildListOrder || showMPMCAnswers || hideAnswer )
                                 && showNextQuestion
                         "
                         :is-dark-mode="isDarkMode"
@@ -444,7 +444,7 @@
                     <slot name="explanationBottomExperiment" />
                 </template>
             </Explanation>
-        </div> 
+        </div>
     </div>
 </template>
 
@@ -466,7 +466,7 @@ import MPMCChoicesContainer from '../Quiz/Question/MPMCChoicesContainer.vue'
 import BuildListChoicesContainer from './Question/BuildListChoicesContainer.vue'
 import type { Study } from '@pocketprep/types'
 import { highlightKeywordsInText, studyModes } from '../../utils'
-import type { 
+import type {
     Ref,
     TQuizMode,
     TChoiceKey,
@@ -674,11 +674,9 @@ const numberOfScenarioQuestions = computed(() => {
 
 const currentScenarioQuestionNumber = computed(() => {
     if (questionScenario.value?.questions) {
-        const indexOfScenarioSerial = questionScenario.value.questions.findIndex(
-            (scenarioSerial: IScenarioSerial) =>  {
-                return scenarioSerial.serial === props.question.serial
-            }
-        )
+        const indexOfScenarioSerial = questionScenario.value.questions.findIndex((scenarioSerial: IScenarioSerial) => {
+            return scenarioSerial.serial === props.question.serial
+        })
 
         return indexOfScenarioSerial !== -1 ? indexOfScenarioSerial + 1 : undefined
     }
@@ -687,7 +685,7 @@ const currentScenarioQuestionNumber = computed(() => {
 
 const passageImageUrl = computed(() => {
     const imageUrl = props.question.passageImage?.url
-    
+
     return imageUrl ? `${props.imageUrlPrefix}${imageUrl}` : null
 })
 
@@ -701,7 +699,7 @@ const passageImageLongAlt = computed(() => {
 
 const explanationImageUrl = computed(() => {
     const imageUrl = props.question.explanationImage?.url
-    
+
     return imageUrl ? `${props.imageUrlPrefix}${imageUrl}` : null
 })
 
@@ -719,13 +717,15 @@ const showPassageAndImage = computed(() => {
 
 const passageAndImageTitle = computed(() => {
     if (props.question.passage && passageImageUrl.value) {
-        return props.question.passageLabel ? `${props.question.passageLabel} + Image` :
-            'Passage + Image'
+        return props.question.passageLabel
+            ? `${props.question.passageLabel} + Image`
+            : 'Passage + Image'
     } else if (!props.question.passage && passageImageUrl.value) {
         return 'Image'
     } else {
-        return props.question.passageLabel ? props.question.passageLabel :
-            'Passage'
+        return props.question.passageLabel
+            ? props.question.passageLabel
+            : 'Passage'
     }
 })
 
@@ -734,10 +734,13 @@ const reference = computed(() => {
 })
 
 const answers = computed((): TChoice[] => {
-    return props.question.choices.filter(choice => choice.isCorrect).map((choice, index) => ({
-        text: choice.text,
-        key: `a${index + 1}` as `a${1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9}`,
-    })).filter(choice => !!choice.text)
+    return props.question.choices
+        .filter(choice => choice.isCorrect)
+        .map((choice, index) => ({
+            text: choice.text,
+            key: `a${index + 1}` as `a${1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9}`,
+        }))
+        .filter(choice => !!choice.text)
 })
 
 const answerKeys = computed((): TChoiceKey[] => {
@@ -762,10 +765,13 @@ const correctOrderBuildListAnswerKeys = computed((): TBuildListChoiceKey[] => {
 })
 
 const distractors = computed((): TChoice[] => {
-    return props.question.choices.filter(choice => !choice.isCorrect).map((choice, index) => ({
-        text: choice.text,
-        key: `d${index + 1}` as `d${1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9}`,
-    })).filter(choice => !!choice.text)
+    return props.question.choices
+        .filter(choice => !choice.isCorrect)
+        .map((choice, index) => ({
+            text: choice.text,
+            key: `d${index + 1}` as `d${1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9}`,
+        }))
+        .filter(choice => !!choice.text)
 })
 
 const distractorKeys = computed((): TChoiceKey[] => {
@@ -786,23 +792,23 @@ const buildListChoices = computed(() => {
             key: choice.id as TBuildListChoiceKey,
         }
     })
-    
+
     const shuffledChoices = shuffleBuildListChoices([ ...blChoices ])
-    
+
     // Check if the shuffled array is in correct order
     const isInCorrectOrder = shuffledChoices.every((choice, index) => {
         const expectedNumber = index + 1
         const actualNumber = Number(choice.key.substring(1))
         return actualNumber === expectedNumber
     })
-    
+
     // If it is in the correct order, then we need to switch the first and second element
     if (isInCorrectOrder && shuffledChoices.length >= 2) {
         const [ first, second, ...rest ] = shuffledChoices
         return [ second, first, ...rest ] as TBuildListChoice[]
     }
-    
-    return shuffledChoices 
+
+    return shuffledChoices
 })
 
 const mpmcChoices = computed(() => {
@@ -830,7 +836,7 @@ const isMPMCQuestionCorrect = computed(() => {
 
 const isBuildListOrderCorrect = computed(() => {
     return showBuildListOrder.value
-        && correctOrderBuildListAnswerKeys.value.length === selectedBuildListChoiceOrder.value.length 
+        && correctOrderBuildListAnswerKeys.value.length === selectedBuildListChoiceOrder.value.length
         && correctOrderBuildListAnswerKeys.value.every(
             (item, index) => item === selectedBuildListChoiceOrder.value[index]
         )
@@ -873,8 +879,9 @@ const matrixChoiceScores = computed((): TMatrixChoiceScores => {
     const metrics = props.globalMetrics
 
     const scores: TMatrixChoiceScores = {
-        totalAnswered: selectedMatrixChoices.value.length && 
-            showMatrixAnswers && !props.reviewMode ? 1 : 0,
+        totalAnswered: selectedMatrixChoices.value.length && showMatrixAnswers && !props.reviewMode
+            ? 1
+            : 0,
         answeredCorrectly: isMatrixQuestionCorrect.value && !props.reviewMode ? 1 : 0,
     }
 
@@ -894,8 +901,7 @@ const mpmcChoiceScores = computed((): TChoiceScores => {
     const metrics = props.globalMetrics
 
     const scores: TChoiceScores = {
-        totalAnswered: selectedMPMCChoices.value.length && 
-            showMPMCAnswers && !props.reviewMode ? 1 : 0,
+        totalAnswered: selectedMPMCChoices.value.length && showMPMCAnswers && !props.reviewMode ? 1 : 0,
         answeredCorrectly: isMPMCQuestionCorrect.value && !props.reviewMode ? 1 : 0,
     }
 
@@ -915,8 +921,9 @@ const buildListChoiceScores = computed((): TBuildListChoiceScores => {
     const metrics = props.globalMetrics
 
     const scores: TBuildListChoiceScores = {
-        totalAnswered: selectedBuildListChoiceOrder.value.length && 
-            showBuildListOrder && !props.reviewMode ? 1 : 0,
+        totalAnswered: selectedBuildListChoiceOrder.value.length && showBuildListOrder && !props.reviewMode
+            ? 1
+            : 0,
         answeredCorrectly: isBuildListOrderCorrect.value && !props.reviewMode ? 1 : 0,
     }
 
@@ -989,8 +996,8 @@ const isUnanswered = computed(() => {
 
 const prompt = computed(() => {
     return highlightKeywordsInText({
-        text: props.question.prompt, 
-        keywordDefinitions: props.keywordDefinitions, 
+        text: props.question.prompt,
+        keywordDefinitions: props.keywordDefinitions,
         isDarkMode: props.isDarkMode,
         location: 'prompt',
     })
@@ -1020,7 +1027,7 @@ const keydownListener = (e: KeyboardEvent) => {
         case 'KeyD':
             if (!isTEIsQuestionType.value) {
                 choices.value[3] && selectChoice(choices.value[3].key, true)
-            }   
+            }
             break
         case 'KeyE':
             if (!isTEIsQuestionType.value) {
@@ -1053,7 +1060,7 @@ const keydownListener = (e: KeyboardEvent) => {
             }
             break
         case 'KeyX':
-            (showAnswers.value || showMatrixAnswers.value || showBuildListOrder.value || showMPMCAnswers.value) 
+            (showAnswers.value || showMatrixAnswers.value || showBuildListOrder.value || showMPMCAnswers.value)
             && toggleExplanation()
             break
         case 'Escape':
@@ -1062,8 +1069,8 @@ const keydownListener = (e: KeyboardEvent) => {
             break
         case 'Enter':
             if (
-                !showAnswers.value 
-                && selectedChoices.value.length 
+                !showAnswers.value
+                && selectedChoices.value.length
                 && focusChoiceKey.value === null
                 && !isTEIsQuestionType.value
             ) {
@@ -1153,7 +1160,7 @@ const updateSelectedBuildListChoiceOrder = (buildListChoiceOrder: TBuildListChoi
 }
 
 // deterministic shuffling of choices so they don't change order everytime you reload the component
-const shuffleChoices = (choicesToShuffle: TChoice[]): TChoice[]=> {
+const shuffleChoices = (choicesToShuffle: TChoice[]): TChoice[] => {
     const sortedChoices = choicesToShuffle.sort((a, b) => {
         const hashChar = (char: string, num: number) => ((num << 5) - num) + char.charCodeAt(0)
 
@@ -1177,7 +1184,7 @@ const shuffleChoices = (choicesToShuffle: TChoice[]): TChoice[]=> {
         : sortedChoices
 }
 
-const shuffleBuildListChoices = (choicesToShuffle: TBuildListChoice[]): TBuildListChoice[]=> {
+const shuffleBuildListChoices = (choicesToShuffle: TBuildListChoice[]): TBuildListChoice[] => {
     const sortedChoices = choicesToShuffle.sort((a, b) => {
         const hashChar = (char: string, num: number) => ((num << 5) - num) + char.charCodeAt(0)
 
@@ -1201,7 +1208,7 @@ const shuffleBuildListChoices = (choicesToShuffle: TBuildListChoice[]): TBuildLi
         : sortedChoices
 }
 
-const shuffleMPMCChoices = (choicesToShuffle: TMPMCChoice[]): TMPMCChoice[]=> {
+const shuffleMPMCChoices = (choicesToShuffle: TMPMCChoice[]): TMPMCChoice[] => {
     const sortedChoices = choicesToShuffle.sort((a, b) => {
         const hashChar = (char: string, num: number) => ((num << 5) - num) + char.charCodeAt(0)
 
@@ -1263,8 +1270,8 @@ const handleTouchMove = (event: TouchEvent) => {
         const changedY = event?.changedTouches[0]?.clientY || null
         const changedX = event?.changedTouches[0]?.clientX || null
         if (
-            changedY !== null 
-            && changedX !== null 
+            changedY !== null
+            && changedX !== null
             && swipeStart.value.y !== null
             && swipeStart.value.x !== null
             && Math.abs(changedX - swipeStart.value.x) > 26
@@ -1539,14 +1546,15 @@ watch(() => props.previousMatrixChoices, (previousMatrixChoices: TMatrixChoiceKe
     }
 }, { deep: true })
 
-watch(() => 
-    props.previousMultiPartMultipleChoiceChoices, 
-(previousMultiPartMultipleChoiceChoices: TChoiceKey[] | undefined | null    
-) => {
-    if (previousMultiPartMultipleChoiceChoices) {
-        updateSelectedMPMCChoices(previousMultiPartMultipleChoiceChoices)
-    }
-}, { deep: true })
+watch(
+    () => props.previousMultiPartMultipleChoiceChoices,
+    (previousMultiPartMultipleChoiceChoices: TChoiceKey[] | undefined | null) => {
+        if (previousMultiPartMultipleChoiceChoices) {
+            updateSelectedMPMCChoices(previousMultiPartMultipleChoiceChoices)
+        }
+    },
+    { deep: true }
+)
 
 watch(() => props.previousBuildListChoices, (previousBuildListChoices: TBuildListChoiceKey[] | undefined | null) => {
     if (previousBuildListChoices) {
@@ -1574,7 +1582,7 @@ watch(selectedMatrixChoices, () => {
 
 watch(selectedBuildListChoiceOrder, () => {
     emitSelectedChoices({
-        isCorrect: correctOrderBuildListAnswerKeys.value.length === selectedBuildListChoiceOrder.value.length 
+        isCorrect: correctOrderBuildListAnswerKeys.value.length === selectedBuildListChoiceOrder.value.length
             && correctOrderBuildListAnswerKeys.value.every(
                 (item, index) => item === selectedBuildListChoiceOrder.value[index]),
         selectedChoices: selectedBuildListChoiceOrder.value,
@@ -1910,7 +1918,7 @@ provide(InjectionKeys.isTeachGroupReviewKey, isTeachGroupReview)
         cursor: pointer;
         font-size: 10px;
         line-height: 1;
-        
+
         &[data-location="explanation"] {
             padding-top: 4.84px;
             background-color: $manilla;

package/lib/components/Quiz/QuizContainer.vue

@@ -214,4 +214,4 @@ onMounted(() => {
         }
     }
 }
-</style>
+</style>