@pocketprep/ui-kit 3.7.0 → 3.7.2

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

@@ -12,10 +12,10 @@
             {{ announcementMessage }}
         </div>    
         <div
-            v-breakpoint="breakpointsWithEl"
             class="uikit-question-build-list-choices-container-wrapper"
         >
             <TransitionGroup
+                v-dark="isDarkMode"
                 v-breakpoint="breakpointsWithEl"
                 name="list"
                 tag="ol"
@@ -27,9 +27,10 @@
                         (showBuildListOrder || reviewMode) && !isBuildListOrderCorrect,
                     'uikit-question-build-list-choices-container--teach-group-review': 
                         (showBuildListOrder || reviewMode) && isTeachGroupReview,
+                    '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"
@@ -46,6 +47,9 @@
                         v-dark="isDarkMode" 
                         v-breakpoint="breakpointsWithEl"
                         class="uikit-question-build-list-choices-container__choice-number"
+                        :class="{
+                            'uikit-question-build-list-choices-container__choice-number--review-mode': reviewMode
+                        }"
                     >
                         {{ index + 1 }}
                     </div>
@@ -54,14 +58,13 @@
                         v-breakpoint="breakpointsWithEl"
                         class="uikit-question-build-list-choices-container__choice"
                         :class="{
-                            'uikit-question-build-list-choices-container__choice--showing-answer': 
-                                reviewMode || showBuildListOrder
+                            'uikit-question-build-list-choices-container__choice--review-mode': reviewMode
                         }"
-                        role="group"
-                        :aria-label="`Choice ${index + 1}: ${stripHtmlTags(choice.text || '')}`"
-                        :tabindex="(showBuildListOrder || reviewMode) ? -1 : 0"
-                        @keydown="handleCardKeydown($event, index)"
-                        @click="handleCardClick($event)"
+                        :tabindex="-1"
+                        @keydown.enter.stop="handleCardKeydown($event, index)"
+                        @keydown.space.stop="handleCardKeydown($event, index)"
+                        @click.prevent
+                        @mousedown.prevent
                         :ref="(el) => setCardRef(el, choice.key)"
                     >
                         <div 
@@ -72,7 +75,9 @@
                                 'uikit-question-build-list-choices-container__mobile-choice-number--correct': 
                                     (reviewMode || showBuildListOrder) && isChoiceInCorrectPosition(choice, index),
                                 'uikit-question-build-list-choices-container__mobile-choice-number--incorrect': 
-                                    (reviewMode || showBuildListOrder) && !isChoiceInCorrectPosition(choice, index)
+                                    (reviewMode || showBuildListOrder) && !isChoiceInCorrectPosition(choice, index),
+                                'uikit-question-build-list-choices-container__mobile-choice-number--review-mode': 
+                                    reviewMode,
                             }"
                         >
                             {{ index + 1 }}
@@ -92,7 +97,7 @@
                                 {{ getCorrectPositionOrderNumber(choice) }}
                             </div>
                             <Icon
-                                v-if="isChoiceInCorrectPosition(choice, index)"
+                                v-if="isChoiceInCorrectPosition(choice, index) && !reviewMode"
                                 v-dark="isDarkMode"
                                 v-breakpoint="breakpointsWithEl"
                                 class="uikit-question-build-list-choices-container__answer-correct-icon"
@@ -100,7 +105,7 @@
                                 
                             />
                             <Icon
-                                v-else
+                                v-else-if="!isChoiceInCorrectPosition(choice, index) && !reviewMode"
                                 v-dark="isDarkMode"
                                 v-breakpoint="breakpointsWithEl"
                                 class="uikit-question-build-list-choices-container__answer-incorrect-icon"
@@ -119,7 +124,8 @@
                                         index === 0
                                 }"
                                 :disabled="index === 0"
-                                @click="moveChoiceUp(index)"
+                                :tabindex="buttonsAreFocusable && index !== 0 ? 0 : -1"
+                                @click.prevent.stop="moveChoiceUp(index)"
                                 :aria-label="`Move '${stripHtmlTags(choice.text || '')}' up`"
                                 :title="'Move up'"
                             >
@@ -138,7 +144,8 @@
                                         index === orderedChoices.length - 1
                                 }"
                                 :disabled="index === orderedChoices.length - 1"
-                                @click="moveChoiceDown(index)"
+                                :tabindex="buttonsAreFocusable && index !== orderedChoices.length - 1 ? 0 : -1"
+                                @click.prevent.stop="moveChoiceDown(index)"
                                 :aria-label="`Move '${stripHtmlTags(choice.text || '')}' down`"
                                 :title="'Move down'"
                             >
@@ -158,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'
@@ -187,6 +194,11 @@ const orderedChoices = ref<TBuildListChoice[]>([])
 const floatingChoiceKey = ref<string | null>(null)
 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()
@@ -230,11 +242,37 @@ const restoreFocusAfterMove = (movedChoiceKey: string) => {
     setTimeout(() => {
         const choiceEl = choiceRefs.value.get(movedChoiceKey)
         if (choiceEl) {
+            // Temporarily make the choice focusable for animation
+            choiceEl.setAttribute('tabindex', '0')
             choiceEl.focus()
+            
+            // Remove tabindex after animation completes
+            const animationDelay = prefersReducedMotion() ? 0 : 350
+            setTimeout(() => {
+                choiceEl.setAttribute('tabindex', '-1')
+            }, animationDelay)
         }
     }, delay)
 }
 
+const removeFocusAfterAnimation = (movedChoiceKey: string) => {
+    // Don't remove focus if we're in review mode or showing the build list order
+    if (showBuildListOrder.value || reviewMode.value) {
+        return
+    }
+    
+    // Only remove focus if the move was NOT triggered by arrow keys
+    if (!isMoveTriggeredByArrowKey.value) {
+        const animationDelay = prefersReducedMotion() ? 0 : 350 // Slightly after animation completes
+        setTimeout(() => {
+            const choiceEl = choiceRefs.value.get(movedChoiceKey)
+            if (choiceEl) {
+                choiceEl.blur()
+            }
+        }, animationDelay)
+    }
+}
+
 // For accessibility, we want to announce to the user where they moved the choice
 // to in the ordered list. ie: “Moved Photosynthesis to position 2 of 6.”
 const announceMove = (choiceText: string, newPosition: number, totalItems: number) => {
@@ -268,6 +306,9 @@ const moveChoiceUp = (index: number) => {
             // Restore focus to the moved card
             restoreFocusAfterMove(currentItem.key)
             
+            // Remove focus after animation if not triggered by arrow key
+            removeFocusAfterAnimation(currentItem.key)
+            
             // Clear floating state after animation completes
             const animationDelay = prefersReducedMotion() ? 0 : 300
             setTimeout(() => {
@@ -298,6 +339,9 @@ const moveChoiceDown = (index: number) => {
             // Restore focus to the moved card
             restoreFocusAfterMove(currentItem.key)
             
+            // Remove focus after animation
+            removeFocusAfterAnimation(currentItem.key)
+            
             // Clear floating state after animation completes
             const animationDelay = prefersReducedMotion() ? 0 : 300
             setTimeout(() => {
@@ -321,32 +365,39 @@ const isChoiceInCorrectPosition = (choice: TBuildListChoice, currentIndex: numbe
     return correctOrderPosition === currentOrderPosition
 }
 
-const handleCardClick = (event: MouseEvent) => {
-    if (showBuildListOrder.value || reviewMode.value) {
-        event.preventDefault()
-        event.stopPropagation()
-    }
-}
-
 const handleCardKeydown = (event: KeyboardEvent, index: number) => {
     // Handle Alt+Arrow shortcuts for moving cards
     if (event.altKey) {
         if (event.key === 'ArrowUp' || event.key === 'Up') {
             event.preventDefault()
+            isMoveTriggeredByArrowKey.value = true
             moveChoiceUp(index)
+            // Reset flag after a short delay
+            setTimeout(() => {
+                isMoveTriggeredByArrowKey.value = false
+            }, 100)
         } else if (event.key === 'ArrowDown' || event.key === 'Down') {
             event.preventDefault()
+            isMoveTriggeredByArrowKey.value = true
             moveChoiceDown(index)
+            // Reset flag after a short delay
+            setTimeout(() => {
+                isMoveTriggeredByArrowKey.value = false
+            }, 100)
         }
     }
 }
 
-
 watch(orderedChoices, () => {
     const newChoices = orderedChoices.value
     emit('reorderBuildList', newChoices)
 }, { deep: true })
 
+watch(selectedBuildListChoiceOrder, () => {
+    if ((reviewMode.value || showBuildListOrder.value)) {
+        updateOrderedChoices() 
+    }
+})
 </script>
 
 <style lang="scss">
@@ -378,22 +429,23 @@ watch(orderedChoices, () => {
     flex-direction: column;
     gap: 12px;
     list-style: none;
-    margin: 0;
+    margin: 0 0 0 -46px;
     padding: 0;
 
     &::after {
-            content: '';
-            position: absolute;
-            top: -8px;
-            bottom: -8px;
-            left: 32px;
-            right: -8px;
-            border-radius: 11px;
-            pointer-events: none;
+        content: '';
+        position: absolute;
+        top: -8px;
+        bottom: -8px;
+        left: 8px;
+        right: 10px;
+        border-radius: 11px;
+        pointer-events: none;
 
-        }
+    }
 
     &--mobile {
+        margin: 0;
         &::after {
             content: '';
             position: absolute;
@@ -407,6 +459,17 @@ watch(orderedChoices, () => {
         }
     }
 
+    &--review-mode:not(&--mobile) {
+        margin: 0;
+        max-width: 492px;
+        width: 100%;
+        
+        &::after {
+            left: -8px;
+            right: -8px;
+        }
+    }
+
     &--correct {
         &::after {
             display: block;
@@ -450,8 +513,12 @@ watch(orderedChoices, () => {
             z-index: 10;
             
             .uikit-question-build-list-choices-container__choice {
-                box-shadow: 0 8px 24px 0 rgba(71, 89, 103, 0.4);
-                border-radius: 8px;
+                outline: 2px solid $brand-blue;
+                outline-offset: 2px;
+                
+                &--dark {
+                    outline-color: $banana-bread;
+                }
             }
         }
     }
@@ -459,7 +526,7 @@ watch(orderedChoices, () => {
     &__choice-number,
     &__mobile-choice-number {
         display: flex;
-        align-items: center;
+        align-items: flex-end;
         justify-content: center;
         width: 24px;
         height: 24px;
@@ -477,13 +544,14 @@ watch(orderedChoices, () => {
     }
 
     &__choice-number {
+        &--review-mode,
         &--mobile {
             display: none;
         }
     }
 
     &__mobile-choice-number {
-        &:not(&--mobile) {
+        &:not(&--mobile, &--review-mode) {
             display: none;
         }
 
@@ -524,28 +592,15 @@ watch(orderedChoices, () => {
         box-shadow: 0 1px 4px 0 rgba(71, 89, 103, 0.30);
         outline: none;
 
-        &:focus:not(&--showing-answer) {
-            outline: 2px solid $brand-blue;
-            outline-offset: 2px;
-        }
-
         &--dark {
             border: 1px solid $slate;
             background-color: $brand-black;
             box-shadow: 0 1px 4px 0 rgba(71, 89, 103, 0.30);
-
-            &:focus:not(&--showing-answer) {
-                outline-color: $banana-bread;
-            }
         }
 
         &--mobile {
             width: 100%;
         }
-
-        &--showing-answer {
-            gap: 27px;
-        }
     }
 
     &__choice-text {
@@ -589,9 +644,30 @@ watch(orderedChoices, () => {
         cursor: pointer;
         transition: all 0.2s ease;
 
+        &:focus {
+            outline: none;
+            border: 2px solid $white;
+            box-shadow: 0 0 0 2px $brand-blue-hover;
+        }
+
+        &:hover,
+        &:focus {
+            background-color: $brand-blue-hover;
+        }
+
         &--dark {
             background-color: $banana-bread;
             color: $brand-black;
+
+            &:focus {
+                border: 2px solid $brand-black;
+                box-shadow: 0 0 0 2px $butterscotch;
+            }
+
+            &:hover,
+            &:focus {
+                background-color: $butterscotch;
+            }
         }
         
         &--disabled {
@@ -663,12 +739,10 @@ watch(orderedChoices, () => {
 
     // 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);
@@ -682,12 +756,10 @@ watch(orderedChoices, () => {
     // 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

@@ -38,9 +38,7 @@ const mpmcLabels = computed(() => {
 
 const questionChoices = computed(() => {
     const choices = question.value.choices
-    
-    // Shuffle mpmc choices
-    return [ ...choices ].sort(() => Math.random() - 0.5)
+    return choices
 })
 
 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: $fog;
+            }
         }
 
         &--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

@@ -9,8 +9,8 @@
             '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,
+            'uikit-question-summary--build-list-question-not-review-mode': 
+                isBuildListQuestion && !reviewMode,
         }"
     >
         <div class="uikit-question-summary__summary-title">
@@ -218,10 +218,9 @@ const toggleSummaryExplanationImageLongAlt = () => {
         max-width: 518px;
     }
 
-    &--build-list-question {
-        max-width: 452px;
-        margin-left: 38px;
-        display: inline-block;
+    &--build-list-question-not-review-mode {
+        max-width: 450px;
+        margin-left: -4px
     }
 
     &--matrix-question-review-mode#{&}--tablet-landscape,
@@ -231,6 +230,7 @@ const toggleSummaryExplanationImageLongAlt = () => {
 
     &--mpmc-question {
         max-width: 492px;
+        margin-left: 4px;
     }
 
     &--tablet-portrait {

package/lib/components/Quiz/Question.vue

@@ -374,7 +374,6 @@
                     >
                         Check Answer
                     </PocketButton>
-
                     <PocketButton
                         v-else-if="(
                             showAnswers 
@@ -988,37 +987,61 @@ 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()
@@ -1028,7 +1051,12 @@ const keydownListener = (e: KeyboardEvent) => {
             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()
             }
@@ -1596,7 +1624,10 @@ onMounted(() => {
         showBuildListOrder.value = props.initialShowAnswers
     }
 
-    if (props.allowKeyboardShortcuts) {
+    if (
+        props.allowKeyboardShortcuts
+        && !isMPMCQuestion.value
+    ) {
         window.addEventListener('keydown', keydownListener)
     }
 

package/package.json

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