@pocketprep/ui-kit 3.6.0 → 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,10 +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 || isBuildListQuestion)
+                        !(isMCR || isUnanswered || isMatrixQuestion || isBuildListQuestion || isMPMCQuestion)
                         && !globalMetrics
                         && (
                             reviewMode
@@ -137,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"
                 >
@@ -152,6 +164,7 @@
                     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"
@@ -247,6 +260,16 @@
                         <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"
@@ -260,8 +283,9 @@
             </div>
             <Summary
                 v-if="
-                    ((isMCR && showAnswers)
-                        || (isMatrixQuestion && showMatrixAnswers))
+                    ((isMCR && showAnswers) 
+                        || (isMatrixQuestion && showMatrixAnswers)) 
+                        || (isMPMCQuestion && showMPMCAnswers)
                         || (isBuildListQuestion && showBuildListOrder)
                         && !showPaywall"
                 ref="uikit-question__summary"
@@ -317,7 +341,9 @@
                                 && !hideAnswer 
                                 && (showCheckAnswer || isMCR) 
                                 && !isMatrixQuestion
-                                && !isBuildListQuestion"
+                                && !isBuildListQuestion
+                                && !isMPMCQuestion
+                        "
                         :disabled="!selectedChoices.length"
                         :is-dark-mode="isDarkMode"
                         @click="clickCheckAnswer"
@@ -341,9 +367,22 @@
                         Check Answer
                     </PocketButton>
                     <PocketButton
-                        v-else-if="
-                            (showAnswers || showMatrixAnswers || showBuildListOrder || hideAnswer) 
-                                && (questionNumber >= quizLength)
+                        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"
@@ -352,7 +391,7 @@
                     </PocketButton>
                     <PocketButton
                         v-else-if="
-                            (showAnswers || showMatrixAnswers || showBuildListOrder || hideAnswer ) 
+                            (showAnswers || showMatrixAnswers || showBuildListOrder || showMPMCAnswers || hideAnswer ) 
                                 && showNextQuestion
                         "
                         :is-dark-mode="isDarkMode"
@@ -378,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
@@ -419,6 +459,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 MPMCChoicesContainer from '../Quiz/Question/MPMCChoicesContainer.vue'
 import BuildListChoicesContainer from './Question/BuildListChoicesContainer.vue'
 import type { Study } from '@pocketprep/types'
 import { highlightKeywordsInText, studyModes } from '../../utils'
@@ -452,6 +493,7 @@ 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
@@ -477,6 +519,7 @@ const props = withDefaults(defineProps<{
     reviewMode: false,
     previousChoices: null,
     previousMatrixChoices: null,
+    previousMultiPartMultipleChoiceChoices: null,
     previousBuildListChoices: null,
     globalMetrics: null,
     showNames: null,
@@ -531,9 +574,11 @@ 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)
@@ -607,6 +652,10 @@ 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'
 })
@@ -765,6 +814,12 @@ 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 
@@ -812,7 +867,28 @@ 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) {
@@ -869,11 +945,33 @@ 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 (isBuildListQuestion.value) {
         return selectedBuildListChoiceOrder.value.length === 0
     }
 
+    if (isMPMCQuestion.value) {
+        return !isMPMCQuestionAnswered.value
+    }
+
     if (isMatrixQuestion.value) {
         return !isMatrixQuestionAnswered.value
     }
@@ -978,6 +1076,9 @@ const startReviewMode = () => {
     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
         selectedMatrixChoices.value = matrixAnswerKeys.value
@@ -990,6 +1091,7 @@ const startReviewMode = () => {
 const stopReviewMode = () => {
     showAnswers.value = false
     showMatrixAnswers.value = false
+    showMPMCAnswers.value = false
     showBuildListOrder.value = false
     showExplanation.value = false
     selectedChoices.value = []
@@ -1004,6 +1106,10 @@ const updateSelectedMatrixChoices = (matrixChoices: TMatrixChoiceKey[]) => {
     selectedMatrixChoices.value = [ ...matrixChoices ]
 }
 
+const updateSelectedMPMCChoices = (updatedChoices: TChoiceKey[]) => {
+    selectedMPMCChoices.value = [ ...updatedChoices ]
+}
+
 const updateSelectedBuildListChoiceOrder = (buildListChoiceOrder: TBuildListChoiceKey[]) => {
     selectedBuildListChoiceOrder.value = [ ...buildListChoiceOrder ]
 }
@@ -1201,6 +1307,13 @@ 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
@@ -1310,6 +1423,23 @@ 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
@@ -1348,6 +1478,15 @@ 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)
@@ -1372,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()
 })
@@ -1412,11 +1570,7 @@ if (props.reviewMode) {
     startReviewMode()
 }
 
-if (isBuildListQuestion.value && props.previousBuildListChoices) {
-    updateSelectedBuildListChoiceOrder(props.previousBuildListChoices)
-}
-
-if (!isMatrixQuestion.value && props.previousChoices) {
+if (!isMatrixQuestion.value && !isMPMCQuestion.value && !isBuildListQuestion.value && props.previousChoices) {
     updateSelectedChoices(props.previousChoices)
 }
 
@@ -1424,12 +1578,21 @@ 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
     }
 
@@ -1468,6 +1631,7 @@ 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)
@@ -1497,13 +1661,17 @@ provide(InjectionKeys.keywordDefinitionsKey, keywordDefinitions)
 provide(InjectionKeys.showPaywallKey, showPaywall)
 provide(InjectionKeys.showPassageAndImageKey, showPassageAndImage)
 provide(InjectionKeys.isMatrixQuestionKey, isMatrixQuestion)
-provide(InjectionKeys.isBuildListQuestionKey, isBuildListQuestion)
+provide(InjectionKeys.isMPMCQuestionKey, isMPMCQuestion)
 provide(InjectionKeys.matrixChoiceScoresKey, matrixChoiceScores)
-provide(InjectionKeys.buildListChoiceScoresKey, buildListChoiceScores)
+provide(InjectionKeys.mpmcChoiceScoresKey, mpmcChoiceScores)
 provide(InjectionKeys.isMatrixQuestionCorrectKey, isMatrixQuestionCorrect)
-provide(InjectionKeys.isBuildListOrderCorrectKey, isBuildListOrderCorrect)
+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>
@@ -1586,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;
@@ -1615,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;
         }
 
@@ -1921,6 +2093,10 @@ provide(InjectionKeys.isTeachGroupReviewKey, isTeachGroupReview)
         &--matrix {
             max-width: 518px;
         }
+
+        &--mpmc {
+            max-width: 518px;
+        }
     }
 
     &__unanswered-label {

package/lib/utils.ts

@@ -157,3 +157,11 @@ export const highlightKeywordsInText = (params: {
     return result
 }
 
+export const stripHtmlTags = (string?: string) => {
+    if (string) {
+        const div = document.createElement('div')
+        div.innerHTML = string
+        return div.textContent || ''
+    }
+    return ''
+}

package/package.json

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