@pocketprep/ui-kit 3.7.2 → 3.7.4

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

@@ -1,5 +1,5 @@
 <template>
-    <div class="uikit-question-build-list-choices-container-root">
+    <div class="uikit-question-build-list-choices-container-root" @click="clearFocusState">
         <!-- 
             Visually hidden aria-live region for choice move announcements:
             "Moved Photosynthesis to position 2 of 6."
@@ -17,7 +17,7 @@
             <TransitionGroup
                 v-dark="isDarkMode"
                 v-breakpoint="breakpointsWithEl"
-                name="list"
+                :name="shouldDisableTransitions ? '' : 'list'"
                 tag="ol"
                 class="uikit-question-build-list-choices-container"
                 :class="{
@@ -126,6 +126,9 @@
                                 :disabled="index === 0"
                                 :tabindex="buttonsAreFocusable && index !== 0 ? 0 : -1"
                                 @click.prevent.stop="moveChoiceUp(index)"
+                                @keydown.enter.prevent.stop="moveChoiceUp(index)"
+                                @focus="setFocusedArrowButton(choice.key, 'up')"
+                                @blur="clearFocusState"
                                 :aria-label="`Move '${stripHtmlTags(choice.text || '')}' up`"
                                 :title="'Move up'"
                             >
@@ -146,6 +149,9 @@
                                 :disabled="index === orderedChoices.length - 1"
                                 :tabindex="buttonsAreFocusable && index !== orderedChoices.length - 1 ? 0 : -1"
                                 @click.prevent.stop="moveChoiceDown(index)"
+                                @keydown.enter.prevent.stop="moveChoiceDown(index)"
+                                @focus="setFocusedArrowButton(choice.key, 'down')"
+                                @blur="clearFocusState"
                                 :aria-label="`Move '${stripHtmlTags(choice.text || '')}' down`"
                                 :title="'Move down'"
                             >
@@ -195,11 +201,17 @@ const floatingChoiceKey = ref<string | null>(null)
 const choiceRefs = ref<Map<string, HTMLDivElement>>(new Map())
 const announcementMessage = ref<string>('')
 const isMoveTriggeredByArrowKey = ref<boolean>(false)
+const focusedArrowButton = ref<{ choiceKey: string; direction: 'up' | 'down' } | null>(null)
+const isMoveInProgress = ref<boolean>(false)
 
 const buttonsAreFocusable = computed(() => {
     return !showBuildListOrder.value && !reviewMode.value
 })
 
+const shouldDisableTransitions = computed(() => {
+    return reviewMode.value || showBuildListOrder.value
+})
+
 onMounted(() => {
     updateOrderedChoices()
 })
@@ -232,12 +244,56 @@ const setCardRef = (el: Element | ComponentPublicInstance | null, choiceKey: str
     }
 }
 
+const clearFocusState = () => {
+    // Don't clear focus state if we're in the middle of animation
+    // This prevents clearing focus when the button temporarily loses focus during animation
+    if (!isMoveInProgress.value) {
+        focusedArrowButton.value = null
+    }
+}
+
+const setFocusedArrowButton = (choiceKey: string, direction: 'up' | 'down') => {
+    focusedArrowButton.value = { choiceKey, direction }
+}
+
+const restoreFocusToArrowButton = (choiceKey: string, direction: 'up' | 'down') => {
+    const choiceEl = choiceRefs.value.get(choiceKey)
+    if (choiceEl) {
+        const buttonSelector = direction === 'up' 
+            ? '.uikit-question-build-list-choices-container__choice-up-button'
+            : '.uikit-question-build-list-choices-container__choice-down-button'
+        const button = choiceEl.querySelector(buttonSelector) as HTMLButtonElement
+        if (button && !button.disabled) {
+            button.focus()
+            setFocusedArrowButton(choiceKey, direction)
+        } else {
+            // Move focus to opposite button if focused button becomes disabled
+            const oppositeDirection = direction === 'up' ? 'down' : 'up'
+            const oppositeButtonSelector = oppositeDirection === 'up' 
+                ? '.uikit-question-build-list-choices-container__choice-up-button'
+                : '.uikit-question-build-list-choices-container__choice-down-button'
+            const oppositeButton = choiceEl.querySelector(oppositeButtonSelector) as HTMLButtonElement
+            if (oppositeButton && !oppositeButton.disabled) {
+                oppositeButton.focus()
+                setFocusedArrowButton(choiceKey, oppositeDirection)
+            } else {
+                clearFocusState()
+            }
+        }
+    }
+}
+
 const restoreFocusAfterMove = (movedChoiceKey: string) => {
     // Don't restore focus if we're in review mode or showing the build list order
     if (showBuildListOrder.value || reviewMode.value) {
         return
     }
     
+    // Don't restore focus to choice element if there's a focused arrow button
+    if (focusedArrowButton.value && focusedArrowButton.value.choiceKey === movedChoiceKey) {
+        return
+    }
+    
     const delay = prefersReducedMotion() ? 0 : 50
     setTimeout(() => {
         const choiceEl = choiceRefs.value.get(movedChoiceKey)
@@ -262,7 +318,8 @@ const removeFocusAfterAnimation = (movedChoiceKey: string) => {
     }
     
     // Only remove focus if the move was NOT triggered by arrow keys
-    if (!isMoveTriggeredByArrowKey.value) {
+    // AND there's no focused arrow button that should maintain focus
+    if (!isMoveTriggeredByArrowKey.value && !focusedArrowButton.value) {
         const animationDelay = prefersReducedMotion() ? 0 : 350 // Slightly after animation completes
         setTimeout(() => {
             const choiceEl = choiceRefs.value.get(movedChoiceKey)
@@ -293,6 +350,9 @@ const moveChoiceUp = (index: number) => {
         const previousItem = newChoices[ index - 1 ]
         
         if (currentItem && previousItem) {
+            // Set move in progress flag
+            isMoveInProgress.value = true
+            
             // Set floating state for the clicked choice
             floatingChoiceKey.value = currentItem.key
             
@@ -309,6 +369,25 @@ const moveChoiceUp = (index: number) => {
             // Remove focus after animation if not triggered by arrow key
             removeFocusAfterAnimation(currentItem.key)
             
+            // Restore focus to arrow button if it was previously focused
+            if (focusedArrowButton.value && focusedArrowButton.value.choiceKey === currentItem.key) {
+                const delay = prefersReducedMotion() ? 0 : 400 // After animation completes
+                setTimeout(() => {
+                    const focusedButton = focusedArrowButton.value
+                    if (focusedButton) {
+                        restoreFocusToArrowButton(currentItem.key, focusedButton.direction)
+                    }
+                    // Clear move in progress flag after focus restoration
+                    isMoveInProgress.value = false
+                }, delay)
+            } else {
+                // Clear move in progress flag if no focus restoration needed
+                const delay = prefersReducedMotion() ? 0 : 400
+                setTimeout(() => {
+                    isMoveInProgress.value = false
+                }, delay)
+            }
+            
             // Clear floating state after animation completes
             const animationDelay = prefersReducedMotion() ? 0 : 300
             setTimeout(() => {
@@ -325,6 +404,9 @@ const moveChoiceDown = (index: number) => {
         const nextItem = newChoices[ index + 1 ]
         
         if (currentItem && nextItem) {
+            // Set move in progress flag
+            isMoveInProgress.value = true
+            
             // Set floating state for the clicked choice
             floatingChoiceKey.value = currentItem.key
             
@@ -342,6 +424,25 @@ const moveChoiceDown = (index: number) => {
             // Remove focus after animation
             removeFocusAfterAnimation(currentItem.key)
             
+            // Restore focus to arrow button if it was previously focused
+            if (focusedArrowButton.value && focusedArrowButton.value.choiceKey === currentItem.key) {
+                const delay = prefersReducedMotion() ? 0 : 400 // After animation completes
+                setTimeout(() => {
+                    const focusedButton = focusedArrowButton.value
+                    if (focusedButton) {
+                        restoreFocusToArrowButton(currentItem.key, focusedButton.direction)
+                    }
+                    // Clear move in progress flag after focus restoration
+                    isMoveInProgress.value = false
+                }, delay)
+            } else {
+                // Clear move in progress flag if no focus restoration needed
+                const delay = prefersReducedMotion() ? 0 : 400
+                setTimeout(() => {
+                    isMoveInProgress.value = false
+                }, delay)
+            }
+            
             // Clear floating state after animation completes
             const animationDelay = prefersReducedMotion() ? 0 : 300
             setTimeout(() => {
@@ -438,7 +539,7 @@ watch(selectedBuildListChoiceOrder, () => {
         top: -8px;
         bottom: -8px;
         left: 8px;
-        right: 10px;
+        right: 14px;
         border-radius: 11px;
         pointer-events: none;
 
@@ -523,6 +624,29 @@ watch(selectedBuildListChoiceOrder, () => {
         }
     }
 
+    // Disable transitions when in review mode or showing build list order
+    &--review-mode,
+    &--correct,
+    &--incorrect,
+    &--teach-group-review {
+        .uikit-question-build-list-choices-container__choice-container {
+            transition: none;
+
+            &--floating {
+                transform: none;
+            }
+        }
+
+        .uikit-question-build-list-choices-container__choice {
+            transition: none;
+        }
+
+        .uikit-question-build-list-choices-container__choice-up-button,
+        .uikit-question-build-list-choices-container__choice-down-button {
+            transition: none;
+        }
+    }
+
     &__choice-number,
     &__mobile-choice-number {
         display: flex;

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

@@ -93,7 +93,11 @@
                 v-if="question.passage || passageImageUrl"
                 ref="uikit-question__passage-and-image-dropdown"
                 class="uikit-question__passage-and-image-dropdown"
-                :class="{ 'uikit-question__passage-and-image-dropdown--review-mode': reviewMode }"
+                :class="{ 
+                    'uikit-question__passage-and-image-dropdown--review-mode': reviewMode,
+                    'uikit-question__passage-and-image-dropdown--build-list': isBuildListQuestion,
+
+                }"
                 @togglePassageImageLongAltDropdown="togglePassageImageLongAlt"
             />
             <Paywall
@@ -470,6 +474,7 @@ import type {
     TBuildListChoiceKey,
     TChoice,
     TBuildListChoice,
+    TMPMCChoice,
     TChoiceScores,
     TMatrixChoiceScores,
     TBuildListChoiceScores,
@@ -800,6 +805,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 +955,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 +1053,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 +1201,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 +1488,6 @@ const clickCheckMatrixAnswer = () => {
 const clickCheckMPMCAnswer = () => {
     if (!props.hideAnswer) {
         showMPMCAnswers.value = true
-
         emitCheckAnswer({
             isCorrect: isMPMCQuestionCorrect.value,
             selectedChoices: selectedMPMCChoices.value,
@@ -1624,10 +1657,7 @@ onMounted(() => {
         showBuildListOrder.value = props.initialShowAnswers
     }
 
-    if (
-        props.allowKeyboardShortcuts
-        && !isMPMCQuestion.value
-    ) {
+    if (props.allowKeyboardShortcuts) {
         window.addEventListener('keydown', keydownListener)
     }
 
@@ -1652,6 +1682,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)
@@ -2048,6 +2079,11 @@ provide(InjectionKeys.isTeachGroupReviewKey, isTeachGroupReview)
         &--review-mode {
             display: block;
         }
+
+        &--build-list:not(#{&}--review-mode):not(#{&}--mobile) {
+            max-width: 452px;
+            margin-left: -8px;
+        }
     }
 
     &__unanswered-teach-review-label {

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.4",
   "description": "Pocket Prep UI Kit",
   "author": "pocketprep",
   "scripts": {