@pocketprep/ui-kit 3.5.30 → 3.7.0

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

@@ -4,23 +4,35 @@
         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="isMPMCQuestion" class="uikit-question-stats-summary__stats-summary-value">
+                {{ mpmcChoiceScores.totalAnswered }}
             </div>
-            <div v-else class="uikit-question-stats-summary__stats-summary-value">
+            <div v-else-if="isBuildListQuestion" class="uikit-question-stats-summary__stats-summary-value">
+                {{ buildListChoiceScores.totalAnswered }}
+            </div>
+            <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="isMPMCQuestion" class="uikit-question-stats-summary__stats-summary-value">
+                {{ Math.round((mpmcChoiceScores.answeredCorrectly / mpmcChoiceScores.totalAnswered) * 100) }}%
             </div>
-            <div v-else class="uikit-question-stats-summary__stats-summary-value">
+            <div v-else-if="isBuildListQuestion" class="uikit-question-stats-summary__stats-summary-value">
+                {{ Math.round((buildListChoiceScores.answeredCorrectly / buildListChoiceScores.totalAnswered) * 100) }}%
+            </div>
+            <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>
@@ -37,7 +49,11 @@ const {
     choiceScores,    
     isDarkMode,
     isMatrixQuestion,
+    isMPMCQuestion,
     matrixChoiceScores,
+    mpmcChoiceScores,
+    buildListChoiceScores,
+    isBuildListQuestion,
 } = useQuestionContext()
 </script>
 

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

@@ -7,6 +7,10 @@
         :class="{
             'uikit-question-summary--matrix-question': isMatrixQuestion,
             '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': isBuildListQuestion,
+            'uikit-question-summary--build-list-question-review-mode': isBuildListQuestion && reviewMode,
         }"
     >
         <div class="uikit-question-summary__summary-title">
@@ -44,6 +48,10 @@
             :class="{
                 'uikit-question-summary__summary-dropdown-explanation--matrix-question-review-mode': 
                     isMatrixQuestion && reviewMode,
+                'uikit-question-summary__summary-dropdown-explanation--mpmc-question-review-mode': 
+                    isMPMCQuestion && reviewMode,
+                'uikit-question-summary__summary-dropdown-explanation--build-list-question-review-mode': 
+                    isBuildListQuestion && reviewMode,
             }"
         >
             <slot name="explanationTopExperiment"></slot>
@@ -148,17 +156,23 @@ const {
     hideReferences,
     isCorrect,
     isMatrixQuestionCorrect,
+    isMPMCQuestionCorrect,
+    isBuildListOrderCorrect,
     isUnanswered,
     reviewMode,
     isDarkMode,
     isMatrixQuestion,
+    isMPMCQuestion,
+    isBuildListQuestion,
     breakpointsWithEl,
     keywordDefinitions,
 } = useQuestionContext()
 
 const isQuestionCorrect = computed(() => {
-    return (!isMatrixQuestion.value && isCorrect.value) || 
-        (isMatrixQuestion.value && isMatrixQuestionCorrect.value && !isUnanswered.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(() => {
@@ -204,14 +218,24 @@ const toggleSummaryExplanationImageLongAlt = () => {
         max-width: 518px;
     }
 
-    &--matrix-question-review-mode#{&}--tablet-landscape {
+    &--build-list-question {
+        max-width: 452px;
+        margin-left: 38px;
         display: inline-block;
     }
 
-    &--tablet-portrait {
+    &--matrix-question-review-mode#{&}--tablet-landscape,
+    &--mpmc-question-review-mode#{&}--tablet-landscape {
         display: inline-block;
     }
 
+    &--mpmc-question {
+        max-width: 492px;
+    }
+
+    &--tablet-portrait {
+        display: inline-block;
+    }
 
     &__summary-title {
         font-weight: 600;
@@ -295,7 +319,9 @@ const toggleSummaryExplanationImageLongAlt = () => {
     &__summary-dropdown-explanation {
         display: none;
 
-        &--matrix-question-review-mode#{&}--tablet-landscape {
+        &--matrix-question-review-mode#{&}--tablet-landscape,
+        &--mpmc-question-review-mode#{&}--tablet-landscape,
+        &--build-list-question-review-mode#{&}--tablet-landscape {
             display: inline-block;
         }
 

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,8 @@ export const useQuestionContext = () => {
         contextIconType: inject(InjectionKeys.contextIconTypeKey),
         showAnswers: inject(InjectionKeys.showAnswersKey, ref(false)),
         showMatrixAnswers: inject(InjectionKeys.showMatrixAnswersKey, ref(false)),
+        showMPMCAnswers: inject(InjectionKeys.showMPMCAnswersKey, 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 +62,27 @@ export const useQuestionContext = () => {
         showPaywall: inject(InjectionKeys.showPaywallKey, ref(false)),
         showPassageAndImage: inject(InjectionKeys.showPassageAndImageKey, ref(false)),
         isMatrixQuestion: inject(InjectionKeys.isMatrixQuestionKey, ref(false)),
+        isMPMCQuestion: inject(InjectionKeys.isMPMCQuestionKey, ref(false)),
+        isBuildListQuestion: inject(InjectionKeys.isBuildListQuestionKey, ref(false)),
         matrixChoiceScores: inject(InjectionKeys.matrixChoiceScoresKey, ref({
             totalAnswered: 0,
             answeredCorrectly: 0,
         })),
+        mpmcChoiceScores: inject(InjectionKeys.mpmcChoiceScoresKey, ref({
+            totalAnswered: 0,
+            answeredCorrectly: 0,
+        })),
+        buildListChoiceScores: inject(InjectionKeys.buildListChoiceScoresKey, ref({
+            totalAnswered: 0,
+            answeredCorrectly: 0,
+        })),
         isMatrixQuestionCorrect: inject(InjectionKeys.isMatrixQuestionCorrectKey, ref(false)),
+        isMPMCQuestionCorrect: inject(InjectionKeys.isMPMCQuestionCorrectKey, ref(false)),
+        isBuildListOrderCorrect: inject(InjectionKeys.isBuildListOrderCorrectKey, ref(false)),
         matrixAnswerKeys: inject(InjectionKeys.matrixAnswerKeysKey, ref<TMatrixChoiceKey[]>([])),
         selectedMatrixChoices: inject(InjectionKeys.selectedMatrixChoicesKey, ref([])),
+        selectedMPMCChoices: inject(InjectionKeys.selectedMPMCChoicesKey, 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,8 @@ 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 showMPMCAnswersKey = Symbol('showMPMCAnswers') 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 +69,16 @@ 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 isMPMCQuestionKey = Symbol('isMPMCQuestion') as InjectionKey<ComputedRef<boolean>>
+export const isBuildListQuestionKey = Symbol('isBuildListQuestion') as InjectionKey<ComputedRef<boolean>>
 export const matrixChoiceScoresKey = Symbol('matrixChoiceScores') as InjectionKey<ComputedRef<TMatrixChoiceScores>>
+export const mpmcChoiceScoresKey = Symbol('mpmcChoiceScores') as InjectionKey<ComputedRef<TChoiceScores>>
+export const buildListChoiceScoresKey = Symbol('buildListChoiceScores') as InjectionKey<ComputedRef<TBuildListChoiceScores>>
 export const isMatrixQuestionCorrectKey = Symbol('isMatrixQuestionCorrect') as InjectionKey<ComputedRef<boolean>>
+export const isMPMCQuestionCorrectKey = Symbol('isMPMCQuestionCorrect') 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 selectedMPMCChoicesKey = Symbol('selectedMPMCChoices') as InjectionKey<Ref<TChoiceKey[]>>
+export const selectedBuildListChoiceOrderKey = Symbol('selectedBuildListChoiceOrder') as InjectionKey<Ref<TBuildListChoiceKey[]>>
 export const isTeachGroupReviewKey = Symbol('isTeachGroupReview') as InjectionKey<Ref<boolean>>