@pocketprep/ui-kit 3.6.0 → 3.7.0

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>

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

@@ -4,7 +4,10 @@
         class="uikit-question-stats-summary"
     >
         <div v-dark="isDarkMode" class="uikit-question-stats-summary__stats-summary-total">
-            <div v-if="isBuildListQuestion" class="uikit-question-stats-summary__stats-summary-value">
+            <div v-if="isMPMCQuestion" class="uikit-question-stats-summary__stats-summary-value">
+                {{ mpmcChoiceScores.totalAnswered }}
+            </div>
+            <div v-else-if="isBuildListQuestion" class="uikit-question-stats-summary__stats-summary-value">
                 {{ buildListChoiceScores.totalAnswered }}
             </div>
             <div v-else-if="isMatrixQuestion" class="uikit-question-stats-summary__stats-summary-value">
@@ -18,7 +21,10 @@
             </div>
         </div>
         <div v-dark="isDarkMode" class="uikit-question-stats-summary__stats-summary-correct">
-            <div v-if="isBuildListQuestion" class="uikit-question-stats-summary__stats-summary-value">
+            <div v-if="isMPMCQuestion" class="uikit-question-stats-summary__stats-summary-value">
+                {{ Math.round((mpmcChoiceScores.answeredCorrectly / mpmcChoiceScores.totalAnswered) * 100) }}%
+            </div>
+            <div v-else-if="isBuildListQuestion" class="uikit-question-stats-summary__stats-summary-value">
                 {{ Math.round((buildListChoiceScores.answeredCorrectly / buildListChoiceScores.totalAnswered) * 100) }}%
             </div>
             <div v-else-if="isMatrixQuestion" class="uikit-question-stats-summary__stats-summary-value">
@@ -43,7 +49,9 @@ const {
     choiceScores,    
     isDarkMode,
     isMatrixQuestion,
+    isMPMCQuestion,
     matrixChoiceScores,
+    mpmcChoiceScores,
     buildListChoiceScores,
     isBuildListQuestion,
 } = useQuestionContext()

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

@@ -7,7 +7,10 @@
         :class="{
             'uikit-question-summary--matrix-question': isMatrixQuestion,
             '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,
         }"
     >
         <div class="uikit-question-summary__summary-title">
@@ -45,6 +48,10 @@
             :class="{
                 'uikit-question-summary__summary-dropdown-explanation--matrix-question-review-mode': 
                     isMatrixQuestion && reviewMode,
+                'uikit-question-summary__summary-dropdown-explanation--mpmc-question-review-mode': 
+                    isMPMCQuestion && reviewMode,
+                'uikit-question-summary__summary-dropdown-explanation--build-list-question-review-mode': 
+                    isBuildListQuestion && reviewMode,
             }"
         >
             <slot name="explanationTopExperiment"></slot>
@@ -149,19 +156,22 @@ const {
     hideReferences,
     isCorrect,
     isMatrixQuestionCorrect,
+    isMPMCQuestionCorrect,
     isBuildListOrderCorrect,
     isUnanswered,
     reviewMode,
     isDarkMode,
     isMatrixQuestion,
+    isMPMCQuestion,
     isBuildListQuestion,
     breakpointsWithEl,
     keywordDefinitions,
 } = useQuestionContext()
 
 const isQuestionCorrect = computed(() => {
-    return (!isMatrixQuestion.value && isCorrect.value) || 
+    return ((!isMatrixQuestion.value || !isMPMCQuestion.value || !isBuildListQuestion) && isCorrect.value) || 
         (isMatrixQuestion.value && isMatrixQuestionCorrect.value && !isUnanswered.value) ||
+        (isMPMCQuestion.value && isMPMCQuestionCorrect.value) || 
         (isBuildListQuestion.value && isBuildListOrderCorrect.value)
 })
 
@@ -208,16 +218,21 @@ const toggleSummaryExplanationImageLongAlt = () => {
         max-width: 518px;
     }
 
-    &--matrix-question-review-mode#{&}--tablet-landscape {
-        display: inline-block;
-    }
-
     &--build-list-question {
         max-width: 452px;
         margin-left: 38px;
         display: inline-block;
     }
 
+    &--matrix-question-review-mode#{&}--tablet-landscape,
+    &--mpmc-question-review-mode#{&}--tablet-landscape {
+        display: inline-block;
+    }
+
+    &--mpmc-question {
+        max-width: 492px;
+    }
+
     &--tablet-portrait {
         display: inline-block;
     }
@@ -304,7 +319,9 @@ const toggleSummaryExplanationImageLongAlt = () => {
     &__summary-dropdown-explanation {
         display: none;
 
-        &--matrix-question-review-mode#{&}--tablet-landscape {
+        &--matrix-question-review-mode#{&}--tablet-landscape,
+        &--mpmc-question-review-mode#{&}--tablet-landscape,
+        &--build-list-question-review-mode#{&}--tablet-landscape {
             display: inline-block;
         }
 

package/lib/components/Quiz/Question/composables.ts

@@ -33,6 +33,7 @@ export const useQuestionContext = () => {
         contextIconType: inject(InjectionKeys.contextIconTypeKey),
         showAnswers: inject(InjectionKeys.showAnswersKey, ref(false)),
         showMatrixAnswers: inject(InjectionKeys.showMatrixAnswersKey, ref(false)),
+        showMPMCAnswers: inject(InjectionKeys.showMPMCAnswersKey, ref(false)),
         showBuildListOrder: inject(InjectionKeys.showBuildListOrderKey, ref(false)),
         imageUrlPrefix: inject(InjectionKeys.imageUrlPrefixKey, ref('')),
         passageImageUrl: inject(InjectionKeys.passageImageUrlKey, ref<string | null>(null)),
@@ -61,19 +62,26 @@ export const useQuestionContext = () => {
         showPaywall: inject(InjectionKeys.showPaywallKey, ref(false)),
         showPassageAndImage: inject(InjectionKeys.showPassageAndImageKey, ref(false)),
         isMatrixQuestion: inject(InjectionKeys.isMatrixQuestionKey, ref(false)),
+        isMPMCQuestion: inject(InjectionKeys.isMPMCQuestionKey, ref(false)),
         isBuildListQuestion: inject(InjectionKeys.isBuildListQuestionKey, ref(false)),
         matrixChoiceScores: inject(InjectionKeys.matrixChoiceScoresKey, ref({
             totalAnswered: 0,
             answeredCorrectly: 0,
         })),
+        mpmcChoiceScores: inject(InjectionKeys.mpmcChoiceScoresKey, ref({
+            totalAnswered: 0,
+            answeredCorrectly: 0,
+        })),
         buildListChoiceScores: inject(InjectionKeys.buildListChoiceScoresKey, ref({
             totalAnswered: 0,
             answeredCorrectly: 0,
         })),
         isMatrixQuestionCorrect: inject(InjectionKeys.isMatrixQuestionCorrectKey, ref(false)),
+        isMPMCQuestionCorrect: inject(InjectionKeys.isMPMCQuestionCorrectKey, ref(false)),
         isBuildListOrderCorrect: inject(InjectionKeys.isBuildListOrderCorrectKey, ref(false)),
         matrixAnswerKeys: inject(InjectionKeys.matrixAnswerKeysKey, ref<TMatrixChoiceKey[]>([])),
         selectedMatrixChoices: inject(InjectionKeys.selectedMatrixChoicesKey, ref([])),
+        selectedMPMCChoices: inject(InjectionKeys.selectedMPMCChoicesKey, ref([])),
         selectedBuildListChoiceOrder: inject(InjectionKeys.selectedBuildListChoiceOrderKey, ref([])),
         isTeachGroupReview: inject(InjectionKeys.isTeachGroupReviewKey, ref(false)),
     }

package/lib/components/Quiz/Question/injectionSymbols.ts

@@ -34,6 +34,7 @@ export const isCorrectKey = Symbol('isCorrect') as InjectionKey<ComputedRef<bool
 export const contextIconTypeKey = Symbol('contextIconType') as InjectionKey<ComputedRef<TContextIcon>>
 export const showAnswersKey = Symbol('showAnswers') as InjectionKey<Ref<boolean>>
 export const showMatrixAnswersKey = Symbol('showMatrixAnswers') as InjectionKey<Ref<boolean>>
+export const showMPMCAnswersKey = Symbol('showMPMCAnswers') as InjectionKey<Ref<boolean>>
 export const showBuildListOrderKey = Symbol('showBuildListOrder') as InjectionKey<Ref<boolean>>
 export const imageUrlPrefixKey = Symbol('imageUrlPrefix') as InjectionKey<Ref<string>>
 export const passageImageUrlKey = Symbol('passageImageUrl') as InjectionKey<ComputedRef<string | null>>
@@ -68,12 +69,16 @@ export const keywordDefinitionsKey = Symbol('keywordDefinitions') as InjectionKe
 export const showPaywallKey = Symbol('showPaywall') as InjectionKey<Ref<boolean>>
 export const showPassageAndImageKey = Symbol('showPassageAndImage') as InjectionKey<ComputedRef<boolean>>
 export const isMatrixQuestionKey = Symbol('isMatrixQuestion') as InjectionKey<ComputedRef<boolean>>
+export const isMPMCQuestionKey = Symbol('isMPMCQuestion') as InjectionKey<ComputedRef<boolean>>
 export const isBuildListQuestionKey = Symbol('isBuildListQuestion') as InjectionKey<ComputedRef<boolean>>
 export const matrixChoiceScoresKey = Symbol('matrixChoiceScores') as InjectionKey<ComputedRef<TMatrixChoiceScores>>
+export const mpmcChoiceScoresKey = Symbol('mpmcChoiceScores') as InjectionKey<ComputedRef<TChoiceScores>>
 export const buildListChoiceScoresKey = Symbol('buildListChoiceScores') as InjectionKey<ComputedRef<TBuildListChoiceScores>>
 export const isMatrixQuestionCorrectKey = Symbol('isMatrixQuestionCorrect') as InjectionKey<ComputedRef<boolean>>
+export const isMPMCQuestionCorrectKey = Symbol('isMPMCQuestionCorrect') as InjectionKey<ComputedRef<boolean>>
 export const isBuildListOrderCorrectKey = Symbol('isBuildListOrderCorrect') as InjectionKey<ComputedRef<boolean>>
 export const matrixAnswerKeysKey = Symbol('matrixAnswerKeys') as InjectionKey<ComputedRef<TMatrixChoiceKey[]>>
 export const selectedMatrixChoicesKey = Symbol('selectedMatrixChoices') as InjectionKey<Ref<TMatrixChoiceKey[]>>
+export const selectedMPMCChoicesKey = Symbol('selectedMPMCChoices') as InjectionKey<Ref<TChoiceKey[]>>
 export const selectedBuildListChoiceOrderKey = Symbol('selectedBuildListChoiceOrder') as InjectionKey<Ref<TBuildListChoiceKey[]>>
-export const isTeachGroupReviewKey = Symbol('isTeachGroupReview') as InjectionKey<Ref<boolean>>
+export const isTeachGroupReviewKey = Symbol('isTeachGroupReview') as InjectionKey<Ref<boolean>>