@pocketprep/ui-kit 3.6.0 → 3.7.0

package/lib/components/Forms/Radio.vue

@@ -72,6 +72,7 @@
 import { ref } from 'vue'
 import { dark as vDark } from '../../directives'
 import RadioButton from './RadioButton.vue'
+import { stripHtmlTags } from '../../utils'
 
 interface IItem {
     value: string | number
@@ -115,14 +116,6 @@ const keyPressedItem = (e: KeyboardEvent) => {
     }
 }
 
-const stripHtmlTags = (string?: string) => {
-    if (string) {
-        const div = document.createElement('div')
-        div.innerHTML = string
-        return div.textContent || ''
-    }
-    return ''
-}
 </script>
 
 <style lang="scss">

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

@@ -163,6 +163,7 @@ import Icon from '../../Icons/Icon.vue'
 import { dark as vDark, breakpoint as vBreakpoint } from '../../../directives'
 import { useQuestionContext } from './composables'
 import type { TBuildListChoice } from '../question'
+import { stripHtmlTags } from '../../../utils'
 
 const emit = defineEmits<{
     'reorderBuildList': [ choices: TBuildListChoice[] ]
@@ -196,15 +197,6 @@ const prefersReducedMotion = () => {
     return window.matchMedia('(prefers-reduced-motion: reduce)').matches
 }
 
-const stripHtmlTags = (string?: string) => {
-    if (string) {
-        const div = document.createElement('div')
-        div.innerHTML = string
-        return div.textContent || ''
-    }
-    return ''
-}
-
 const updateOrderedChoices = () => {
     // Map the selectedBuildListChoiceOrder keys to full TBuildListChoice objects
     if (selectedBuildListChoiceOrder.value.length) {
@@ -269,8 +261,6 @@ const moveChoiceUp = (index: number) => {
             newChoices[ index ] = previousItem
             newChoices[ index - 1 ] = currentItem
             orderedChoices.value = newChoices
-            emit('reorderBuildList', newChoices)
-            
             // Announce the move
             const choiceText = stripHtmlTags(currentItem.text || '')
             announceMove(choiceText, index, orderedChoices.value.length)
@@ -300,7 +290,6 @@ const moveChoiceDown = (index: number) => {
             newChoices[ index ] = nextItem
             newChoices[ index + 1 ] = currentItem
             orderedChoices.value = newChoices
-            emit('reorderBuildList', newChoices)
             
             // Announce the move
             const choiceText = stripHtmlTags(currentItem.text || '')
@@ -352,7 +341,12 @@ const handleCardKeydown = (event: KeyboardEvent, index: number) => {
     }
 }
 
-watch(selectedBuildListChoiceOrder, updateOrderedChoices, { immediate: true })
+
+watch(orderedChoices, () => {
+    const newChoices = orderedChoices.value
+    emit('reorderBuildList', newChoices)
+}, { deep: true })
+
 </script>
 
 <style lang="scss">

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

@@ -277,6 +277,7 @@ import PocketButton from '../../Buttons/Button.vue'
 import { dark as vDark, breakpoint as vBreakpoint } from '../../../directives'
 import { useQuestionContext } from './composables'
 import type { TChoiceKey } from '../question'
+import { stripHtmlTags } from '../../../utils'
 
 const emit = defineEmits<{
     'emitChoiceFocusIn': [ choiceKey: TChoiceKey ]
@@ -318,15 +319,6 @@ const {
     breakpointsWithEl,
 } = useQuestionContext()
 
-const stripHtmlTags = (string?: string) => {
-    if (string) {
-        const div = document.createElement('div')
-        div.innerHTML = string
-        return div.textContent || ''
-    }
-    return ''
-}
-
 const emitChoiceFocusIn = (choiceKey: TChoiceKey) => {
     emit('emitChoiceFocusIn', choiceKey)
 }

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

@@ -0,0 +1,472 @@
+<script setup lang="ts">
+import { computed, onMounted, ref, watch } from 'vue'
+import { dark as vDark } from '../../../directives'
+import type { TChoiceKey  } from './../question'
+import { useQuestionContext } from './composables'
+import { stripHtmlTags } from '../../../utils'
+import Icon from '../../Icons/Icon.vue'
+import MPMCRadioGroup from './MPMCRadioGroup.vue'
+
+interface IMPMCRadioOptions {
+    choices: TChoiceKey[]
+    value: TChoiceKey | null
+    label?: string
+}
+
+const emit = defineEmits<{
+    'emitSelectedMPMCChoice': [mpmcChoiceKeys: TChoiceKey[]]
+}>()
+
+const {
+    // questionEl is used by the breakpoint directive
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    questionEl,
+    question,
+    isMPMCQuestionCorrect,
+    reviewMode,
+    isDarkMode,
+    showMPMCAnswers,
+    selectedMPMCChoices,
+} = useQuestionContext()
+
+const mpmcRadioGrid = ref<IMPMCRadioOptions[] | undefined>(undefined)
+const expandedPartNumbers = ref<number[]>([])
+
+const mpmcLabels = computed(() => {
+    return question.value.mpmcLabels || []
+})
+
+const questionChoices = computed(() => {
+    const choices = question.value.choices
+    
+    // Shuffle mpmc choices
+    return [ ...choices ].sort(() => Math.random() - 0.5)
+})
+
+const choiceKeysByLabelIndexObj = computed(() => {
+    // Create an object with the keys being the mpmc label indexes
+    // and the values being an array of corresponding choiceKeys to the mpmc label
+    const groupedChoiceKeyByLabelIndex: { [key: number]: TChoiceKey[] } = {}
+    
+    questionChoices.value?.forEach(choice => {
+        const labelIndex = choice.labelIndex
+
+        if (labelIndex !== undefined) {
+            if (!groupedChoiceKeyByLabelIndex[labelIndex]) {
+                groupedChoiceKeyByLabelIndex[labelIndex] = []
+            }
+            groupedChoiceKeyByLabelIndex[labelIndex].push(choice.id as TChoiceKey)
+        }
+    })
+
+    return groupedChoiceKeyByLabelIndex
+})
+
+const choiceTextsByLabelIndex = computed(() => {
+    const grouped: { [key: number]: string[] } = {}
+    
+    questionChoices.value?.forEach(choice => {
+        const labelIndex = choice.labelIndex
+    
+        if (labelIndex !== undefined) {
+            if (!grouped[labelIndex]) {
+                grouped[labelIndex] = []
+            }
+            grouped[labelIndex].push(choice.text || '')
+        }
+    })
+
+    return grouped
+})
+
+const selectedChoiceTextsByLabelIndex = computed(() => {
+    const selectedTexts: { [key: number]: string } = {}
+    
+    mpmcRadioGrid.value?.forEach((part, labelIndex) => {
+        if (part.value) {
+            const choiceIndex = choiceKeysByLabelIndexObj.value[labelIndex]?.findIndex(key => key === part.value)
+            if (choiceIndex !== undefined && choiceIndex !== -1) {
+                const choiceText = choiceTextsByLabelIndex.value[labelIndex]?.[choiceIndex]
+                if (choiceText) {
+                    selectedTexts[labelIndex] = stripHtmlTags(choiceText)
+                }
+            }
+        }
+    })
+    
+    return selectedTexts
+})
+
+const defaultRadioButtonGrid = computed(() => {
+    return mpmcLabels.value.map((_label, labelIndex) => {
+        const choices = choiceKeysByLabelIndexObj.value[labelIndex] || []
+        return {
+            choices: choices,
+            value: null as TChoiceKey | null,
+        } as IMPMCRadioOptions
+    })
+})
+
+onMounted(() => {
+    mpmcRadioGrid.value = convertSelectedMPMCChoiceToRadioBtnGrid()
+})
+
+const toggleChoiceDropdown = (labelIndex: number) => {
+    const includedPartNumberIndex = expandedPartNumbers.value.findIndex(part => part === labelIndex)
+    if (includedPartNumberIndex === -1) {
+        expandedPartNumbers.value.push(labelIndex)
+    } else {
+        expandedPartNumbers.value.splice(includedPartNumberIndex, 1)
+    }
+}
+
+const openChoiceDropdown = (labelIndex: number) => {
+    const includedPartNumberIndex = expandedPartNumbers.value.findIndex(part => part === labelIndex)
+    if (includedPartNumberIndex === -1) {
+        expandedPartNumbers.value.push(labelIndex)
+    } else {
+        expandedPartNumbers.value.splice(includedPartNumberIndex, 1)
+    }
+}
+
+const getRadioGroupChoiceKeySelection = (labelIndex: number) => {
+    return mpmcRadioGrid.value?.[labelIndex]?.value
+}
+
+const getRadioGroupChoiceKeys = (labelIndex: number) => {
+    const choices = mpmcRadioGrid.value?.[labelIndex]?.choices
+    return choices
+}
+
+const getRadioGroupChoicesText = (labelIndex: number) => {
+    return choiceTextsByLabelIndex.value[labelIndex] || []
+}
+
+const updateRadioPartSelection = (labelIndex: number, choiceKey: TChoiceKey | null) => {
+    const part = mpmcRadioGrid.value?.[labelIndex]
+    if (part) {
+        part.value = choiceKey
+    }
+}
+
+const correctPart = (labelIndex: number) => {
+    if (mpmcRadioGrid.value?.[labelIndex]) {
+        const partVal = mpmcRadioGrid.value[labelIndex]?.value
+        if (partVal) {
+            return partVal.startsWith('a')
+        }
+        return false
+    }
+    return false
+}
+
+const convertSelectedMPMCChoiceToRadioBtnGrid = () => {
+    const radioBtnGrid = defaultRadioButtonGrid.value
+
+    selectedMPMCChoices.value.forEach(choice => {
+        const choiceObj = questionChoices.value?.find(c => c.id === choice)
+        if (choiceObj?.labelIndex !== undefined) {
+            const labelIndex = choiceObj.labelIndex
+            const radioBtnGridPart = radioBtnGrid?.[labelIndex]
+            if (radioBtnGridPart) {
+                radioBtnGridPart.value = choice
+            }
+        }
+    })
+
+    return radioBtnGrid
+}
+
+const emitSelectedMPMCChoice = (mpmcChoiceKeys: TChoiceKey[]) => {
+    emit('emitSelectedMPMCChoice', mpmcChoiceKeys)
+}
+
+watch(mpmcRadioGrid, () => {
+    if (mpmcRadioGrid.value && (!reviewMode.value || !showMPMCAnswers.value)) {
+        const selectedRadioButtonChoices: TChoiceKey[] = []
+
+        mpmcRadioGrid.value.forEach((part) => {
+            if (part.value) {
+                selectedRadioButtonChoices.push(part.value)
+            }
+        })
+
+        emitSelectedMPMCChoice(selectedRadioButtonChoices)
+    }
+}, { deep: true })
+
+watch(showMPMCAnswers, () => {
+    if (showMPMCAnswers) {
+        expandedPartNumbers.value = []
+    }
+})
+
+watch(selectedMPMCChoices, () => {
+    if ((reviewMode.value || showMPMCAnswers.value)) {
+        const selectedRadioBtnGrid = convertSelectedMPMCChoiceToRadioBtnGrid() 
+        mpmcRadioGrid.value = selectedRadioBtnGrid
+    }
+})
+
+</script>
+
+<template>
+    <div
+        class="uikit-question-mpmc-choices-container"
+    >
+        <div
+            class="uikit-question-mpmc-choices-container__choices-container"
+            :class="{
+                'uikit-question-mpmc-choices-container__choices-container--correct': 
+                    (showMPMCAnswers || reviewMode) && isMPMCQuestionCorrect,
+                'uikit-question-mpmc-choices-container__choices-container--incorrect': 
+                    (showMPMCAnswers || reviewMode) && !isMPMCQuestionCorrect,
+            }"
+            v-dark="isDarkMode"
+        >
+            <div 
+                v-for="(label, labelIndex) in mpmcLabels"
+                class="uikit-question-mpmc-choices-container__part-container"
+                :key="labelIndex"
+                v-dark="isDarkMode"
+                :tabindex="0"
+                role="button"
+                :aria-expanded="expandedPartNumbers.includes(labelIndex)"
+                :aria-label="
+                    `${stripHtmlTags(label)}. ${expandedPartNumbers.includes(labelIndex) ? 'Expanded' : 'Collapsed'}.`
+                "
+                @keydown.enter="openChoiceDropdown(labelIndex)"
+                @keydown.space.prevent="openChoiceDropdown(labelIndex)"
+            >
+                <div
+                    class="uikit-question-mpmc-choices-container__part"
+                    :class="{
+                        'uikit-question-mpmc-choices-container__part--expanded':
+                            expandedPartNumbers.includes(labelIndex),
+                    }"
+                    v-dark="isDarkMode"
+                    @click.stop="toggleChoiceDropdown(labelIndex)"
+                >
+                    <Icon
+                        v-if="(showMPMCAnswers || reviewMode) && correctPart(labelIndex)"
+                        v-dark="isDarkMode"
+                        class="uikit-question-mpmc-choices-container__part-label-correct-icon"   
+                        type="check"
+                    />
+                    <Icon
+                        v-if="(showMPMCAnswers || reviewMode) && !correctPart(labelIndex)"
+                        v-dark="isDarkMode"
+                        class="uikit-question-mpmc-choices-container__part-label-incorrect-icon"   
+                        type="incorrect"
+                    />
+                    <div 
+                        class="uikit-question-mpmc-choices-container__part-label"
+                        :class="{
+                            'uikit-question-mpmc-choices-container__part-label--review-mode':
+                                showMPMCAnswers || reviewMode,
+                        }"
+                        v-dark="isDarkMode"
+                    >
+                        {{ stripHtmlTags(label) }}
+                        <Icon
+                            class="uikit-question-mpmc-choices-container__toggle-part-icon"
+                            :class="{
+                                'uikit-question-mpmc-choices-container__toggle-part-icon--up':
+                                    expandedPartNumbers.includes(labelIndex),
+                            }"
+                            v-dark="isDarkMode"
+                            type="accordionArrow"
+                        />
+                    </div>
+                    <div 
+                        v-if="selectedChoiceTextsByLabelIndex[labelIndex]"
+                        class="uikit-question-mpmc-choices-container__selected-choice-text"
+                        v-dark="isDarkMode"
+                    >
+                        {{ selectedChoiceTextsByLabelIndex[labelIndex] }}
+                    </div>
+                </div>
+                <div 
+                    v-if="expandedPartNumbers.includes(labelIndex)"
+                >
+                    <MPMCRadioGroup
+                        :modelValue="getRadioGroupChoiceKeySelection(labelIndex)"
+                        :show-answers="showMPMCAnswers"
+                        class="uikit-question-mpmc-choices-container__radio-btns"
+                        :choices="getRadioGroupChoiceKeys(labelIndex)"
+                        :choices-text="getRadioGroupChoicesText(labelIndex)"
+                        :is-dark-mode="isDarkMode"
+                        :disabled="false"
+                        @update:modelValue="updateRadioPartSelection(labelIndex, $event)"
+                    />
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<style lang="scss">
+@use '@/styles/breakpoints' as *;
+@use '@/styles/colors' as *;
+
+.uikit-question-mpmc-choices-container {
+    width: 100%;
+    max-width: 492px;
+
+    &__choices-container {
+        cursor: pointer;
+        position: relative;
+        outline: none;
+        transition: 0.1s width ease;
+
+        &::after {
+            content: '';
+            position: absolute;
+            top: -8px;
+            bottom: -8px;
+            left: -8px;
+            right: -8px;
+            border-radius: 11px;
+            pointer-events: none;
+        }
+
+        &--incorrect {
+            &::after {
+                display: block;
+                border: 2px solid $pepper;
+            }
+
+            &--dark::after {
+                border-color: $rosa;
+            }
+        }
+
+        &--correct {
+            &::after {
+                display: block;
+                border: 2px solid $cadaverous;
+            }
+
+            &--dark::after {
+                border-color: $jungle-green;
+            }
+        }
+    }
+
+    &__part-container {
+        margin-bottom: 16px;
+        border-radius: 5px;
+        background: $white;
+        box-shadow: 0 1px 4px 0 rgba($ash, 0.30);
+        outline: none;
+        transition: box-shadow 0.2s ease;
+
+            &:focus {
+                border: 1px solid $brand-blue;
+            }
+
+
+        &--dark {
+            border-radius: 5px;
+            background: $brand-black;
+            box-shadow: 0 1px 4px 0 $jet;
+
+            &:focus {
+                border: 1px solid $banana-bread;
+            }
+        }
+    }
+
+    &__part {
+        cursor: pointer;
+        padding: 12px 36px 12px 15px;
+        align-items: center;
+        align-content: flex-start;
+        flex-wrap: wrap;
+        border-radius: 5px;
+        border: 0.5px solid rgba($pewter, 0.85);
+        background: $white;
+
+        &--dark {
+            background: $brand-black;
+        }
+
+        &--expanded {
+            border-radius: 5px 5px 0px 0px;
+        }
+    }
+
+    &__part-label-correct-icon,
+    &__part-label-incorrect-icon {
+        position: absolute;
+        right: 0;
+        margin-right: 12px;
+    }
+
+    &__part-label-correct-icon {
+        color: $cadaverous;
+        width: 18px;
+        height: 18px;
+
+        &--dark {
+            color: $jungle-green;
+        }
+    }
+
+    &__part-label-incorrect-icon {
+        color: $pepper;
+
+        &--dark {
+            color: $rosa;
+        }
+    }
+
+    &__part-label {
+        color: $brand-black;
+        font-size: 16px;
+        font-weight: 600;
+        line-height: 23px;
+        letter-spacing: -0.1px;
+
+        &--dark {
+            color: $barely-background;
+        }
+
+        &--review-mode {
+            width: 285px;
+        }
+    }
+
+    &__selected-choice-text {
+        color: $brand-black;
+        font-size: 14px;
+        font-weight: 400;
+        line-height: 19px;
+        margin-top: 4px;
+
+        &--dark {
+            color: $barely-background;
+        }
+    }
+
+    &__toggle-part-icon {
+        position: absolute;
+        margin-top: 8px;
+        margin-left: 8px;
+        color: $brand-blue;
+
+        &--up {
+            transform: rotate(180deg);
+        }
+
+        &--dark {
+            color: $banana-bread;
+        }
+    }
+
+    &__radio-btns {
+        width: 100%;
+        max-width: 492px;
+    }
+}
+</style>