@pocketprep/ui-kit 3.4.89 → 3.5.0

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

@@ -0,0 +1,71 @@
+import { inject, ref } from 'vue'
+import * as InjectionKeys from './injectionSymbols'
+import type { TChoice, TChoiceKey, TMatrixChoiceKey } from '../question'
+
+export const useQuestionContext = () => {
+    const question = inject(InjectionKeys.questionKey)
+    if (!question) {
+        throw new Error('useQuestionContext: no question provided')
+    }
+    const choiceScores = inject(InjectionKeys.choiceScoresKey)
+    if (!choiceScores) {
+        throw new Error('useQuestionContext: no choiceScores provided')
+    }
+    return {
+        question,
+        choiceScores,
+        choices: inject(InjectionKeys.choicesKey, ref<TChoice[]>([])),
+        questionEl: inject(InjectionKeys.questionElKey, ref(null)),
+        breakpointsWithEl: inject(InjectionKeys.breakpointsWithElKey, ref({
+            breakpoints: {
+                'mobile': 767,
+                'tablet-portrait': 1023,
+                'tablet-landscape': 1439,
+            },
+            containerEl: null,
+        })),
+        quizLength: inject(InjectionKeys.quizLengthKey),
+        quizMode: inject(InjectionKeys.quizModeKey, ref('quick10')),
+        questionNumber: inject(InjectionKeys.questionNumberKey),
+        isDarkMode: inject(InjectionKeys.isDarkModeKey, ref(false)),
+        isCorrect: inject(InjectionKeys.isCorrectKey, ref(false)),
+        contextIconType: inject(InjectionKeys.contextIconTypeKey),
+        showAnswers: inject(InjectionKeys.showAnswersKey, ref(false)),
+        showMatrixAnswers: inject(InjectionKeys.showMatrixAnswersKey, ref(false)),
+        imageUrlPrefix: inject(InjectionKeys.imageUrlPrefixKey, ref('')),
+        passageImageUrl: inject(InjectionKeys.passageImageUrlKey, ref<string | null>(null)),
+        passageImageAlt: inject(InjectionKeys.passageImageAltKey, ref<string | undefined>('')),
+        passageImageLongAlt: inject(InjectionKeys.passageImageLongAltKey, ref<string | undefined>('')),
+        showPassageImageLongAlt: inject(InjectionKeys.showPassageImageLongAltKey, ref(false)),
+        passageAndImageTitle: inject(InjectionKeys.passageAndImageTitleKey, ref('Passage')),
+        showExplanation: inject(InjectionKeys.showExplanationKey, ref(false)),
+        isMCR: inject(InjectionKeys.isMCRKey, ref(false)),
+        isUnanswered: inject(InjectionKeys.isUnansweredKey, ref(false)),
+        answerKeys: inject(InjectionKeys.answerKeysKey, ref<TChoiceKey[]>([])),
+        hoverChoiceKey: inject(InjectionKeys.hoverChoiceKeyKey, ref(null)),
+        focusChoiceKey: inject(InjectionKeys.focusChoiceKeyKey, ref(null)),
+        selectedChoices: inject(InjectionKeys.selectedChoicesKey, ref<TChoiceKey[]>([])),
+        distractorKeys: inject(InjectionKeys.distractorKeysKey, ref<TChoiceKey[]>([])),
+        choiceStrikes: inject(InjectionKeys.choiceStrikesKey, ref<TChoiceKey[]>([])),
+        globalMetrics: inject(InjectionKeys.globalMetricsKey, ref(null)),
+        reviewMode: inject(InjectionKeys.reviewModeKey, ref(false)),
+        showExplanationImageLongAlt: inject(InjectionKeys.showExplanationImageLongAltKey, ref(false)),
+        explanationImageUrl: inject(InjectionKeys.explanationImageUrlKey, ref<string | null>(null)),
+        explanationImageAlt: inject(InjectionKeys.explanationImageAltKey, ref<string | undefined>(undefined)),
+        explanationImageLongAlt: inject(InjectionKeys.explanationImageLongAltKey, ref<string | undefined>(undefined)),
+        reference: inject(InjectionKeys.referenceKey, ref<string | undefined>(undefined)),
+        hideReferences: inject(InjectionKeys.hideReferencesKey, ref(false)),
+        keywordDefinitions: inject(InjectionKeys.keywordDefinitionsKey, ref([])),
+        showPaywall: inject(InjectionKeys.showPaywallKey, ref(false)),
+        showPassageAndImage: inject(InjectionKeys.showPassageAndImageKey, ref(false)),
+        isMatrixQuestion: inject(InjectionKeys.isMatrixQuestionKey, ref(false)),
+        matrixChoiceScores: inject(InjectionKeys.matrixChoiceScoresKey, ref({
+            totalAnswered: 0,
+            answeredCorrectly: 0,
+        })),
+        isMatrixQuestionCorrect: inject(InjectionKeys.isMatrixQuestionCorrectKey, ref(false)),
+        matrixAnswerKeys: inject(InjectionKeys.matrixAnswerKeysKey, ref<TMatrixChoiceKey[]>([])),
+        selectedMatrixChoices: inject(InjectionKeys.selectedMatrixChoicesKey, ref([])),
+        isTeachGroupReview: inject(InjectionKeys.isTeachGroupReviewKey, ref(false)),
+    }
+}

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

@@ -0,0 +1,69 @@
+import type { Study } from '@pocketprep/types'
+import type {
+    TChoice,
+    TChoiceKey,
+    TChoiceScores,
+    TContextIcon,
+    TMatrixChoiceKey,
+    TMatrixChoiceScores,
+    TQuizMode,
+} 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 questionElKey = Symbol('questionEl') as InjectionKey<Ref<Element | null>>
+export const breakpointsWithElKey = Symbol('breakpointsWithEl') as InjectionKey<Ref<{
+    breakpoints: {
+        mobile: number
+        'tablet-portrait': number
+        'tablet-landscape': number
+    }
+    containerEl: HTMLElement | null
+}>>
+export const quizLengthKey = Symbol('quizLength') as InjectionKey<Ref<number>>
+export const quizModeKey = Symbol('quizMode') as InjectionKey<Ref<TQuizMode>>
+export const questionNumberKey = Symbol('questionNumber') as InjectionKey<Ref<number>>
+export const isDarkModeKey = Symbol('isDarkMode') as InjectionKey<Ref<boolean>>
+export const isCorrectKey = Symbol('isCorrect') as InjectionKey<ComputedRef<boolean>>
+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 imageUrlPrefixKey = Symbol('imageUrlPrefix') as InjectionKey<Ref<string>>
+export const passageImageUrlKey = Symbol('passageImageUrl') as InjectionKey<ComputedRef<string | null>>
+export const passageImageAltKey = Symbol('passageImageAlt') as InjectionKey<ComputedRef<string | undefined>>
+export const passageImageLongAltKey = Symbol('passageImageLongAlt') as InjectionKey<ComputedRef<string | undefined>>
+export const showPassageImageLongAltKey = Symbol('showPassageImageLongAlt') as InjectionKey<Ref<boolean>>
+export const passageAndImageTitleKey = Symbol('passageAndImageTitle') as InjectionKey<ComputedRef<string>>
+export const showExplanationKey = Symbol('showExplanation') as InjectionKey<Ref<boolean>>
+export const isMCRKey = Symbol('isMCR') as InjectionKey<Ref<boolean>>
+export const isUnansweredKey = Symbol('isUnanswered') as InjectionKey<Ref<boolean>>
+export const answerKeysKey = Symbol('answerKeys') as InjectionKey<Ref<TChoiceKey[]>>
+export const hoverChoiceKeyKey = Symbol('hoverChoiceKey') as InjectionKey<Ref<TChoiceKey | null>>
+export const focusChoiceKeyKey = Symbol('focusChoiceKey') as InjectionKey<Ref<TChoiceKey | null>>
+export const selectedChoicesKey = Symbol('selectedChoices') as InjectionKey<Ref<TChoiceKey[]>>
+export const distractorKeysKey = Symbol('distractorKeys') as InjectionKey<ComputedRef<TChoiceKey[]>>
+export const choiceStrikesKey = Symbol('choiceStrikes') as InjectionKey<Ref<TChoiceKey[]>>
+export const choiceScoresKey = Symbol('choiceScores') as InjectionKey<ComputedRef<TChoiceScores>>
+export const globalMetricsKey = Symbol('globalMetrics') as
+    InjectionKey<Ref<Study.Class.GlobalQuestionMetricJSON | null>>
+export const reviewModeKey = Symbol('reviewMode') as InjectionKey<Ref<boolean>>
+export const showExplanationImageLongAltKey = Symbol('showExplanationImageLongAlt') as InjectionKey<Ref<boolean>>
+export const explanationImageUrlKey = Symbol('explanationImageUrl') as InjectionKey<ComputedRef<string | null>>
+export const explanationImageAltKey = Symbol('explanationImageAlt') as InjectionKey<ComputedRef<string | undefined>>
+export const explanationImageLongAltKey = Symbol('explanationImageLongAlt') as
+    InjectionKey<ComputedRef<string | undefined>>
+export const referenceKey = Symbol('reference') as InjectionKey<ComputedRef<string | undefined>>
+export const hideReferencesKey = Symbol('hideReferences') as InjectionKey<Ref<boolean>>
+export const keywordDefinitionsKey = Symbol('keywordDefinitions') as InjectionKey<Ref<{
+    keyword: string
+    definition: string
+}[]>>
+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 matrixChoiceScoresKey = Symbol('matrixChoiceScores') as InjectionKey<ComputedRef<TMatrixChoiceScores>>
+export const isMatrixQuestionCorrectKey = Symbol('isMatrixQuestionCorrect') as InjectionKey<ComputedRef<boolean>>
+export const matrixAnswerKeysKey = Symbol('matrixAnswerKeys') as InjectionKey<ComputedRef<TMatrixChoiceKey[]>>
+export const selectedMatrixChoicesKey = Symbol('selectedMatrixChoices') as InjectionKey<Ref<TMatrixChoiceKey[]>>
+export const isTeachGroupReviewKey = Symbol('isTeachGroupReview') as InjectionKey<Ref<boolean>>