@pocketprep/ui-kit 3.5.30 → 3.6.0

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

@@ -4,23 +4,29 @@
         class="uikit-question-stats-summary"
     >
         <div v-dark="isDarkMode" class="uikit-question-stats-summary__stats-summary-total">
-            <div v-if="!isMatrixQuestion" class="uikit-question-stats-summary__stats-summary-value">
-                {{ choiceScores.totalAnswered }}
+            <div v-if="isBuildListQuestion" class="uikit-question-stats-summary__stats-summary-value">
+                {{ buildListChoiceScores.totalAnswered }}
             </div>
-            <div v-else class="uikit-question-stats-summary__stats-summary-value">
+            <div v-else-if="isMatrixQuestion" class="uikit-question-stats-summary__stats-summary-value">
                 {{ matrixChoiceScores.totalAnswered }}
             </div>
+            <div v-else class="uikit-question-stats-summary__stats-summary-value">
+                {{ choiceScores.totalAnswered }}
+            </div>
             <div v-dark="isDarkMode" class="uikit-question-stats-summary__stats-summary-label">
                 Studiers Answered
             </div>
         </div>
         <div v-dark="isDarkMode" class="uikit-question-stats-summary__stats-summary-correct">
-            <div v-if="!isMatrixQuestion" class="uikit-question-stats-summary__stats-summary-value">
-                {{ Math.round((choiceScores.answeredCorrectly / choiceScores.totalAnswered) * 100) }}%
+            <div v-if="isBuildListQuestion" class="uikit-question-stats-summary__stats-summary-value">
+                {{ Math.round((buildListChoiceScores.answeredCorrectly / buildListChoiceScores.totalAnswered) * 100) }}%
             </div>
-            <div v-else class="uikit-question-stats-summary__stats-summary-value">
+            <div v-else-if="isMatrixQuestion" class="uikit-question-stats-summary__stats-summary-value">
                 {{ Math.round((matrixChoiceScores.answeredCorrectly / matrixChoiceScores.totalAnswered) * 100) }}%
             </div>
+            <div v-else class="uikit-question-stats-summary__stats-summary-value">
+                {{ Math.round((choiceScores.answeredCorrectly / choiceScores.totalAnswered) * 100) }}%
+            </div>
             <div v-dark="isDarkMode" class="uikit-question-stats-summary__stats-summary-label">
                 Answered Correctly
             </div>
@@ -38,6 +44,8 @@ const {
     isDarkMode,
     isMatrixQuestion,
     matrixChoiceScores,
+    buildListChoiceScores,
+    isBuildListQuestion,
 } = useQuestionContext()
 </script>
 

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

@@ -7,6 +7,7 @@
         :class="{
             'uikit-question-summary--matrix-question': isMatrixQuestion,
             'uikit-question-summary--matrix-question-review-mode': isMatrixQuestion && reviewMode,
+            'uikit-question-summary--build-list-question': isBuildListQuestion,
         }"
     >
         <div class="uikit-question-summary__summary-title">
@@ -148,17 +149,20 @@ const {
     hideReferences,
     isCorrect,
     isMatrixQuestionCorrect,
+    isBuildListOrderCorrect,
     isUnanswered,
     reviewMode,
     isDarkMode,
     isMatrixQuestion,
+    isBuildListQuestion,
     breakpointsWithEl,
     keywordDefinitions,
 } = useQuestionContext()
 
 const isQuestionCorrect = computed(() => {
     return (!isMatrixQuestion.value && isCorrect.value) || 
-        (isMatrixQuestion.value && isMatrixQuestionCorrect.value && !isUnanswered.value)
+        (isMatrixQuestion.value && isMatrixQuestionCorrect.value && !isUnanswered.value) ||
+        (isBuildListQuestion.value && isBuildListOrderCorrect.value)
 })
 
 const summary = computed(() => {
@@ -208,10 +212,15 @@ const toggleSummaryExplanationImageLongAlt = () => {
         display: inline-block;
     }
 
-    &--tablet-portrait {
+    &--build-list-question {
+        max-width: 452px;
+        margin-left: 38px;
         display: inline-block;
     }
 
+    &--tablet-portrait {
+        display: inline-block;
+    }
 
     &__summary-title {
         font-weight: 600;

package/lib/components/Quiz/Question/composables.ts

@@ -1,6 +1,6 @@
 import { inject, ref } from 'vue'
 import * as InjectionKeys from './injectionSymbols'
-import type { TChoice, TChoiceKey, TMatrixChoiceKey } from '../question'
+import type { TChoice, TChoiceKey, TMatrixChoiceKey, TBuildListChoice } from '../question'
 
 export const useQuestionContext = () => {
     const question = inject(InjectionKeys.questionKey)
@@ -15,6 +15,7 @@ export const useQuestionContext = () => {
         question,
         choiceScores,
         choices: inject(InjectionKeys.choicesKey, ref<TChoice[]>([])),
+        buildListChoices: inject(InjectionKeys.buildListChoicesKey, ref<TBuildListChoice[]>([])),
         questionEl: inject(InjectionKeys.questionElKey, ref(null)),
         breakpointsWithEl: inject(InjectionKeys.breakpointsWithElKey, ref({
             breakpoints: {
@@ -32,6 +33,7 @@ export const useQuestionContext = () => {
         contextIconType: inject(InjectionKeys.contextIconTypeKey),
         showAnswers: inject(InjectionKeys.showAnswersKey, ref(false)),
         showMatrixAnswers: inject(InjectionKeys.showMatrixAnswersKey, ref(false)),
+        showBuildListOrder: inject(InjectionKeys.showBuildListOrderKey, ref(false)),
         imageUrlPrefix: inject(InjectionKeys.imageUrlPrefixKey, ref('')),
         passageImageUrl: inject(InjectionKeys.passageImageUrlKey, ref<string | null>(null)),
         passageImageAlt: inject(InjectionKeys.passageImageAltKey, ref<string | undefined>('')),
@@ -59,13 +61,20 @@ export const useQuestionContext = () => {
         showPaywall: inject(InjectionKeys.showPaywallKey, ref(false)),
         showPassageAndImage: inject(InjectionKeys.showPassageAndImageKey, ref(false)),
         isMatrixQuestion: inject(InjectionKeys.isMatrixQuestionKey, ref(false)),
+        isBuildListQuestion: inject(InjectionKeys.isBuildListQuestionKey, ref(false)),
         matrixChoiceScores: inject(InjectionKeys.matrixChoiceScoresKey, ref({
             totalAnswered: 0,
             answeredCorrectly: 0,
         })),
+        buildListChoiceScores: inject(InjectionKeys.buildListChoiceScoresKey, ref({
+            totalAnswered: 0,
+            answeredCorrectly: 0,
+        })),
         isMatrixQuestionCorrect: inject(InjectionKeys.isMatrixQuestionCorrectKey, ref(false)),
+        isBuildListOrderCorrect: inject(InjectionKeys.isBuildListOrderCorrectKey, ref(false)),
         matrixAnswerKeys: inject(InjectionKeys.matrixAnswerKeysKey, ref<TMatrixChoiceKey[]>([])),
         selectedMatrixChoices: inject(InjectionKeys.selectedMatrixChoicesKey, ref([])),
+        selectedBuildListChoiceOrder: inject(InjectionKeys.selectedBuildListChoiceOrderKey, ref([])),
         isTeachGroupReview: inject(InjectionKeys.isTeachGroupReviewKey, ref(false)),
     }
 }

package/lib/components/Quiz/Question/injectionSymbols.ts

@@ -1,17 +1,22 @@
+/* eslint-disable max-len */
 import type { Study } from '@pocketprep/types'
 import type {
+    TBuildListChoice,
     TChoice,
     TChoiceKey,
     TChoiceScores,
     TContextIcon,
     TMatrixChoiceKey,
+    TBuildListChoiceKey,
     TMatrixChoiceScores,
+    TBuildListChoiceScores,
     TQuizMode,
 } from '../question'
 import type { ComputedRef, InjectionKey, Ref } from 'vue'
 
 export const questionKey = Symbol('question') as InjectionKey<ComputedRef<Study.Class.QuestionJSON>>
 export const choicesKey = Symbol('choices') as InjectionKey<ComputedRef<TChoice[]>>
+export const buildListChoicesKey = Symbol('choices') as InjectionKey<ComputedRef<TBuildListChoice[]>>
 export const questionElKey = Symbol('questionEl') as InjectionKey<Ref<Element | null>>
 export const breakpointsWithElKey = Symbol('breakpointsWithEl') as InjectionKey<Ref<{
     breakpoints: {
@@ -29,6 +34,7 @@ export const isCorrectKey = Symbol('isCorrect') as InjectionKey<ComputedRef<bool
 export const contextIconTypeKey = Symbol('contextIconType') as InjectionKey<ComputedRef<TContextIcon>>
 export const showAnswersKey = Symbol('showAnswers') as InjectionKey<Ref<boolean>>
 export const showMatrixAnswersKey = Symbol('showMatrixAnswers') as InjectionKey<Ref<boolean>>
+export const showBuildListOrderKey = Symbol('showBuildListOrder') as InjectionKey<Ref<boolean>>
 export const imageUrlPrefixKey = Symbol('imageUrlPrefix') as InjectionKey<Ref<string>>
 export const passageImageUrlKey = Symbol('passageImageUrl') as InjectionKey<ComputedRef<string | null>>
 export const passageImageAltKey = Symbol('passageImageAlt') as InjectionKey<ComputedRef<string | undefined>>
@@ -62,8 +68,12 @@ export const keywordDefinitionsKey = Symbol('keywordDefinitions') as InjectionKe
 export const showPaywallKey = Symbol('showPaywall') as InjectionKey<Ref<boolean>>
 export const showPassageAndImageKey = Symbol('showPassageAndImage') as InjectionKey<ComputedRef<boolean>>
 export const isMatrixQuestionKey = Symbol('isMatrixQuestion') as InjectionKey<ComputedRef<boolean>>
+export const isBuildListQuestionKey = Symbol('isBuildListQuestion') as InjectionKey<ComputedRef<boolean>>
 export const matrixChoiceScoresKey = Symbol('matrixChoiceScores') as InjectionKey<ComputedRef<TMatrixChoiceScores>>
+export const buildListChoiceScoresKey = Symbol('buildListChoiceScores') as InjectionKey<ComputedRef<TBuildListChoiceScores>>
 export const isMatrixQuestionCorrectKey = Symbol('isMatrixQuestionCorrect') as InjectionKey<ComputedRef<boolean>>
+export const isBuildListOrderCorrectKey = Symbol('isBuildListOrderCorrect') as InjectionKey<ComputedRef<boolean>>
 export const matrixAnswerKeysKey = Symbol('matrixAnswerKeys') as InjectionKey<ComputedRef<TMatrixChoiceKey[]>>
 export const selectedMatrixChoicesKey = Symbol('selectedMatrixChoices') as InjectionKey<Ref<TMatrixChoiceKey[]>>
-export const isTeachGroupReviewKey = Symbol('isTeachGroupReview') as InjectionKey<Ref<boolean>>
+export const selectedBuildListChoiceOrderKey = Symbol('selectedBuildListChoiceOrder') as InjectionKey<Ref<TBuildListChoiceKey[]>>
+export const isTeachGroupReviewKey = Symbol('isTeachGroupReview') as InjectionKey<Ref<boolean>>

package/lib/components/Quiz/Question.vue

@@ -119,7 +119,8 @@
                     'uikit-question__choices--matrix': isMatrixQuestion,
                     'uikit-question__choices--unanswered': showAnswers && !isMCR && isUnanswered && !isCorrect,
                     'uikit-question__choices--show-stats': globalMetrics,
-                    'uikit-question__choices--no-actions': !(isMCR || isUnanswered || isMatrixQuestion)
+                    'uikit-question__choices--no-actions': 
+                        !(isMCR || isUnanswered || isMatrixQuestion || isBuildListQuestion)
                         && !globalMetrics
                         && (
                             reviewMode
@@ -148,7 +149,10 @@
                     />
                 </div>
                 <ChoicesContainer
-                    v-if="question.type !== 'Matrix Checkbox' && question.type !== 'Matrix Radio Button'"
+                    v-if="
+                        question.type !== 'Matrix Checkbox' 
+                            && question.type !== 'Matrix Radio Button'
+                            && question.type !== 'Build List'"
                     ref="uikit-question__choices-container"
                     @emitChoiceMouseOver="choiceMouseOver"
                     @emitChoiceMouseLeave="choiceMouseLeave"
@@ -243,9 +247,23 @@
                         <slot name="explanationBottomExperiment" />
                     </template>
                 </MobileMatrixChoicesContainer>
+                <BuildListChoicesContainer
+                    v-if="question.type === 'Build List'"
+                    class="uikit-question__build-list-choices-container"
+                    v-breakpoint="breakpointsWithEl"
+                    @reorderBuildList="handleBuildListReorder"
+                >
+                    <template #explanationBottomExperiment>
+                        <slot name="explanationBottomExperiment" />
+                    </template>
+                </BuildListChoicesContainer>
             </div>
             <Summary
-                v-if="((isMCR && showAnswers) || (isMatrixQuestion && showMatrixAnswers)) && !showPaywall"
+                v-if="
+                    ((isMCR && showAnswers)
+                        || (isMatrixQuestion && showMatrixAnswers))
+                        || (isBuildListQuestion && showBuildListOrder)
+                        && !showPaywall"
                 ref="uikit-question__summary"
                 class="uikit-question__summary"
                 @click="keywordClick"
@@ -294,7 +312,12 @@
             >
                 <slot name="action">
                     <PocketButton
-                        v-if="!showAnswers && !hideAnswer && (showCheckAnswer || isMCR) && !isMatrixQuestion"
+                        v-if="
+                            !showAnswers 
+                                && !hideAnswer 
+                                && (showCheckAnswer || isMCR) 
+                                && !isMatrixQuestion
+                                && !isBuildListQuestion"
                         :disabled="!selectedChoices.length"
                         :is-dark-mode="isDarkMode"
                         @click="clickCheckAnswer"
@@ -310,14 +333,28 @@
                         Check Answer
                     </PocketButton>
                     <PocketButton
-                        v-else-if="(showAnswers || showMatrixAnswers || hideAnswer) && (questionNumber >= quizLength)"
+                        v-else-if="isBuildListQuestion && !showBuildListOrder && !hideAnswer"
+                        :is-dark-mode="isDarkMode"
+                        :disabled="!selectedBuildListChoiceOrder.length"
+                        @click="clickCheckBuildListOrder"
+                    >
+                        Check Answer
+                    </PocketButton>
+                    <PocketButton
+                        v-else-if="
+                            (showAnswers || showMatrixAnswers || showBuildListOrder || hideAnswer) 
+                                && (questionNumber >= quizLength)
+                        "
                         :is-dark-mode="isDarkMode"
                         @click="emitSubmitQuiz"
                     >
                         Submit Quiz
                     </PocketButton>
                     <PocketButton
-                        v-else-if="(showAnswers || showMatrixAnswers || hideAnswer ) && showNextQuestion"
+                        v-else-if="
+                            (showAnswers || showMatrixAnswers || showBuildListOrder || hideAnswer ) 
+                                && showNextQuestion
+                        "
                         :is-dark-mode="isDarkMode"
                         @click="emitNextQuestion"
                     >
@@ -382,6 +419,7 @@ import Explanation from '../Quiz/Question/Explanation.vue'
 import PassageAndImage from '../Quiz/Question/PassageAndImage.vue'
 import MatrixChoicesContainer from '../Quiz/Question/MatrixChoicesContainer.vue'
 import MobileMatrixChoicesContainer from '../Quiz/Question/MobileMatrixChoicesContainer.vue'
+import BuildListChoicesContainer from './Question/BuildListChoicesContainer.vue'
 import type { Study } from '@pocketprep/types'
 import { highlightKeywordsInText, studyModes } from '../../utils'
 import type { 
@@ -389,9 +427,12 @@ import type {
     TQuizMode,
     TChoiceKey,
     TMatrixChoiceKey,
+    TBuildListChoiceKey,
     TChoice,
+    TBuildListChoice,
     TChoiceScores,
     TMatrixChoiceScores,
+    TBuildListChoiceScores,
     TViewNames,
     IScenarioSerial,
 } from './question'
@@ -411,6 +452,7 @@ const props = withDefaults(defineProps<{
     reviewMode?: boolean
     previousChoices?: TChoiceKey[] | null
     previousMatrixChoices?: TMatrixChoiceKey[] | null
+    previousBuildListChoices?: TBuildListChoiceKey[] | null
     globalMetrics?: Study.Class.GlobalQuestionMetricJSON | null
     showNames?: TViewNames | null
     allowKeyboardShortcuts?: boolean
@@ -435,6 +477,7 @@ const props = withDefaults(defineProps<{
     reviewMode: false,
     previousChoices: null,
     previousMatrixChoices: null,
+    previousBuildListChoices: null,
     globalMetrics: null,
     showNames: null,
     allowKeyboardShortcuts: true,
@@ -488,8 +531,10 @@ const focusChoiceKey = ref<TChoiceKey | null>(null)
 const choiceStrikes = ref<TChoiceKey[]>([])
 const selectedChoices = ref<TChoiceKey[]>([])
 const selectedMatrixChoices = ref<TMatrixChoiceKey[]>([])
+const selectedBuildListChoiceOrder = ref<TBuildListChoiceKey[]>([])
 const showAnswers = ref(false)
 const showMatrixAnswers = ref(false)
+const showBuildListOrder = ref(false)
 const showExplanation = ref(false)
 const showPassageImageLongAlt = ref(false)
 const showExplanationImageLongAlt = ref(false)
@@ -517,6 +562,7 @@ const questionSummaryRef = useTemplateRef<{
     mcrLongAltEl?: HTMLElement
     summaryMCRExplanationEl?: HTMLElement
     summaryMatrixExplanationEl?: HTMLElement
+    summaryBuildListExplanationEl?: HTMLElement
 }>('uikit-question__summary')
 const questionExplanationRef = useTemplateRef<{
     explanationTitleEl?: HTMLElement
@@ -561,6 +607,10 @@ const isMatrixQuestion = computed(() => {
     return props.question.type === 'Matrix Checkbox' || props.question.type === 'Matrix Radio Button'
 })
 
+const isBuildListQuestion = computed(() => {
+    return props.question.type === 'Build List'
+})
+
 const questionScenario = computed(() => {
     return props.question.questionScenario as Study.Class.QuestionScenarioJSON | undefined
 })
@@ -648,6 +698,16 @@ const matrixAnswerKeys = computed<TMatrixChoiceKey[]>(() => {
     return [] as TMatrixChoiceKey[]
 })
 
+const correctOrderBuildListAnswerKeys = computed((): TBuildListChoiceKey[] => {
+    const buildListChoices = props.question.choices.map(choice => choice.id) as TBuildListChoiceKey[]
+    return buildListChoices
+        .sort((a, b) => {
+            const aNum = Number(a.substring(1))
+            const bNum = Number(b.substring(1))
+            return aNum - bNum
+        })
+})
+
 const distractors = computed((): TChoice[] => {
     return props.question.choices.filter(choice => !choice.isCorrect).map((choice, index) => ({
         text: choice.text,
@@ -666,6 +726,32 @@ const choices = computed(() => {
     ])
 })
 
+const buildListChoices = computed(() => {
+    const blChoices = props.question.choices.map(choice => {
+        return {
+            text: choice.text,
+            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 
+})
+
 const isCorrect = computed(() => {
     // In order to be correct, user must have selected all the answers and none of the distractors
     return showAnswers.value
@@ -679,6 +765,14 @@ const isMatrixQuestionCorrect = computed(() => {
         && !selectedMatrixChoices.value.join(' ').includes('d')
 })
 
+const isBuildListOrderCorrect = computed(() => {
+    return showBuildListOrder.value
+        && correctOrderBuildListAnswerKeys.value.length === selectedBuildListChoiceOrder.value.length 
+        && correctOrderBuildListAnswerKeys.value.every(
+            (item, index) => item === selectedBuildListChoiceOrder.value[index]
+        )
+})
+
 const choiceScores = computed((): TChoiceScores => {
     const metrics = globalMetrics.value
     const scores: TChoiceScores = {
@@ -733,6 +827,27 @@ const matrixChoiceScores = computed((): TMatrixChoiceScores => {
     return scores
 })
 
+const buildListChoiceScores = computed((): TBuildListChoiceScores => {
+    const metrics = props.globalMetrics
+
+    const scores: TBuildListChoiceScores = {
+        totalAnswered: selectedBuildListChoiceOrder.value.length && 
+            showBuildListOrder && !props.reviewMode ? 1 : 0,
+        answeredCorrectly: isBuildListOrderCorrect.value && !props.reviewMode ? 1 : 0,
+    }
+
+    if (!metrics) {
+        return scores
+    }
+
+    scores.totalAnswered += (
+        (metrics.answeredCorrectlyCount || 0)
+        + (metrics.answeredIncorrectlyCount || 0)
+    )
+    scores.answeredCorrectly += (metrics.answeredCorrectlyCount || 0)
+    return scores
+})
+
 const isMatrixQuestionAnswered = computed(() => {
     // Matrix questions are answered if each row has a selected choice
     if (isMatrixQuestion.value) {
@@ -755,11 +870,15 @@ const isMatrixQuestionAnswered = computed(() => {
 })
 
 const isUnanswered = computed(() => {
-    if (!isMatrixQuestion.value) {
-        return selectedChoices.value.length === 0
+    if (isBuildListQuestion.value) {
+        return selectedBuildListChoiceOrder.value.length === 0
+    }
+
+    if (isMatrixQuestion.value) {
+        return !isMatrixQuestionAnswered.value
     }
 
-    return !isMatrixQuestionAnswered.value
+    return selectedChoices.value.length === 0
 })
 
 const prompt = computed(() => {
@@ -854,20 +973,24 @@ const keywordClick = (event: MouseEvent) => {
 }
 
 const startReviewMode = () => {
-    if (!isMatrixQuestion.value) {
-        showAnswers.value = true
-        showExplanation.value = props.defaultShowExplanation === null ? true : props.defaultShowExplanation
-        selectedChoices.value = answerKeys.value
-    } else {
+    showExplanation.value = props.defaultShowExplanation === null ? true : props.defaultShowExplanation
+
+    if (isBuildListQuestion.value) {
+        showBuildListOrder.value = true
+        selectedBuildListChoiceOrder.value = correctOrderBuildListAnswerKeys.value
+    } else if (isMatrixQuestion.value) {
         showMatrixAnswers.value = true
-        showExplanation.value = props.defaultShowExplanation === null ? true : props.defaultShowExplanation
         selectedMatrixChoices.value = matrixAnswerKeys.value
+    } else {
+        showAnswers.value = true
+        selectedChoices.value = answerKeys.value
     }
 }
 
 const stopReviewMode = () => {
     showAnswers.value = false
     showMatrixAnswers.value = false
+    showBuildListOrder.value = false
     showExplanation.value = false
     selectedChoices.value = []
     selectedMatrixChoices.value = []
@@ -881,8 +1004,12 @@ const updateSelectedMatrixChoices = (matrixChoices: TMatrixChoiceKey[]) => {
     selectedMatrixChoices.value = [ ...matrixChoices ]
 }
 
+const updateSelectedBuildListChoiceOrder = (buildListChoiceOrder: TBuildListChoiceKey[]) => {
+    selectedBuildListChoiceOrder.value = [ ...buildListChoiceOrder ]
+}
+
 // 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)
 
@@ -906,6 +1033,30 @@ const shuffleChoices = (choicesToShuffle: TChoice[]): TChoice[] => {
         : sortedChoices
 }
 
+const shuffleBuildListChoices = (choicesToShuffle: TBuildListChoice[]): TBuildListChoice[]=> {
+    const sortedChoices = choicesToShuffle.sort((a, b) => {
+        const hashChar = (char: string, num: number) => ((num << 5) - num) + char.charCodeAt(0)
+
+        const aHash = a.text?.split('')
+            .reduce((acc: number, char: string) => hashChar(char, acc) & hashChar(char, acc), 0)
+        const bHash = b.text?.split('')
+            .reduce((acc: number, char: string) => hashChar(char, acc) & hashChar(char, acc), 0)
+
+        return (aHash || 0) - (bHash || 0)
+    })
+
+    return props.answerSeed
+        ? props.answerSeed.reduce<TBuildListChoice[]>((acc, i) => {
+            const sortedChoice = sortedChoices[i]
+            if (sortedChoice) {
+                acc.push(sortedChoice)
+            }
+
+            return acc
+        }, [])
+        : sortedChoices
+}
+
 const choiceFocusOut = (event: FocusEvent) => {
     const relatedTarget = event.relatedTarget
     if (
@@ -1050,6 +1201,14 @@ const selectMatrixChoice = (matrixChoiceKeys: TMatrixChoiceKey[]) => {
     selectedMatrixChoices.value = matrixChoiceKeys
 }
 
+const handleBuildListReorder = (reorderedChoices: TBuildListChoice[]) => {
+    if (showBuildListOrder.value) {
+        return
+    }
+
+    selectedBuildListChoiceOrder.value = reorderedChoices.map(choice => choice.key)
+}
+
 const togglePassageImageLongAlt = () => {
     showPassageImageLongAlt.value = !showPassageImageLongAlt.value
 
@@ -1151,6 +1310,24 @@ const clickCheckMatrixAnswer = () => {
     }
 }
 
+const clickCheckBuildListOrder = () => {
+    if (!props.hideAnswer) {
+        showBuildListOrder.value = true
+
+        emitCheckAnswer({
+            isCorrect: isBuildListOrderCorrect.value,
+            selectedChoices: selectedBuildListChoiceOrder.value,
+            questionSerial: props.question.serial,
+        })
+
+        const summaryBuildListExplanationEl = questionSummaryRef?.value?.summaryBuildListExplanationEl
+
+        if (summaryBuildListExplanationEl) {
+            summaryBuildListExplanationEl?.focus()
+        }
+    }
+}
+
 watch(reviewMode, () => {
     if (reviewMode.value) {
         startReviewMode()
@@ -1171,6 +1348,12 @@ watch(() => props.previousMatrixChoices, (previousMatrixChoices: TMatrixChoiceKe
     }
 }, { deep: true })
 
+watch(() => props.previousBuildListChoices, (previousBuildListChoices: TBuildListChoiceKey[] | undefined | null) => {
+    if (previousBuildListChoices) {
+        updateSelectedBuildListChoiceOrder(previousBuildListChoices)
+    }
+}, { deep: true })
+
 watch(selectedChoices, () => {
     emitSelectedChoices({
         isCorrect: selectedChoices.value.length === answerKeys.value.length
@@ -1229,6 +1412,10 @@ if (props.reviewMode) {
     startReviewMode()
 }
 
+if (isBuildListQuestion.value && props.previousBuildListChoices) {
+    updateSelectedBuildListChoiceOrder(props.previousBuildListChoices)
+}
+
 if (!isMatrixQuestion.value && props.previousChoices) {
     updateSelectedChoices(props.previousChoices)
 }
@@ -1243,6 +1430,7 @@ onMounted(() => {
     if (props.initialShowAnswers) {
         showAnswers.value = props.initialShowAnswers
         showMatrixAnswers.value = props.initialShowAnswers
+        showBuildListOrder.value = props.initialShowAnswers
     }
 
     if (props.allowKeyboardShortcuts) {
@@ -1269,6 +1457,7 @@ onBeforeUnmount(() => {
 // Provide question context once, instead of passing as props to every child
 provide(InjectionKeys.questionKey, question)
 provide(InjectionKeys.choicesKey, choices)
+provide(InjectionKeys.buildListChoicesKey, buildListChoices)
 provide(InjectionKeys.questionElKey, questionEl)
 provide(InjectionKeys.breakpointsWithElKey, breakpointsWithEl)
 provide(InjectionKeys.quizLengthKey, quizLength)
@@ -1279,6 +1468,7 @@ provide(InjectionKeys.isCorrectKey, isCorrect)
 provide(InjectionKeys.contextIconTypeKey, contextIconType)
 provide(InjectionKeys.showAnswersKey, showAnswers)
 provide(InjectionKeys.showMatrixAnswersKey, showMatrixAnswers)
+provide(InjectionKeys.showBuildListOrderKey, showBuildListOrder)
 provide(InjectionKeys.imageUrlPrefixKey, imageUrlPrefix)
 provide(InjectionKeys.passageImageUrlKey, passageImageUrl)
 provide(InjectionKeys.passageImageAltKey, passageImageAlt)
@@ -1307,10 +1497,14 @@ provide(InjectionKeys.keywordDefinitionsKey, keywordDefinitions)
 provide(InjectionKeys.showPaywallKey, showPaywall)
 provide(InjectionKeys.showPassageAndImageKey, showPassageAndImage)
 provide(InjectionKeys.isMatrixQuestionKey, isMatrixQuestion)
+provide(InjectionKeys.isBuildListQuestionKey, isBuildListQuestion)
 provide(InjectionKeys.matrixChoiceScoresKey, matrixChoiceScores)
+provide(InjectionKeys.buildListChoiceScoresKey, buildListChoiceScores)
 provide(InjectionKeys.isMatrixQuestionCorrectKey, isMatrixQuestionCorrect)
+provide(InjectionKeys.isBuildListOrderCorrectKey, isBuildListOrderCorrect)
 provide(InjectionKeys.matrixAnswerKeysKey, matrixAnswerKeys)
 provide(InjectionKeys.selectedMatrixChoicesKey, selectedMatrixChoices)
+provide(InjectionKeys.selectedBuildListChoiceOrderKey, selectedBuildListChoiceOrder)
 provide(InjectionKeys.isTeachGroupReviewKey, isTeachGroupReview)
 </script>
 

package/lib/components/Quiz/question.d.ts

@@ -2,6 +2,7 @@ export type Ref = HTMLElement | null
 
 export type TChoiceKey = `${'a' | 'd'}${1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9}`
 export type TMatrixChoiceKey = `${'a' | 'd'}${1 | 2 | 3 }_${1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12}`
+export type TBuildListChoiceKey = `a${1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9}`
 
 export type TQuizMode = 'qotd' | 'quick10' | 'timed' | 'weakest' | 'missed' | 'custom'
 
@@ -15,6 +16,7 @@ export type TBreakPointsObject = {
 }
 
 export type TChoice = { text?: string; key: TChoiceKey }
+export type TBuildListChoice = { text?: string; key: TBuildListChoiceKey }
 
 export type TChoiceScores = Partial<Record<TChoiceKey, number>> & {
     totalAnswered: number
@@ -26,6 +28,11 @@ export type TMatrixChoiceScores = {
     answeredCorrectly: number
 }
 
+export type TBuildListChoiceScores = {
+    totalAnswered: number
+    answeredCorrectly: number
+}
+
 export type TQuestionPassageAndImageTitle = 'Passage + Image' | 'Image' | 'Passage'
 
 export type TNamesRow = {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pocketprep/ui-kit",
-  "version": "3.5.30",
+  "version": "3.6.0",
   "description": "Pocket Prep UI Kit",
   "author": "pocketprep",
   "scripts": {
@@ -82,7 +82,7 @@
     "vue-router": "4.5.0"
   },
   "devDependencies": {
-    "@pocketprep/types": "1.14.43",
+    "@pocketprep/types": "1.15.13",
     "@stylistic/eslint-plugin-ts": "4.2.0",
     "@tsconfig/node22": "22.0.0",
     "@types/node": "22.13.10",