@pocketprep/ui-kit 3.7.1 → 3.7.3

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

@@ -30,7 +30,7 @@
                     'uikit-question-build-list-choices-container--review-mode': reviewMode,
                 }"
                 role="list"
-                :aria-label="`Build list with ${orderedChoices.length} items`"
+                :aria-label="`List with ${orderedChoices.length} items`"
             >
                 <li
                     v-for="(choice, index) in orderedChoices"
@@ -60,10 +60,9 @@
                         :class="{
                             'uikit-question-build-list-choices-container__choice--review-mode': reviewMode
                         }"
-                        role="group"
-                        :aria-label="`Choice ${index + 1}: ${stripHtmlTags(choice.text || '')}`"
                         :tabindex="-1"
-                        @keydown="handleCardKeydown($event, index)"
+                        @keydown.enter.stop="handleCardKeydown($event, index)"
+                        @keydown.space.stop="handleCardKeydown($event, index)"
                         @click.prevent
                         @mousedown.prevent
                         :ref="(el) => setCardRef(el, choice.key)"
@@ -125,7 +124,7 @@
                                         index === 0
                                 }"
                                 :disabled="index === 0"
-                                :tabindex="(showBuildListOrder || reviewMode) ? -1 : 0"
+                                :tabindex="buttonsAreFocusable && index !== 0 ? 0 : -1"
                                 @click.prevent.stop="moveChoiceUp(index)"
                                 :aria-label="`Move '${stripHtmlTags(choice.text || '')}' up`"
                                 :title="'Move up'"
@@ -145,7 +144,7 @@
                                         index === orderedChoices.length - 1
                                 }"
                                 :disabled="index === orderedChoices.length - 1"
-                                :tabindex="(showBuildListOrder || reviewMode) ? -1 : 0"
+                                :tabindex="buttonsAreFocusable && index !== orderedChoices.length - 1 ? 0 : -1"
                                 @click.prevent.stop="moveChoiceDown(index)"
                                 :aria-label="`Move '${stripHtmlTags(choice.text || '')}' down`"
                                 :title="'Move down'"
@@ -166,7 +165,7 @@
 </template>
 
 <script setup lang="ts">
-import { ref, watch, onMounted, type ComponentPublicInstance } from 'vue'
+import { ref, watch, onMounted, computed, type ComponentPublicInstance } from 'vue'
 import Icon from '../../Icons/Icon.vue'
 import { dark as vDark, breakpoint as vBreakpoint } from '../../../directives'
 import { useQuestionContext } from './composables'
@@ -197,6 +196,10 @@ const choiceRefs = ref<Map<string, HTMLDivElement>>(new Map())
 const announcementMessage = ref<string>('')
 const isMoveTriggeredByArrowKey = ref<boolean>(false)
 
+const buttonsAreFocusable = computed(() => {
+    return !showBuildListOrder.value && !reviewMode.value
+})
+
 onMounted(() => {
     updateOrderedChoices()
 })
@@ -435,7 +438,7 @@ watch(selectedBuildListChoiceOrder, () => {
         top: -8px;
         bottom: -8px;
         left: 8px;
-        right: 10px;
+        right: 14px;
         border-radius: 11px;
         pointer-events: none;
 
@@ -736,12 +739,10 @@ watch(selectedBuildListChoiceOrder, () => {
 
     // TransitionGroup animations
     .list-move,
-    .list-enter-active,
     .list-leave-active {
         transition: all 0.2s ease;
     }
 
-    .list-enter-from,
     .list-leave-to {
         opacity: 0;
         transform: translateX(30px);
@@ -755,12 +756,10 @@ watch(selectedBuildListChoiceOrder, () => {
     // Respect prefers-reduced-motion
     @media (prefers-reduced-motion: reduce) {
         .list-move,
-        .list-enter-active,
         .list-leave-active {
             transition: none;
         }
 
-        .list-enter-from,
         .list-leave-to {
             opacity: 1;
             transform: 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,10 +38,7 @@ const mpmcLabels = computed(() => {
 })
 
 const questionChoices = computed(() => {
-    const choices = question.value.choices
-    
-    // Shuffle mpmc choices
-    return [ ...choices ].sort(() => Math.random() - 0.5)
+    return mpmcChoices.value
 })
 
 const choiceKeysByLabelIndexObj = computed(() => {
@@ -235,8 +233,9 @@ watch(selectedMPMCChoices, () => {
                 :aria-label="
                     `${stripHtmlTags(label)}. ${expandedPartNumbers.includes(labelIndex) ? 'Expanded' : 'Collapsed'}.`
                 "
-                @keydown.enter="openChoiceDropdown(labelIndex)"
-                @keydown.space.prevent="openChoiceDropdown(labelIndex)"
+                @keydown.enter.stop="openChoiceDropdown(labelIndex)"
+                @keydown.space.stop="openChoiceDropdown(labelIndex)"
+                @mousedown.prevent
             >
                 <div
                     class="uikit-question-mpmc-choices-container__part"

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

@@ -25,6 +25,10 @@ const selectedChoice = defineModel<TChoiceKey | null>({ default: null })
 
 const selectChoice = (choiceKey: TChoiceKey) => {
     selectedChoice.value = choiceKey
+    // Remove focus from the choice after selecting a choice
+    if (document.activeElement instanceof HTMLElement) {
+        document.activeElement.blur()
+    }
 }
 
 const radioButtonColor = (choice: TChoiceKey) => {
@@ -130,16 +134,28 @@ const radioButtonColor = (choice: TChoiceKey) => {
         outline: none;
         transition: background-color 0.2s ease;
 
+        &:last-child {
+                border-radius: 0 0 5px 5px;
+        }
+
         &:not(&--show-answer) {
             &:focus {
                 border: 0.5px solid $brand-blue;
             }
+
+            &:hover {
+                background: $pearl;
+            }
         }
 
         &--dark {
             &:focus:not(.uikit-mpmc-radio-group__option--show-answer) {
                 border: 0.5px solid $banana-bread;
             }
+
+            &:hover:not(.uikit-mpmc-radio-group__option--show-answer) {
+                background-color: $moonlit-ocean;
+            }
         }
     }
 

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

@@ -30,8 +30,8 @@
                     ? ` of ${quizLength}`
                     : ''
             }${
-                (showAnswers || showMatrixAnswers)
-                    ? isCorrect
+                (showAnswers || showMatrixAnswers || showBuildListOrder || showMPMCAnswers)
+                    ? isCorrectlyAnswered
                         ? ', Answered Correctly'
                         : ', Answered Incorrectly'
                     : ''
@@ -62,6 +62,7 @@
 import Icon from '../../Icons/Icon.vue'
 import { dark as vDark, breakpoint as vBreakpoint } from '../../../directives'
 import { useQuestionContext } from './composables'
+import { computed } from 'vue'
 
 const {
     // questionEl is used by the breakpoint directive
@@ -72,15 +73,39 @@ const {
     questionNumber,
     isDarkMode,
     isCorrect,
+    isBuildListQuestion,
+    isMatrixQuestion,
+    isMPMCQuestion,
+    isBuildListOrderCorrect,
+    isMatrixQuestionCorrect,
+    isMPMCQuestionCorrect,
     contextIconType,
     showAnswers,
+    showBuildListOrder,
     showMatrixAnswers,
+    showMPMCAnswers,
 } = useQuestionContext()
 
 defineExpose({
     questionEl,
 })
 
+const isCorrectlyAnswered = computed(() => {
+    if (isMatrixQuestion.value) {
+        return isMatrixQuestionCorrect.value
+    }
+
+    if (isBuildListQuestion) {
+        return isBuildListOrderCorrect.value
+    }
+
+    if (isMPMCQuestion.value) {
+        return isMPMCQuestionCorrect.value
+    }
+
+    return isCorrect.value
+})
+
 </script>
 
 <style lang="scss">

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

@@ -219,7 +219,8 @@ const toggleSummaryExplanationImageLongAlt = () => {
     }
 
     &--build-list-question-not-review-mode {
-        max-width: 452px;
+        max-width: 450px;
+        margin-left: -4px
     }
 
     &--matrix-question-review-mode#{&}--tablet-landscape,
@@ -229,6 +230,8 @@ 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

@@ -374,7 +374,6 @@
                     >
                         Check Answer
                     </PocketButton>
-
                     <PocketButton
                         v-else-if="(
                             showAnswers 
@@ -471,6 +470,7 @@ import type {
     TBuildListChoiceKey,
     TChoice,
     TBuildListChoice,
+    TMPMCChoice,
     TChoiceScores,
     TMatrixChoiceScores,
     TBuildListChoiceScores,
@@ -801,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
@@ -947,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)
@@ -988,47 +992,77 @@ const prompt = computed(() => {
     })
 })
 
+const isTEIsQuestionType = computed(() => {
+    return isMPMCQuestion.value || isMatrixQuestion.value || isBuildListQuestion.value
+})
+
 const keydownListener = (e: KeyboardEvent) => {
     switch (e.code) {
         case 'KeyA':
-            choices.value[0] && selectChoice(choices.value[0].key, true)
+            if (!isTEIsQuestionType.value) {
+                choices.value[0] && selectChoice(choices.value[0].key, true)
+            }
             break
         case 'KeyB':
-            choices.value[1] && selectChoice(choices.value[1].key, true)
+            if (!isTEIsQuestionType.value) {
+                choices.value[1] && selectChoice(choices.value[1].key, true)
+            }
             break
         case 'KeyC':
-            choices.value[2] && selectChoice(choices.value[2].key, true)
+            if (!isTEIsQuestionType.value) {
+                choices.value[2] && selectChoice(choices.value[2].key, true)
+            }
             break
         case 'KeyD':
-            choices.value[3] && selectChoice(choices.value[3].key, true)
+            if (!isTEIsQuestionType.value) {
+                choices.value[3] && selectChoice(choices.value[3].key, true)
+            }   
             break
         case 'KeyE':
-            choices.value[4] && selectChoice(choices.value[4].key, true)
+            if (!isTEIsQuestionType.value) {
+                choices.value[4] && selectChoice(choices.value[4].key, true)
+            }
             break
         case 'KeyF':
-            choices.value[5] && selectChoice(choices.value[5].key, true)
+            if (!isTEIsQuestionType.value) {
+                choices.value[5] && selectChoice(choices.value[5].key, true)
+            }
             break
         case 'KeyG':
-            choices.value[6] && selectChoice(choices.value[6].key, true)
+            if (!isTEIsQuestionType.value) {
+                choices.value[6] && selectChoice(choices.value[6].key, true)
+            }
             break
         case 'KeyH':
-            choices.value[7] && selectChoice(choices.value[7].key, true)
+            if (!isTEIsQuestionType.value) {
+                choices.value[7] && selectChoice(choices.value[7].key, true)
+            }
             break
         case 'KeyI':
-            choices.value[8] && selectChoice(choices.value[8].key, true)
+            if (!isTEIsQuestionType.value) {
+                choices.value[8] && selectChoice(choices.value[8].key, true)
+            }
             break
         case 'KeyJ':
-            choices.value[9] && selectChoice(choices.value[9].key, true)
+            if (!isTEIsQuestionType.value) {
+                choices.value[9] && selectChoice(choices.value[9].key, true)
+            }
             break
         case 'KeyX':
-            showAnswers.value && toggleExplanation()
+            (showAnswers.value || showMatrixAnswers.value || showBuildListOrder.value || showMPMCAnswers.value) 
+            && toggleExplanation()
             break
         case 'Escape':
             emitClose()
             e.preventDefault()
             break
         case 'Enter':
-            if (!showAnswers.value && selectedChoices.value.length && focusChoiceKey.value === null) {
+            if (
+                !showAnswers.value 
+                && selectedChoices.value.length 
+                && focusChoiceKey.value === null
+                && !isTEIsQuestionType.value
+            ) {
                 clickCheckAnswer()
                 e.preventDefault()
             }
@@ -1163,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 (
@@ -1426,7 +1484,6 @@ const clickCheckMatrixAnswer = () => {
 const clickCheckMPMCAnswer = () => {
     if (!props.hideAnswer) {
         showMPMCAnswers.value = true
-
         emitCheckAnswer({
             isCorrect: isMPMCQuestionCorrect.value,
             selectedChoices: selectedMPMCChoices.value,
@@ -1621,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.1",
+  "version": "3.7.3",
   "description": "Pocket Prep UI Kit",
   "author": "pocketprep",
   "scripts": {