@pocketprep/ui-kit 3.4.90 → 3.5.1

package/lib/components/Quiz/Question.vue

@@ -1,7 +1,7 @@
 <template>
     <div
-        ref="question"
-        v-breakpoint="breakpoints"
+        ref="uikit-question"
+        v-breakpoint="breakpointsWithEl"
         class="uikit-question"
         :class="{
             'uikit-question--show-side': (showExplanation && !showPaywall) || showPassageAndImage,
@@ -9,7 +9,7 @@
     >
         <slot name="closeIcon">
             <Icon
-                v-breakpoint:questionEl="breakpoints"
+                v-breakpoint:questionEl="breakpointsWithEl"
                 v-dark="isDarkMode"
                 class="uikit-question__close-icon"
                 role="button"
@@ -20,12 +20,12 @@
         </slot>
         <div
             class="uikit-question__tag-mobile"
-            v-breakpoint:questionEl="breakpoints"
+            v-breakpoint="breakpointsWithEl"
         >
             <slot name="tag" />
         </div>
         <div
-            v-breakpoint:questionEl="breakpoints"
+            v-breakpoint="breakpointsWithEl"
             class="uikit-question__main"
             :class="{
                 'uikit-question__main--show-side': (showExplanation && !showPaywall) || showPassageAndImage,
@@ -43,19 +43,9 @@
             <slot name="context">
                 <QuestionContext
                     ref="uikit-question__context"
-                    v-breakpoint:questionEl="breakpoints"
+                    v-breakpoint="breakpointsWithEl"
                     class="uikit-question__context"
                     tabindex="-1"
-                    :quiz-length="quizLength"
-                    :quiz-mode="quizMode"
-                    :question-number="questionNumber"
-                    :is-correct="isCorrect"
-                    :is-dark-mode="isDarkMode"
-                    :context-icon-type="contextIconType"
-                    :show-answers="showAnswers"
-                    :show-matrix-answers="showMatrixAnswers"
-                    :question-el="questionEl"
-                    :breakpoints="breakpoints"
                 >
                     <template #contextIcon>
                         <slot name="contextIcon" />
@@ -68,7 +58,7 @@
             <div
                 v-if="questionScenario && currentScenarioQuestionNumber && numberOfScenarioQuestions"
                 v-dark="isDarkMode"
-                v-breakpoint:questionEl="breakpoints"
+                v-breakpoint="breakpointsWithEl"
                 tabindex="-1"
                 class="uikit-question__scenario-part-x-of-y-label"
                 :aria-label="`Scenario Part ${currentScenarioQuestionNumber} of ${numberOfScenarioQuestions}`"
@@ -78,8 +68,8 @@
             </div>
             <slot name="promptExperiment" />
             <div
-                ref="prompt"
-                v-breakpoint:questionEl="breakpoints"
+                ref="promptRef"
+                v-breakpoint="breakpointsWithEl"
                 tabindex="-1"
                 role="group"
                 class="uikit-question__prompt"
@@ -91,7 +81,7 @@
             />
             <PocketButton
                 v-if="question.passage || passageImageUrl"
-                v-breakpoint:questionEl="breakpoints"
+                v-breakpoint="breakpointsWithEl"
                 class="uikit-question__skip-to-passage"
                 @click="moveFocusToPassage"
             >
@@ -102,26 +92,11 @@
                 ref="uikit-question__passage-and-image-dropdown"
                 class="uikit-question__passage-and-image-dropdown"
                 :class="{ 'uikit-question__passage-and-image-dropdown--review-mode': reviewMode }"
-                :question="question"
-                :question-el="questionEl"
-                :breakpoints="breakpoints"
-                :is-dark-mode="isDarkMode"
-                :review-mode="reviewMode"
-                :image-url-prefix="imageUrlPrefix"
-                :show-passage-image-long-alt="showPassageImageLongAlt"
-                :passage-image-url="passageImageUrl"
-                :passage-image-long-alt="passageImageLongAlt"
-                :passage-image-alt="passageImageAlt"
-                :passage-and-image-title="passageAndImageTitle"
                 @togglePassageImageLongAltDropdown="togglePassageImageLongAlt"
             />
             <Paywall
                 v-if="showPaywall"
                 class="uikit-question__paywall"
-                :review-Mode="reviewMode"
-                :is-dark-mode="isDarkMode"
-                :question-el="questionEl"
-                :breakpoints="breakpoints"
                 @upgradeClicked="emitUpgrade"
             />
             <div
@@ -175,33 +150,6 @@
                 <ChoicesContainer
                     v-if="question.type !== 'Matrix Checkbox' && question.type !== 'Matrix Radio Button'"
                     ref="uikit-question__choices-container"
-                    :question="question"
-                    :choices="choices"
-                    :show-answers="showAnswers"
-                    :show-explanation="showExplanation"
-                    :is-MCR="isMCR"
-                    :is-unanswered="isUnanswered"
-                    :answer-keys="answerKeys"
-                    :hover-choice-key="hoverChoiceKey"
-                    :focus-choice-key="focusChoiceKey"
-                    :selected-choices="selectedChoices"
-                    :distractor-keys="distractorKeys"
-                    :choice-strikes="choiceStrikes"
-                    :choice-scores="choiceScores"
-                    :passage-image-url="passageImageUrl"
-                    :is-correct="isCorrect"
-                    :global-metrics="globalMetrics"
-                    :reviewMode="reviewMode"
-                    :show-explanation-image-long-alt="showExplanationImageLongAlt"
-                    :explanation-image-url="explanationImageUrl"
-                    :explanation-image-alt="explanationImageAlt"
-                    :explanation-image-long-alt="explanationImageLongAlt"
-                    :reference="reference"
-                    :hide-references="hideReferences"
-                    :is-dark-mode="isDarkMode"
-                    :question-el="questionEl"
-                    :breakpoints="breakpoints"
-                    :keyword-definitions="keywordDefinitions"
                     @emitChoiceMouseOver="choiceMouseOver"
                     @emitChoiceMouseLeave="choiceMouseLeave"
                     @emitChoiceFocusIn="choiceFocusIn"
@@ -219,22 +167,22 @@
                         <slot name="explanationTopExperiment"></slot>
                     </template>
                     <template #motivationalMoment="{
-                        isCorrect,
+                        isCorrect:isCorrectMM,
                         choiceKey,
-                        showAnswers,
-                        answerKeys,
+                        showAnswers:showAnswersMM,
+                        answerKeys:answerKeysMM,
                     }">
                         <slot 
                             name="motivationalMoment"
-                            :showAnswers="showAnswers"
-                            :answerKeys="answerKeys"
+                            :showAnswers="showAnswersMM"
+                            :answerKeys="answerKeysMM"
                             :choiceKey="choiceKey"
-                            :isCorrect="isCorrect"
+                            :isCorrect="isCorrectMM"
                         />
                     </template>
                     <template #showNamesTable="{
                         choiceKey,
-                    }" >
+                    }">
                         <slot 
                             name="showNamesTable"
                             :choiceKey="choiceKey"
@@ -248,35 +196,21 @@
                     v-if="question.type === 'Matrix Checkbox' || question.type === 'Matrix Radio Button'"
                     class="uikit-question__matrix-choices-container"
                     ref="uikit-question__matrix-choices-container"
-                    v-breakpoint:questionEl="breakpoints"
-                    :question="question"
-                    :matrix-choice-layout="question.matrixChoiceLayout"
-                    :is-matrix-question-correct="isMatrixQuestionCorrect"
-                    :matrix-answer-keys="matrixAnswerKeys"
-                    :matrix-distractor-keys="matrixDistractorKeys"
-                    :selected-matrix-choices="selectedMatrixChoices"
-                    :show-matrix-answers="showMatrixAnswers"
-                    :review-mode="reviewMode"
-                    :matrix-choice-scores="matrixChoiceScores"
-                    :global-metrics="globalMetrics"
-                    :is-dark-mode="isDarkMode"
-                    :question-el="questionEl"
-                    :breakpoints="breakpoints"
-                    :is-teach-group-review="isTeachGroupReview"
+                    v-breakpoint="breakpointsWithEl"
                     @emitSelectedMatrixChoice="selectMatrixChoice"
                 > 
                     <template #motivationalMoment="{
-                        isCorrect,
+                        isCorrect:isCorrectMM,
                         choiceKey,
-                        showAnswers,
-                        answerKeys,
+                        showAnswers:showAnswersMM,
+                        answerKeys:answerKeysMM,
                     }">
                         <slot 
                             name="motivationalMoment"
-                            :showAnswers="showAnswers"
-                            :answerKeys="answerKeys"
+                            :showAnswers="showAnswersMM"
+                            :answerKeys="answerKeysMM"
                             :choiceKey="choiceKey"
-                            :isCorrect="isCorrect"
+                            :isCorrect="isCorrectMM"
                         />
                     </template>
                     <template #explanationBottomExperiment>
@@ -286,35 +220,23 @@
                 <MobileMatrixChoicesContainer
                     v-if="question.type === 'Matrix Checkbox' || question.type === 'Matrix Radio Button'"
                     class="uikit-question__mobile-matrix-choices-container"
-                    v-breakpoint:questionEl="breakpoints"
-                    :question="question"
-                    :matrix-choice-layout="question.matrixChoiceLayout"
-                    :is-matrix-question-correct="isMatrixQuestionCorrect"
-                    :matrix-answer-keys="matrixAnswerKeys"
-                    :matrix-distractor-keys="matrixDistractorKeys"
-                    :selected-matrix-choices="selectedMatrixChoices"
-                    :show-matrix-answers="showMatrixAnswers"
-                    :review-mode="reviewMode"
-                    :global-metrics="globalMetrics"
-                    :is-dark-mode="isDarkMode"
-                    :question-el="questionEl"
-                    :breakpoints="breakpoints"
+                    v-breakpoint="breakpointsWithEl"
                     @emitSelectedMatrixChoice="selectMatrixChoice"
                 > 
                     <template
                         #motivationalMoment="{
-                            isCorrect,
+                            isCorrect:isCorrectMM,
                             choiceKey,
-                            showAnswers,
-                            answerKeys,
+                            showAnswers:showAnswersMM,
+                            answerKeys:answerKeysMM,
                         }"
                     >
                         <slot 
                             name="motivationalMoment"
-                            :showAnswers="showAnswers"
-                            :answerKeys="answerKeys"
+                            :showAnswers="showAnswersMM"
+                            :answerKeys="answerKeysMM"
                             :choiceKey="choiceKey"
-                            :isCorrect="isCorrect"
+                            :isCorrect="isCorrectMM"
                         />
                     </template>
                     <template #explanationBottomExperiment>
@@ -326,23 +248,6 @@
                 v-if="((isMCR && showAnswers) || (isMatrixQuestion && showMatrixAnswers)) && !showPaywall"
                 ref="uikit-question__summary"
                 class="uikit-question__summary"
-                :question="question"
-                :show-explanation="showExplanation"
-                :show-explanation-image-long-alt="showExplanationImageLongAlt"
-                :explanation-image-url="explanationImageUrl"
-                :explanation-image-alt="explanationImageAlt"
-                :explanation-image-long-alt="explanationImageLongAlt"
-                :reference="reference"
-                :hide-references="hideReferences"
-                :is-correct="isCorrect"
-                :is-matrix-question-correct="isMatrixQuestionCorrect"
-                :is-matrix-question="isMatrixQuestion"
-                :is-unanswered="isUnanswered"
-                :review-mode="reviewMode"
-                :is-dark-mode="isDarkMode"
-                :question-el="questionEl"
-                :breakpoints="breakpoints"
-                :keyword-definitions="keywordDefinitions"
                 @click="keywordClick"
                 @toggleSummaryExplanation="toggleExplanation"
                 @toggleSummaryExplanationImageLongAlt="toggleExplanationImageLongAlt"
@@ -358,15 +263,10 @@
                 <StatsSummary
                     v-if="globalMetrics"
                     class="uikit-question__stats-summary"
-                    :global-metrics="globalMetrics"
-                    :choice-scores="choiceScores"
-                    :matrix-choice-scores="matrixChoiceScores"
-                    :is-matrix-question="isMatrixQuestion"
-                    :is-dark-mode="isDarkMode"
                 />
             </slot>
             <div
-                v-breakpoint:questionEl="breakpoints"
+                v-breakpoint="breakpointsWithEl"
                 class="uikit-question__motivational-moment-bottom"
                 :class="{
                     'uikit-question__motivational-moment-bottom--mcr': isMCR,
@@ -386,7 +286,7 @@
             <slot name="actionExperiment" />
             <div
                 v-if="!reviewMode"
-                v-breakpoint:questionEl="breakpoints"
+                v-breakpoint="breakpointsWithEl"
                 class="uikit-question__action-container"
                 :class="{
                     'uikit-question__action-container--mcr-summary': isMCR && showAnswers,
@@ -436,7 +336,7 @@
         </div>
         <div
             v-if="showPassageAndImage || (showExplanation && !showPaywall)"
-            v-breakpoint:questionEl="breakpoints"
+            v-breakpoint="breakpointsWithEl"
             class="uikit-question__right-side"
             :class="{
                 'uikit-question__right-side--explanation': showExplanation && !showPaywall,
@@ -447,36 +347,12 @@
                 v-if="showPassageAndImage"
                 ref="uikit-question__passage-and-image"
                 class="uikit-question__passage-and-image"
-                :question="question"
-                :show-passage-image-long-alt="showPassageImageLongAlt"
-                :show-passage-and-image="showPassageAndImage"
-                :passage-image-url="passageImageUrl"
-                :passage-image-long-alt="passageImageLongAlt"
-                :passage-image-alt="passageImageAlt"
-                :passage-and-image-title="passageAndImageTitle"
-                :is-dark-mode="isDarkMode"
-                :question-el="questionEl"
-                :breakpoints="breakpoints"
                 @emitTogglePassageImageLongAlt="togglePassageImageLongAlt"
                 @emitMoveFocusToPrompt="moveFocusToPrompt"
             />
             <Explanation
                 ref="uikit-question__explanation"
                 class="uikit-question__explanation"
-                :question="question"
-                :show-explanation="showExplanation"
-                :show-paywall="showPaywall"
-                :review-mode="reviewMode"
-                :show-explanation-image-long-alt="showExplanationImageLongAlt"
-                :explanation-image-url="explanationImageUrl"
-                :explanation-image-alt="explanationImageAlt"
-                :explanation-image-long-alt="explanationImageLongAlt"
-                :reference="reference"
-                :hide-references="hideReferences"
-                :is-dark-mode="isDarkMode"
-                :question-el="questionEl"
-                :breakpoints="breakpoints"
-                :keyword-definitions="keywordDefinitions"
                 @toggleExplanationImageLongAlt="toggleExplanationImageLongAlt"
                 @toggleExplanation="toggleExplanation"
                 @click="keywordClick"
@@ -492,17 +368,12 @@
     </div>
 </template>
 
-<script lang="ts">
-import { Component, Vue, Prop, Watch, Emit } from 'vue-facing-decorator'
-import type { ComponentPublicInstance } from 'vue'
+<script setup lang="ts">
+import { computed, onMounted, onBeforeUnmount, watch, useTemplateRef, ref, provide } from 'vue'
 import PocketButton from '../Buttons/Button.vue'
 import Icon from '../Icons/Icon.vue'
-import type { ITableColumn, ITableSortSettings } from '../Tables/table'
-import Table from '../Tables/Table.vue'
-import OverflowTooltip from '../Tooltips/OverflowTooltip.vue'
 import QuestionContext from '../Quiz/Question/QuestionContext.vue'
 import PassageAndImageDropdown from '../Quiz/Question/PassageAndImageDropdown.vue'
-import DropdownExplanation from '../Quiz/Question/DropdownExplanation.vue'
 import Paywall from '../Quiz/Question/Paywall.vue'
 import Summary from '../Quiz/Question/Summary.vue'
 import ChoicesContainer from '../Quiz/Question/ChoicesContainer.vue'
@@ -512,7 +383,6 @@ import PassageAndImage from '../Quiz/Question/PassageAndImage.vue'
 import MatrixChoicesContainer from '../Quiz/Question/MatrixChoicesContainer.vue'
 import MobileMatrixChoicesContainer from '../Quiz/Question/MobileMatrixChoicesContainer.vue'
 import type { Study } from '@pocketprep/types'
-import { breakpoint, dark } from '../../directives'
 import { highlightKeywordsInText, studyModes } from '../../utils'
 import type { 
     Ref,
@@ -522,1001 +392,931 @@ import type {
     TChoice,
     TChoiceScores,
     TMatrixChoiceScores,
-    TNamesRow,
     TViewNames,
     IScenarioSerial,
 } from './question'
-
-@Component({
-    components: {
-        PocketButton,
-        Icon,
-        Table,
-        OverflowTooltip,
-        QuestionContext,
-        PassageAndImageDropdown,
-        Paywall,
-        DropdownExplanation,
-        Summary,
-        ChoicesContainer,
-        StatsSummary,
-        Explanation,
-        PassageAndImage,
-        MatrixChoicesContainer,
-        MobileMatrixChoicesContainer,
-    },
-    directives: {
-        breakpoint,
-        dark,
-    },
+import { dark as vDark, breakpoint as vBreakpoint } from '../../directives'
+import * as InjectionKeys from './Question/injectionSymbols'
+
+const props = withDefaults(defineProps<{
+    question: Study.Class.QuestionJSON
+    questionNumber: number
+    quizLength: number
+    imageUrlPrefix?: string
+    quizMode?: TQuizMode
+    initialShowAnswers?: boolean
+    showCheckAnswer?: boolean
+    hideAnswer?: boolean
+    showNextQuestion?: boolean
+    reviewMode?: boolean
+    previousChoices?: TChoiceKey[] | null
+    previousMatrixChoices?: TMatrixChoiceKey[] | null
+    globalMetrics?: Study.Class.GlobalQuestionMetricJSON | null
+    showNames?: TViewNames | null
+    allowKeyboardShortcuts?: boolean
+    containerEl?: HTMLElement | null
+    isDarkMode?: boolean
+    answerSeed?: number[] | null
+    showCloseButton?: boolean
+    defaultShowExplanation?: boolean | null
+    autoFocusPrompt?: boolean | null  // false autofocuses the context, null is no autofocus
+    showPaywall?: boolean
+    hideReferences?: boolean
+    isTeachReview?: boolean
+    isTeachGroupReview?: boolean
+    keywordDefinitions?: { keyword: string; definition: string }[]
+}>(), {
+    imageUrlPrefix: '',
+    quizMode: 'quick10',
+    initialShowAnswers: false,
+    showCheckAnswer: true,
+    hideAnswer: false,
+    showNextQuestion: true,
+    reviewMode: false,
+    previousChoices: null,
+    previousMatrixChoices: null,
+    globalMetrics: null,
+    showNames: null,
+    allowKeyboardShortcuts: true,
+    containerEl: null,
+    isDarkMode: false,
+    answerSeed: null,
+    showCloseButton: false,
+    defaultShowExplanation: null,
+    autoFocusPrompt: false,
+    showPaywall: false,
+    hideReferences: false,
+    isTeachReview: false,
+    isTeachGroupReview: false,
+    keywordDefinitions: () => [],
 })
-export default class Question extends Vue {
-    @Prop() question!: Study.Class.QuestionJSON
-    @Prop() questionNumber!: number
-    @Prop() quizLength!: number
-    @Prop({ default: '' }) imageUrlPrefix!: string
-    @Prop({ default: 'quick10' }) quizMode!: TQuizMode
-    @Prop({ default: false }) initialShowAnswers!: boolean
-    @Prop({ default: true }) showCheckAnswer!: boolean
-    @Prop({ default: false }) hideAnswer!: boolean
-    @Prop({ default: true }) showNextQuestion!: boolean
-    @Prop({ default: false }) reviewMode!: boolean
-    @Prop({ default: null }) previousChoices!: TChoiceKey[] | null
-    @Prop({ default: null }) previousMatrixChoices!: TMatrixChoiceKey[] | null
-    @Prop({ default: null }) globalMetrics!: Study.Class.GlobalQuestionMetricJSON | null
-    @Prop({ default: null }) showNames!: TViewNames | null
-    @Prop({ default: true }) allowKeyboardShortcuts!: boolean
-    @Prop({ default: null }) containerEl!: Element | null
-    @Prop({ default: false }) isDarkMode!: boolean
-    @Prop({ default: null }) answerSeed!: number[]
-    @Prop({ default: false }) showCloseButton!: boolean
-    @Prop({ default: null }) defaultShowExplanation!: boolean
-    @Prop({ default: false }) autoFocusPrompt!: boolean | null  // false autofocuses the context, null is no autofocus
-    @Prop({ default: false }) showPaywall!: boolean
-    @Prop({ default: false }) hideReferences!: boolean
-    @Prop({ default: false }) isTeachReview!: boolean
-    @Prop({ default: false }) isTeachGroupReview!: boolean
-    @Prop({ default: [] }) keywordDefinitions!: { keyword: string; definition: string }[]
-
-    hoverChoiceKey: TChoiceKey | null = null
-    focusChoiceKey: TChoiceKey | null = null
-    choiceStrikes: TChoiceKey[] = []
-    selectedChoices: TChoiceKey[] = []
-    selectedMatrixChoices: TMatrixChoiceKey[] = []
-    showAnswers = false
-    showMatrixAnswers = false
-    showExplanation = false
-    showPassageImageLongAlt = false
-    showExplanationImageDropdown = false
-    showExplanationImageLongAlt = false
-    swipeStart: {
-        x: number | null
-        y: number | null
-    } = { x: null, y: null }
-
-    sortSettings: ITableSortSettings | null = null
-    showNamesColumns: ITableColumn[] = [{
-        name: '',
-        propName: 'nameOne',
-        isSortDisabled: true,
-    }, {
-        name: '',
-        propName: 'nameTwo',
-        isSortDisabled: true,
-    }, {
-        name: '',
-        propName: 'nameThree',
-        isSortDisabled: true,
-    }]
-
-    get breakpoints () {
-        // Passing the container element (typically QuizContainer) allows us to bind to that element's width
-        if (this.containerEl) {
-            return {
+
+const emit = defineEmits<{
+    'keyword-click': [ keywordClick: {
+        keyword: string
+        location: string | null
+        clickLocation: {
+            x: number
+            y: number
+        }
+        target: HTMLElement
+    } | undefined ]
+    'selectedChoices': [ selectedChoices: Study.Cloud.IQuizAnswer ]
+    'close': []
+    'upgrade': []
+    'submitQuiz': []
+    'nextQuestion': []
+    'previousQuestion': []
+    'checkAnswer': [ answer: Study.Cloud.IQuizAnswer ]
+    'update:showExplanation': [ showExplanation: boolean ]
+}>()
+
+const question = computed(() => props.question)
+const quizLength = computed(() => props.quizLength)
+const isDarkMode = computed(() => props.isDarkMode)
+const quizMode = computed(() => props.quizMode)
+const questionNumber = computed(() => props.questionNumber)
+const imageUrlPrefix = computed(() => props.imageUrlPrefix)
+const globalMetrics = computed(() => props.globalMetrics)
+const reviewMode = computed(() => props.reviewMode)
+const hideReferences = computed(() => props.hideReferences)
+const keywordDefinitions = computed(() => props.keywordDefinitions)
+const showPaywall = computed(() => props.showPaywall)
+const isTeachGroupReview = computed(() => props.isTeachGroupReview)
+const hoverChoiceKey = ref<TChoiceKey | null>(null)
+const focusChoiceKey = ref<TChoiceKey | null>(null)
+const choiceStrikes = ref<TChoiceKey[]>([])
+const selectedChoices = ref<TChoiceKey[]>([])
+const selectedMatrixChoices = ref<TMatrixChoiceKey[]>([])
+const showAnswers = ref(false)
+const showMatrixAnswers = ref(false)
+const showExplanation = ref(false)
+const showPassageImageLongAlt = ref(false)
+const showExplanationImageLongAlt = ref(false)
+const swipeStart = ref<{
+    x: number | null
+    y: number | null
+}>({ x: null, y: null })
+const questionEl = ref<Element | null>(null)
+const questionRef = useTemplateRef<HTMLElement>('uikit-question')
+const questionContextRef = useTemplateRef<{ contextEl?: HTMLElement }>('uikit-question__context')
+const promptEl = useTemplateRef<HTMLElement>('promptRef')
+const passageAndImageRef = useTemplateRef<{
+    passageTitleEl?: HTMLElement
+    longAltEl?: HTMLElement
+}>('uikit-question__passage-and-image')
+const choicesContainerRef = useTemplateRef<{
+    choiceEls?: HTMLElement[]
+    mobileImgDropdownImgDescriptionEl?: HTMLElement
+    showExplanationEls?: HTMLElement[] | HTMLElement
+}>('uikit-question__choices-container')
+const passageImageDropdownRef = useTemplateRef<{
+    mobileImgDropdownImgDescriptionEl?: HTMLElement
+}>('uikit-question__passage-and-image-dropdown')
+const questionSummaryRef = useTemplateRef<{
+    mcrLongAltEl?: HTMLElement
+    summaryMCRExplanationEl?: HTMLElement
+    summaryMatrixExplanationEl?: HTMLElement
+}>('uikit-question__summary')
+const questionExplanationRef = useTemplateRef<{
+    explanationTitleEl?: HTMLElement
+    longAltEl?: HTMLElement
+}>('uikit-question__explanation')
+
+const breakpointsWithEl = computed(() => {
+    // Passing the container element (typically QuizContainer) allows us to bind to that element's width
+    if (props.containerEl) {
+        return {
+            breakpoints: {
                 'mobile': 767,
                 'tablet-portrait': 1023,
                 'tablet-landscape': 1439,
-            }
-        } else {
-            // These were calculated to account for the expected widths of our Quiz Container sides
-            return {
+            },
+            containerEl: props.containerEl,
+        }
+    } else {
+        // These were calculated to account for the expected widths of our Quiz Container sides
+        return {
+            breakpoints: {
                 'mobile': 729,              // 767 - (19 + 19)
                 'tablet-portrait': 978,     // 1023 - (22 + 23)
                 'tablet-landscape': 1309,   // 1439 - (65 + 65)
-            }
+            },
+            containerEl: null,
         }
     }
+})
 
-    get questionEl () {
-        return this.containerEl || this.$refs['question']
-    }
-
-    get contextIconType () {
-        const mode = this.quizMode
-        return Object.values(studyModes).find(studyMode => studyMode.shortName === mode)?.icon || 'quick10'
-    }
 
-    get isMCR () {
-        return this.question.type === 'Multiple Correct Response'
-    }
-
-    get isMatrixQuestion () {
-        return this.question.type === 'Matrix Checkbox' || this.question.type === 'Matrix Radio Button'
-    }
+const contextIconType = computed(() => {
+    const mode = props.quizMode
+    return Object.values(studyModes).find(studyMode => studyMode.shortName === mode)?.icon || 'quick10'
+})
 
-    get questionScenario () {
-        return this.question.questionScenario as Study.Class.QuestionScenarioJSON | undefined
-    }
+const isMCR = computed(() => {
+    return props.question.type === 'Multiple Correct Response'
+})
 
-    get numberOfScenarioQuestions () {
-        return this.questionScenario?.questions.length
-    }
+const isMatrixQuestion = computed(() => {
+    return props.question.type === 'Matrix Checkbox' || props.question.type === 'Matrix Radio Button'
+})
 
-    get currentScenarioQuestionNumber () {
-        if (this.questionScenario?.questions) {
-            const indexOfScenarioSerial = this.questionScenario.questions.findIndex(
-                (scenarioSerial: IScenarioSerial) =>  {
-                    return scenarioSerial.serial === this.question.serial
-                }
-            )
+const questionScenario = computed(() => {
+    return props.question.questionScenario as Study.Class.QuestionScenarioJSON | undefined
+})
 
-            return indexOfScenarioSerial !== -1 ? indexOfScenarioSerial + 1 : undefined
-        }
+const numberOfScenarioQuestions = computed(() => {
+    return questionScenario.value?.questions.length
+})
 
-        return undefined
+const currentScenarioQuestionNumber = computed(() => {
+    if (questionScenario.value?.questions) {
+        const indexOfScenarioSerial = questionScenario.value.questions.findIndex(
+            (scenarioSerial: IScenarioSerial) =>  {
+                return scenarioSerial.serial === props.question.serial
+            }
+        )
 
+        return indexOfScenarioSerial !== -1 ? indexOfScenarioSerial + 1 : undefined
     }
+    return undefined
+})
 
-    get passageImageUrl () {
-        const imageUrl = this.question.passageImage?.url
-        
-        return imageUrl ? `${this.imageUrlPrefix}${imageUrl}` : null
-    }
+const passageImageUrl = computed(() => {
+    const imageUrl = props.question.passageImage?.url
+    
+    return imageUrl ? `${props.imageUrlPrefix}${imageUrl}` : null
+})
 
-    get passageImageAlt () {
-        return this.question.passageImage?.altText
-    }
+const passageImageAlt = computed(() => {
+    return props.question.passageImage?.altText
+})
 
-    get passageImageLongAlt () {
-        return this.question.passageImage?.longAltText
-    }
+const passageImageLongAlt = computed(() => {
+    return props.question.passageImage?.longAltText
+})
 
-    get explanationImageUrl () {
-        const imageUrl = this.question.explanationImage?.url
-        
-        return imageUrl ? `${this.imageUrlPrefix}${imageUrl}` : null
-    }
+const explanationImageUrl = computed(() => {
+    const imageUrl = props.question.explanationImage?.url
+    
+    return imageUrl ? `${props.imageUrlPrefix}${imageUrl}` : null
+})
 
-    get explanationImageAlt () {
-        return this.question.explanationImage?.altText
-    }
+const explanationImageAlt = computed(() => {
+    return props.question.explanationImage?.altText
+})
 
-    get explanationImageLongAlt () {
-        return this.question.explanationImage?.longAltText
-    }
+const explanationImageLongAlt = computed(() => {
+    return props.question.explanationImage?.longAltText
+})
 
-    get showPassageAndImage () {
-        return !this.showExplanation && !!(this.question.passage || this.passageImageUrl)
-    }
+const showPassageAndImage = computed(() => {
+    return !showExplanation.value && !!(props.question.passage || passageImageUrl.value)
+})
 
-    get passageAndImageTitle () {
-        if (this.question.passage && this.passageImageUrl) {
-            return this.question.passageLabel ? `${this.question.passageLabel} + Image` :
-                'Passage + Image'
-        } else if (!this.question.passage && this.passageImageUrl) {
-            return 'Image'
-        } else {
-            return this.question.passageLabel ? `${this.question.passageLabel}` :
-                'Passage'
-        }
+const passageAndImageTitle = computed(() => {
+    if (props.question.passage && passageImageUrl.value) {
+        return props.question.passageLabel ? `${props.question.passageLabel} + Image` :
+            'Passage + Image'
+    } else if (!props.question.passage && passageImageUrl.value) {
+        return 'Image'
+    } else {
+        return props.question.passageLabel ? props.question.passageLabel :
+            'Passage'
     }
+})
 
-    get reference () {
-        return this.question.references?.length ? this.question.references.join('') : undefined
-    }
+const reference = computed(() => {
+    return props.question.references?.length ? props.question.references.join('') : undefined
+})
 
-    get answers (): TChoice[] {
-        const answers = this.question.choices.filter(choice => choice.isCorrect).map((choice, index) => ({
-            text: choice.text,
-            key: `a${index + 1}` as `a${1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9}`,
-        }))
-        
-        return answers.filter(choice => !!choice.text)
-    }
+const answers = computed((): TChoice[] => {
+    return props.question.choices.filter(choice => choice.isCorrect).map((choice, index) => ({
+        text: choice.text,
+        key: `a${index + 1}` as `a${1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9}`,
+    })).filter(choice => !!choice.text)
+})
 
-    get answerKeys (): TChoiceKey[] {
-        return this.answers.map(choice => choice.key)
-    }
+const answerKeys = computed((): TChoiceKey[] => {
+    return answers.value.map(choice => choice.key)
+})
 
-    get matrixAnswerKeys () {
-        if (this.question?.matrixChoiceLayout) {
-            return this.question?.matrixChoiceLayout.flat().filter(choice => choice.startsWith('a'))
-        }
-        return []
+const matrixAnswerKeys = computed<TMatrixChoiceKey[]>(() => {
+    if (props.question?.matrixChoiceLayout) {
+        return props.question?.matrixChoiceLayout.flat().filter(choice => choice.startsWith('a')) as TMatrixChoiceKey[]
     }
+    return [] as TMatrixChoiceKey[]
+})
 
-    get matrixDistractorKeys () {
-        if (this.question?.matrixChoiceLayout) {
-            return this.question?.matrixChoiceLayout.flat().filter(choice => choice.startsWith('d'))
-        }
-        return []
-    }
+const distractors = computed((): TChoice[] => {
+    return props.question.choices.filter(choice => !choice.isCorrect).map((choice, index) => ({
+        text: choice.text,
+        key: `d${index + 1}` as `d${1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9}`,
+    })).filter(choice => !!choice.text)
+})
+
+const distractorKeys = computed((): TChoiceKey[] => {
+    return distractors.value.map(choice => choice.key)
+})
 
-    get distractors (): TChoice[] {
-        const distractors = this.question.choices.filter(choice => !choice.isCorrect).map((choice, index) => ({
-            text: choice.text,
-            key: `d${index + 1}` as `d${1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9}`,
-        }))
+const choices = computed(() => {
+    return shuffleChoices([
+        ...answers.value,
+        ...distractors.value,
+    ])
+})
 
-        return distractors.filter(choice => !!choice.text)
-    }
+const isCorrect = computed(() => {
+    // In order to be correct, user must have selected all the answers and none of the distractors
+    return showAnswers.value
+        && selectedChoices.value.length === answerKeys.value.length
+        && !selectedChoices.value.join(' ').includes('d')
+})
 
-    get distractorKeys (): TChoiceKey[] {
-        return this.distractors.map(choice => choice.key)
-    }
+const isMatrixQuestionCorrect = computed(() => {
+    return showMatrixAnswers.value
+        && selectedMatrixChoices.value.length === matrixAnswerKeys.value.length
+        && !selectedMatrixChoices.value.join(' ').includes('d')
+})
 
-    get choices () {
-        return this.shuffleChoices([
-            ...this.answers,
-            ...this.distractors,
-        ])
+const choiceScores = computed((): TChoiceScores => {
+    const metrics = globalMetrics.value
+    const scores: TChoiceScores = {
+        totalAnswered: selectedChoices.value.length && showAnswers && !props.reviewMode ? 1 : 0,
+        answeredCorrectly: isCorrect.value && !props.reviewMode ? 1 : 0,
     }
 
-    get isCorrect () {
-        // In order to be correct, user must have selected all the answers and none of the distractors
-        return this.showAnswers
-            && this.selectedChoices.length === this.answerKeys.length
-            && !this.selectedChoices.join(' ').includes('d')
+    if (!metrics) {
+        return scores
     }
 
-    get isMatrixQuestionCorrect () {
-        return this.showMatrixAnswers
-            && this.selectedMatrixChoices.length === this.matrixAnswerKeys.length
-            && !this.selectedMatrixChoices.join(' ').includes('d')
-    }
+    scores.totalAnswered += (
+        (metrics.answeredCorrectlyCount || 0)
+        + (metrics.answeredIncorrectlyCount || 0)
+    )
+    scores.answeredCorrectly += (metrics.answeredCorrectlyCount || 0)
 
-    get choiceScores (): TChoiceScores {
-        const globalMetrics = this.globalMetrics
+    const selectedChoicesCount = showAnswers.value && !props.reviewMode && selectedChoices.value.length || 0
+    const totalChoicesCount = selectedChoicesCount + Object.values(metrics.choiceStats)
+        .reduce<number>((choiceCount, acc) => (acc || 0) + (choiceCount || 0), 0)
 
-        const scores: TChoiceScores = {
-            totalAnswered: this.selectedChoices.length && this.showAnswers && !this.reviewMode ? 1 : 0,
-            answeredCorrectly: this.isCorrect && !this.reviewMode ? 1 : 0,
-        }
+    choices.value.forEach(({ key }) => {
+        const globalAnswerCount = metrics.choiceStats[key] || 0
+        const userAnswerCount = showAnswers.value && selectedChoices.value.includes(key) && !props.reviewMode ? 1 : 0
+        const choiceAnswerCount = globalAnswerCount + userAnswerCount
+        const answerPct = Math.round((choiceAnswerCount / totalChoicesCount) * 100)
+        // In case we have NaN here when nobody answered the question and nobody got it right
+        scores[key] = answerPct || 0
+    })
 
-        if (!globalMetrics) {
-            return scores
-        }
+    return scores
+})
 
-        scores.totalAnswered += (
-            (globalMetrics.answeredCorrectlyCount || 0)
-            + (globalMetrics.answeredIncorrectlyCount || 0)
-        )
-        scores.answeredCorrectly += (globalMetrics.answeredCorrectlyCount || 0)
-
-        const selectedChoicesCount = this.showAnswers && !this.reviewMode && this.selectedChoices.length || 0
-        const totalChoicesCount = selectedChoicesCount + Object.values(globalMetrics.choiceStats)
-            .reduce<number>((choiceCount, acc) => (acc || 0) + (choiceCount || 0), 0)
-
-        this.choices.forEach(({ key }) => {
-            const globalAnswerCount = globalMetrics.choiceStats[key] || 0
-            const userAnswerCount = this.showAnswers && this.selectedChoices.includes(key) && !this.reviewMode ? 1 : 0
-            const choiceAnswerCount = globalAnswerCount + userAnswerCount
-            const answerPct = Math.round((choiceAnswerCount / totalChoicesCount) * 100)
-            // In case we have NaN here when nobody answered the question and nobody got it right
-            scores[key] = answerPct || 0
-        })
+const matrixChoiceScores = computed((): TMatrixChoiceScores => {
+    const metrics = props.globalMetrics
 
-        return scores
+    const scores: TMatrixChoiceScores = {
+        totalAnswered: selectedMatrixChoices.value.length && 
+            showMatrixAnswers && !props.reviewMode ? 1 : 0,
+        answeredCorrectly: isCorrect.value && !props.reviewMode ? 1 : 0,
     }
 
-    get matrixChoiceScores (): TMatrixChoiceScores {
-        const globalMetrics = this.globalMetrics
-
-        const scores: TMatrixChoiceScores = {
-            totalAnswered: this.selectedMatrixChoices.length && 
-                this.showMatrixAnswers && !this.reviewMode ? 1 : 0,
-            answeredCorrectly: this.isCorrect && !this.reviewMode ? 1 : 0,
-        }
-
-        if (!globalMetrics) {
-            return scores
-        }
-
-        scores.totalAnswered += (
-            (globalMetrics.answeredCorrectlyCount || 0)
-            + (globalMetrics.answeredIncorrectlyCount || 0)
-        )
-        scores.answeredCorrectly += (globalMetrics.answeredCorrectlyCount || 0)
+    if (!metrics) {
         return scores
     }
 
-    get isMatrixQuestionAnswered () {
-        // Matrix questions are answered if each row has a selected choice
-        if (this.isMatrixQuestion) {
-            const answeredRowNums = this.selectedMatrixChoices.map(choice => {
-                if (choice as TMatrixChoiceKey) {
-                    return Number(choice.split('_')[0]?.slice(1))
-                }
-                return
-            })
-
-            const matrixRows = this.question.matrixChoiceLayout || []
-            const isEveryRowAnswered = matrixRows.every((row, index) => {
-                const rowNum = index + 1
-                const hasSelectedChoiceForRow = answeredRowNums.includes(rowNum)
-                return hasSelectedChoiceForRow
-            })
-            return isEveryRowAnswered
-        }
-        return false
-    }
-
-    get isUnanswered () {
-        if (!this.isMatrixQuestion) {
-            return this.selectedChoices.length === 0
-        }
+    scores.totalAnswered += (
+        (metrics.answeredCorrectlyCount || 0)
+        + (metrics.answeredIncorrectlyCount || 0)
+    )
+    scores.answeredCorrectly += (metrics.answeredCorrectlyCount || 0)
+    return scores
+})
 
-        return !this.isMatrixQuestionAnswered
-    }
+const isMatrixQuestionAnswered = computed(() => {
+    // Matrix questions are answered if each row has a selected choice
+    if (isMatrixQuestion.value) {
+        const answeredRowNums = selectedMatrixChoices.value.map(choice => {
+            if (choice) {
+                return Number(choice.split('_')[0]?.slice(1))
+            }
+            return
+        })
 
-    get prompt () {
-        return highlightKeywordsInText({
-            text: this.question.prompt, 
-            keywordDefinitions: this.keywordDefinitions, 
-            isDarkMode: this.isDarkMode,
-            location: 'prompt',
+        const matrixRows = props.question.matrixChoiceLayout || []
+        const isEveryRowAnswered = matrixRows.every((row, index) => {
+            const rowNum = index + 1
+            const hasSelectedChoiceForRow = answeredRowNums.includes(rowNum)
+            return hasSelectedChoiceForRow
         })
+        return isEveryRowAnswered
     }
+    return false
+})
 
-    created () {
-        if (this.reviewMode) {
-            this.startReviewMode()
-        }
-        
-        if (!this.isMatrixQuestion && this.previousChoices) {
-            this.updateSelectedChoices(this.previousChoices)
-        }
-
-        if (this.isMatrixQuestion && this.previousMatrixChoices) {
-            this.updateSelectedMatrixChoices(this.previousMatrixChoices)
-        }
+const isUnanswered = computed(() => {
+    if (!isMatrixQuestion.value) {
+        return selectedChoices.value.length === 0
     }
 
-    mounted () {
-        if (this.initialShowAnswers) {
-            this.showAnswers = this.initialShowAnswers
-            this.showMatrixAnswers = this.initialShowAnswers
-        }
-
-        if (this.allowKeyboardShortcuts) {
-            window.addEventListener('keydown', this.keydownListener)
-        }
-
-        if (this.autoFocusPrompt) {
-            this.moveFocusToPrompt()
-        } else if (this.autoFocusPrompt === false) {
-            setTimeout(() => {
-                const contextComp = this.$refs['uikit-question__context'] as ComponentPublicInstance | undefined
-                const contextEl = contextComp?.$refs['uikit-question-context'] as HTMLElement | undefined
-                contextEl?.focus()
-            }, 0)
-        }
-        this.sortSettings = {
-            column: this.showNamesColumns[0] || null,
-            direction: 1,
-        }
-
-        const prompt = this.$refs['prompt'] as HTMLElement
-        const promptElements = prompt?.querySelectorAll('p')
-        if (promptElements.length) {
-            promptElements.forEach(el => el.setAttribute('tabindex', '0'))
-        }
-    }
+    return !isMatrixQuestionAnswered.value
+})
 
-    beforeUnmount () {
-        window.removeEventListener('keydown', this.keydownListener)
-    }
+const prompt = computed(() => {
+    return highlightKeywordsInText({
+        text: props.question.prompt, 
+        keywordDefinitions: props.keywordDefinitions, 
+        isDarkMode: props.isDarkMode,
+        location: 'prompt',
+    })
+})
 
-    keydownListener (e: KeyboardEvent) {
-        switch (e.code) {
-            case 'KeyA':
-                this.choices[0] && this.selectChoice(this.choices[0].key, true)
-                break
-            case 'KeyB':
-                this.choices[1] && this.selectChoice(this.choices[1].key, true)
-                break
-            case 'KeyC':
-                this.choices[2] && this.selectChoice(this.choices[2].key, true)
-                break
-            case 'KeyD':
-                this.choices[3] && this.selectChoice(this.choices[3].key, true)
-                break
-            case 'KeyE':
-                this.choices[4] && this.selectChoice(this.choices[4].key, true)
-                break
-            case 'KeyF':
-                this.choices[5] && this.selectChoice(this.choices[5].key, true)
-                break
-            case 'KeyG':
-                this.choices[6] && this.selectChoice(this.choices[6].key, true)
-                break
-            case 'KeyH':
-                this.choices[7] && this.selectChoice(this.choices[7].key, true)
-                break
-            case 'KeyI':
-                this.choices[8] && this.selectChoice(this.choices[8].key, true)
-                break
-            case 'KeyJ':
-                this.choices[9] && this.selectChoice(this.choices[9].key, true)
-                break
-            case 'KeyX':
-                this.showAnswers && this.toggleExplanation()
-                break
-            case 'Escape':
-                this.emitClose()
+const keydownListener = (e: KeyboardEvent) => {
+    switch (e.code) {
+        case 'KeyA':
+            choices.value[0] && selectChoice(choices.value[0].key, true)
+            break
+        case 'KeyB':
+            choices.value[1] && selectChoice(choices.value[1].key, true)
+            break
+        case 'KeyC':
+            choices.value[2] && selectChoice(choices.value[2].key, true)
+            break
+        case 'KeyD':
+            choices.value[3] && selectChoice(choices.value[3].key, true)
+            break
+        case 'KeyE':
+            choices.value[4] && selectChoice(choices.value[4].key, true)
+            break
+        case 'KeyF':
+            choices.value[5] && selectChoice(choices.value[5].key, true)
+            break
+        case 'KeyG':
+            choices.value[6] && selectChoice(choices.value[6].key, true)
+            break
+        case 'KeyH':
+            choices.value[7] && selectChoice(choices.value[7].key, true)
+            break
+        case 'KeyI':
+            choices.value[8] && selectChoice(choices.value[8].key, true)
+            break
+        case 'KeyJ':
+            choices.value[9] && selectChoice(choices.value[9].key, true)
+            break
+        case 'KeyX':
+            showAnswers.value && toggleExplanation()
+            break
+        case 'Escape':
+            emitClose()
+            e.preventDefault()
+            break
+        case 'Enter':
+            if (!showAnswers.value && selectedChoices.value.length && focusChoiceKey.value === null) {
+                clickCheckAnswer()
                 e.preventDefault()
-                break
-            case 'Enter':
-                if (!this.showAnswers && this.selectedChoices.length && this.focusChoiceKey === null) {
-                    this.clickCheckAnswer()
-                    e.preventDefault()
-                }
-                break
-            case 'ArrowLeft':
-                this.emitPreviousQuestion()
-                e.preventDefault()
-                break
-            case 'ArrowRight':
-                this.emitNextQuestion()
-                e.preventDefault()
-                break
-        }
-    }
-
-    moveFocusToPassage () {
-        setTimeout(() => {
-            const passageAndImageComp = 
-                this.$refs['uikit-question__passage-and-image'] as ComponentPublicInstance | undefined
-            const passageTitleEl = 
-                // eslint-disable-next-line max-len
-                passageAndImageComp?.$refs['uikit-question-passage-and-image__passage-and-image-title'] as HTMLElement | undefined
-            if (passageTitleEl) {
-                passageTitleEl?.focus()
             }
-        }, 0)
-    }
-
-    moveFocusToPrompt () {
-        setTimeout(() => {
-            const promptEl = this.$refs['prompt'] as HTMLElement | undefined
-            promptEl?.focus()
-        }, 0)
+            break
+        case 'ArrowLeft':
+            emitPreviousQuestion()
+            e.preventDefault()
+            break
+        case 'ArrowRight':
+            emitNextQuestion()
+            e.preventDefault()
+            break
     }
+}
 
-    @Emit('keyword-click')
-    keywordClick (event: MouseEvent) {
-        const target = event.target as HTMLElement
-        if (target.classList.contains('keyword-highlight')) {
-            const keyword = target.innerText.trim()
-            const location = target.getAttribute('data-location')
-            const clickLocation = { x: event.clientX, y: event.clientY }
-            return {
-                keyword,
-                location,
-                clickLocation,
-                target,
-            }
-        }
+const moveFocusToPassage = () => {
+    const passageTitleEl = passageAndImageRef?.value?.passageTitleEl
+    if (passageTitleEl) {
+        passageTitleEl?.focus()
     }
+}
 
-    startReviewMode () {
-        if (!this.isMatrixQuestion) {
-            this.showAnswers = true
-            this.showExplanation = this.defaultShowExplanation === null ? true : this.defaultShowExplanation
-            this.selectedChoices = this.answerKeys
-        } else {
-            this.showMatrixAnswers = true
-            this.showExplanation = this.defaultShowExplanation === null ? true : this.defaultShowExplanation
-            this.selectedMatrixChoices = this.matrixAnswerKeys as TMatrixChoiceKey[]
-        }
-    }
+const moveFocusToPrompt = () => {
+    promptEl?.value?.focus()
+}
 
-    stopReviewMode () {
-        this.showAnswers = false
-        this.showMatrixAnswers = false
-        this.showExplanation = false
-        this.selectedChoices = []
-        this.selectedMatrixChoices = []
+const keywordClick = (event: MouseEvent) => {
+    const target = event.target as HTMLElement
+    if (target.classList.contains('keyword-highlight')) {
+        const keyword = target.innerText.trim()
+        const location = target.getAttribute('data-location')
+        const clickLocation = { x: event.clientX, y: event.clientY }
+        emit('keyword-click', {
+            keyword,
+            location,
+            clickLocation,
+            target,
+        })
     }
+}
 
-    updateSelectedChoices (choices: TChoiceKey[]) {
-        this.selectedChoices = [ ...choices ]
+const startReviewMode = () => {
+    if (!isMatrixQuestion.value) {
+        showAnswers.value = true
+        showExplanation.value = props.defaultShowExplanation === null ? true : props.defaultShowExplanation
+        selectedChoices.value = answerKeys.value
+    } else {
+        showMatrixAnswers.value = true
+        showExplanation.value = props.defaultShowExplanation === null ? true : props.defaultShowExplanation
+        selectedMatrixChoices.value = matrixAnswerKeys.value
     }
+}
 
-    updateSelectedMatrixChoices (matrixChoices: TMatrixChoiceKey[]) {
-        this.selectedMatrixChoices = [ ...matrixChoices ]
-    }
+const stopReviewMode = () => {
+    showAnswers.value = false
+    showMatrixAnswers.value = false
+    showExplanation.value = false
+    selectedChoices.value = []
+    selectedMatrixChoices.value = []
+}
 
-    // deterministic shuffling of choices so they don't change order everytime you reload the component
-    shuffleChoices (choices: TChoice[]): TChoice[] {
-        const sortedChoices = choices.sort((a, b) => {
-            const hashChar = (char: string, num: number) => ((num << 5) - num) + char.charCodeAt(0)
+const updateSelectedChoices = (updatedChoices: TChoiceKey[]) => {
+    selectedChoices.value = [ ...updatedChoices ]
+}
 
-            const aHash = a.text?.split('')
-                .reduce((acc: number, char: string) => hashChar(char, acc) & hashChar(char, acc), 0)
-            const bHash = b.text?.split('')
-                .reduce((acc: number, char: string) => hashChar(char, acc) & hashChar(char, acc), 0)
+const updateSelectedMatrixChoices = (matrixChoices: TMatrixChoiceKey[]) => {
+    selectedMatrixChoices.value = [ ...matrixChoices ]
+}
 
-            return (aHash || 0) - (bHash || 0)
-        })
+// deterministic shuffling of choices so they don't change order everytime you reload the component
+const shuffleChoices = (choicesToShuffle: TChoice[]): TChoice[] => {
+    const sortedChoices = choicesToShuffle.sort((a, b) => {
+        const hashChar = (char: string, num: number) => ((num << 5) - num) + char.charCodeAt(0)
 
-        return this.answerSeed
-            ? this.answerSeed.reduce<TChoice[]>((acc, i) => {
-                const sortedChoice = sortedChoices[i]
-                if (sortedChoice) {
-                    acc.push(sortedChoice)
-                }
+        const aHash = a.text?.split('')
+            .reduce((acc: number, char: string) => hashChar(char, acc) & hashChar(char, acc), 0)
+        const bHash = b.text?.split('')
+            .reduce((acc: number, char: string) => hashChar(char, acc) & hashChar(char, acc), 0)
 
-                return acc
-            }, [])
-            : sortedChoices
-    }
+        return (aHash || 0) - (bHash || 0)
+    })
 
-    choiceFocusOut (event: FocusEvent) {
-        const relatedTarget = event.relatedTarget
-        if (
-            relatedTarget instanceof Element
-        ) {
-            const classesString = relatedTarget.getAttribute('class') || ''
-            const classes = classesString.split(' ')
-            if (classes.includes('uikit-question-choices-container__strikethrough')) {
-                return  // Don't set focusChoiceKey = null
+    return props.answerSeed
+        ? props.answerSeed.reduce<TChoice[]>((acc, i) => {
+            const sortedChoice = sortedChoices[i]
+            if (sortedChoice) {
+                acc.push(sortedChoice)
             }
+
+            return acc
+        }, [])
+        : sortedChoices
+}
+
+const choiceFocusOut = (event: FocusEvent) => {
+    const relatedTarget = event.relatedTarget
+    if (
+        relatedTarget instanceof Element
+    ) {
+        const classesString = relatedTarget.getAttribute('class') || ''
+        const classes = classesString.split(' ')
+        if (classes.includes('uikit-question-choices-container__strikethrough')) {
+            return  // Don't set focusChoiceKey = null
         }
-        this.focusChoiceKey = null
     }
+    focusChoiceKey.value = null
+}
 
-    choiceFocusIn (choiceKey: TChoiceKey) {
-        this.focusChoiceKey = choiceKey
-    }
+const choiceFocusIn = (choiceKey: TChoiceKey) => {
+    focusChoiceKey.value = choiceKey
+}
 
-    choiceMouseOver (choiceKey: TChoiceKey) {
-        this.hoverChoiceKey = choiceKey
-    }
+const choiceMouseOver = (choiceKey: TChoiceKey) => {
+    hoverChoiceKey.value = choiceKey
+}
 
-    choiceMouseLeave () {
-        this.hoverChoiceKey = null
-    }
+const choiceMouseLeave = () => {
+    hoverChoiceKey.value = null
+}
 
-    handleTouchStart (event: TouchEvent) {
-        this.swipeStart = {
-            x: event?.touches[0]?.clientX || null,
-            y: event?.touches[0]?.clientY || null,
-        }
+const handleTouchStart = (event: TouchEvent) => {
+    swipeStart.value = {
+        x: event?.touches[0]?.clientX || null,
+        y: event?.touches[0]?.clientY || null,
     }
+}
 
-    handleTouchMove (event: TouchEvent) {
-        if (event.cancelable) {
-            const changedY = event?.changedTouches[0]?.clientY || null
-            const changedX = event?.changedTouches[0]?.clientX || null
-            if (
-                changedY !== null 
-                && changedX !== null 
-                && this.swipeStart.y !== null
-                && this.swipeStart.x !== null
-                && Math.abs(changedX - this.swipeStart.x) > 26
-            ) {
-                event.stopPropagation()
-                event.preventDefault()
-            }
+const handleTouchMove = (event: TouchEvent) => {
+    if (event.cancelable) {
+        const changedY = event?.changedTouches[0]?.clientY || null
+        const changedX = event?.changedTouches[0]?.clientX || null
+        if (
+            changedY !== null 
+            && changedX !== null 
+            && swipeStart.value.y !== null
+            && swipeStart.value.x !== null
+            && Math.abs(changedX - swipeStart.value.x) > 26
+        ) {
+            event.stopPropagation()
+            event.preventDefault()
         }
     }
+}
 
-    handleTouchEnd (option: {choiceKey: TChoiceKey; event: TouchEvent}) {
-        const choiceKey = option.choiceKey
-        const event = option.event
-        const targetEl = event.target as Ref
-        const swipeEnd = {
-            x: event?.changedTouches[0]?.clientX || null,
-            y: event?.changedTouches[0]?.clientY || null,
+const handleTouchEnd = (option: { choiceKey: TChoiceKey; event: TouchEvent }) => {
+    const choiceKey = option.choiceKey
+    const event = option.event
+    const targetEl = event.target as Ref
+    const swipeEnd = {
+        x: event?.changedTouches[0]?.clientX || null,
+        y: event?.changedTouches[0]?.clientY || null,
+    }
+    if (
+        targetEl instanceof HTMLElement
+        && swipeEnd.x !== null
+        && swipeEnd.y !== null
+        && swipeStart.value.x !== null
+        && Math.abs(swipeEnd.x - swipeStart.value.x) > 80
+    ) {
+        const choiceEls = choicesContainerRef?.value?.choiceEls
+        const parent = choiceEls?.find(choiceEl => choiceEl.contains(targetEl))
+        const finalElement = document.elementFromPoint(swipeEnd.x, swipeEnd.y)
+        if (parent?.contains(finalElement)) {
+            clickChoiceStrike(choiceKey)
+        }
+    } else if (!showAnswers.value) {
+        if (event.cancelable) {
+            event.preventDefault()
         }
         if (
-            targetEl instanceof HTMLElement
-            && swipeEnd.x !== null
-            && swipeEnd.y !== null
-            && this.swipeStart.x !== null
-            && Math.abs(swipeEnd.x - this.swipeStart.x) > 80
+            swipeEnd.y !== null
+            && swipeStart.value.y !== null
+            && Math.abs(swipeEnd.y - swipeStart.value.y) < 20
         ) {
-            const choicesContainerComp = this.$refs[
-                'uikit-question__choices-container'
-            ] as ComponentPublicInstance | undefined
-            const choiceEls = choicesContainerComp?.$refs.choices as HTMLElement[] | undefined
-            const parent = choiceEls?.find(choiceEl => choiceEl.contains(targetEl))
-            const finalElement = document.elementFromPoint(swipeEnd.x, swipeEnd.y)
-            if (parent?.contains(finalElement)) {
-                this.clickChoiceStrike(choiceKey)
-            }
-        } else if (!this.showAnswers) {
-            if (event.cancelable) {
-                event.preventDefault()
-            }
-            if (
-                swipeEnd.y !== null
-                && this.swipeStart.y !== null
-                && Math.abs(swipeEnd.y - this.swipeStart.y) < 20
-            ) {
-                this.selectChoice(choiceKey)
-            }
+            selectChoice(choiceKey)
         }
-
-        this.swipeStart = { x: null, y: null }
     }
 
-    clickChoiceStrike (choiceKey: TChoiceKey) {
-        if (this.showAnswers) {
-            return
-        }
+    swipeStart.value = { x: null, y: null }
+}
 
-        const choiceStrikes = this.choiceStrikes
-        const indexOfChoiceStrike = choiceStrikes.indexOf(choiceKey)
-        if (indexOfChoiceStrike !== -1) {
-            choiceStrikes.splice(indexOfChoiceStrike, 1)
-        } else {
-            choiceStrikes.push(choiceKey)
-            // If striking a selected choice, unselect it
-            const selectedChoices = this.selectedChoices
-            const indexOfSelectedChoice = selectedChoices.indexOf(choiceKey)
-            if (indexOfSelectedChoice !== -1) {
-                selectedChoices.splice(indexOfSelectedChoice, 1)
-            }
-        }
+const clickChoiceStrike = (choiceKey: TChoiceKey) => {
+    if (showAnswers.value) {
+        return
     }
 
-    selectChoice (choiceKey: TChoiceKey, focusChoice?: boolean) {
-        if (this.showAnswers) {
-            return
-        }
-        const selectedChoices = this.selectedChoices
-        const indexOfSelectedChoice = selectedChoices.indexOf(choiceKey)
+    const indexOfChoiceStrike = choiceStrikes.value.indexOf(choiceKey)
+    if (indexOfChoiceStrike !== -1) {
+        choiceStrikes.value.splice(indexOfChoiceStrike, 1)
+    } else {
+        choiceStrikes.value.push(choiceKey)
+        // If striking a selected choice, unselect it
+        const indexOfSelectedChoice = selectedChoices.value.indexOf(choiceKey)
         if (indexOfSelectedChoice !== -1) {
-            selectedChoices.splice(indexOfSelectedChoice, 1)
+            selectedChoices.value.splice(indexOfSelectedChoice, 1)
+        }
+    }
+}
+
+const selectChoice = (choiceKey: TChoiceKey, focusChoice?: boolean) => {
+    if (showAnswers.value) {
+        return
+    }
+    const indexOfSelectedChoice = selectedChoices.value.indexOf(choiceKey)
+    if (indexOfSelectedChoice !== -1) {
+        selectedChoices.value.splice(indexOfSelectedChoice, 1)
+    } else {
+        if (isMCR.value) {
+            selectedChoices.value.push(choiceKey)
         } else {
-            if (this.isMCR) {
-                selectedChoices.push(choiceKey)
-            } else {
-                this.hoverChoiceKey = null
-                this.selectedChoices = [ choiceKey ]
-                if (!this.showCheckAnswer) {
-                    this.clickCheckAnswer()
-                }
-            }
-            // If selecting a striked choice, unstrike it
-            const choiceStrikes = this.choiceStrikes
-            const indexOfChoiceStrike = this.choiceStrikes.indexOf(choiceKey)
-            if (indexOfChoiceStrike !== -1) {
-                choiceStrikes.splice(indexOfChoiceStrike, 1)
+            hoverChoiceKey.value = null
+            selectedChoices.value = [ choiceKey ]
+            if (!props.showCheckAnswer) {
+                clickCheckAnswer()
             }
         }
-
-        if (focusChoice) {
-            const choiceContainerComp = 
-                    this.$refs['uikit-question__choices-container'] as ComponentPublicInstance | undefined
-            const choiceEl = choiceContainerComp?.$refs[`choice-${choiceKey}`] as HTMLElement | HTMLElement[];
-            ('length' in choiceEl)
-                ? choiceEl[0]?.focus()
-                : choiceEl.focus()
+        // If selecting a striked choice, unstrike it
+        const indexOfChoiceStrike = choiceStrikes.value.indexOf(choiceKey)
+        if (indexOfChoiceStrike !== -1) {
+            choiceStrikes.value.splice(indexOfChoiceStrike, 1)
         }
     }
 
-    selectMatrixChoice (matrixChoiceKeys: TMatrixChoiceKey[]) {
-        if (this.showMatrixAnswers) {
-            return
+    if (focusChoice) {
+        const choiceEls = choicesContainerRef?.value?.choiceEls
+        if (choiceEls && 'length' in choiceEls) {
+            choiceEls[0]?.focus()
         }
-        this.selectedMatrixChoices = matrixChoiceKeys
     }
+}
 
-    togglePassageImageLongAlt () {
-        this.showPassageImageLongAlt = !this.showPassageImageLongAlt
-
-        if (this.showPassageImageLongAlt) {
-            setTimeout(() => {
-                const mobileLongAltComp = 
-                    this.$refs['uikit-question__passage-and-image-dropdown'] as ComponentPublicInstance | undefined
-                const mobileImgDropdownImgDescription = 
-                    // eslint-disable-next-line max-len
-                    mobileLongAltComp?.$refs['uikit-question-passage-and-image-dropdown__img-dropdown-img-description'] as HTMLElement | undefined
-                
-                const passageAndImageComp = 
-                    this.$refs['uikit-question__passage-and-image'] as ComponentPublicInstance | undefined
-                const longAlt = 
-                    passageAndImageComp?.$refs['uikit-question-passage-and-image__passage-image-description'] as Ref
-
-                // Checking offsetParent tells us which element is visible
-                if (mobileImgDropdownImgDescription?.offsetParent) {
-                    mobileImgDropdownImgDescription.focus()
-                } else if (longAlt?.offsetParent) {
-                    longAlt.focus()
-                }
-            }, 0)
-        }
+const selectMatrixChoice = (matrixChoiceKeys: TMatrixChoiceKey[]) => {
+    if (showMatrixAnswers.value) {
+        return
     }
+    selectedMatrixChoices.value = matrixChoiceKeys
+}
 
-    toggleExplanationImageLongAlt () {
-        this.showExplanationImageLongAlt = !this.showExplanationImageLongAlt
-        if (this.showExplanationImageLongAlt) {
-            setTimeout(() => {
-                // checks for mobile / tablet portrait uikit-question-summary
-                const mcrLongAltComp = this.$refs['uikit-question__summary'] as ComponentPublicInstance | undefined
-                const mcrLongAlt = 
-                    // eslint-disable-next-line max-len
-                    mcrLongAltComp?.$refs['uikit-question-summary__summary-dropdown-explanation-img-description'] as HTMLElement | undefined
-
-                const choiceContainerComp = 
-                    this.$refs['uikit-question__choices-container'] as ComponentPublicInstance | undefined
-                if (choiceContainerComp) {
-                    const dropdownExplanationComp = 
-                        // eslint-disable-next-line max-len
-                        choiceContainerComp.$refs['uikit-question-choices-container__dropdown-explanation'] as ComponentPublicInstance[]
-                    if (dropdownExplanationComp) {
-                        const dropdownEl = dropdownExplanationComp[0] as ComponentPublicInstance | undefined 
-                        const mobileImgDropdownImgDescription = 
-                        // eslint-disable-next-line max-len
-                        dropdownEl?.$refs['uikit-question-dropdown-explanation__dropdown-explanation-img-description'] as HTMLElement | undefined
-
-                        if (mobileImgDropdownImgDescription?.offsetParent) {
-                            mobileImgDropdownImgDescription.focus()
-                        }
-                    }
-                }
+const togglePassageImageLongAlt = () => {
+    showPassageImageLongAlt.value = !showPassageImageLongAlt.value
 
-                const explanationComp = 
-                    this.$refs['uikit-question__explanation'] as ComponentPublicInstance | undefined
-                const longAlt = explanationComp?.$refs['uikit-question-explanation__explanation-img-description'] as Ref
+    if (showPassageImageLongAlt.value) {
+        const mobileImgDropdownImgDescriptionEl = passageImageDropdownRef?.value?.mobileImgDropdownImgDescriptionEl
+        const longAltEl = passageAndImageRef?.value?.longAltEl
 
-                // Checking offsetParent tells us which element is visible
-                if (mcrLongAlt?.offsetParent) {
-                    mcrLongAlt.focus()
-                } else if (longAlt?.offsetParent) {
-                    longAlt.focus()
-                }
-            }, 0)
+        // Checking offsetParent tells us which element is visible
+        if (mobileImgDropdownImgDescriptionEl?.offsetParent) {
+            mobileImgDropdownImgDescriptionEl.focus()
+        } else if (longAltEl?.offsetParent) {
+            longAltEl.focus()
         }
     }
+}
 
-    toggleExplanation () {
-        this.showExplanation = !this.showExplanation
-        if (!this.showExplanation) {
-            setTimeout(() => {
-                const summaryMCRComp = 
-                    this.$refs['uikit-question__summary'] as ComponentPublicInstance | undefined
-                const summaryMCRExplanation = 
-                    // eslint-disable-next-line max-len
-                    summaryMCRComp?.$refs['uikit-question-summary__summary-toggle-explanation-text'] as HTMLElement | undefined
-                
-                const choiceContainerComp = 
-                    this.$refs['uikit-question__choices-container'] as ComponentPublicInstance | undefined
-
-                const showExplanationRef = (
-                    choiceContainerComp?.$refs['uikit-question-choices-container__toggle-explanation-text']
-                ) as Element[] | Element | undefined
-
-                if (summaryMCRExplanation) {
-                    summaryMCRExplanation?.focus()
-                } else if (showExplanationRef) {
-                    const showExplanationEl = (
-                        showExplanationRef instanceof Array
-                            ? showExplanationRef[0]
-                            : showExplanationRef
-                    ) as HTMLElement | undefined
-                    showExplanationEl?.focus()
-                }
-            }, 0)
-        } else {
-            setTimeout(() => {
-                const explanationComp = 
-                    this.$refs['uikit-question__explanation'] as ComponentPublicInstance | undefined
-                const explanationTitle = explanationComp?.$refs['explanation'] as HTMLElement | undefined
-                if (explanationTitle) {
-                    explanationTitle?.focus()
-                }
-            }, 0)
+const toggleExplanationImageLongAlt = () => {
+    showExplanationImageLongAlt.value = !showExplanationImageLongAlt.value
+    if (showExplanationImageLongAlt.value) {
+        // checks for mobile / tablet portrait uikit-question-summary
+        const mcrLongAltEl = questionSummaryRef?.value?.mcrLongAltEl
+        const mobileImgDropdownImgDescriptionEl = choicesContainerRef?.value?.mobileImgDropdownImgDescriptionEl
+        if (mobileImgDropdownImgDescriptionEl?.offsetParent) {
+            mobileImgDropdownImgDescriptionEl.focus()
         }
-    }
+        const longAltEl = questionExplanationRef?.value?.longAltEl
 
-    clickCheckAnswer () {
-        if (!this.hideAnswer) {
-            this.showAnswers = true
-            this.emitCheckAnswer({
-                isCorrect: this.isCorrect,
-                selectedChoices: this.selectedChoices,
-                questionSerial: this.question.serial,
-            })
-            setTimeout(() => {
-                const summaryMCRComp = 
-                    this.$refs['uikit-question__summary'] as ComponentPublicInstance | undefined
-                const summaryMCRExplanation = 
-                    // eslint-disable-next-line max-len
-                    summaryMCRComp?.$refs['uikit-question-summary__summary-toggle-explanation-text'] as HTMLElement | undefined
-
-                const choiceContainerComp = 
-                    this.$refs['uikit-question__choices-container'] as ComponentPublicInstance | undefined
-
-                const showExplanationRef = (
-                    choiceContainerComp?.$refs['uikit-question-choices-container__toggle-explanation-text']
-                ) as Element[] | Element | undefined
-
-                if (summaryMCRExplanation) {
-                    summaryMCRExplanation?.focus()
-                } else if (showExplanationRef) {
-                    const showExplanationEl = (
-                        showExplanationRef instanceof Array
-                            ? showExplanationRef[0]
-                            : showExplanationRef
-                    ) as HTMLElement | undefined
-                    showExplanationEl?.focus()
-                }
-            }, 500)
+        // Checking offsetParent tells us which element is visible
+        if (mcrLongAltEl?.offsetParent) {
+            mcrLongAltEl.focus()
+        } else if (longAltEl?.offsetParent) {
+            longAltEl.focus()
         }
     }
+}
 
-    clickCheckMatrixAnswer () {
-        if (!this.hideAnswer) {
-            this.showMatrixAnswers = true
-
-            this.emitCheckAnswer({
-                isCorrect: this.isMatrixQuestionCorrect,
-                selectedChoices: this.selectedMatrixChoices,
-                questionSerial: this.question.serial,
-            })
-
-            setTimeout(() => {
-                const summaryMatrixComp = 
-                    this.$refs['uikit-question__summary'] as ComponentPublicInstance | undefined
-                const summaryMatrixExplanation = 
-                    // eslint-disable-next-line max-len
-                    summaryMatrixComp?.$refs['uikit-question-summary__summary-toggle-explanation-text'] as HTMLElement | undefined
-                if (summaryMatrixExplanation) {
-                    summaryMatrixExplanation?.focus()
-                }
-            }, 500)
+const toggleExplanation = () => {
+    showExplanation.value = !showExplanation.value
+    if (!showExplanation.value) {
+        const summaryMCRExplanationEl = questionSummaryRef?.value?.summaryMCRExplanationEl
+        const showExplanationEls = choicesContainerRef?.value?.showExplanationEls
+
+        if (summaryMCRExplanationEl) {
+            summaryMCRExplanationEl?.focus()
+        } else if (showExplanationEls) {
+            const showExplanationEl = (
+                showExplanationEls instanceof Array
+                    ? showExplanationEls[0]
+                    : showExplanationEls
+            ) as HTMLElement | undefined
+            showExplanationEl?.focus()
+        }
+    } else {
+        const explanationTitleEl = questionExplanationRef?.value?.explanationTitleEl
+        if (explanationTitleEl) {
+            explanationTitleEl?.focus()
         }
     }
+}
 
-    mappedNameRows (choiceKey: string) {
-        /*
-            There is a specific order in which we have to fill the rows in the table for visible names.
-            Here are the rules for filling the names in:
-            
-            1. The first two names go in the first column
-            2. The third and fourth names go in the second column
-            3. Any subsequent names fill out the first two rows
-            4. Any additional names after those fill out the last row
-            5. Alphabetical by col
-            6. Names truncate when they don't fit the width of the table cell
-        */
-        const rows: TNamesRow[] = []
-        const students = this.showNames && this.showNames[choiceKey] || []
-        if (students.length) {
-            // Row length is dynamic depending on how many students we have
-            const rowLength =  students.length < 3 ? 1 :
-                students.length >= 3 && students.length < 5 ? 2 : 
-                    3
-            for (let i = 0; i < students.length; i += rowLength) {
-                const row = students.slice(i, i + rowLength).reduce((acc, student) => {
-                    if (!acc.id) {
-                        // Need a unique ID for the row
-                        acc.id = student.id
-                    }
-                    if (!acc.nameOne && !acc.isFlaggedByNameOne) {
-                        // Does our row have a nameOne filled in?
-                        acc.nameOne = student.name
-                        acc.isFlaggedByNameOne = student.isFlaggedByStudent
-                    } else if (!acc.nameTwo && !acc.isFlaggedByNameTwo) {
-                        // Does our row have a nameTwo filled in?
-                        acc.nameTwo = student.name
-                        acc.isFlaggedByNameTwo = student.isFlaggedByStudent
-                    } else if (!acc.nameThree && !acc.isFlaggedByNameThree) {
-                        // Does our row have a nameThree filled in?
-                        acc.nameThree = student.name
-                        acc.isFlaggedByNameThree = student.isFlaggedByStudent
-                    }
-                    return acc
-                }, {} as TNamesRow)
-                rows.push(row)
-            }
+const clickCheckAnswer = () => {
+    if (!props.hideAnswer) {
+        showAnswers.value = true
+        emitCheckAnswer({
+            isCorrect: isCorrect.value,
+            selectedChoices: selectedChoices.value,
+            questionSerial: props.question.serial,
+        })
+        const summaryMCRExplanation = questionSummaryRef?.value?.summaryMCRExplanationEl
+        const showExplanationEls = choicesContainerRef?.value?.showExplanationEls
+
+        if (summaryMCRExplanation) {
+            summaryMCRExplanation?.focus()
+        } else if (showExplanationEls) {
+            const showExplanationEl = (
+                showExplanationEls instanceof Array
+                    ? showExplanationEls[0]
+                    : showExplanationEls
+            ) as HTMLElement | undefined
+            showExplanationEl?.focus()
         }
-        return rows
     }
+}
 
-    @Watch('reviewMode')
-    reviewModeChanged (reviewMode: boolean) {
-        if (reviewMode) {
-            this.startReviewMode()
-        } else {
-            this.stopReviewMode()
+const clickCheckMatrixAnswer = () => {
+    if (!props.hideAnswer) {
+        showMatrixAnswers.value = true
+
+        emitCheckAnswer({
+            isCorrect: isMatrixQuestionCorrect.value,
+            selectedChoices: selectedMatrixChoices.value,
+            questionSerial: props.question.serial,
+        })
+
+        const summaryMatrixExplanationEl = questionSummaryRef?.value?.summaryMatrixExplanationEl
+        if (summaryMatrixExplanationEl) {
+            summaryMatrixExplanationEl?.focus()
         }
     }
+}
 
-    @Watch('previousChoices', { deep: true })
-    previousChoicesChanged (choices: TChoiceKey[]) {
-        this.updateSelectedChoices(choices)
+watch(reviewMode, () => {
+    if (reviewMode.value) {
+        startReviewMode()
+    } else {
+        stopReviewMode()
     }
+})
 
-    @Watch('previousMatrixChoices', { deep: true })
-    previousMatrixChoicesChanged (matrixChoice: TMatrixChoiceKey[]) {
-        this.updateSelectedMatrixChoices(matrixChoice)
-    }
+watch(() => props.previousChoices, (previousChoices: TChoiceKey[] | undefined | null) => {
+    if (previousChoices) {
+        updateSelectedChoices(previousChoices)
+    }
+}, { deep: true })
+
+watch(() => props.previousMatrixChoices, (previousMatrixChoices: TMatrixChoiceKey[] | undefined | null) => {
+    if (previousMatrixChoices) {
+        updateSelectedMatrixChoices(previousMatrixChoices)
+    }
+}, { deep: true })
+
+watch(selectedChoices, () => {
+    emitSelectedChoices({
+        isCorrect: selectedChoices.value.length === answerKeys.value.length
+            && !selectedChoices.value.join(' ').includes('d'),
+        selectedChoices: selectedChoices.value,
+        questionSerial: props.question.serial,
+    } as Study.Cloud.IQuizAnswer)
+}, { deep: true })
+
+watch(selectedMatrixChoices, () => {
+    emitSelectedChoices({
+        isCorrect: selectedMatrixChoices.value.length === matrixAnswerKeys.value.length
+            && !selectedMatrixChoices.value.join(' ').includes('d'),
+        selectedChoices: selectedMatrixChoices.value,
+        questionSerial: props.question.serial,
+    } as Study.Cloud.IQuizAnswer)
+}, { deep: true })
+
+watch(showExplanation, () => {
+    emitUpdateShowExplanation()
+})
 
-    @Emit('selectedChoices')
-    emitSelectedChoices (selectedChoices: Study.Cloud.IQuizAnswer) {
-        return selectedChoices
-    }
+const emitSelectedChoices = (selectedChoicesToEmit: Study.Cloud.IQuizAnswer) => {
+    emit('selectedChoices', selectedChoicesToEmit)
+}
 
-    @Watch('selectedChoices', { deep: true })
-    selectedChoicesChanged () {
-        this.emitSelectedChoices({
-            isCorrect: this.selectedChoices.length === this.answerKeys.length
-                && !this.selectedChoices.join(' ').includes('d'),
-            selectedChoices: this.selectedChoices,
-            questionSerial: this.question.serial,
-        } as Study.Cloud.IQuizAnswer)
-    }
+const emitClose = () => {
+    emit('close')
+}
 
-    @Watch('selectedMatrixChoices', { deep: true })
-    selectedMatrixChoicesChanged () {
-        this.emitSelectedChoices({
-            isCorrect: this.selectedMatrixChoices.length === this.matrixAnswerKeys.length
-                && !this.selectedMatrixChoices.join(' ').includes('d'),
-            selectedChoices: this.selectedMatrixChoices,
-            questionSerial: this.question.serial,
-        } as Study.Cloud.IQuizAnswer)
-    }
+const emitUpgrade = () => {
+    emit('upgrade')
+}
 
-    @Watch('showExplanation')
-    showExplanationChanged () {
-        this.emitUpdateShowExplanation()
-    }
+const emitSubmitQuiz = () => {
+    emit('submitQuiz')
+}
 
-    @Emit('close')
-    emitClose () {
-        return true
-    }
+const emitNextQuestion = () => {
+    emit('nextQuestion')
+}
 
-    @Emit('upgrade')
-    emitUpgrade () {
-        return true
-    }
+const emitPreviousQuestion = () => {
+    emit('previousQuestion')
+}
 
-    @Emit('submitQuiz')
-    emitSubmitQuiz () {
-        return true
-    }
+const emitCheckAnswer = (answer: Study.Cloud.IQuizAnswer) => {
+    emit('checkAnswer', answer)
+}
 
-    @Emit('nextQuestion')
-    emitNextQuestion () {
-        return true
+const emitUpdateShowExplanation = () => {
+    emit('update:showExplanation', showExplanation.value)
+}
+
+if (props.reviewMode) {
+    startReviewMode()
+}
+
+if (!isMatrixQuestion.value && props.previousChoices) {
+    updateSelectedChoices(props.previousChoices)
+}
+
+if (isMatrixQuestion.value && props.previousMatrixChoices) {
+    updateSelectedMatrixChoices(props.previousMatrixChoices)
+}
+
+onMounted(() => {
+    questionEl.value = props.containerEl || questionRef.value
+
+    if (props.initialShowAnswers) {
+        showAnswers.value = props.initialShowAnswers
+        showMatrixAnswers.value = props.initialShowAnswers
     }
 
-    @Emit('previousQuestion')
-    emitPreviousQuestion () {
-        return true
+    if (props.allowKeyboardShortcuts) {
+        window.addEventListener('keydown', keydownListener)
     }
 
-    @Emit('checkAnswer')
-    emitCheckAnswer (answer: Study.Cloud.IQuizAnswer) {
-        return answer
+    const promptElements = promptEl?.value?.querySelectorAll('p')
+    if (promptElements?.length) {
+        promptElements.forEach(el => el.setAttribute('tabindex', '0'))
     }
 
-    @Emit('update:showExplanation')
-    emitUpdateShowExplanation () {
-        return this.showExplanation
+    if (props.autoFocusPrompt) {
+        moveFocusToPrompt()
+    } else if (props.autoFocusPrompt === false) {
+        const contextEl = questionContextRef?.value?.contextEl
+        contextEl?.focus()
     }
-}
+})
+
+onBeforeUnmount(() => {
+    window.removeEventListener('keydown', keydownListener)
+})
+
+// Provide question context once, instead of passing as props to every child
+provide(InjectionKeys.questionKey, question)
+provide(InjectionKeys.choicesKey, choices)
+provide(InjectionKeys.questionElKey, questionEl)
+provide(InjectionKeys.breakpointsWithElKey, breakpointsWithEl)
+provide(InjectionKeys.quizLengthKey, quizLength)
+provide(InjectionKeys.quizModeKey, quizMode)
+provide(InjectionKeys.questionNumberKey, questionNumber)
+provide(InjectionKeys.isDarkModeKey, isDarkMode)
+provide(InjectionKeys.isCorrectKey, isCorrect)
+provide(InjectionKeys.contextIconTypeKey, contextIconType)
+provide(InjectionKeys.showAnswersKey, showAnswers)
+provide(InjectionKeys.showMatrixAnswersKey, showMatrixAnswers)
+provide(InjectionKeys.imageUrlPrefixKey, imageUrlPrefix)
+provide(InjectionKeys.passageImageUrlKey, passageImageUrl)
+provide(InjectionKeys.passageImageAltKey, passageImageAlt)
+provide(InjectionKeys.passageImageLongAltKey, passageImageLongAlt)
+provide(InjectionKeys.showPassageImageLongAltKey, showPassageImageLongAlt)
+provide(InjectionKeys.passageAndImageTitleKey, passageAndImageTitle)
+provide(InjectionKeys.showExplanationKey, showExplanation)
+provide(InjectionKeys.isMCRKey, isMCR)
+provide(InjectionKeys.isUnansweredKey, isUnanswered)
+provide(InjectionKeys.answerKeysKey, answerKeys)
+provide(InjectionKeys.hoverChoiceKeyKey, hoverChoiceKey)
+provide(InjectionKeys.focusChoiceKeyKey, focusChoiceKey)
+provide(InjectionKeys.selectedChoicesKey, selectedChoices)
+provide(InjectionKeys.distractorKeysKey, distractorKeys)
+provide(InjectionKeys.choiceStrikesKey, choiceStrikes)
+provide(InjectionKeys.choiceScoresKey, choiceScores)
+provide(InjectionKeys.globalMetricsKey, globalMetrics)
+provide(InjectionKeys.reviewModeKey, reviewMode)
+provide(InjectionKeys.showExplanationImageLongAltKey, showExplanationImageLongAlt)
+provide(InjectionKeys.explanationImageUrlKey, explanationImageUrl)
+provide(InjectionKeys.explanationImageAltKey, explanationImageAlt)
+provide(InjectionKeys.explanationImageLongAltKey, explanationImageLongAlt)
+provide(InjectionKeys.referenceKey, reference)
+provide(InjectionKeys.hideReferencesKey, hideReferences)
+provide(InjectionKeys.keywordDefinitionsKey, keywordDefinitions)
+provide(InjectionKeys.showPaywallKey, showPaywall)
+provide(InjectionKeys.showPassageAndImageKey, showPassageAndImage)
+provide(InjectionKeys.isMatrixQuestionKey, isMatrixQuestion)
+provide(InjectionKeys.matrixChoiceScoresKey, matrixChoiceScores)
+provide(InjectionKeys.isMatrixQuestionCorrectKey, isMatrixQuestionCorrect)
+provide(InjectionKeys.matrixAnswerKeysKey, matrixAnswerKeys)
+provide(InjectionKeys.selectedMatrixChoicesKey, selectedMatrixChoices)
+provide(InjectionKeys.isTeachGroupReviewKey, isTeachGroupReview)
 </script>
 
 <style lang="scss">
-@import '../../styles/colors';
-@import '../../styles/breakpoints';
+@use '@/styles/breakpoints' as *;
+@use '@/styles/colors' as *;
 
 .uikit-question {
     position: relative;
@@ -2012,6 +1812,7 @@ export default class Question extends Vue {
 
     &__matrix-choices-container {
         display: block;
+
         @include breakpoint(black-bear) {
             display: none;
         }