@pocketprep/ui-kit 3.7.2 → 3.7.3

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

@@ -438,7 +438,7 @@ watch(selectedBuildListChoiceOrder, () => {
         top: -8px;
         bottom: -8px;
         left: 8px;
-        right: 10px;
+        right: 14px;
         border-radius: 11px;
         pointer-events: none;
 

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

@@ -27,6 +27,7 @@ const {
     isDarkMode,
     showMPMCAnswers,
     selectedMPMCChoices,
+    mpmcChoices,
 } = useQuestionContext()
 
 const mpmcRadioGrid = ref<IMPMCRadioOptions[] | undefined>(undefined)
@@ -37,8 +38,7 @@ const mpmcLabels = computed(() => {
 })
 
 const questionChoices = computed(() => {
-    const choices = question.value.choices
-    return choices
+    return mpmcChoices.value
 })
 
 const choiceKeysByLabelIndexObj = computed(() => {

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

@@ -144,7 +144,7 @@ const radioButtonColor = (choice: TChoiceKey) => {
             }
 
             &:hover {
-                background: $fog;
+                background: $pearl;
             }
         }
 

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

@@ -231,6 +231,7 @@ const toggleSummaryExplanationImageLongAlt = () => {
     &--mpmc-question {
         max-width: 492px;
         margin-left: 4px;
+        margin-top: 8px;
     }
 
     &--tablet-portrait {

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, TBuildListChoice } from '../question'
+import type { TChoice, TChoiceKey, TMatrixChoiceKey, TBuildListChoice, TMPMCChoice } from '../question'
 
 export const useQuestionContext = () => {
     const question = inject(InjectionKeys.questionKey)
@@ -16,6 +16,7 @@ export const useQuestionContext = () => {
         choiceScores,
         choices: inject(InjectionKeys.choicesKey, ref<TChoice[]>([])),
         buildListChoices: inject(InjectionKeys.buildListChoicesKey, ref<TBuildListChoice[]>([])),
+        mpmcChoices: inject(InjectionKeys.mpmcChoicesKey, ref<TMPMCChoice[]>([])),
         questionEl: inject(InjectionKeys.questionElKey, ref(null)),
         breakpointsWithEl: inject(InjectionKeys.breakpointsWithElKey, ref({
             breakpoints: {

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

@@ -11,12 +11,14 @@ import type {
     TMatrixChoiceScores,
     TBuildListChoiceScores,
     TQuizMode,
+    TMPMCChoice,
 } 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 buildListChoicesKey = Symbol('buildListChoices') as InjectionKey<ComputedRef<TBuildListChoice[]>>
+export const mpmcChoicesKey = Symbol('mpmcChoices') as InjectionKey<ComputedRef<TMPMCChoice[]>>
 export const questionElKey = Symbol('questionEl') as InjectionKey<Ref<Element | null>>
 export const breakpointsWithElKey = Symbol('breakpointsWithEl') as InjectionKey<Ref<{
     breakpoints: {

package/lib/components/Quiz/Question.vue

@@ -470,6 +470,7 @@ import type {
     TBuildListChoiceKey,
     TChoice,
     TBuildListChoice,
+    TMPMCChoice,
     TChoiceScores,
     TMatrixChoiceScores,
     TBuildListChoiceScores,
@@ -800,6 +801,10 @@ const buildListChoices = computed(() => {
     return shuffledChoices 
 })
 
+const mpmcChoices = computed(() => {
+    return shuffleMPMCChoices([ ...props.question.choices ])
+})
+
 const isCorrect = computed(() => {
     // In order to be correct, user must have selected all the answers and none of the distractors
     return showAnswers.value
@@ -946,11 +951,11 @@ const isMatrixQuestionAnswered = computed(() => {
 
 const isMPMCQuestionAnswered = computed(() => {
     const mpmcLabels = question.value.mpmcLabels
-    const mpmcChoices = question.value.choices
+    const mpmcQuestionChoices = question.value.choices
     const selectedMPMCLabelIndexes: number[] = []
 
     selectedMPMCChoices.value.forEach(choice => {
-        const mpmcChoiceObj = mpmcChoices.find(c => c.id === choice)
+        const mpmcChoiceObj = mpmcQuestionChoices.find(c => c.id === choice)
         if (
             mpmcChoiceObj?.labelIndex !== undefined
             && !selectedMPMCLabelIndexes.includes(mpmcChoiceObj?.labelIndex)
@@ -1044,7 +1049,8 @@ const keydownListener = (e: KeyboardEvent) => {
             }
             break
         case 'KeyX':
-            showAnswers.value && toggleExplanation()
+            (showAnswers.value || showMatrixAnswers.value || showBuildListOrder.value || showMPMCAnswers.value) 
+            && toggleExplanation()
             break
         case 'Escape':
             emitClose()
@@ -1191,6 +1197,30 @@ const shuffleBuildListChoices = (choicesToShuffle: TBuildListChoice[]): TBuildLi
         : sortedChoices
 }
 
+const shuffleMPMCChoices = (choicesToShuffle: TMPMCChoice[]): TMPMCChoice[]=> {
+    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<TMPMCChoice[]>((acc, i) => {
+            const sortedChoice = sortedChoices[i]
+            if (sortedChoice) {
+                acc.push(sortedChoice)
+            }
+
+            return acc
+        }, [])
+        : sortedChoices
+}
+
 const choiceFocusOut = (event: FocusEvent) => {
     const relatedTarget = event.relatedTarget
     if (
@@ -1454,7 +1484,6 @@ const clickCheckMatrixAnswer = () => {
 const clickCheckMPMCAnswer = () => {
     if (!props.hideAnswer) {
         showMPMCAnswers.value = true
-
         emitCheckAnswer({
             isCorrect: isMPMCQuestionCorrect.value,
             selectedChoices: selectedMPMCChoices.value,
@@ -1624,10 +1653,7 @@ onMounted(() => {
         showBuildListOrder.value = props.initialShowAnswers
     }
 
-    if (
-        props.allowKeyboardShortcuts
-        && !isMPMCQuestion.value
-    ) {
+    if (props.allowKeyboardShortcuts) {
         window.addEventListener('keydown', keydownListener)
     }
 
@@ -1652,6 +1678,7 @@ onBeforeUnmount(() => {
 provide(InjectionKeys.questionKey, question)
 provide(InjectionKeys.choicesKey, choices)
 provide(InjectionKeys.buildListChoicesKey, buildListChoices)
+provide(InjectionKeys.mpmcChoicesKey, mpmcChoices)
 provide(InjectionKeys.questionElKey, questionEl)
 provide(InjectionKeys.breakpointsWithElKey, breakpointsWithEl)
 provide(InjectionKeys.quizLengthKey, quizLength)

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

@@ -17,6 +17,12 @@ export type TBreakPointsObject = {
 
 export type TChoice = { text?: string; key: TChoiceKey }
 export type TBuildListChoice = { text?: string; key: TBuildListChoiceKey }
+export type TMPMCChoice = { 
+    text?: string
+    id?: string
+    isCorrect?: boolean
+    labelIndex?: number
+}
 
 export type TChoiceScores = Partial<Record<TChoiceKey, number>> & {
     totalAnswered: number

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pocketprep/ui-kit",
-  "version": "3.7.2",
+  "version": "3.7.3",
   "description": "Pocket Prep UI Kit",
   "author": "pocketprep",
   "scripts": {