@pocketprep/ui-kit 3.6.0 → 3.7.1

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>

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

@@ -0,0 +1,169 @@
+<!-- eslint-disable max-len -->
+<script setup lang="ts">
+import RadioButton from '../../Forms/RadioButton.vue'
+import { dark as vDark } from '../../../directives'
+import type { TChoiceKey } from '../question'
+import { stripHtmlTags } from '../../../utils'
+
+interface Props {
+    isDarkMode?: boolean
+    choices?: TChoiceKey[]
+    choicesText?: string[]
+    showAnswers?: boolean
+    disabled?: boolean
+}
+
+const props = withDefaults(defineProps<Props>(), {
+    isDarkMode: false,
+    choices: () => [],
+    choicesText: () => [],
+    showAnswers: false,
+    disabled: false,
+})
+
+const selectedChoice = defineModel<TChoiceKey | null>({ default: null })
+
+const selectChoice = (choiceKey: TChoiceKey) => {
+    selectedChoice.value = choiceKey
+}
+
+const radioButtonColor = (choice: TChoiceKey) => {
+    if (props.showAnswers) {
+        if (choice === selectedChoice.value && selectedChoice.value?.startsWith('a')) {
+            return 'green'
+        }
+
+        if (choice === selectedChoice.value && selectedChoice.value?.startsWith('d')) {
+            return 'gray'
+        }
+
+        if (choice.startsWith('a')) {
+            return 'green'
+        }
+    }
+
+    return 'blue'
+}
+
+</script>
+
+<template>
+    <ul
+        v-if="choices && choices.length"
+        class="uikit-mpmc-radio-group"
+        :class="{
+            'uikit-mpmc-radio-group--show-answer': showAnswers
+        }"
+        v-dark="isDarkMode"
+        role="radiogroup"
+    >
+        <li
+            v-for="(choice, index) in choices"
+            class="uikit-mpmc-radio-group__option"
+            :class="{
+                'uikit-mpmc-radio-group__option--show-answer': showAnswers
+            }"
+            v-dark="isDarkMode"
+            role="radio"
+            :tabindex="disabled || showAnswers ? -1 : 0"
+            :aria-checked="choice === selectedChoice"
+            :aria-disabled="disabled || showAnswers"
+            :aria-label="`
+                ${stripHtmlTags(choicesText[index])}. ${choice === selectedChoice ? 'Selected' : 'Not selected'}.`"
+            :key="choice"
+            @click="!disabled && !showAnswers && selectChoice(choice)"
+            @keydown.enter.stop="!disabled && !showAnswers && selectChoice(choice)"
+            @keydown.space.prevent.stop="!disabled && !showAnswers && selectChoice(choice)"
+        >
+            <RadioButton
+                class="uikit-mpmc-radio-group__radio-btn"
+                :selected="(choice === selectedChoice) || (showAnswers && choice.startsWith('a'))"
+                :disabled="disabled"
+                :isDarkMode="isDarkMode"
+                :color="radioButtonColor(choice)"
+                @click="!disabled && !showAnswers && selectChoice(choice)"
+            />
+            <div 
+                v-if="choicesText && choicesText.length > 0"
+                v-dark="props.isDarkMode"
+                class="uikit-mpmc-radio-group__choice-text"
+                :class="{
+                    'uikit-mpmc-radio-group__choice-text--distractor': 
+                        showAnswers && choice?.startsWith('d')
+                }"
+                @click="!disabled && !showAnswers && selectChoice(choice)"
+            >
+                {{ stripHtmlTags(choicesText[index]) }}
+            </div>
+        </li>
+    </ul>
+</template>
+
+<style lang="scss" scoped>
+@use '@/styles/breakpoints' as *;
+@use '@/styles/colors' as *;
+
+.uikit-mpmc-radio-group {
+    list-style: none;
+    margin: 0;
+    padding: 0;
+    display: block;
+    background: $white;
+    border-radius: 0px 0px 5px 5px;
+
+    &--dark {
+        background: $brand-black;
+    }
+
+    &--show-answer {
+        cursor: default;
+    }
+
+    &__option {
+        display: flex;
+        align-items: flex-start;
+        align-self: stretch;
+        padding: 11px 15px 12px 15px;
+        max-width: 492px;
+        border: 0.5px solid rgba($pewter, 0.85);
+        border-top: none;
+        outline: none;
+        transition: background-color 0.2s ease;
+
+        &:not(&--show-answer) {
+            &:focus {
+                border: 0.5px solid $brand-blue;
+            }
+        }
+
+        &--dark {
+            &:focus:not(.uikit-mpmc-radio-group__option--show-answer) {
+                border: 0.5px solid $banana-bread;
+            }
+        }
+    }
+
+    &__choice-text {
+        display: block;
+        margin-left: 12px;
+        color: $brand-black;
+        font-size: 16px;
+        font-weight: 500;
+        line-height: 23px;
+        letter-spacing: -0.1px;
+
+        &--dark {
+            color: $barely-background;
+        }
+
+        &--distractor {
+            text-decoration: line-through;
+            color: $ash;
+
+            &--dark {
+                color: $fog;
+            }
+        }
+    }
+}
+</style>

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

@@ -162,6 +162,7 @@ import { useQuestionContext } from './composables'
 import type { IRadioOptions, TMatrixChoiceKey  } from './../question'
 import BrandColors from '../../../pocketprep-export.module.scss'
 import { computed, onMounted, ref, watch } from 'vue'
+import { stripHtmlTags } from '../../../utils'
 
 const emit = defineEmits<{
     'emitSelectedMatrixChoice': [matrixChoiceKeys: TMatrixChoiceKey[]]
@@ -186,15 +187,6 @@ const expandedRowNumbers = ref<number[]>([])
 const selectedColumnHeaders = ref<string[][]>([])
 const brandColors = BrandColors
 
-const stripHtmlTags = (string?: string) => {
-    if (string) {
-        const div = document.createElement('div')
-        div.innerHTML = string
-        return div.textContent || ''
-    }
-    return ''
-}
-
 const matrixChoiceLayout = computed(() => {
     return question.value.matrixChoiceLayout
 })

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

@@ -2,6 +2,7 @@
 import RadioButton from '../../Forms/RadioButton.vue'
 import { dark as vDark } from '../../../directives'
 import type { TMatrixChoiceKey } from '../question'
+import { stripHtmlTags } from '../../../utils'
 
 interface Props {
     isDarkMode?: boolean
@@ -42,15 +43,6 @@ const radioButtonColor = (choice: TMatrixChoiceKey) => {
 
     return 'blue'
 }
-
-const stripHtmlTags = (string?: string) => {
-    if (string) {
-        const div = document.createElement('div')
-        div.innerHTML = string
-        return div.textContent || ''
-    }
-    return ''
-}
 </script>
 
 <template>