@pocketprep/ui-kit 2.0.40 → 3.0.1

package/lib/components/Quiz/Question.vue

@@ -0,0 +1,3262 @@
+<template>
+    <div
+        ref="question"
+        v-breakpoint="breakpoints"
+        class="uikit-question"
+        :class="{
+            'uikit-question--show-side': (showExplanation && !showPaywall) || showPassageAndImage,
+        }"
+    >
+        <slot name="closeIcon">
+            <Icon
+                v-breakpoint:questionEl="breakpoints"
+                v-dark="isDarkMode"
+                class="uikit-question__close-icon"
+                role="button"
+                aria-label="Close question"
+                type="close"
+                @click="emitClose"
+            />
+        </slot>
+        <div
+            v-breakpoint:questionEl="breakpoints"
+            class="uikit-question__main"
+            :class="{
+                'uikit-question__main--show-side': (showExplanation && !showPaywall) || showPassageAndImage,
+                'uikit-question__main--unanswered': showAnswers && !isMCR && isUnanswered && !isCorrect,
+                'uikit-question__main--mcr': isMCR,
+            }"
+        >
+            <slot name="context">
+                <div
+                    ref="uikit-question__context"
+                    v-breakpoint:questionEl="breakpoints"
+                    class="uikit-question__context"
+                    tabindex="-1"
+                >
+                    <slot name="contextIcon">
+                        <Icon
+                            v-dark="isDarkMode"
+                            class="uikit-question__context-icon"
+                            :type="contextIconType"
+                        />
+                    </slot>
+                    <slot name="contextText">
+                        <h2
+                            v-if="quizMode === 'qotd'"
+                            v-dark="isDarkMode"
+                            class="uikit-question__context-text"
+                        >
+                            Question of the Day
+                        </h2>
+                        <h2
+                            v-else
+                            v-dark="isDarkMode"
+                            class="uikit-question__context-text"
+                            :aria-label="`Question ${
+                                questionNumber
+                            }${
+                                quizMode !== 'timed'
+                                    ? ` of ${quizLength}`
+                                    : ''
+                            }${
+                                showAnswers
+                                    ? isCorrect
+                                        ? ', Answered Correctly'
+                                        : ', Answered Incorrectly'
+                                    : ''
+                            }`"
+                            aria-live="assertive"
+                        >
+                            <div class="uikit-question__current-index" aria-hidden="true">
+                                Question {{ questionNumber }}
+                            </div>
+                            <div
+                                v-if="quizMode !== 'timed'"
+                                class="uikit-question__quiz-length"
+                                aria-hidden="true"
+                            >
+                                / {{ quizLength }}
+                            </div>
+                        </h2>
+                    </slot>
+                </div>
+            </slot>
+            <div
+                ref="prompt"
+                v-breakpoint:questionEl="breakpoints"
+                tabindex="-1"
+                class="uikit-question__prompt"
+                :class="{
+                    'uikit-question__prompt--passage-and-image': question.passage || passageImageUrl,
+                }"
+                v-html="question.question"
+            />
+            <PocketButton
+                v-if="question.passage || passageImageUrl"
+                v-breakpoint:questionEl="breakpoints"
+                class="uikit-question__skip-to-passage"
+                @click="moveFocusToPassage"
+            >
+                Skip to Passage
+            </PocketButton>
+            <div
+                v-if="question.passage || passageImageUrl"
+                v-breakpoint:questionEl="breakpoints"
+                v-dark="isDarkMode"
+                class="uikit-question__passage-and-image-dropdown"
+                :class="{ 'uikit-question__passage-and-image-dropdown--review-mode': reviewMode }"
+            >
+                <div
+                    v-dark="isDarkMode"
+                    class="uikit-question__passage-and-image-dropdown-btn"
+                    tabindex="0"
+                    role="button"
+                    :aria-expanded="showPassageImageDropdown ? 'true' : 'false'"
+                    @click.stop="showPassageImageDropdown = !showPassageImageDropdown"
+                    @keydown.enter.stop="showPassageImageDropdown = !showPassageImageDropdown"
+                    @mousedown.prevent
+                >
+                    <Icon
+                        v-if="question.passage"
+                        class="uikit-question__passage-dropdown-icon"
+                        type="passage"
+                    />
+                    <Icon
+                        v-else
+                        class="uikit-question__image-dropdown-icon"
+                        type="image"
+                    />
+                    <span v-dark="isDarkMode" class="uikit-question__passage-and-image-dropdown-text">
+                        {{ showPassageImageDropdown ? 'Hide' : 'Show' }}
+                        {{ passageAndImageTitle }}
+                    </span>
+                    <Icon
+                        v-dark="isDarkMode"
+                        class="uikit-question__passage-and-image-dropdown-arrow"
+                        :class="{
+                            'uikit-question__passage-and-image-dropdown-arrow--up': showPassageImageDropdown,
+                        }"
+                        type="accordionArrow"
+                    />
+                </div>
+                <div
+                    v-if="showPassageImageDropdown"
+                    v-breakpoint:questionEl="breakpoints"
+                    class="uikit-question__passage-and-image-dropdown-container"
+                >
+                    <div
+                        v-if="question.passage"
+                        v-breakpoint:questionEl="breakpoints"
+                        class="uikit-question__passage-dropdown-passage"
+                        :class="{
+                            'uikit-question__passage-dropdown-passage--with-image': passageImageUrl,
+                        }"
+                        v-html="question.passage"
+                    />
+                    <img
+                        v-if="passageImageUrl"
+                        v-dark="isDarkMode"
+                        class="uikit-question__image-dropdown-image"
+                        :class="{
+                            'uikit-question__image-dropdown-image--with-passage': question.passage,
+                        }"
+                        :src="passageImageUrl"
+                        :alt="`${passageImageAlt}. Extended image description below.`"
+                    >
+                    <PocketButton
+                        v-if="passageImageLongAlt"
+                        v-breakpoint:questionEl="breakpoints"
+                        type="tertiary-small"
+                        class="uikit-question__toggle-img-dropdown-img-description"
+                        :class="{
+                            'uikit-question__toggle-img-dropdown-img-description--open': showPassageImageLongAlt,
+                        }"
+                        :is-dark-mode="isDarkMode"
+                        :aria-expanded="showPassageImageLongAlt ? 'true' : 'false'"
+                        @click.stop="togglePassageImageLongAlt"
+                        @mousedown.prevent
+                    >
+                        <span class="uikit-question__toggle-img-dropdown-img-description-text">Image Description</span>
+                        <Icon
+                            class="uikit-question__toggle-img-dropdown-img-description-icon"
+                            :class="{
+                                'uikit-question__toggle-img-dropdown-img-description-icon--up': showPassageImageLongAlt,
+                            }"
+                            type="accordionArrow"
+                        />
+                    </PocketButton>
+                    <div
+                        v-if="showPassageImageLongAlt"
+                        ref="uikit-question__img-dropdown-img-description"
+                        v-breakpoint:questionEl="breakpoints"
+                        v-dark="isDarkMode"
+                        class="uikit-question__img-dropdown-img-description"
+                        tabindex="-1"
+                        v-html="passageImageLongAlt"
+                    />
+                </div>
+            </div>
+            <div
+                v-if="showPaywall"
+                class="uikit-question__paywall-container"
+            >
+                <div
+                    v-dark="isDarkMode"
+                    v-breakpoint:questionEl="breakpoints" 
+                    class="uikit-question__paywall"
+                    :class="{ 'uikit-question__paywall--review': reviewMode }"
+                >
+                    <img
+                        v-breakpoint:questionEl="breakpoints"
+                        :src="isDarkMode ? paywallImages['dark'] : paywallImages['light']"
+                        alt=""
+                        class="uikit-question__paywall-image"
+                    >
+                    <div
+                        v-dark="isDarkMode"
+                        v-breakpoint:questionEl="breakpoints"
+                        class="uikit-question__paywall-text"
+                    >
+                        You need a Premium Subscription to view this question's answer and explanation.
+                    </div>
+                    <PocketButton
+                        :is-dark-mode="isDarkMode"
+                        class="uikit-question__paywall-button"
+                        @click="emitUpgrade"
+                    >
+                        Upgrade to Premium
+                    </PocketButton>
+                </div>
+            </div>
+            <div
+                v-if="showAnswers && isTeachReview && isUnanswered"
+                v-dark="isDarkMode"
+                class="uikit-question__unanswered-teach-review-label"
+            >
+                <span>
+                    Unanswered
+                </span>
+            </div>
+            <div
+                v-if="!showPaywall"
+                v-dark="isDarkMode"
+                class="uikit-question__choices"
+                :class="{
+                    'uikit-question__choices--correct': showAnswers && isMCR && isCorrect,
+                    'uikit-question__choices--incorrect': 
+                        showAnswers && (isMCR || isUnanswered) && !isCorrect && !isTeachReview,
+                    'uikit-question__choices--unanswered': showAnswers && !isMCR && isUnanswered && !isCorrect,
+                    'uikit-question__choices--show-stats': globalMetrics,
+                    'uikit-question__choices--no-actions': !(isMCR || isUnanswered)
+                        && !globalMetrics
+                        && (
+                            reviewMode
+                            || (
+                                !showAnswers
+                                && !showCheckAnswer
+                                && !hideAnswer
+                            )
+                        )
+                }"
+                :role="isMCR
+                    ? 'group'
+                    : 'radiogroup'
+                "
+            >
+                <div
+                    v-if="showAnswers && !isMCR && isUnanswered && !isCorrect && !isTeachReview"
+                    v-dark="isDarkMode"
+                    class="uikit-question__unanswered-label"
+                >
+                    <span>Unanswered</span>
+                    <Icon
+                        v-dark="isDarkMode"
+                        class="uikit-question__unanswered-label-icon"
+                        type="incorrect"
+                    />
+                </div>
+                <div
+                    v-for="(choice, index) in choices"
+                    :key="choice.key"
+                    ref="choices"
+                    v-dark="isDarkMode"
+                    class="uikit-question__choice-container"
+                    :class="{
+                        'uikit-question__choice-container--hover': !showAnswers && hoverChoiceKey === choice.key,
+                        'uikit-question__choice-container--focus': !showAnswers && focusChoiceKey === choice.key,
+                        'uikit-question__choice-container--selected': !showAnswers
+                            && selectedChoices.includes(choice.key),
+                        'uikit-question__choice-container--correct': !isMCR && showAnswers && !isUnanswered
+                            && answerKeys.includes(choice.key),
+                        'uikit-question__choice-container--incorrect': !isMCR && showAnswers
+                            && selectedChoices.includes(choice.key)
+                            && distractorKeys.includes(choice.key),
+                        'uikit-question__choice-container--big': !isMCR && !globalMetrics && (
+                            showAnswers && !isUnanswered
+                                ? answerKeys.includes(choice.key)
+                                : selectedChoices.includes(choice.key)
+                        ),
+                    }"
+                    @mousedown.prevent
+                    @mouseover="hoverChoiceKey = choice.key"
+                    @mouseleave="hoverChoiceKey = null"
+                    @focusin="focusChoiceKey = choice.key"
+                    @focusout="choiceFocusOut"
+                    @click.stop="selectChoice(choice.key)"
+                    @keydown.enter.stop="selectChoice(choice.key)"
+                    @touchstart="handleTouchStart"
+                    @touchmove="handleTouchMove"
+                    @touchend="handleTouchEnd(choice.key, $event)"
+                >
+                    <div
+                        v-if="!reviewMode"
+                        v-breakpoint:questionEl="breakpoints"
+                        v-dark="isDarkMode"
+                        class="uikit-question__choice-letter"
+                        :class="!isMCR && {
+                            'uikit-question__choice-letter--selected': selectedChoices.includes(choice.key),
+                            'uikit-question__choice-letter--correct': showAnswers
+                                && answerKeys.includes(choice.key),
+                            'uikit-question__choice-letter--incorrect': showAnswers
+                                && selectedChoices.includes(choice.key)
+                                && distractorKeys.includes(choice.key),
+                            'uikit-question__choice-letter--big': !globalMetrics && (showAnswers
+                                ? answerKeys.includes(choice.key)
+                                : selectedChoices.includes(choice.key)),
+                        }"
+                    >
+                        {{ String.fromCharCode(index + 65) }}
+                    </div>
+                    <div
+                        :ref="`choice-${choice.key}`"
+                        v-dark="isDarkMode"
+                        v-breakpoint:questionEl="breakpoints"
+                        class="uikit-question__choice"
+                        :class="{
+                            'uikit-question__choice--strike': showAnswers
+                                ? isMCR
+                                    ? distractorKeys.includes(choice.key)
+                                    : choiceStrikes.includes(choice.key) && !answerKeys.includes(choice.key)
+                                : choiceStrikes.includes(choice.key),
+                            'uikit-question__choice--big': !isMCR && !globalMetrics && (
+                                showAnswers && !isUnanswered
+                                    ? answerKeys.includes(choice.key)
+                                    : selectedChoices.includes(choice.key)
+                            ),
+                            'uikit-question__choice--mcr': isMCR,
+                            'uikit-question__choice--selected': !showAnswers && selectedChoices.includes(choice.key),
+                            'uikit-question__choice--distractor': showAnswers
+                                && distractorKeys.includes(choice.key),
+                            'uikit-question__choice--show-stats': globalMetrics,
+                            'uikit-question__choice--review-mode': reviewMode,
+                        }"
+                    >
+                        <div
+                            v-if="isMCR"
+                            v-dark="isDarkMode"
+                            class="uikit-question__mcr-checkbox"
+                            :class="{
+                                'uikit-question__mcr-checkbox--selected': selectedChoices.includes(choice.key),
+                                'uikit-question__mcr-checkbox--answer': showAnswers
+                                    && answerKeys.includes(choice.key),
+                                'uikit-question__mcr-checkbox--distractor': showAnswers
+                                    && distractorKeys.includes(choice.key),
+                                'uikit-question__mcr-checkbox--strike': !showAnswers
+                                    && choiceStrikes.includes(choice.key),
+                            }"
+                        >
+                            <Icon
+                                v-if="selectedChoices.includes(choice.key) || (
+                                    showAnswers && answerKeys.includes(choice.key)
+                                )"
+                                class="uikit-question__mcr-check"
+                                type="check"
+                            />
+                        </div>
+                        <div
+                            class="uikit-question__choice-text"
+                            :tabindex="showAnswers ? -1 : 0"
+                            :role="isMCR
+                                ? 'checkbox'
+                                : 'radio'
+                            "
+                            :aria-checked="selectedChoices.includes(choice.key) ? 'true' : 'false'"
+                            :aria-label="`${
+                                showAnswers
+                                    ? answerKeys.includes(choice.key)
+                                        ? 'Correct Answer, '
+                                        : 'Incorrect Answer, '
+                                    : ''
+                            }${ stripText(choice.text) }`"
+                            v-html="choice.text"
+                        />
+                        <PocketButton
+                            v-if="!isMCR && showAnswers && answerKeys.includes(choice.key)"
+                            v-breakpoint:questionEl="breakpoints"
+                            type="tertiary-small"
+                            class="uikit-question__toggle-explanation"
+                            :class="{ 'uikit-question__toggle-explanation--review-mode': reviewMode }"
+                            :is-dark-mode="isDarkMode"
+                            :aria-expanded="showExplanation ? 'true' : 'false'"
+                            @click.stop="toggleExplanation"
+                            @mousedown.prevent
+                        >
+                            <span
+                                ref="uikit-question__toggle-explanation-text"
+                                class="uikit-question__toggle-explanation-text"
+                                tabindex="-1"
+                            >{{ showExplanation ? 'Hide' : 'Show' }} Explanation</span>
+                            <Icon
+                                v-breakpoint:questionEl="breakpoints"
+                                class="uikit-question__toggle-explanation-icon"
+                                :class="{
+                                    'uikit-question__toggle-explanation-icon--up': showExplanation,
+                                }"
+                                type="accordionArrow"
+                            />
+                        </PocketButton>
+                        <div
+                            v-if="!isMCR && showAnswers && answerKeys.includes(choice.key) && showExplanation"
+                            v-breakpoint:questionEl="breakpoints"
+                            class="uikit-question__dropdown-explanation"
+                            :class="{
+                                'uikit-question__dropdown-explanation--show-stats': globalMetrics
+                            }"
+                        >
+                            <div
+                                v-dark="isDarkMode"
+                                class="uikit-question__dropdown-explanation-text"
+                                v-html="question.explanation"
+                            />
+                            <img
+                                v-if="explanationImageUrl"
+                                v-dark="isDarkMode"
+                                class="uikit-question__dropdown-explanation-image"
+                                :src="explanationImageUrl"
+                                :alt="`${explanationImageAlt}. Extended image description below.`"
+                            >
+                            <PocketButton
+                                v-if="explanationImageLongAlt"
+                                v-breakpoint:questionEl="breakpoints"
+                                type="tertiary-small"
+                                class="uikit-question__toggle-dropdown-explanation-img-description"
+                                :class="{
+                                    'uikit-question__toggle-dropdown-explanation-img-description--open':
+                                        showExplanationImageLongAlt,
+                                    'uikit-question__toggle-dropdown-explanation-img-description--no-reference':
+                                        !question.reference || hideReferences,
+                                }"
+                                :is-dark-mode="isDarkMode"
+                                :aria-expanded="showExplanationImageLongAlt ? 'true' : 'false'"
+                                @click.stop="toggleExplanationImageLongAlt"
+                                @mousedown.prevent
+                            >
+                                <span class="uikit-question__toggle-dropdown-explanation-img-description-text">
+                                    Image Description
+                                </span>
+                                <Icon
+                                    class="uikit-question__toggle-dropdown-explanation-img-description-icon"
+                                    :class="{
+                                        'uikit-question__toggle-dropdown-explanation-img-description-icon--up':
+                                            showExplanationImageLongAlt,
+                                    }"
+                                    type="accordionArrow"
+                                />
+                            </PocketButton>
+                            <div
+                                v-if="showExplanationImageLongAlt"
+                                ref="uikit-question__dropdown-explanation-img-description"
+                                v-dark="isDarkMode"
+                                v-breakpoint:questionEl="breakpoints"
+                                class="uikit-question__dropdown-explanation-img-description"
+                                tabindex="-1"
+                                v-html="explanationImageLongAlt"
+                            />
+                            <div
+                                v-if="question.reference && !hideReferences"
+                                v-dark="isDarkMode"
+                                class="uikit-question__dropdown-reference"
+                            >
+                                <span class="uikit-question__dropdown-reference-label">Reference: </span>
+                                <div v-html="question.reference" />
+                            </div>
+                        </div>
+                    </div>
+                    <template v-if="!globalMetrics">
+                        <div
+                            v-if="!showAnswers"
+                            v-breakpoint:questionEl="breakpoints"
+                            v-dark="isDarkMode"
+                            :tabindex="showAnswers ? -1 : 0"
+                            class="uikit-question__strikethrough"
+                            aria-label="Strikethrough"
+                            role="switch"
+                            :aria-checked="choiceStrikes.includes(choice.key) ? 'true' : 'false'"
+                            :class="{
+                                'uikit-question__strikethrough--visible': !showAnswers
+                                    && [ hoverChoiceKey, focusChoiceKey ].includes(choice.key),
+                                'uikit-question__strikethrough--active': choiceStrikes.includes(choice.key),
+                            }"
+                            @mousedown.prevent
+                            @click.stop="clickChoiceStrike(choice.key)"
+                            @keydown.enter.stop="clickChoiceStrike(choice.key)"
+                        >
+                            <Icon type="strike" />
+                        </div>
+                        <Icon
+                            v-if="!isMCR
+                                && showAnswers
+                                && answerKeys.includes(choice.key)
+                                && (isCorrect || isUnanswered)
+                            "
+                            v-dark="isDarkMode"
+                            type="correct"
+                            class="uikit-question__correct-icon"
+                            :class="{
+                                'uikit-question__correct-icon--review-mode': reviewMode,
+                            }"
+                        />
+                        <Icon
+                            v-if="showAnswers && (
+                                (
+                                    selectedChoices.includes(choice.key)
+                                    && distractorKeys.includes(choice.key)
+                                ) || (
+                                    isMCR
+                                    && !selectedChoices.includes(choice.key)
+                                    && answerKeys.includes(choice.key)
+                                )
+                            )"
+                            v-dark="isDarkMode"
+                            type="incorrect"
+                            class="uikit-question__incorrect-icon"
+                            :class="{
+                                'uikit-question__incorrect-icon--mcr': isMCR,
+                            }"
+                        />
+                    </template>
+                    <template v-else>
+                        <div
+                            v-dark="isDarkMode"
+                            class="uikit-question__choice-stats-pct"
+                        >
+                            {{ choiceScores[choice.key] }} %
+                        </div>
+                        <div v-dark="isDarkMode" class="uikit-question__choice-stats-bar">
+                            <div
+                                v-dark="isDarkMode"
+                                class="uikit-question__choice-stats-bar-fill"
+                                :class="{
+                                    'uikit-question__choice-stats-bar-fill--correct': showAnswers
+                                        && answerKeys.includes(choice.key),
+                                    'uikit-question__choice-stats-bar-fill--incorrect': showAnswers
+                                        && distractorKeys.includes(choice.key)
+                                        && selectedChoices.includes(choice.key),
+                                }"
+                                :style="{
+                                    'width': `${(choiceScores[choice.key]) || 0}%`
+                                }"
+                            />
+                        </div>
+                    </template>
+                </div>
+            </div>
+            <div
+                v-if="isMCR && showAnswers && !showPaywall"
+                v-dark="isDarkMode"
+                v-breakpoint:questionEl="breakpoints"
+                class="uikit-question__summary"
+            >
+                <div class="uikit-question__summary-title">
+                    {{ isCorrect ? 'Correct': isUnanswered ? 'Unanswered' : 'Incorrect' }}
+                </div>
+                <PocketButton
+                    v-breakpoint:questionEl="breakpoints"
+                    type="tertiary-small"
+                    class="uikit-question__summary-toggle-explanation"
+                    :class="{ 'uikit-question__summary-toggle-explanation': reviewMode }"
+                    :is-dark-mode="isDarkMode"
+                    :aria-expanded="showExplanation ? 'true' : 'false'"
+                    @click="toggleExplanation"
+                    @mousedown.prevent
+                >
+                    <span
+                        ref="uikit-question__summary-toggle-explanation-text"
+                        class="uikit-question__summary-toggle-explanation-text"
+                        tabindex="-1"
+                    >{{ showExplanation ? 'Hide' : 'Show' }} Explanation</span>
+                    <Icon
+                        v-breakpoint:questionEl="breakpoints"
+                        type="accordionArrow"
+                        class="uikit-question__summary-toggle-explanation-icon"
+                        :class="{
+                            'uikit-question__summary-toggle-explanation-icon--up': showExplanation,
+                        }"
+                    />
+                </PocketButton>
+                <div
+                    v-if="showExplanation"
+                    v-breakpoint:questionEl="breakpoints"
+                    class="uikit-question__summary-dropdown-explanation"
+                >
+                    <div
+                        v-dark="isDarkMode"
+                        class="uikit-question__summary-dropdown-explanation-text"
+                        v-html="question.explanation"
+                    />
+                    <img
+                        v-if="explanationImageUrl"
+                        v-dark="isDarkMode"
+                        class="uikit-question__summary-dropdown-explanation-image"
+                        :src="explanationImageUrl"
+                        :alt="`${explanationImageAlt}. Extended image description below.`"
+                    >
+                    <PocketButton
+                        v-if="explanationImageLongAlt"
+                        v-breakpoint:questionEl="breakpoints"
+                        type="tertiary-small"
+                        class="uikit-question__toggle-summary-dropdown-explanation-img-description"
+                        :class="{
+                            'uikit-question__toggle-summary-dropdown-explanation-img-description--open':
+                                showExplanationImageLongAlt,
+                            'uikit-question__toggle-summary-dropdown-explanation-img-description--no-reference':
+                                !question.reference || hideReferences,
+                        }"
+                        :is-dark-mode="isDarkMode"
+                        :aria-expanded="showExplanationImageLongAlt ? 'true' : 'false'"
+                        @click.stop="toggleExplanationImageLongAlt"
+                        @mousedown.prevent
+                    >
+                        <span class="uikit-question__toggle-summary-dropdown-explanation-img-description-text">
+                            Image Description
+                        </span>
+                        <Icon
+                            class="uikit-question__toggle-summary-dropdown-explanation-img-description-icon"
+                            :class="{
+                                'uikit-question__toggle-summary-dropdown-explanation-img-description-icon--up':
+                                    showExplanationImageLongAlt,
+                            }"
+                            type="accordionArrow"
+                        />
+                    </PocketButton>
+                    <div
+                        v-if="showExplanationImageLongAlt"
+                        ref="uikit-question__summary-dropdown-explanation-img-description"
+                        v-dark="isDarkMode"
+                        v-breakpoint:questionEl="breakpoints"
+                        class="uikit-question__summary-dropdown-explanation-img-description"
+                        tabindex="-1"
+                        v-html="explanationImageLongAlt"
+                    />
+                    <div
+                        v-if="question.reference && !hideReferences"
+                        v-dark="isDarkMode"
+                        class="uikit-question__summary-dropdown-reference"
+                    >
+                        <span class="uikit-question__summary-dropdown-reference-label">Reference: </span>
+                        <div v-html="question.reference" />
+                    </div>
+                </div>
+                <Icon
+                    v-if="isCorrect"
+                    v-dark="isDarkMode"
+                    type="correct"
+                    class="uikit-question__summary-correct-icon"
+                />
+                <Icon
+                    v-else
+                    v-dark="isDarkMode"
+                    type="incorrect"
+                    class="uikit-question__summary-incorrect-icon"
+                />
+            </div>
+            <div
+                v-if="globalMetrics"
+                class="uikit-question__stats-summary"
+            >
+                <div v-dark="isDarkMode" class="uikit-question__stats-summary-total">
+                    <div class="uikit-question__stats-summary-value">
+                        {{ choiceScores.totalAnswered }}
+                    </div>
+                    <div v-dark="isDarkMode" class="uikit-question__stats-summary-label">
+                        Studiers Answered
+                    </div>
+                </div>
+                <div v-dark="isDarkMode" class="uikit-question__stats-summary-correct">
+                    <div class="uikit-question__stats-summary-value">
+                        {{ Math.round((choiceScores.answeredCorrectly / choiceScores.totalAnswered) * 100) }}%
+                    </div>
+                    <div v-dark="isDarkMode" class="uikit-question__stats-summary-label">
+                        Answered Correctly
+                    </div>
+                </div>
+            </div>
+            <div
+                v-if="!reviewMode"
+                v-breakpoint:questionEl="breakpoints"
+                class="uikit-question__action-container"
+                :class="{
+                    'uikit-question__action-container--mcr-summary': isMCR && showAnswers,
+                }"
+            >
+                <slot name="action">
+                    <PocketButton
+                        v-if="!showAnswers && !hideAnswer && (showCheckAnswer || isMCR)"
+                        :disabled="!selectedChoices.length"
+                        :is-dark-mode="isDarkMode"
+                        @click="clickCheckAnswer"
+                    >
+                        Check Answer
+                    </PocketButton>
+                    <PocketButton
+                        v-else-if="(showAnswers || hideAnswer) && (questionNumber >= quizLength)"
+                        :is-dark-mode="isDarkMode"
+                        @click="emitSubmitQuiz"
+                    >
+                        Submit Quiz
+                    </PocketButton>
+                    <PocketButton
+                        v-else-if="(showAnswers || hideAnswer) && showNextQuestion"
+                        :is-dark-mode="isDarkMode"
+                        @click="emitNextQuestion"
+                    >
+                        Next Question
+                    </PocketButton>
+                    <PocketButton
+                        v-else-if="showCloseButton"
+                        :is-dark-mode="isDarkMode"
+                        @click="emitClose"
+                    >
+                        Close
+                    </PocketButton>
+                </slot>
+            </div>
+            <slot name="afterQuestion" />
+        </div>
+        <div
+            v-if="showPassageAndImage || (showExplanation && !showPaywall)"
+            v-breakpoint:questionEl="breakpoints"
+            class="uikit-question__right-side"
+            :class="{
+                'uikit-question__right-side--explanation': showExplanation && !showPaywall,
+            }"
+        >
+            <div
+                v-if="showPassageAndImage"
+                v-breakpoint:questionEl="breakpoints"
+                class="uikit-question__passage-and-image"
+            >
+                <div
+                    ref="uikit-question__passage-and-image-title"
+                    v-dark="isDarkMode"
+                    class="uikit-question__passage-and-image-title"
+                    tabindex="-1"
+                >
+                    {{ passageAndImageTitle }}
+                </div>
+                <div
+                    v-if="question.passage"
+                    class="uikit-question__passage"
+                    v-html="question.passage"
+                />
+                <img
+                    v-if="passageImageUrl"
+                    v-dark="isDarkMode"
+                    v-breakpoint:questionEl="breakpoints"
+                    class="uikit-question__image"
+                    :src="passageImageUrl"
+                    :alt="`${passageImageAlt}. Extended image description below.`"
+                >
+                <PocketButton
+                    v-if="passageImageLongAlt"
+                    v-breakpoint:questionEl="breakpoints"
+                    type="tertiary-small"
+                    class="uikit-question__toggle-passage-image-description"
+                    :is-dark-mode="isDarkMode"
+                    :aria-expanded="showPassageImageLongAlt ? 'true' : 'false'"
+                    @click.stop="togglePassageImageLongAlt"
+                    @mousedown.prevent
+                >
+                    <span class="uikit-question__toggle-passage-image-description-text">Image Description</span>
+                    <Icon
+                        class="uikit-question__toggle-passage-image-description-icon"
+                        :class="{
+                            'uikit-question__toggle-passage-image-description-icon--up': showPassageImageLongAlt,
+                        }"
+                        type="accordionArrow"
+                    />
+                </PocketButton>
+                <div
+                    v-if="showPassageImageLongAlt"
+                    ref="uikit-question__passage-image-description"
+                    v-dark="isDarkMode"
+                    class="uikit-question__passage-image-description"
+                    tabindex="-1"
+                    v-html="passageImageLongAlt"
+                />
+                <PocketButton
+                    class="uikit-question__return-to-prompt"
+                    @click="moveFocusToPrompt"
+                >
+                    Return to Question
+                </PocketButton>
+            </div>
+            <div
+                v-if="showExplanation && !showPaywall"
+                v-breakpoint:questionEl="breakpoints"
+                v-dark="isDarkMode"
+                class="uikit-question__explanation"
+            >
+                <div
+                    ref="explanation"
+                    v-dark="isDarkMode"
+                    class="uikit-question__explanation-title"
+                    tabindex="-1"
+                >
+                    Explanation Details
+                </div>
+                <div
+                    v-dark="isDarkMode"
+                    v-breakpoint:questionEl="breakpoints"
+                    class="uikit-question__explanation-text"
+                    v-html="question.explanation"
+                />
+                <img
+                    v-if="explanationImageUrl"
+                    v-dark="isDarkMode"
+                    v-breakpoint:questionEl="breakpoints"
+                    class="uikit-question__explanation-image"
+                    :class="{
+                        'uikit-question__explanation-image--long-alt': explanationImageLongAlt,
+                    }"
+                    :src="explanationImageUrl"
+                    :alt="`${explanationImageAlt}. Extended image description below.`"
+                >
+                <PocketButton
+                    v-if="explanationImageLongAlt"
+                    v-breakpoint:questionEl="breakpoints"
+                    type="tertiary-small"
+                    class="uikit-question__toggle-explanation-img-description"
+                    :class="{
+                        'uikit-question__toggle-explanation-img-description--open': showExplanationImageLongAlt,
+                    }"
+                    :is-dark-mode="isDarkMode"
+                    :aria-expanded="showExplanationImageLongAlt ? 'true' : 'false'"
+                    @click.stop="toggleExplanationImageLongAlt"
+                    @mousedown.prevent
+                >
+                    <span class="uikit-question__toggle-explanation-img-description-text">Image Description</span>
+                    <Icon
+                        class="uikit-question__toggle-explanation-img-description-icon"
+                        :class="{
+                            'uikit-question__toggle-explanation-img-description-icon--up': showExplanationImageLongAlt,
+                        }"
+                        type="accordionArrow"
+                    />
+                </PocketButton>
+                <div
+                    v-if="showExplanationImageLongAlt"
+                    ref="uikit-question__explanation-img-description"
+                    v-dark="isDarkMode"
+                    class="uikit-question__explanation-img-description"
+                    tabindex="-1"
+                    v-html="explanationImageLongAlt"
+                />
+                <div
+                    v-if="question.reference && !hideReferences"
+                    v-dark="isDarkMode"
+                    class="uikit-question__reference"
+                >
+                    <span class="uikit-question__reference-label">Reference: </span>
+                    <div v-html="question.reference" />
+                </div>
+                <div
+                    v-if="!reviewMode"
+                    v-dark="isDarkMode"
+                    class="uikit-question__explanation-close"
+                    tabindex="0"
+                    role="button"
+                    aria-label="Close explanation"
+                    @keydown.enter.stop="toggleExplanation"
+                    @click.stop="toggleExplanation"
+                    @mousedown.prevent
+                >
+                    <Icon type="close" />
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script lang="ts">
+import { Component, Vue, Prop, Watch, Emit } from 'vue-facing-decorator'
+import PocketButton from '../Buttons/Button.vue'
+import Icon from '../Icons/Icon.vue'
+import type { Study } from '@pocketprep/types'
+import { breakpoint, dark } from '../../directives'
+import { studyModes } from '../../utils'
+import PaywallImageLight from '../../assets/question/paywall-light.png'
+import PaywallImageDark from '../../assets/question/paywall-dark.png'
+
+type TChoiceKey = `${'a' | 'd'}${1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9}`
+type TChoice = { text?: string; key: TChoiceKey }
+type TChoiceScores = Partial<Record<TChoiceKey, number>> & {
+    totalAnswered: number
+    answeredCorrectly: number
+}
+type TQuizMode = 'qotd' | 'quick10' | 'timed' | 'weakest' | 'missed' | 'custom'
+type Ref = HTMLElement | null
+
+@Component({
+    components: {
+        PocketButton,
+        Icon,
+    },
+    directives: {
+        breakpoint,
+        dark,
+    },
+})
+export default class Question extends Vue {
+    @Prop() question!: Study.Class.ExamDataJSON
+    @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 }) globalMetrics!: Study.Class.GlobalQuestionMetricJSON | 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
+
+    hoverChoiceKey: TChoiceKey | null = null
+    focusChoiceKey: TChoiceKey | null = null
+    choiceStrikes: TChoiceKey[] = []
+    selectedChoices: TChoiceKey[] = []
+    showAnswers = false
+    showExplanation = false
+    showPassageImageDropdown = false
+    showPassageImageLongAlt = false
+    showExplanationImageDropdown = false
+    showExplanationImageLongAlt = false
+    swipeStart: {
+        x: number | null
+        y: number | null
+    } = { x: null, y: null }
+
+    get paywallImages () {
+        return {
+            light: PaywallImageLight,
+            dark: PaywallImageDark,
+        }
+    }
+
+    get breakpoints () {
+        // Passing the container element (typically QuizContainer) allows us to bind to that element's width
+        if (this.containerEl) {
+            return {
+                'mobile': 767,
+                'tablet-portrait': 1023,
+                'tablet-landscape': 1439,
+            }
+        } else {
+            // These were calculated to account for the expected widths of our Quiz Container sides
+            return {
+                'mobile': 729,              // 767 - (19 + 19)
+                'tablet-portrait': 978,     // 1023 - (22 + 23)
+                'tablet-landscape': 1309,   // 1439 - (65 + 65)
+            }
+        }
+    }
+
+    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 passageImageUrl () {
+        const imageUrl = this.question.images?.passage?.url
+                || this.question.images?.Question   // Legacy support - TODO: remove when `Question` is deprecated
+        
+        return imageUrl ? `${this.imageUrlPrefix}${imageUrl}` : null
+    }
+
+    get passageImageAlt () {
+        return this.question.images?.passage?.altText
+    }
+
+    get passageImageLongAlt () {
+        return this.question.images?.passage?.longAltText
+    }
+
+    get explanationImageUrl () {
+        const imageUrl = this.question.images?.explanation?.url
+                || this.question.images?.Explanation   // Legacy support - TODO: remove when `Explanation` is deprecated
+        
+        return imageUrl ? `${this.imageUrlPrefix}${imageUrl}` : null
+    }
+
+    get explanationImageAlt () {
+        return this.question.images?.explanation?.altText
+    }
+
+    get explanationImageLongAlt () {
+        return this.question.images?.explanation?.longAltText
+    }
+
+    get showPassageAndImage () {
+        return !this.showExplanation && !!(this.question.passage || this.passageImageUrl)
+    }
+
+    get passageAndImageTitle () {
+        if (this.question.passage && this.passageImageUrl) {
+            return 'Passage + Image'
+        } else if (!this.question.passage && this.passageImageUrl) {
+            return 'Image'
+        } else {
+            return 'Passage'
+        }
+    }
+
+    get answers (): TChoice[] {
+        const answers = [
+            { text: this.question.answer, key: 'a1' },
+            { text: this.question.answer2, key: 'a2' },
+            { text: this.question.answer3, key: 'a3' },
+            { text: this.question.answer4, key: 'a4' },
+            { text: this.question.answer5, key: 'a5' },
+            { text: this.question.answer6, key: 'a6' },
+            { text: this.question.answer7, key: 'a7' },
+            { text: this.question.answer8, key: 'a8' },
+            { text: this.question.answer9, key: 'a9' },
+        ] as const
+        
+        return answers.filter(choice => !!choice.text)
+    }
+
+    get answerKeys (): TChoiceKey[] {
+        return this.answers.map(choice => choice.key)
+    }
+
+    get distractors (): TChoice[] {
+        const distractors = [
+            { text: this.question.distractor1, key: 'd1' },
+            { text: this.question.distractor2, key: 'd2' },
+            { text: this.question.distractor3, key: 'd3' },
+            { text: this.question.distractor4, key: 'd4' },
+            { text: this.question.distractor5, key: 'd5' },
+            { text: this.question.distractor6, key: 'd6' },
+            { text: this.question.distractor7, key: 'd7' },
+            { text: this.question.distractor8, key: 'd8' },
+            { text: this.question.distractor9, key: 'd9' },
+        ] as const
+
+        return distractors.filter(choice => !!choice.text)
+    }
+
+    get distractorKeys (): TChoiceKey[] {
+        return this.distractors.map(choice => choice.key)
+    }
+
+    get choices () {
+        return this.shuffleChoices([
+            ...this.answers,
+            ...this.distractors,
+        ])
+    }
+
+    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')
+    }
+
+    get choiceScores (): TChoiceScores {
+        const globalMetrics = this.globalMetrics
+
+        const scores: TChoiceScores = {
+            totalAnswered: this.selectedChoices.length && this.showAnswers && !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)
+
+        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)
+            scores[key] = answerPct
+        })
+
+        return scores
+    }
+
+    get isUnanswered () {
+        return this.selectedChoices.length === 0
+    }
+
+    mounted () {
+        if (this.reviewMode) {
+            this.startReviewMode()
+        }
+
+        if (this.previousChoices) {
+            this.updateSelectedChoices(this.previousChoices)
+        }
+
+        if (this.initialShowAnswers) {
+            this.showAnswers = this.initialShowAnswers
+        }
+
+        if (this.allowKeyboardShortcuts) {
+            window.addEventListener('keydown', this.keydownListener)
+        }
+
+        if (this.autoFocusPrompt) {
+            this.moveFocusToPrompt()
+        } else if (this.autoFocusPrompt === false) {
+            setTimeout(() => {
+                const contextEl = this.$refs['uikit-question__context'] as HTMLElement | undefined
+                contextEl?.focus()
+            }, 0)
+        }
+    }
+
+    beforeUnmount () {
+        window.removeEventListener('keydown', this.keydownListener)
+    }
+
+    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()
+                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 passageTitleEl = this.$refs['uikit-question__passage-and-image-title'] as HTMLElement | undefined
+            passageTitleEl?.focus()
+        }, 0)
+    }
+
+    moveFocusToPrompt () {
+        setTimeout(() => {
+            const promptEl = this.$refs['prompt'] as HTMLElement | undefined
+            promptEl?.focus()
+        }, 0)
+    }
+
+    stripText (string?: string) {
+        return string?.replace(/<[^\s>]+[^>]*>/gi, ' ').trim()
+    }
+
+    startReviewMode () {
+        this.showAnswers = true
+        this.showExplanation = this.defaultShowExplanation === null ? true : this.defaultShowExplanation
+        this.selectedChoices = this.answerKeys
+    }
+
+    stopReviewMode () {
+        this.showAnswers = false
+        this.showExplanation = false
+        this.selectedChoices = []
+    }
+
+    updateSelectedChoices (choices: TChoiceKey[]) {
+        this.selectedChoices = [ ...choices ]
+    }
+
+    // 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 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 (aHash || 0) - (bHash || 0)
+        })
+
+        return this.answerSeed
+            ? this.answerSeed.reduce<TChoice[]>((acc, i) => {
+                const sortedChoice = sortedChoices[i]
+                if (sortedChoice) {
+                    acc.push(sortedChoice)
+                }
+
+                return acc
+            }, [])
+            : sortedChoices
+    }
+
+    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__strikethrough')) {
+                return  // Don't set focusChoiceKey = null
+            }
+        }
+        this.focusChoiceKey = null
+    }
+
+    handleTouchStart (event: TouchEvent) {
+        this.swipeStart = {
+            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()
+            }
+        }
+    }
+
+    handleTouchEnd (choiceKey: TChoiceKey, event: TouchEvent) {
+        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
+            && this.swipeStart.x !== null
+            && Math.abs(swipeEnd.x - this.swipeStart.x) > 80
+        ) {
+            const choiceEls = this.$refs.choices as HTMLElement[]
+            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)
+            }
+        }
+
+        this.swipeStart = { x: null, y: null }
+    }
+
+    clickChoiceStrike (choiceKey: TChoiceKey) {
+        if (this.showAnswers) {
+            return
+        }
+
+        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)
+            }
+        }
+    }
+
+    selectChoice (choiceKey: TChoiceKey, focusChoice?: boolean) {
+        if (this.showAnswers) {
+            return
+        }
+
+        const selectedChoices = this.selectedChoices
+        const indexOfSelectedChoice = selectedChoices.indexOf(choiceKey)
+        if (indexOfSelectedChoice !== -1) {
+            selectedChoices.splice(indexOfSelectedChoice, 1)
+        } 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)
+            }
+        }
+
+        if (focusChoice) {
+            const choiceEl = this.$refs[`choice-${choiceKey}`] as HTMLElement | HTMLElement[];
+            ('length' in choiceEl)
+                ? choiceEl[0]?.focus()
+                : choiceEl.focus()
+        }
+    }
+
+    togglePassageImageLongAlt () {
+        this.showPassageImageLongAlt = !this.showPassageImageLongAlt
+
+        if (this.showPassageImageLongAlt) {
+            setTimeout(() => {
+                const mobileLongAlt = this.$refs['uikit-question__img-dropdown-img-description'] as Ref
+                const longAlt = this.$refs['uikit-question__passage-image-description'] as Ref
+
+                // Checking offsetParent tells us which element is visible
+                if (mobileLongAlt?.offsetParent) {
+                    mobileLongAlt.focus()
+                } else if (longAlt?.offsetParent) {
+                    longAlt.focus()
+                }
+            }, 0)
+        }
+    }
+
+    toggleExplanationImageLongAlt () {
+        this.showExplanationImageLongAlt = !this.showExplanationImageLongAlt
+
+        if (this.showExplanationImageLongAlt) {
+            setTimeout(() => {
+                const mcrLongAlt = this.$refs['uikit-question__summary-dropdown-explanation-img-description'] as Ref
+                const mobileLongAlt = this.$refs['uikit-question__dropdown-explanation-img-description'] as Ref[]
+                const longAlt = this.$refs['uikit-question__explanation-img-description'] as Ref
+
+                // Checking offsetParent tells us which element is visible
+                if (mcrLongAlt?.offsetParent) {
+                    mcrLongAlt.focus()
+                } else if (mobileLongAlt?.[0]?.offsetParent) {
+                    mobileLongAlt[0].focus()
+                } else if (longAlt?.offsetParent) {
+                    longAlt.focus()
+                }
+            }, 0)
+        }
+    }
+
+    toggleExplanation () {
+        this.showExplanation = !this.showExplanation
+        if (!this.showExplanation) {
+            setTimeout(() => {
+                const showExplanationRef = (
+                    this.$refs['uikit-question__toggle-explanation-text']
+                    || this.$refs['uikit-question__summary-toggle-explanation-text']
+                ) as Element[] | Element | undefined
+                const showExplanationEl = (
+                    showExplanationRef instanceof Array
+                        ? showExplanationRef[0]
+                        : showExplanationRef
+                ) as HTMLElement | undefined
+                showExplanationEl?.focus()
+            }, 0)
+        } else {
+            setTimeout(() => {
+                const explanationTitle = this.$refs['explanation'] as HTMLElement | undefined
+                explanationTitle?.focus()
+            }, 0)
+        }
+    }
+
+    clickCheckAnswer () {
+        if (!this.hideAnswer) {
+            this.showAnswers = true
+            this.emitCheckAnswer({
+                isCorrect: this.isCorrect,
+                selectedChoices: this.selectedChoices,
+                questionSerial: this.question.serial,
+            })
+            setTimeout(() => {
+                const showExplanationRef = (
+                    this.$refs['uikit-question__toggle-explanation-text']
+                    || this.$refs['uikit-question__summary-toggle-explanation-text']
+                ) as Element[] | Element | undefined
+                const showExplanationEl = (
+                    showExplanationRef instanceof Array
+                        ? showExplanationRef[0]
+                        : showExplanationRef
+                ) as HTMLElement | undefined
+                showExplanationEl?.focus()
+            }, 500)
+        }
+    }
+
+    @Emit('update:selectedChoices')
+    emitSelectedChoices (selectedChoices: Study.Cloud.IQuizAnswer) {
+        return selectedChoices
+    }
+
+    @Watch('reviewMode')
+    reviewModeChanged (reviewMode: boolean) {
+        if (reviewMode) {
+            this.startReviewMode()
+        } else {
+            this.stopReviewMode()
+        }
+    }
+
+    @Watch('previousChoices')
+    previousChoicesChanged (choices: TChoiceKey[]) {
+        this.updateSelectedChoices(choices)
+    }
+
+    @Watch('selectedChoices')
+    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)
+    }
+
+    @Emit('close')
+    emitClose () {
+        return true
+    }
+
+    @Emit('upgrade')
+    emitUpgrade () {
+        return true
+    }
+
+    @Emit('submitQuiz')
+    emitSubmitQuiz () {
+        return true
+    }
+
+    @Emit('nextQuestion')
+    emitNextQuestion () {
+        return true
+    }
+
+    @Emit('previousQuestion')
+    emitPreviousQuestion () {
+        return true
+    }
+
+    @Emit('checkAnswer')
+    emitCheckAnswer (answer: Study.Cloud.IQuizAnswer) {
+        return answer
+    }
+}
+</script>
+
+<style lang="scss">
+@import '../../styles/colors';
+@import '../../styles/breakpoints';
+
+.uikit-question {
+    position: relative;
+    display: flex;
+    justify-content: center;
+    width: 100%;
+    box-sizing: border-box;
+
+    &--tablet-landscape {
+        overflow-y: auto;
+    }
+
+    &__close-icon {
+        display: none;
+        position: absolute;
+        top: 14px;
+        left: 14px;
+        width: 34px;
+        height: 34px;
+        color: $brand-blue;
+        cursor: pointer;
+        z-index: 1;
+
+        @media (hover: hover) {
+            &:hover {
+                color: $brand-black;
+            }
+        }
+
+        @include breakpoint(black-bear) {
+            display: block;
+        }
+
+        &--dark {
+            color: $banana-bread;
+
+            @media (hover: hover) {
+                &:hover {
+                    color: $butterscotch;
+                }
+            }
+        }
+    }
+
+    &__main {
+        position: relative;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        width: 100%;
+        height: 100%;
+        box-sizing: border-box;
+        padding: 0 42px;
+        overflow-y: auto;
+
+        &--show-side:not(&--tablet-portrait) {
+            width: 51%;
+        }
+
+        &--show-side#{&}--tablet-landscape:not(&--tablet-portrait) {
+            width: 50%;
+            padding-right: 36px;
+        }
+
+        &--unanswered#{&}--mobile,
+        &--mcr#{&}--mobile {
+            display: inline-block;
+            max-width: 492px;
+        }
+
+        &--mobile {
+            overflow-y: visible;
+            padding: 0 17px;
+        }
+    }
+
+    &__right-side {
+        width: 49%;
+        box-sizing: border-box;
+        overflow-y: auto;
+
+        &--tablet-landscape {
+            width: 48%;
+        }
+
+        &--tablet-portrait {
+            display: none;
+        }
+
+        &--explanation {
+            padding-top: 58px;
+            padding-right: 11px;
+            font-size: 16.5px;
+            line-height: 26px;
+        }
+
+        &--explanation#{&}--tablet-landscape {
+            padding-top: 22px;
+            font-size: 16px;
+            line-height: 24px;
+        }
+    }
+
+    &__passage-and-image {
+        position: relative;
+        max-width: 566px;
+        padding: 133px 60px 72px 60px;
+        box-sizing: border-box;
+        line-height: 26px;
+        font-size: 16.5px;
+        font-weight: 400;
+        letter-spacing: -0.1px;
+
+        &--tablet-landscape {
+            padding: 115px 41px 42px 30px;
+            font-size: 16.5px;
+            line-height: 26px;
+        }
+    }
+
+    &__passage-and-image-title {
+        color: $ash;
+        margin-bottom: 24px;
+        font-weight: 600;
+        font-size: 17.5px;
+        line-height: 25px;
+        letter-spacing: -0.1px;
+        outline: none;
+
+        &--dark {
+            color: rgba($white, 0.86);
+        }
+    }
+
+    &__passage {
+        line-height: 26px;
+        font-weight: 400;
+        font-size: 16.5px;
+        letter-spacing: -0.1px;
+        margin-bottom: 24px;
+
+        strong,
+        b {
+            font-weight: 600;
+        }
+    }
+
+    &__image {
+        display: block;
+        position: relative;
+        left: 50%;
+        transform: translateX(-50%);
+        width: calc(100% + 24px);
+        border: 1px solid $fog;
+
+        &--dark {
+            border: 1px solid $jet;
+        }
+
+        &--tablet-landscape {
+            width: calc(100% + 16px);
+        }
+    }
+
+    &__toggle-passage-image-description {
+        margin-top: 16px;
+        margin-bottom: 8px;
+
+        &--tablet-landscape {
+            margin-top: 12px;
+        }
+    }
+
+    &__toggle-passage-image-description-text,
+    &__toggle-explanation-img-description-text,
+    &__toggle-img-dropdown-img-description-text,
+    &__toggle-dropdown-explanation-img-description-text,
+    &__toggle-summary-dropdown-explanation-img-description-text {
+        outline: none;
+    }
+
+    &__toggle-passage-image-description-icon,
+    &__toggle-explanation-img-description-icon,
+    &__toggle-img-dropdown-img-description-icon,
+    &__toggle-dropdown-explanation-img-description-icon,
+    &__toggle-summary-dropdown-explanation-img-description-icon {
+        margin-left: 8px;
+
+        &--up {
+            transform: rotate(180deg);
+        }
+    }
+
+    &__passage-image-description {
+        outline: none;
+        color: $ash;
+        font-size: 15px;
+        line-height: 22px;
+        font-weight: 500;
+        letter-spacing: -0.2px;
+
+        &--dark {
+            color: $fog;
+        }
+
+        p {
+            margin: 0;
+        }
+    }
+
+    &__return-to-prompt {
+        position: absolute;
+        left: -10000px;
+
+        &:focus {
+            left: auto;
+        }
+    }
+
+    &__explanation {
+        position: relative;
+        background-color: $white;
+        border: 1px solid rgba($pewter, 0.85);
+        border-bottom: 0;
+        border-radius: 6px 6px 0 0;
+        padding: 42px 60px 72px;
+        box-sizing: border-box;
+        max-width: 565px;
+        min-height: 100%;
+
+        &--tablet-landscape {
+            max-width: 460px;
+            padding: 42px 36px 72px;
+        }
+
+        &--dark {
+            border-color: $slate;
+            background-color: $mariner;
+        }
+    }
+
+    &__explanation-close {
+        position: absolute;
+        width: 30px;
+        height: 30px;
+        top: 12px;
+        right: 12px;
+        color: $brand-blue;
+        cursor: pointer;
+        outline: none;
+
+        &:hover {
+            color: $brand-black;
+        }
+
+        &:focus::before {
+            content: '';
+            left: -1px;
+            top: -1px;
+            width: 100%;
+            height: 100%;
+            position: absolute;
+            border: 1px solid $brand-blue;
+            border-radius: 5px;
+        }
+
+        &--dark {
+            color: $banana-bread;
+
+            &:hover {
+                color: $butterscotch;
+            }
+
+            &:focus::before {
+                border-color: $banana-bread;
+            }
+        }
+
+        svg {
+            width: 100%;
+            height: 100%;
+        }
+    }
+
+    &__explanation-title {
+        font-weight: 600;
+        font-size: 17.5px;
+        letter-spacing: -0.1px;
+        line-height: 25px;
+        outline: none;
+
+        &--dark {
+            color: $fog;
+        }
+    }
+
+    &__explanation-text {
+        font-weight: 400;
+        font-size: 16.5px;
+        letter-spacing: -0.1px;
+        line-height: 26px;
+        margin-bottom: 24px;
+        word-break: break-word;
+
+        &--dark {
+            color: $white;
+        }
+
+        &--tablet-landscape {
+            margin-bottom: 24px;
+            font-size: 16px;
+            line-height: 24px;
+        }
+
+        strong,
+        b {
+            font-weight: 600;
+        }
+    }
+
+    &__explanation-image {
+        display: block;
+        position: relative;
+        left: 50%;
+        transform: translateX(-50%);
+        width: calc(100% + 24px);
+        margin-bottom: 24px;
+        border: 1px solid $fog;
+
+        &--long-alt {
+            margin-bottom: 0;
+        }
+
+        &--dark {
+            border: 1px solid $jet;
+        }
+
+        &--tablet-landscape {
+            width: calc(100% + 16px);
+        }
+    }
+
+    &__toggle-explanation-img-description {
+        margin-top: 24px;
+
+        &--open {
+            margin-bottom: 6px;
+        }
+
+        &--tablet-landscape {
+            margin-top: 12px;
+        }
+    }
+
+    &__explanation-img-description {
+        outline: none;
+        color: $ash;
+        font-size: 15px;
+        font-weight: 500;
+        letter-spacing: -0.2px;
+        line-height: 22px;
+        margin-bottom: 24px;
+
+        &--dark {
+            color: $fog;
+        }
+
+        p {
+            margin: 0;
+        }
+    }
+
+    &__reference {
+        padding-top: 24px;
+        border-top: 1px solid $fog;
+        font-size: 15px;
+        letter-spacing: -0.1px;
+        line-height: 22px;
+        font-weight: 600;
+        word-break: break-word;
+
+        &--dark {
+            color: $white;
+            border-top-color: rgba($fog, 0.28);
+        }
+
+        p {
+            margin: 6px 0 8pt 0;
+            font-size: 15px;
+            letter-spacing: -0.1px;
+            font-weight: 400;
+            font-style: italic;
+        }
+    }
+
+    &__reference-label,
+    &__dropdown-reference-label,
+    &__summary-dropdown-reference-label {
+        font-weight: 600;
+    }
+
+    &__context {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        flex-shrink: 0;
+        margin-bottom: 28px;
+        padding-top: 60px;
+        outline: none;
+
+        &--tablet-landscape {
+            padding-top: 42px;
+        }
+
+        &--tablet-portrait {
+            padding-top: 52px;
+        }
+
+        &--mobile {
+            padding-top: 22px;
+        }
+    }
+
+    &__context-icon {
+        margin-bottom: 8px;
+        margin-left: 6px;
+        color: $ash;
+
+        &--dark {
+            color: $fog;
+        }
+    }
+
+    &__context-text {
+        display: flex;
+        font-size: 14px;
+        font-weight: 600;
+        letter-spacing: 0.2px;
+        line-height: 17px;
+        color: $ash;
+        margin: 0;
+
+        &--dark {
+            color: $fog;
+        }
+    }
+
+    &__quiz-length {
+        margin-left: 5px;
+        font-weight: 500;
+    }
+
+    &__prompt {
+        outline: none;
+        font-weight: 600;
+        font-size: 17.5px;
+        letter-spacing: -0.1px;
+        line-height: 26px;
+        padding: 0 16px;
+        margin-bottom: 24px;
+        width: 100%;
+        max-width: 492px;
+        box-sizing: border-box;
+
+        &--passage-and-image {
+            &--mobile {
+                margin-bottom: 14px;
+                font-size: 16px;
+            }
+        }
+
+        &--tablet-portrait {
+            padding: 0 15px;
+            box-sizing: border-box;
+            font-weight: 600;
+            font-size: 17px;
+            letter-spacing: -0.1px;
+            line-height: 25px;
+            margin-bottom: 24px;
+        }
+
+        strong,
+        b {
+            font-weight: 700;
+        }
+
+        p {
+            margin: 0 0 12px;
+
+            &:last-child {
+                margin: 0;
+            }
+        }
+
+        table {
+            width: 100%;
+            display: block;
+            height: auto !important;
+            overflow: auto;
+
+            tr td {
+                border: 1px solid $steel;
+                padding: 6px 10px;
+            }
+        }
+    }
+
+    &__skip-to-passage {
+        display: block;
+        position: absolute;
+        left: -10000px;
+
+        &:focus {
+            left: auto;
+        }
+
+        &--tablet-portrait {
+            display: none;
+        }
+    }
+
+    &__passage-and-image-dropdown {
+        display: none;
+        position: relative;
+        width: 100%;
+        max-width: 492px;
+        background-color: $white;
+        border: 1px solid rgba($pewter, 0.85);
+        border-radius: 6px;
+        box-sizing: border-box;
+        margin-bottom: 24px;
+        font-size: 16px;
+        line-height: 24px;
+        font-weight: 400;
+
+        &--dark {
+            background-color: $brand-black;
+            border-color: $slate;
+        }
+
+        &--tablet-portrait,
+        &--review-mode {
+            display: block;
+        }
+    }
+
+    &__passage-and-image-dropdown-btn {
+        position: relative;
+        display: flex;
+        align-items: center;
+        border: 1px solid rgba($pewter, 0.85);
+        border-radius: 5px;
+        box-shadow: 0 1px 4px 0 rgba($ash, 0.3);
+        box-sizing: border-box;
+        height: 50px;
+        padding: 15px 57px 16px 48px;
+        margin: -1px;
+        cursor: pointer;
+        outline: none;
+
+        &:hover {
+            .uikit-question__passage-and-image-dropdown-text {
+                color: mix($brand-blue, black, 90%);
+            }
+
+            .uikit-question__passage-and-image-dropdown-arrow {
+                color: mix($brand-blue, black, 90%);
+            }
+
+            &::before {
+                content: '';
+                left: -2px;
+                top: -2px;
+                width: 100%;
+                height: 100%;
+                border: 2px solid $slate;
+                position: absolute;
+                border-radius: 5px;
+            }
+        }
+
+        &:focus::before {
+            content: '';
+            left: -3px;
+            top: -3px;
+            width: calc(100% + 4px);
+            height: calc(100% + 4px);
+            border: 1px solid $brand-blue;
+            position: absolute;
+            border-radius: 8px;
+        }
+
+        &--dark {
+            box-shadow: 0 1px 4px 0 rgba($jet, 0.3);
+            border-color: $slate;
+
+            &:hover {
+                .uikit-question__passage-and-image-dropdown-text {
+                    color: $butterscotch;
+                }
+
+                .uikit-question__passage-and-image-dropdown-arrow {
+                    color: $butterscotch;
+                }
+
+                &::before {
+                    border-color: rgba($white, 0.6);
+                }
+            }
+
+            &:focus::before {
+                border-color: $banana-bread;
+            }
+        }
+    }
+
+    &__passage-and-image-dropdown-text {
+        font-size: 16px;
+        line-height: 24px;
+        font-weight: 600;
+        color: $brand-blue;
+
+        &--dark {
+            color: $banana-bread;
+        }
+    }
+
+    &__passage-dropdown-icon,
+    &__image-dropdown-icon {
+        position: absolute;
+        left: 17px;
+        width: 19px;
+    }
+
+    &__passage-and-image-dropdown-arrow {
+        position: absolute;
+        right: 20px;
+        color: $brand-blue;
+
+        &--dark {
+            color: $banana-bread;
+        }
+
+        &--up {
+            transform: rotate(180deg);
+        }
+    }
+
+    &__passage-and-image-dropdown-container {
+        padding: 14px 15px 16px 16px;
+
+        &--mobile {
+            padding: 12px 15px 16px 15px;
+        }
+    }
+
+    &__passage-dropdown-passage {
+        box-sizing: border-box;
+        margin: 14px 20px 24px 17px;
+        line-height: 24px;
+        font-size: 16px;
+        font-weight: 400;
+        letter-spacing: -0.1;
+
+        &--mobile {
+            line-height: 24px;
+            font-size: 16px;
+        }
+
+        &--with-image {
+            margin-bottom: 16px;
+        }
+    }
+
+    &__image-dropdown-image {
+        display: block;
+        box-sizing: border-box;
+        width: 100%;
+        border: 1px solid $fog;
+
+        &--with-passage {
+            padding-top: 0;
+        }
+
+        &--dark {
+            border: 1px solid $jet;
+        }
+    }
+
+    &__toggle-img-dropdown-img-description {
+        margin-top: 16px;
+
+        &--open {
+            margin-bottom: 8px;
+        }
+    }
+
+    &__img-dropdown-img-description {
+        outline: none;
+        color: $ash;
+        font-size: 15px;
+        line-height: 22px;
+        font-weight: 500;
+        letter-spacing: -0.2;
+
+        &--dark {
+            color: $fog;
+        }
+
+        &--tablet-landscape {
+            margin-bottom: 4px;
+        }
+
+        &--tablet-portrait {
+            margin-bottom: 0;
+        }
+
+        p {
+            margin: 0;
+        }
+    }
+
+    &__unanswered-teach-review-label {
+        margin-bottom: 12px;
+        display: flex;
+        justify-content: space-between;
+        width: 100%;
+        max-width: 492px;
+        font-size: 16px;
+        letter-spacing: -0.1px;
+        line-height: 22px;
+        color: $brand-black;
+    }
+
+    &__choices {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        flex-shrink: 0;
+        width: 100%;
+        max-width: 492px;
+        position: relative;
+        margin: 0;
+        list-style: none;
+        padding: 0;
+
+        &::before {
+            content: '';
+            position: absolute;
+            top: -11px;
+            bottom: -12px;
+            left: -11px;
+            right: -11px;
+            visibility: hidden;
+            box-shadow: 0 1px 4px 0 rgba($brand-black, 0.12);
+            border-radius: 11px;
+        }
+
+        &--correct {
+            &::before {
+                visibility: visible;
+                border: 2px solid $cadaverous;
+            }
+
+            &--dark::before {
+                border-color: $jungle-green;
+            }
+        }
+
+        &--incorrect {
+            &::before {
+                visibility: visible;
+                border: 3px solid $pepper;
+            }
+
+            &--dark::before {
+                border-color: $rosa;
+            }
+        }
+
+        &--no-actions {
+            padding-bottom: 71px;
+        }
+
+        &--incorrect#{&}--unanswered {
+            display: inline-flex;
+            margin-top: 30px;
+        }
+
+        &--incorrect#{&}--unanswered:not(&--show-stats) {
+            margin-bottom: 71px;
+        }
+    }
+
+    &__unanswered-label {
+        position: absolute;
+        top: -38px;
+        display: flex;
+        justify-content: space-between;
+        width: 100%;
+        font-size: 16px;
+        letter-spacing: -0.1px;
+        line-height: 22px;
+        color: $brand-black;
+
+        &--dark {
+            color: $white;
+        }
+    }
+
+    &__unanswered-label-icon {
+        color: $pepper;
+
+        &--dark {
+            color: $rosa;
+        }
+    }
+
+    &__choice-container {
+        position: relative;
+        display: flex;
+        align-items: center;
+        width: 100%;
+        outline: none;
+        transition: 0.1s width ease;
+        border-radius: 6px;
+        cursor: default;
+
+        &:not(:last-child) {
+            margin-bottom: 9px;
+        }
+
+        &::after {
+            content: '';
+            position: absolute;
+            top: -1px;
+            bottom: -1px;
+            left: -1px;
+            right: -1px;
+            border: 1px solid rgba($pewter, 0.85);
+            box-shadow: 0 1px 4px 0 rgba($ash, 0.3);
+            border-radius: 6px;
+            pointer-events: none;
+        }
+
+        &--dark {
+            &::after {
+                border-color: $slate;
+                box-shadow: 0 1px 4px 0 rgba($jet, 0.3);
+            }
+        }
+
+        &--big {
+            width: calc(100% + 10px);
+        }
+
+        &--hover {
+            cursor: pointer;
+
+            &::after {
+                display: block;
+                top: -2px;
+                bottom: -2px;
+                left: -2px;
+                right: -2px;
+                border: 2px solid $slate;
+                border-radius: 7px;
+            }
+
+            &--dark::after {
+                border-color: rgba($white, 0.6);
+            }
+        }
+
+        &--focus {
+            &::after {
+                display: block;
+                border: 1px solid $brand-blue;
+            }
+
+            &--dark::after {
+                border-color: $banana-bread;
+            }
+        }
+
+        &--selected {
+            &::after {
+                display: block;
+                border: 2px solid $brand-blue;
+            }
+
+            &:focus::before {
+                content: '';
+                position: absolute;
+                top: -3px;
+                bottom: -3px;
+                left: -3px;
+                right: -3px;
+                border-radius: 7px;
+                border: 1px solid $brand-blue;
+                pointer-events: none;
+            }
+
+            &--dark::after {
+                border-color: $banana-bread;
+            }
+
+            &--dark:hover::after {
+                border-color: $butterscotch;
+            }
+
+            &--dark:focus::before {
+                border-color: $banana-bread;
+            }
+        }
+
+        &--incorrect {
+            &::after {
+                display: block;
+                border: 1px solid $pepper;
+            }
+
+            &--dark::after {
+                border-color: $rosa;
+            }
+        }
+
+        &--correct {
+            &::after {
+                display: block;
+                border: 2px solid $cadaverous;
+            }
+
+            &--dark::after {
+                border-color: $jungle-green;
+            }
+
+            .uikit-question__choice--big.uikit-question__choice--tablet-portrait {
+                padding: 11px 38px 11px 17px;
+            }
+
+            .uikit-question__choice--big.uikit-question__choice--mobile {
+                padding: 11px 21px 9px;
+            }
+        }
+    }
+
+    &__choice-letter {
+        position: absolute;
+        left: -26px;
+        top: 50%;
+        transform: translateY(calc(-50% + 2px));
+        color: $slate-01;
+        font-size: 14px;
+        line-height: 17px;
+        transition: 0.1s left ease;
+
+        &--dark {
+            color: rgba($white, 0.6);
+        }
+
+        &--selected {
+            color: $brand-blue;
+
+            &--dark {
+                color: $banana-bread;
+            }
+        }
+
+        &--correct {
+            color: $victoria-green;
+
+            &--dark {
+                color: $jungle-green;
+            }
+        }
+
+        &--incorrect {
+            color: $lust;
+
+            &--dark {
+                color: $rosa;
+            }
+        }
+
+        &--big {
+            left: -21px;
+        }
+
+        &--mobile {
+            display: none;
+        }
+    }
+
+    &__choice {
+        width: 100%;
+        background-color: $white;
+        border-radius: 5px;
+        padding: 11px 46px 11px 15px;
+        font-size: 16.5px;
+        font-weight: 500;
+        letter-spacing: -0.1px;
+        line-height: 23px;
+        position: relative;
+        transition: 0.1s padding ease;
+
+        &--tablet-portrait {
+            font-size: 16px;
+            font-weight: 500;
+            letter-spacing: -0.1px;
+            line-height: 23px;
+        }
+
+        &--review-mode#{&}--distractor {
+            color: $slate;
+
+            &--dark {
+                color: $fog;
+            }
+        }
+
+        &--strike {
+            text-decoration: line-through;
+
+            &--dark:not(&--mcr) {
+                color: #c5cbd1 !important;
+            }
+        }
+
+        &--strike:not(&--mcr) {
+            color: $pewter;
+        }
+
+        &--strike#{&}--distractor#{&}--mcr {
+            background-color: rgba($barely-background, 0.5);
+            color: $ash;
+            box-shadow: 0 1px 4px 0 rgba($fog, 0.4);
+
+            &--dark {
+                background-color: rgba($moonlit-ocean, 0.5);
+                box-shadow: 0 1px 4px 0 rgba($charcoal, 0.2);
+            }
+        }
+
+        &--selected {
+            box-shadow: 0 1px 4px 0 rgba($brand-black, 0.12);
+        }
+
+        &--big {
+            padding: 11px 51px 11px 20px;
+        }
+
+        &--mcr {
+            padding: 13px 46px 15px 50px;
+        }
+
+        &--show-stats {
+            padding-bottom: 23px;
+            padding-right: 66px;
+        }
+
+        &--dark {
+            background-color: $brand-black;
+            color: $gray-background;
+        }
+
+        p {
+            margin: 0;
+        }
+    }
+
+    &__mcr-checkbox {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        position: absolute;
+        top: 15px;
+        left: 15px;
+        width: 21px;
+        height: 21px;
+        border: 1px solid rgba($slate-01, 0.5);
+        border-radius: 2px;
+        box-sizing: border-box;
+
+        &--dark {
+            background: $barely-background;
+            border-color: $barely-background;
+        }
+
+        &--distractor--dark {
+            background: transparent;
+            border: 1px solid $pewter;
+        }
+
+        &--selected {
+            background-color: $brand-black;
+            color: $white;
+
+            &--dark {
+                background: $barely-background;
+                color: $brand-black;
+            }
+        }
+
+        &--selected#{&}--distractor {
+            background-color: rgba($slate-01, 0.5);
+            color: $white;
+            border: none;
+
+            &--dark {
+                background-color: rgba($barely-background, 0.4);
+                color: $brand-black;
+            }
+        }
+
+        &--selected#{&}--answer {
+            background-color: $chromophobia-green;
+            color: $white;
+            border: none;
+
+            &--dark {
+                background: $jungle-green;
+            }
+        }
+
+        &--answer:not(&--selected) {
+            color: $chromophobia-green;
+        }
+
+        &--answer--dark:not(&--selected) {
+            color: $jungle-green;
+            background: transparent;
+            border: 1px solid $pewter;
+        }
+
+        &--strike {
+            border-color: $pewter;
+        }
+    }
+
+    &__mcr-check {
+        width: 13px;
+        height: 11px;
+    }
+
+    &__choice-text {
+        outline: none;
+    }
+
+    &__toggle-explanation {
+        margin-top: 8px;
+        margin-bottom: 8px;
+        padding: 0;
+        z-index: 2;
+
+        &--review-mode {
+            display: none;
+
+            &.uikit-question__toggle-explanation--tablet-portrait,
+            &.uikit-question__toggle-explanation--mobile {
+                display: block;
+            }
+        }
+    }
+
+    &__toggle-explanation-text,
+    &__summary-toggle-explanation-text {
+        outline: none;
+    }
+
+    &__toggle-explanation-icon,
+    &__summary-toggle-explanation-icon {
+        margin-left: 5px;
+        display: none;
+
+        &--tablet-portrait {
+            display: initial;
+        }
+
+        &--up {
+            transform: rotate(180deg);
+        }
+    }
+
+    &__dropdown-explanation,
+    &__summary-dropdown-explanation {
+        display: none;
+
+        &--tablet-portrait {
+            display: block;
+        }
+    }
+
+    &__dropdown-explanation-text,
+    &__summary-dropdown-explanation-text {
+        font-size: 16px;
+        letter-spacing: -0.1px;
+        line-height: 24px;
+        font-weight: 400;
+        padding-bottom: 6px;
+
+        p {
+            margin: 10px 0;
+
+            &:first-child {
+                margin: 0;
+            }
+        }
+    }
+
+    &__dropdown-explanation-image,
+    &__summary-dropdown-explanation-image {
+        display: block;
+        box-sizing: border-box;
+        width: 100%;
+        border: 1px solid $fog;
+
+        &--dark {
+            border: 1px solid $jet;
+        }
+    }
+
+    &__toggle-dropdown-explanation-img-description,
+    &__toggle-summary-dropdown-explanation-img-description {
+        margin-top: 12px;
+        margin-bottom: 20px;
+
+        &--open {
+            margin-bottom: 6px;
+        }
+
+        &--tablet-portrait {
+            &.uikit-question__toggle-dropdown-explanation-img-description--no-reference,
+            &.uikit-question__toggle-summary-dropdown-explanation-img-description--no-reference {
+                margin-bottom: 4px;
+            }
+
+            &.uikit-question__toggle-dropdown-explanation-img-description--open,
+            &.uikit-question__toggle-summary-dropdown-explanation-img-description--open {
+                margin-bottom: 6px;
+            }
+        }
+
+        &--mobile {
+            margin-top: 16px;
+            margin-bottom: 16px;
+
+            &.uikit-question__toggle-dropdown-explanation-img-description--no-reference,
+            &.uikit-question__toggle-summary-dropdown-explanation-img-description--no-reference {
+                margin-bottom: 7px;
+            }
+
+            &.uikit-question__toggle-dropdown-explanation-img-description--open,
+            &.uikit-question__toggle-summary-dropdown-explanation-img-description--open {
+                margin-bottom: 4px;
+            }
+        }
+    }
+
+    &__dropdown-explanation-img-description,
+    &__summary-dropdown-explanation-img-description {
+        outline: none;
+        color: $ash;
+        font-size: 15px;
+        line-height: 22px;
+        margin-bottom: 20px;
+
+        &--dark {
+            color: $fog;
+        }
+
+        &--mobile {
+            margin-bottom: 16px;
+        }
+
+        p {
+            margin: 0;
+        }
+    }
+
+    &__dropdown-reference,
+    &__summary-dropdown-reference {
+        padding-top: 24px;
+        border-top: 1px solid $fog;
+        font-size: 15px;
+        letter-spacing: -0.1px;
+        line-height: 22px;
+        font-weight: 400;
+        word-break: break-word;
+        margin-bottom: -7px;
+
+        &--dark {
+            color: $white;
+            border-top-color: rgba($fog, 0.28);
+        }
+
+        p {
+            margin: 6px 0 8pt 0;
+        }
+    }
+
+    &__strikethrough {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        position: absolute;
+        width: 20px;
+        height: 22px;
+        right: 12px;
+        background-color: $gray-background;
+        border-radius: 2px;
+        z-index: 2;
+        outline: none;
+        opacity: 0;
+
+        &--visible {
+            opacity: 1;
+        }
+
+        &:hover:not(&--active) {
+            background-color: rgba($sky-blue, 0.674);
+            color: $brand-blue;
+        }
+
+        &:focus:not(&--active) {
+            background-color: $gray-background;
+            color: $brand-blue;
+
+            &::after {
+                content: '';
+                position: absolute;
+                top: 0;
+                bottom: 0;
+                left: 0;
+                right: 0;
+                border: 1px solid $brand-blue;
+                border-radius: 2px;
+            }
+        }
+
+        &--dark {
+            background-color: $ash;
+            color: $white;
+
+            &:hover:not(&--active) {
+                background-color: rgba($banana-bread, 0.15);
+                color: $banana-bread;
+            }
+
+            &:focus:not(&--active) {
+                background-color: rgba($white, 0.15);
+                color: $banana-bread;
+
+                &::after {
+                    border-color: $banana-bread;
+                }
+            }
+        }
+
+        &--active {
+            background-color: $brand-blue;
+            color: $white;
+
+            &:hover {
+                background-color: mix($brand-blue, black, 90%);
+            }
+
+            &:focus {
+                &::before {
+                    content: '';
+                    position: absolute;
+                    top: -2px;
+                    bottom: -2px;
+                    left: -2px;
+                    right: -2px;
+                    border: 1px solid $brand-blue;
+                    border-radius: 2px;
+                }
+            }
+
+            &--dark {
+                background-color: $banana-bread;
+                color: $brand-black;
+
+                &:hover {
+                    background-color: $banana-bread;
+                    color: $brand-black;
+                }
+
+                &:focus {
+                    background-color: $banana-bread !important;
+                    color: $brand-black !important;
+
+                    &::before {
+                        border-color: $banana-bread;
+                    }
+                }
+            }
+        }
+
+        &--tablet-landscape {
+            display: none;
+        }
+    }
+
+    &__correct-icon {
+        position: absolute;
+        top: 12px;
+        right: 15px;
+        width: 22px;
+        height: 22px;
+        color: $cadaverous;
+
+        &--dark {
+            color: $jungle-green;
+        }
+
+        &--review-mode {
+            top: 11px;
+        }
+    }
+
+    &__incorrect-icon {
+        position: absolute;
+        top: 12px;
+        right: 10px;
+        width: 22px;
+        height: 22px;
+        color: $pepper;
+
+        &--mcr {
+            top: 11px;
+        }
+
+        &--dark {
+            color: $rosa;
+        }
+    }
+
+    &__choice-stats-pct {
+        position: absolute;
+        top: 50%;
+        right: 10px;
+        transform: translateY(-50%);
+        color: $ash;
+        font-size: 15.5px;
+        letter-spacing: -0.2px;
+        line-height: 19px;
+        font-weight: 600;
+        transition: 0.1s right ease;
+
+        &--dark {
+            color: $fog;
+        }
+
+        &--big {
+            right: 15px;
+        }
+    }
+
+    &__choice-stats-bar {
+        position: absolute;
+        bottom: 0;
+        width: 100%;
+        height: 12px;
+        box-sizing: border-box;
+        background-color: $fog;
+        border-radius: 0 0 5px 5px;
+        overflow: hidden;
+
+        &--dark {
+            background-color: $ash;
+        }
+    }
+
+    &__choice-stats-bar-fill {
+        background-color: $slate-01;
+        height: 100%;
+
+        &--dark {
+            background-color: $pewter;
+        }
+
+        &--correct {
+            background-color: $green;
+        }
+
+        &--incorrect {
+            background-color: $brand-red;
+
+            &--dark {
+                background-color: $rosa;
+            }
+        }
+    }
+
+    &__summary {
+        position: relative;
+        background-color: $white;
+        width: 100%;
+        max-width: 492px;
+        margin-top: 24px;
+        padding: 11px 46px 11px 15px;
+        box-sizing: border-box;
+        border-radius: 5px;
+        box-shadow: 0 1px 6px 0 rgba($fog, 0.6);
+
+        &--dark {
+            background: $brand-black;
+            border: 1px solid $slate;
+            box-shadow: 0 1px 4px 0 rgba($jet, 0.3);
+        }
+
+        &--tablet-portrait {
+            display: inline-block;
+        }
+    }
+
+    &__summary-title {
+        font-weight: 600;
+        font-size: 15.5px;
+        line-height: 22px;
+    }
+
+    &__summary-toggle-explanation {
+        margin-top: 8px;
+        margin-bottom: 8px;
+        padding: 0;
+
+        &--review-mode {
+            display: none;
+
+            &.uikit-question__summary-toggle-explanation--tablet-portrait {
+                display: block;
+            }
+        }
+    }
+
+    &__summary-correct-icon {
+        position: absolute;
+        top: 12px;
+        right: 10px;
+        width: 22px;
+        height: 22px;
+        color: $cadaverous;
+
+        &--dark {
+            color: $jungle-green;
+        }
+    }
+
+    &__summary-incorrect-icon {
+        position: absolute;
+        top: 12px;
+        right: 10px;
+        width: 22px;
+        height: 22px;
+        color: $pepper;
+
+        &--dark {
+            color: $rosa;
+        }
+    }
+
+    &__stats-summary {
+        margin-top: 24px;
+        display: flex;
+        width: 100%;
+        max-width: 492px;
+        padding-bottom: 50px;
+    }
+
+    &__stats-summary-total {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        flex: 1;
+        margin-right: 16px;
+        background-color: rgba($sky-blue, 0.8);
+        padding: 9px 0;
+        border-radius: 6px;
+
+        &--dark {
+            background-color: $brand-black;
+        }
+    }
+
+    &__stats-summary-correct {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        flex: 1;
+        background-color: rgba($green, 0.13);
+        padding: 9px 0;
+        border-radius: 6px;
+
+        &--dark {
+            background-color: $brand-black;
+        }
+    }
+
+    &__stats-summary-value {
+        font-weight: 600;
+        font-size: 26px;
+        letter-spacing: 0.26px;
+        line-height: 31px;
+    }
+
+    &__stats-summary-label {
+        color: $ash;
+        font-size: 13px;
+        line-height: 16px;
+
+        &--dark {
+            color: $white;
+        }
+    }
+
+    &__action-container {
+        display: flex;
+        justify-content: center;
+        flex-shrink: 0;
+        width: 100%;
+        margin-top: 24px;
+        padding-bottom: 71px;
+
+        &--tablet-landscape {
+            margin-top: 24px;
+        }
+
+        &--mcr-summary {
+            margin-top: 24px;
+        }
+    }
+
+    &__paywall-container {
+        width: 100%;
+        display: flex;
+        justify-content: center;
+    }
+
+    &__paywall {
+        width: 100%;
+        max-width: 500px;
+        background: $white;
+        border-radius: 8px;
+        border: 1px solid $steel;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+
+        &--dark {
+            background: $brand-black;
+        }
+
+        &--tablet-portrait {
+            max-width: 430px;
+        }
+
+        &--review {
+            margin-bottom: 20px;
+        }
+    }
+
+    &__paywall-image {
+        width: 305px;
+        height: 230px;
+        margin: 25px auto 21px;
+
+        &--mobile {
+            width: 262px;
+            height: 199px;
+            margin: 14px auto 18px;
+        }
+    }
+
+    &__paywall-text {
+        font-size: 18px;
+        line-height: 22px;
+        color: $brand-black;
+        margin-bottom: 24px;
+        font-weight: 600;
+        text-align: center;
+        max-width: 372px;
+
+        &--dark {
+            color: $white;
+        }
+
+        &--tablet-portrait {
+            max-width: 302px;
+        }
+
+        &--mobile {
+            max-width: 293px;
+            margin-bottom: 22px;
+            font-size: 16px;
+            line-height: 19px;
+        }
+    }
+
+    &__paywall-button {
+        margin-bottom: 36px;
+    }
+}
+</style>