@pocketprep/ui-kit 3.4.7 → 3.4.9

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

@@ -0,0 +1,987 @@
+<template>
+    <div
+        class="uikit-question-choices-container"
+        v-for="(choice, index) in choices"
+        :key="choice.key"
+        ref="uikit-question-choices-container"
+    >
+        <div
+            ref="choices"
+            v-dark="isDarkMode"
+            class="uikit-question-choices-container__choice-container"
+            :class="{
+                'uikit-question-choices-container__choice-container--hover': 
+                    !showAnswers && hoverChoiceKey === choice.key,
+                'uikit-question-choices-container__choice-container--focus': 
+                    !showAnswers && focusChoiceKey === choice.key,
+                'uikit-question-choices-container__choice-container--selected': !showAnswers
+                    && selectedChoices.includes(choice.key),
+                'uikit-question-choices-container__choice-container--correct': 
+                    !isMCR && showAnswers && !isUnanswered && answerKeys.includes(choice.key),
+                'uikit-question-choices-container__choice-container--incorrect': !isMCR && showAnswers
+                    && selectedChoices.includes(choice.key)
+                    && distractorKeys.includes(choice.key),
+                'uikit-question-choices-container__choice-container--big': !isMCR && !globalMetrics && (
+                    showAnswers && !isUnanswered
+                        ? answerKeys.includes(choice.key)
+                        : selectedChoices.includes(choice.key)
+                ),
+            }"
+            @mousedown.prevent
+            @mouseover="emitChoiceMouseOver(choice.key)"
+            @mouseleave="emitChoiceMouseLeave"
+            @focusin="emitChoiceFocusIn(choice.key)"
+            @focusout="emitChoiceFocusOut($event)"
+            @click.stop="emitSelectedChoice(choice.key)"
+            @keydown.enter.stop="emitSelectedChoice(choice.key)"
+            @touchstart="emitHandleTouchStart($event)"
+            @touchmove="emitHandleTouchMove($event)"
+            @touchend="emitHandleTouchEnd(choice.key, $event)"
+        >
+            <div
+                v-if="!reviewMode"
+                v-breakpoint:questionEl="breakpoints"
+                v-dark="isDarkMode"
+                class="uikit-question-choices-container__choice-letter"
+                :class="!isMCR && {
+                    'uikit-question-choices-container__choice-letter--selected': selectedChoices.includes(choice.key),
+                    'uikit-question-choices-container__choice-letter--correct': showAnswers
+                        && answerKeys.includes(choice.key),
+                    'uikit-question-choices-container__choice-letter--incorrect': showAnswers
+                        && selectedChoices.includes(choice.key)
+                        && distractorKeys.includes(choice.key),
+                    'uikit-question-choices-container__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-choices-container__choice"
+                :class="{
+                    'uikit-question-choices-container__choice--strike': showAnswers
+                        ? isMCR
+                            ? distractorKeys.includes(choice.key)
+                            : choiceStrikes.includes(choice.key) && !answerKeys.includes(choice.key)
+                        : choiceStrikes.includes(choice.key),
+                    'uikit-question-choices-container__choice--big': !isMCR && !globalMetrics && (
+                        showAnswers && !isUnanswered
+                            ? answerKeys.includes(choice.key)
+                            : selectedChoices.includes(choice.key)
+                    ),
+                    'uikit-question-choices-container__choice--mcr': isMCR,
+                    'uikit-question-choices-container__choice--selected': !showAnswers &&
+                        selectedChoices.includes(choice.key),
+                    'uikit-question-choices-container__choice--distractor': showAnswers
+                        && distractorKeys.includes(choice.key),
+                    'uikit-question-choices-container__choice--show-stats': globalMetrics,
+                    'uikit-question-choices-container__choice--review-mode': reviewMode,
+                }"
+            >
+                <div
+                    v-if="isMCR"
+                    v-dark="isDarkMode"
+                    class="uikit-question-choices-container__mcr-checkbox"
+                    :class="{
+                        'uikit-question-choices-container__mcr-checkbox--selected': 
+                            selectedChoices.includes(choice.key),
+                        'uikit-question-choices-container__mcr-checkbox--answer': showAnswers
+                            && answerKeys.includes(choice.key),
+                        'uikit-question-choices-container__mcr-checkbox--distractor': showAnswers
+                            && distractorKeys.includes(choice.key),
+                        'uikit-question-choices-container__mcr-checkbox--strike': !showAnswers
+                            && choiceStrikes.includes(choice.key),
+                    }"
+                >
+                    <Icon
+                        v-if="selectedChoices.includes(choice.key) || (
+                            showAnswers && answerKeys.includes(choice.key)
+                        )"
+                        class="uikit-question-choices-container__mcr-check"
+                        type="check"
+                    />
+                </div>
+                <div
+                    class="uikit-question-choices-container__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-choices-container__toggle-explanation"
+                    :class="{ 'uikit-question-choices-container__toggle-explanation--review-mode': reviewMode }"
+                    :is-dark-mode="isDarkMode"
+                    :aria-expanded="showExplanation ? 'true' : 'false'"
+                    @click.stop="toggleChoiceExplanation"
+                    @mousedown.prevent
+                >
+                    <span
+                        ref="uikit-question-choices-container__toggle-explanation-text"
+                        class="uikit-question-choices-container__toggle-explanation-text"
+                        tabindex="-1"
+                    >{{ showExplanation ? 'Hide' : 'Show' }} Explanation</span>
+                    <Icon
+                        v-breakpoint:questionEl="breakpoints"
+                        class="uikit-question-choices-container__toggle-explanation-icon"
+                        :class="{
+                            'uikit-question-choices-container__toggle-explanation-icon--up': showExplanation,
+                        }"
+                        type="accordionArrow"
+                    />
+                </PocketButton>
+                <DropdownExplanation
+                    v-if="!isMCR && showAnswers && answerKeys.includes(choice.key) && showExplanation"
+                    ref="uikit-question-choices-container__dropdown-explanation"
+                    class="uikit-question-choices-container__dropdown-explanation"
+                    :question="question"
+                    :answer-keys="answerKeys"
+                    :choice="choice"
+                    :global-metrics="globalMetrics"
+                    :show-answers="showAnswers"
+                    :is-MCR="isMCR"
+                    :show-explanation-image-long-alt="showExplanationImageLongAlt"
+                    :explanation-image-url="explanationImageUrl"
+                    :explanation-image-alt="explanationImageAlt"
+                    :explanation-image-long-alt="explanationImageLongAlt"
+                    :reference="reference"
+                    :hide-references="hideReferences"
+                    :is-dark-mode="isDarkMode"
+                    :question-el="questionEl"
+                    :breakpoints="breakpoints"
+                    @toggleDropdownExplanationImageLongAlt="toggleDropdownExplanationImageLongAlt"
+                />
+            </div>
+            <template v-if="!globalMetrics">
+                <div
+                    v-if="!showAnswers"
+                    v-breakpoint:questionEl="breakpoints"
+                    v-dark="isDarkMode"
+                    :tabindex="showAnswers ? -1 : 0"
+                    class="uikit-question-choices-container__strikethrough"
+                    aria-label="Strikethrough"
+                    role="switch"
+                    :aria-checked="choiceStrikes.includes(choice.key) ? 'true' : 'false'"
+                    :class="{
+                        'uikit-question-choices-container__strikethrough--visible': !showAnswers
+                            && [ hoverChoiceKey, focusChoiceKey ].includes(choice.key),
+                        'uikit-question-choices-container__strikethrough--active': choiceStrikes.includes(choice.key),
+                    }"
+                    @mousedown.prevent
+                    @click.stop="emitClickChoiceStrike(choice.key)"
+                    @keydown.enter.stop="emitClickChoiceStrike(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-choices-container__correct-icon"
+                    :class="{
+                        'uikit-question-choices-container__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-choices-container__incorrect-icon"
+                    :class="{
+                        'uikit-question-choices-container__incorrect-icon--mcr': isMCR,
+                    }"
+                />
+            </template>
+            <template v-else>
+                <div
+                    v-dark="isDarkMode"
+                    class="uikit-question-choices-container__choice-stats-pct"
+                >
+                    {{ choiceScores[choice.key] }} %
+                </div>
+                <div v-dark="isDarkMode" class="uikit-question-choices-container__choice-stats-bar">
+                    <div
+                        v-dark="isDarkMode"
+                        class="uikit-question-choices-container__choice-stats-bar-fill"
+                        :class="{
+                            'uikit-question-choices-container__choice-stats-bar-fill--correct': showAnswers
+                                && answerKeys.includes(choice.key),
+                            'uikit-question-choices-container__choice-stats-bar-fill--incorrect': showAnswers
+                                && distractorKeys.includes(choice.key)
+                                && selectedChoices.includes(choice.key),
+                        }"
+                        :style="{
+                            'width': `${(choiceScores[choice.key]) || 0}%`
+                        }"
+                    />
+                </div>
+            </template>
+            <div
+                v-breakpoint:questionEl="breakpoints"
+                class="uikit-question-choices-container__motivational-moment"
+                :class="{
+                    'uikit-question-choices-container__motivational-moment--mcr': isMCR,
+                    'uikit-question-choices-container__motivational-moment--explanation': showExplanation,
+                    'uikit-question-choices-container__motivational-moment--passage-and-image': question.passage
+                        || passageImageUrl,
+                }"
+            >
+                <slot
+                    name="motivationalMoment"
+                    :showAnswers="showAnswers"
+                    :answerKeys="answerKeys"
+                    :choiceKey="choice.key"
+                    :isCorrect="isCorrect"
+                />
+            </div>
+        </div>
+        <slot
+            name="showNamesTable"
+            :choiceKey="choice.key"
+        />
+    </div>
+</template>
+
+<script lang="ts">
+import { Component, Vue, Prop, Emit } from 'vue-facing-decorator'
+import type { Study } from '@pocketprep/types'
+import DropdownExplanation from './DropdownExplanation.vue'
+import Icon from '../../Icons/Icon.vue'
+import PocketButton from '../../Buttons/Button.vue'
+import { dark, breakpoint } from '../../../directives'
+import type { TBreakPointsObject, TChoice, TChoiceKey, TChoiceScores } from './../question'
+
+@Component({
+    components: {
+        Icon,
+        PocketButton,
+        DropdownExplanation,
+    },
+    directives: {
+        dark,
+        breakpoint,
+    },
+})
+export default class ChoicesContainer extends Vue {
+    @Prop() question!: Study.Class.QuestionJSON
+    @Prop({ default: [] }) choices!: TChoice[]
+    @Prop({ default: false }) showAnswers!: boolean
+    @Prop({ default: false }) showExplanation!: boolean
+    @Prop({ default: false }) isMCR!: boolean
+    @Prop({ default: false }) isUnanswered!: boolean
+    @Prop({ default: [] }) answerKeys!: TChoiceKey[]
+    @Prop({ default: null }) hoverChoiceKey!: TChoiceKey | null
+    @Prop({ default: null }) focusChoiceKey!: TChoiceKey | null
+    @Prop({ default: [] }) selectedChoices!: TChoiceKey[]
+    @Prop({ default: [] }) distractorKeys!: TChoiceKey[]
+    @Prop({ default: [] }) choiceStrikes!: TChoiceKey[]
+    @Prop() choiceScores!: TChoiceScores
+    @Prop({ default: null }) passageImageUrl!: string | null
+    @Prop({ default: false }) isCorrect!: boolean
+    @Prop({ default: null }) globalMetrics!: Study.Class.GlobalQuestionMetricJSON | null
+    @Prop({ default: false }) reviewMode!: boolean
+    @Prop({ default: false }) showExplanationImageLongAlt!: boolean
+    @Prop({ default: null }) explanationImageUrl!: string | null
+    @Prop({ default: undefined }) explanationImageAlt!: string | undefined
+    @Prop({ default: undefined }) explanationImageLongAlt!: string | undefined
+    @Prop({ default: undefined }) reference!: string | undefined
+    @Prop({ default: false }) hideReferences!: boolean
+    @Prop({ default: false }) isDarkMode!: boolean
+    @Prop({ default: null }) questionEl!: Element | null
+    @Prop({ default: {
+        'mobile': 767,
+        'tablet-portrait': 1023,
+        'tablet-landscape': 1439,
+    } }) breakpoints!: TBreakPointsObject
+
+    stripText (string?: string) {
+        return string?.replace(/<[^\s>]+[^>]*>/gi, ' ').trim()
+    }
+
+
+    @Emit('emitChoiceFocusIn')
+    emitChoiceFocusIn (choiceKey: TChoiceKey) {
+        return choiceKey
+    }
+
+    @Emit('emitChoiceFocusOut')
+    emitChoiceFocusOut (event: FocusEvent) {
+        return event
+    }
+
+    @Emit('emitChoiceMouseOver')
+    emitChoiceMouseOver (choiceKey: TChoiceKey) {
+        return choiceKey
+    }
+
+    @Emit('emitChoiceMouseLeave')
+    emitChoiceMouseLeave () {
+        return
+    }
+
+    @Emit('emitHandleTouchStart')
+    emitHandleTouchStart (event: TouchEvent) {
+        return event
+    }
+
+    @Emit('emitHandleTouchMove')
+    emitHandleTouchMove (event: TouchEvent) {
+        return event
+    }
+
+    @Emit('emitHandleTouchEnd')
+    emitHandleTouchEnd (choiceKey: TChoiceKey, event: TouchEvent) {
+        return { choiceKey, event } 
+    }
+
+    @Emit('emitSelectedChoice')
+    emitSelectedChoice (choiceKey: TChoiceKey) {
+        return choiceKey
+    }
+
+    @Emit('emitClickChoiceStrike')
+    emitClickChoiceStrike (choiceKey: TChoiceKey) {
+        return choiceKey
+    }
+
+    @Emit('toggleChoiceExplanation')
+    toggleChoiceExplanation () {
+        return 
+    }
+
+    @Emit('toggleDropdownExplanationImageLongAlt')
+    toggleDropdownExplanationImageLongAlt () {
+        return
+    }
+}
+</script>
+
+<style lang="scss">
+@import '../../../styles/colors';
+@import '../../../styles/breakpoints';
+
+.uikit-question-choices-container {
+    display: contents;
+
+    &:not(:last-child) .uikit-question-choices-container__choice-container {
+        margin-bottom: 9px;
+    }
+
+    &__choice-container {
+        display: flex;
+        align-items: center;
+        width: 100%;
+        border-radius: 6px;
+        cursor: default;
+        position: relative;
+        outline: none;
+        transition: 0.1s width ease;
+
+        &::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-choices-container__choice--big.uikit-question-choices-container__choice--tablet-portrait {
+                padding: 11px 38px 11px 17px;
+            }
+
+            .uikit-question-choices-container__choice--big.uikit-question-choices-container__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: $cadaverous;
+            color: $white;
+            border: none;
+
+            &--dark {
+                background: $jungle-green;
+            }
+        }
+
+        &--answer:not(&--selected) {
+            color: $cadaverous;
+        }
+
+        &--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;
+        }
+
+        &--tablet-portrait,
+        &--mobile {
+            display: block;
+        }
+    }
+
+    &__toggle-explanation-text {
+        outline: none;
+    }
+
+    &__toggle-explanation-icon {
+        margin-left: 5px;
+        display: none;
+
+        &--tablet-portrait {
+            display: initial;
+        }
+
+        &--up {
+            transform: rotate(180deg);
+        }
+    }
+
+    &__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: $cadaverous;
+
+            &--dark {
+                background-color: $jungle-green;
+            }
+        }
+
+        &--incorrect {
+            background-color: $pepper;
+
+            &--dark {
+                background-color: $rosa;
+            }
+        }
+    }
+
+    &__motivational-moment {
+        position: absolute;
+        right: -150px;
+        top: 20px;
+
+        &--mcr {
+            display: none;
+        }
+
+        &--passage-and-image {
+            display: none;
+        }
+
+        &--explanation {
+            display: none;
+        }
+
+        &--tablet-portrait {
+            display: none;
+        }
+    }
+
+    &__dropdown-explanation {
+        p {
+            margin: 6px 0 8pt 0;
+        }
+    }
+}
+</style>