@pocketprep/ui-kit 3.5.30 → 3.7.0

package/lib/components/Quiz/Question.vue

@@ -33,6 +33,8 @@
                 'uikit-question__main--mcr': isMCR,
                 'uikit-question__main--mcr-review-mode': isMCR && reviewMode,
                 'uikit-question__main--matrix-question-review-mode': isMatrixQuestion && reviewMode,
+                'uikit-question__main--mpmc-question-review-mode': isMPMCQuestion && reviewMode,
+                'uikit-question__main--build-list-question-review-mode': isBuildListQuestion && reviewMode,
             }"
         >
             <div v-if="!showPassageAndImage && !showExplanation && !showPaywall">
@@ -100,7 +102,7 @@
                 @upgradeClicked="emitUpgrade"
             />
             <div
-                v-if="(showAnswers || showMatrixAnswers) && isTeachReview && isUnanswered"
+                v-if="(showAnswers || showMatrixAnswers || showMPMCAnswers) && isTeachReview && isUnanswered"
                 v-dark="isDarkMode"
                 class="uikit-question__unanswered-teach-review-label"
             >
@@ -117,9 +119,11 @@
                     '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': !(isMCR || isUnanswered || isMatrixQuestion)
+                    'uikit-question__choices--no-actions': 
+                        !(isMCR || isUnanswered || isMatrixQuestion || isBuildListQuestion || isMPMCQuestion)
                         && !globalMetrics
                         && (
                             reviewMode
@@ -136,7 +140,16 @@
                 "
             >
                 <div
-                    v-if="showAnswers && !isMCR && !isMatrixQuestion && isUnanswered && !isCorrect && !isTeachReview"
+                    v-if="
+                        showAnswers 
+                            && !isMCR 
+                            && !isMatrixQuestion 
+                            && !isMPMCQuestion 
+                            && !isBuildListQuestion
+                            && isUnanswered 
+                            && !isCorrect 
+                            && !isTeachReview
+                    "
                     v-dark="isDarkMode"
                     class="uikit-question__unanswered-label"
                 >
@@ -148,7 +161,11 @@
                     />
                 </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 !== 'Multi-Part Multiple Choice'
+                            && question.type !== 'Build List'"
                     ref="uikit-question__choices-container"
                     @emitChoiceMouseOver="choiceMouseOver"
                     @emitChoiceMouseLeave="choiceMouseLeave"
@@ -243,9 +260,34 @@
                         <slot name="explanationBottomExperiment" />
                     </template>
                 </MobileMatrixChoicesContainer>
+                <MPMCChoicesContainer
+                    v-if="question.type === 'Multi-Part Multiple Choice'"
+                    class="uikit-question__mpmc-choices-container"
+                    v-breakpoint="breakpointsWithEl"
+                    @emitSelectedMPMCChoice="selectMPMCChoice"
+                > 
+                    <template #explanationBottomExperiment>
+                        <slot name="explanationBottomExperiment" />
+                    </template>
+                </MPMCChoicesContainer>
+                <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)) 
+                        || (isMPMCQuestion && showMPMCAnswers)
+                        || (isBuildListQuestion && showBuildListOrder)
+                        && !showPaywall"
                 ref="uikit-question__summary"
                 class="uikit-question__summary"
                 @click="keywordClick"
@@ -294,7 +336,14 @@
             >
                 <slot name="action">
                     <PocketButton
-                        v-if="!showAnswers && !hideAnswer && (showCheckAnswer || isMCR) && !isMatrixQuestion"
+                        v-if="
+                            !showAnswers 
+                                && !hideAnswer 
+                                && (showCheckAnswer || isMCR) 
+                                && !isMatrixQuestion
+                                && !isBuildListQuestion
+                                && !isMPMCQuestion
+                        "
                         :disabled="!selectedChoices.length"
                         :is-dark-mode="isDarkMode"
                         @click="clickCheckAnswer"
@@ -310,14 +359,41 @@
                         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="isMPMCQuestion && !showMPMCAnswers && !hideAnswer"
+                        :disabled="!isMPMCQuestionAnswered"
+                        :is-dark-mode="isDarkMode"
+                        @click="clickCheckMPMCAnswer"
+                    >
+                        Check Answer
+                    </PocketButton>
+
+                    <PocketButton
+                        v-else-if="(
+                            showAnswers 
+                            || showMatrixAnswers 
+                            || showBuildListOrder
+                            || showMPMCAnswers 
+                            || 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 || showMPMCAnswers || hideAnswer ) 
+                                && showNextQuestion
+                        "
                         :is-dark-mode="isDarkMode"
                         @click="emitNextQuestion"
                     >
@@ -341,6 +417,7 @@
             :class="{
                 'uikit-question__right-side--explanation': showExplanation && !showPaywall,
                 'uikit-question__right-side--matrix-question-review-mode': isMatrixQuestion && reviewMode,
+                'uikit-question__right-side--mpmc-question-review-mode': isMPMCQuestion && reviewMode,
             }"
         >
             <PassageAndImage
@@ -382,6 +459,8 @@ 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 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 { 
@@ -389,9 +468,12 @@ import type {
     TQuizMode,
     TChoiceKey,
     TMatrixChoiceKey,
+    TBuildListChoiceKey,
     TChoice,
+    TBuildListChoice,
     TChoiceScores,
     TMatrixChoiceScores,
+    TBuildListChoiceScores,
     TViewNames,
     IScenarioSerial,
 } from './question'
@@ -411,6 +493,8 @@ const props = withDefaults(defineProps<{
     reviewMode?: boolean
     previousChoices?: TChoiceKey[] | null
     previousMatrixChoices?: TMatrixChoiceKey[] | null
+    previousMultiPartMultipleChoiceChoices?: TChoiceKey[] | null
+    previousBuildListChoices?: TBuildListChoiceKey[] | null
     globalMetrics?: Study.Class.GlobalQuestionMetricJSON | null
     showNames?: TViewNames | null
     allowKeyboardShortcuts?: boolean
@@ -435,6 +519,8 @@ const props = withDefaults(defineProps<{
     reviewMode: false,
     previousChoices: null,
     previousMatrixChoices: null,
+    previousMultiPartMultipleChoiceChoices: null,
+    previousBuildListChoices: null,
     globalMetrics: null,
     showNames: null,
     allowKeyboardShortcuts: true,
@@ -488,8 +574,12 @@ const focusChoiceKey = ref<TChoiceKey | null>(null)
 const choiceStrikes = ref<TChoiceKey[]>([])
 const selectedChoices = ref<TChoiceKey[]>([])
 const selectedMatrixChoices = ref<TMatrixChoiceKey[]>([])
+const selectedMPMCChoices = ref<TChoiceKey[]>([])
+const selectedBuildListChoiceOrder = ref<TBuildListChoiceKey[]>([])
 const showAnswers = ref(false)
 const showMatrixAnswers = ref(false)
+const showMPMCAnswers = ref(false)
+const showBuildListOrder = ref(false)
 const showExplanation = ref(false)
 const showPassageImageLongAlt = ref(false)
 const showExplanationImageLongAlt = ref(false)
@@ -517,6 +607,7 @@ const questionSummaryRef = useTemplateRef<{
     mcrLongAltEl?: HTMLElement
     summaryMCRExplanationEl?: HTMLElement
     summaryMatrixExplanationEl?: HTMLElement
+    summaryBuildListExplanationEl?: HTMLElement
 }>('uikit-question__summary')
 const questionExplanationRef = useTemplateRef<{
     explanationTitleEl?: HTMLElement
@@ -561,6 +652,14 @@ const isMatrixQuestion = computed(() => {
     return props.question.type === 'Matrix Checkbox' || props.question.type === 'Matrix Radio Button'
 })
 
+const isMPMCQuestion = computed(() => {
+    return props.question.type === 'Multi-Part Multiple Choice'
+})
+
+const isBuildListQuestion = computed(() => {
+    return props.question.type === 'Build List'
+})
+
 const questionScenario = computed(() => {
     return props.question.questionScenario as Study.Class.QuestionScenarioJSON | undefined
 })
@@ -648,6 +747,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 +775,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 +814,20 @@ const isMatrixQuestionCorrect = computed(() => {
         && !selectedMatrixChoices.value.join(' ').includes('d')
 })
 
+const isMPMCQuestionCorrect = computed(() => {
+    return showMPMCAnswers.value
+        && selectedMPMCChoices.value.length === answerKeys.value.length
+        && !selectedMPMCChoices.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 = {
@@ -718,7 +867,49 @@ const matrixChoiceScores = computed((): TMatrixChoiceScores => {
     const scores: TMatrixChoiceScores = {
         totalAnswered: selectedMatrixChoices.value.length && 
             showMatrixAnswers && !props.reviewMode ? 1 : 0,
-        answeredCorrectly: isCorrect.value && !props.reviewMode ? 1 : 0,
+        answeredCorrectly: isMatrixQuestionCorrect.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 mpmcChoiceScores = computed((): TChoiceScores => {
+    const metrics = props.globalMetrics
+
+    const scores: TChoiceScores = {
+        totalAnswered: selectedMPMCChoices.value.length && 
+            showMPMCAnswers && !props.reviewMode ? 1 : 0,
+        answeredCorrectly: isMPMCQuestionCorrect.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 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) {
@@ -754,12 +945,38 @@ const isMatrixQuestionAnswered = computed(() => {
     return false
 })
 
+const isMPMCQuestionAnswered = computed(() => {
+    const mpmcLabels = question.value.mpmcLabels
+    const mpmcChoices = question.value.choices
+    const selectedMPMCLabelIndexes: number[] = []
+
+    selectedMPMCChoices.value.forEach(choice => {
+        const mpmcChoiceObj = mpmcChoices.find(c => c.id === choice)
+        if (
+            mpmcChoiceObj?.labelIndex !== undefined
+            && !selectedMPMCLabelIndexes.includes(mpmcChoiceObj?.labelIndex)
+        ) {
+            selectedMPMCLabelIndexes.push(mpmcChoiceObj?.labelIndex)
+        }
+    })
+
+    return mpmcLabels?.length === selectedMPMCLabelIndexes.length
+})
+
 const isUnanswered = computed(() => {
-    if (!isMatrixQuestion.value) {
-        return selectedChoices.value.length === 0
+    if (isBuildListQuestion.value) {
+        return selectedBuildListChoiceOrder.value.length === 0
+    }
+
+    if (isMPMCQuestion.value) {
+        return !isMPMCQuestionAnswered.value
     }
 
-    return !isMatrixQuestionAnswered.value
+    if (isMatrixQuestion.value) {
+        return !isMatrixQuestionAnswered.value
+    }
+
+    return selectedChoices.value.length === 0
 })
 
 const prompt = computed(() => {
@@ -854,20 +1071,28 @@ 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 (isMPMCQuestion.value) {
+        showMPMCAnswers.value = true
+        selectedMPMCChoices.value = answerKeys.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
+    showMPMCAnswers.value = false
+    showBuildListOrder.value = false
     showExplanation.value = false
     selectedChoices.value = []
     selectedMatrixChoices.value = []
@@ -881,8 +1106,16 @@ const updateSelectedMatrixChoices = (matrixChoices: TMatrixChoiceKey[]) => {
     selectedMatrixChoices.value = [ ...matrixChoices ]
 }
 
+const updateSelectedMPMCChoices = (updatedChoices: TChoiceKey[]) => {
+    selectedMPMCChoices.value = [ ...updatedChoices ]
+}
+
+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 +1139,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 +1307,21 @@ const selectMatrixChoice = (matrixChoiceKeys: TMatrixChoiceKey[]) => {
     selectedMatrixChoices.value = matrixChoiceKeys
 }
 
+const selectMPMCChoice = (mpmcChoiceKeys: TChoiceKey[]) => {
+    if (showMPMCAnswers.value) {
+        return
+    }
+    selectedMPMCChoices.value = mpmcChoiceKeys
+}
+
+const handleBuildListReorder = (reorderedChoices: TBuildListChoice[]) => {
+    if (showBuildListOrder.value) {
+        return
+    }
+
+    selectedBuildListChoiceOrder.value = reorderedChoices.map(choice => choice.key)
+}
+
 const togglePassageImageLongAlt = () => {
     showPassageImageLongAlt.value = !showPassageImageLongAlt.value
 
@@ -1151,6 +1423,41 @@ const clickCheckMatrixAnswer = () => {
     }
 }
 
+const clickCheckMPMCAnswer = () => {
+    if (!props.hideAnswer) {
+        showMPMCAnswers.value = true
+
+        emitCheckAnswer({
+            isCorrect: isMPMCQuestionCorrect.value,
+            selectedChoices: selectedMPMCChoices.value,
+            questionSerial: props.question.serial,
+        })
+
+        const summaryMatrixExplanationEl = questionSummaryRef?.value?.summaryMatrixExplanationEl
+        if (summaryMatrixExplanationEl) {
+            summaryMatrixExplanationEl?.focus()
+        }
+    }
+}
+
+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 +1478,21 @@ watch(() => props.previousMatrixChoices, (previousMatrixChoices: TMatrixChoiceKe
     }
 }, { deep: true })
 
+watch(() => 
+    props.previousMultiPartMultipleChoiceChoices, 
+(previousMultiPartMultipleChoiceChoices: TChoiceKey[] | undefined | null    
+) => {
+    if (previousMultiPartMultipleChoiceChoices) {
+        updateSelectedMPMCChoices(previousMultiPartMultipleChoiceChoices)
+    }
+}, { 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
@@ -1189,6 +1511,25 @@ watch(selectedMatrixChoices, () => {
     } as Study.Cloud.IQuizAnswer)
 }, { deep: true })
 
+watch(selectedBuildListChoiceOrder, () => {
+    emitSelectedChoices({
+        isCorrect: correctOrderBuildListAnswerKeys.value.length === selectedBuildListChoiceOrder.value.length 
+            && correctOrderBuildListAnswerKeys.value.every(
+                (item, index) => item === selectedBuildListChoiceOrder.value[index]),
+        selectedChoices: selectedBuildListChoiceOrder.value,
+        questionSerial: props.question.serial,
+    } as Study.Cloud.IQuizAnswer)
+}, { deep: true })
+
+watch(selectedMPMCChoices, () => {
+    emitSelectedChoices({
+        isCorrect: selectedMPMCChoices.value.length === answerKeys.value.length
+            && !selectedMPMCChoices.value.join(' ').includes('d'),
+        selectedChoices: selectedMPMCChoices.value,
+        questionSerial: props.question.serial,
+    } as Study.Cloud.IQuizAnswer)
+}, { deep: true })
+
 watch(showExplanation, () => {
     emitUpdateShowExplanation()
 })
@@ -1229,7 +1570,7 @@ if (props.reviewMode) {
     startReviewMode()
 }
 
-if (!isMatrixQuestion.value && props.previousChoices) {
+if (!isMatrixQuestion.value && !isMPMCQuestion.value && !isBuildListQuestion.value && props.previousChoices) {
     updateSelectedChoices(props.previousChoices)
 }
 
@@ -1237,12 +1578,22 @@ if (isMatrixQuestion.value && props.previousMatrixChoices) {
     updateSelectedMatrixChoices(props.previousMatrixChoices)
 }
 
+if (isBuildListQuestion.value && props.previousBuildListChoices) {
+    updateSelectedBuildListChoiceOrder(props.previousBuildListChoices)
+}
+
+if (isMPMCQuestion.value && props.previousMultiPartMultipleChoiceChoices) {
+    updateSelectedMPMCChoices(props.previousMultiPartMultipleChoiceChoices)
+}
+
 onMounted(() => {
     questionEl.value = props.containerEl || questionRef.value
 
     if (props.initialShowAnswers) {
         showAnswers.value = props.initialShowAnswers
         showMatrixAnswers.value = props.initialShowAnswers
+        showMPMCAnswers.value = props.initialShowAnswers
+        showBuildListOrder.value = props.initialShowAnswers
     }
 
     if (props.allowKeyboardShortcuts) {
@@ -1269,6 +1620,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 +1631,8 @@ provide(InjectionKeys.isCorrectKey, isCorrect)
 provide(InjectionKeys.contextIconTypeKey, contextIconType)
 provide(InjectionKeys.showAnswersKey, showAnswers)
 provide(InjectionKeys.showMatrixAnswersKey, showMatrixAnswers)
+provide(InjectionKeys.showMPMCAnswersKey, showMPMCAnswers)
+provide(InjectionKeys.showBuildListOrderKey, showBuildListOrder)
 provide(InjectionKeys.imageUrlPrefixKey, imageUrlPrefix)
 provide(InjectionKeys.passageImageUrlKey, passageImageUrl)
 provide(InjectionKeys.passageImageAltKey, passageImageAlt)
@@ -1307,10 +1661,18 @@ provide(InjectionKeys.keywordDefinitionsKey, keywordDefinitions)
 provide(InjectionKeys.showPaywallKey, showPaywall)
 provide(InjectionKeys.showPassageAndImageKey, showPassageAndImage)
 provide(InjectionKeys.isMatrixQuestionKey, isMatrixQuestion)
+provide(InjectionKeys.isMPMCQuestionKey, isMPMCQuestion)
 provide(InjectionKeys.matrixChoiceScoresKey, matrixChoiceScores)
+provide(InjectionKeys.mpmcChoiceScoresKey, mpmcChoiceScores)
 provide(InjectionKeys.isMatrixQuestionCorrectKey, isMatrixQuestionCorrect)
+provide(InjectionKeys.isMPMCQuestionCorrectKey, isMPMCQuestionCorrect)
 provide(InjectionKeys.matrixAnswerKeysKey, matrixAnswerKeys)
 provide(InjectionKeys.selectedMatrixChoicesKey, selectedMatrixChoices)
+provide(InjectionKeys.selectedMPMCChoicesKey, selectedMPMCChoices)
+provide(InjectionKeys.isBuildListQuestionKey, isBuildListQuestion)
+provide(InjectionKeys.buildListChoiceScoresKey, buildListChoiceScores)
+provide(InjectionKeys.isBuildListOrderCorrectKey, isBuildListOrderCorrect)
+provide(InjectionKeys.selectedBuildListChoiceOrderKey, selectedBuildListChoiceOrder)
 provide(InjectionKeys.isTeachGroupReviewKey, isTeachGroupReview)
 </script>
 
@@ -1392,16 +1754,19 @@ provide(InjectionKeys.isTeachGroupReviewKey, isTeachGroupReview)
             padding: 0 17px;
         }
 
-        &--matrix-question-review-mode#{&}--tablet-landscape:not(&--tablet-portrait) {
+        &--matrix-question-review-mode#{&}--tablet-landscape:not(&--tablet-portrait),
+        &--mpmc-question-review-mode#{&}--tablet-landscape:not(&--tablet-portrait) {
             width: 100%;
             padding-right: 42px;
         }
 
-        &--matrix-question-review-mode#{&}--mobile {
+        &--matrix-question-review-mode#{&}--mobile,
+        &--mpmc-question-review-mode#{&}--mobile {
             overflow-y: scroll;
         }
 
-        &--mcr-review-mode#{&}--mobile {
+        &--mcr-review-mode#{&}--mobile,
+        &--build-list-question-review-mode#{&}--mobile {
             overflow-y: scroll;
             width: 100%;
             padding-right: 17px;
@@ -1421,7 +1786,8 @@ provide(InjectionKeys.isTeachGroupReviewKey, isTeachGroupReview)
             display: none;
         }
 
-        &--matrix-question-review-mode#{&}--tablet-landscape {
+        &--matrix-question-review-mode#{&}--tablet-landscape,
+        &--mpmc-question-review-mode#{&}--tablet-landscape {
             display: none;
         }
 
@@ -1727,6 +2093,10 @@ provide(InjectionKeys.isTeachGroupReviewKey, isTeachGroupReview)
         &--matrix {
             max-width: 518px;
         }
+
+        &--mpmc {
+            max-width: 518px;
+        }
     }
 
     &__unanswered-label {