@pocketprep/ui-kit 3.0.20 → 3.0.22

package/lib/components/Quiz/Question.vue

@@ -279,288 +279,372 @@
                 <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)"
+                    class="uikit-question__choices-container"
                 >
                     <div
-                        v-if="!reviewMode"
-                        v-breakpoint:questionEl="breakpoints"
+                        ref="choices"
                         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
+                        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-letter--incorrect': showAnswers
+                            'uikit-question__choice-container--incorrect': !isMCR && 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 && (
+                            'uikit-question__choice-container--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,
                         }"
+                        @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="isMCR"
+                            v-if="!reviewMode"
+                            v-breakpoint:questionEl="breakpoints"
                             v-dark="isDarkMode"
-                            class="uikit-question__mcr-checkbox"
-                            :class="{
-                                'uikit-question__mcr-checkbox--selected': selectedChoices.includes(choice.key),
-                                'uikit-question__mcr-checkbox--answer': showAnswers
+                            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__mcr-checkbox--distractor': showAnswers
+                                'uikit-question__choice-letter--incorrect': showAnswers
+                                    && selectedChoices.includes(choice.key)
                                     && distractorKeys.includes(choice.key),
-                                'uikit-question__mcr-checkbox--strike': !showAnswers
-                                    && choiceStrikes.includes(choice.key),
+                                'uikit-question__choice-letter--big': !globalMetrics && (showAnswers
+                                    ? answerKeys.includes(choice.key)
+                                    : selectedChoices.includes(choice.key)),
                             }"
                         >
-                            <Icon
-                                v-if="selectedChoices.includes(choice.key) || (
-                                    showAnswers && answerKeys.includes(choice.key)
-                                )"
-                                class="uikit-question__mcr-check"
-                                type="check"
-                            />
+                            {{ String.fromCharCode(index + 65) }}
                         </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"
+                            :ref="`choice-${choice.key}`"
+                            v-dark="isDarkMode"
                             v-breakpoint:questionEl="breakpoints"
-                            class="uikit-question__dropdown-explanation"
+                            class="uikit-question__choice"
                             :class="{
-                                'uikit-question__dropdown-explanation--show-stats': globalMetrics
+                                '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__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.`"
+                                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="explanationImageLongAlt"
+                                v-if="!isMCR && showAnswers && answerKeys.includes(choice.key)"
                                 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,
-                                }"
+                                class="uikit-question__toggle-explanation"
+                                :class="{ 'uikit-question__toggle-explanation--review-mode': reviewMode }"
                                 :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>
+                                <span
+                                    ref="uikit-question__toggle-explanation-text"
+                                    class="uikit-question__toggle-explanation-text"
+                                    tabindex="-1"
+                                >{{ showExplanation ? 'Hide' : 'Show' }} Explanation</span>
                                 <Icon
-                                    class="uikit-question__toggle-dropdown-explanation-img-description-icon"
+                                    v-breakpoint:questionEl="breakpoints"
+                                    class="uikit-question__toggle-explanation-icon"
                                     :class="{
-                                        'uikit-question__toggle-dropdown-explanation-img-description-icon--up':
-                                            showExplanationImageLongAlt,
+                                        'uikit-question__toggle-explanation-icon--up': showExplanation,
                                     }"
                                     type="accordionArrow"
                                 />
                             </PocketButton>
                             <div
-                                v-if="showExplanationImageLongAlt"
-                                ref="uikit-question__dropdown-explanation-img-description"
-                                v-dark="isDarkMode"
+                                v-if="!isMCR && showAnswers && answerKeys.includes(choice.key) && showExplanation"
                                 v-breakpoint:questionEl="breakpoints"
-                                class="uikit-question__dropdown-explanation-img-description"
-                                tabindex="-1"
-                                v-html="explanationImageLongAlt"
-                            />
+                                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="question.reference && !hideReferences"
+                                v-if="!showAnswers"
+                                v-breakpoint:questionEl="breakpoints"
                                 v-dark="isDarkMode"
-                                class="uikit-question__dropdown-reference"
+                                :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)"
                             >
-                                <span class="uikit-question__dropdown-reference-label">Reference: </span>
-                                <div v-html="question.reference" />
+                                <Icon type="strike" />
                             </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)
+                            <Icon
+                                v-if="!isMCR
+                                    && showAnswers
                                     && 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
+                                    && (isCorrect || isUnanswered)
+                                "
                                 v-dark="isDarkMode"
-                                class="uikit-question__choice-stats-bar-fill"
+                                type="correct"
+                                class="uikit-question__correct-icon"
                                 :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),
+                                    'uikit-question__correct-icon--review-mode': reviewMode,
                                 }"
-                                :style="{
-                                    'width': `${(choiceScores[choice.key]) || 0}%`
+                            />
+                            <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,
                                 }"
                             />
-                        </div>
-                    </template>
-                </div>
+                        </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
+                        v-if="showNames && Object.entries(showNames).length > 0"
+                    >
+                        <Table
+                            :key="`uikit-question__view-names-table--${choice.key}`"
+                            class="uikit-question__view-names-table"
+                            :show-header="false"
+                            :rows="mappedNameRows(choice.key) || []"
+                            :columns="showNamesColumns"
+                            :table-column-styles="{
+                                maxWidth: '146px',
+                                maxHeight: '54px',
+                                minHeight: '50px',
+                            }"
+                            :table-cell-styles="{
+                                display: 'flex',
+                                position: 'relative',
+                                border: 'none',
+                            }"
+                            :table-row-styles="{
+                                border: 'none',
+                                padding: '0px',
+                            }"
+                        >
+                            <template #tableColumnLabels>
+                                <div />
+                            </template>
+                            <template #tableCellValue="{ row, column }">
+                                <template v-if="(column.propName === 'nameOne')">
+                                    <Icon
+                                        v-if="row.isFlaggedByNameOne"
+                                        type="flagContent"
+                                        class="uikit-question__flag-icon"
+                                    />
+                                    <div
+                                        v-else
+                                        class="uikit-question__icon-space"
+                                    />
+                                    <OverflowTooltip
+                                        class="uikit-question__view-names-name"
+                                    >
+                                        {{ row.nameOne }}
+                                    </OverflowTooltip>
+                                </template>
+                                <template v-if="(column.propName === 'nameTwo' && row.nameTwo)">
+                                    <Icon
+                                        v-if="row.isFlaggedByNameTwo"
+                                        type="flagContent"
+                                        class="uikit-question__flag-icon"
+                                    />
+                                    <div
+                                        v-else
+                                        class="uikit-question__icon-space"
+                                    />
+                                    <OverflowTooltip>
+                                        <div class="uikit-question__view-names-name">
+                                            {{ row.nameTwo }}
+                                        </div>
+                                    </OverflowTooltip>
+                                </template>
+                                <template v-if="(column.propName === 'nameThree' && row.nameThree)">
+                                    <Icon
+                                        v-if="row.isFlaggedByNameThree"
+                                        type="flagContent"
+                                        class="uikit-question__flag-icon"
+                                    />
+                                    <div
+                                        v-else
+                                        class="uikit-question__icon-space"
+                                    />
+                                    <OverflowTooltip>
+                                        <div class="uikit-question__view-names-name">
+                                            {{ row.nameThree }}
+                                        </div>
+                                    </OverflowTooltip>
+                                </template>
+                            </template>
+                        </Table>
+                    </div>
+                </div>         
             </div>
             <div
                 v-if="isMCR && showAnswers && !showPaywall"
@@ -671,27 +755,29 @@
                     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) }}%
+            <slot name="metricsTiles">
+                <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-label">
-                        Answered Correctly
+                    <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>
+            </slot>
             <div
                 v-if="!reviewMode"
                 v-breakpoint:questionEl="breakpoints"
@@ -885,7 +971,7 @@
                     <Icon type="close" />
                 </div>
             </div>
-        </div>
+        </div> 
     </div>
 </template>
 
@@ -893,6 +979,9 @@
 import { Component, Vue, Prop, Watch, Emit } from 'vue-facing-decorator'
 import PocketButton from '../Buttons/Button.vue'
 import Icon from '../Icons/Icon.vue'
+import type { ITableColumn, ITableSortSettings } from '../Tables/table'
+import Table from '../Tables/Table.vue'
+import OverflowTooltip from '../Tooltips/OverflowTooltip.vue'
 import type { Study } from '@pocketprep/types'
 import { breakpoint, dark } from '../../directives'
 import { studyModes } from '../../utils'
@@ -907,11 +996,30 @@ type TChoiceScores = Partial<Record<TChoiceKey, number>> & {
 }
 type TQuizMode = 'qotd' | 'quick10' | 'timed' | 'weakest' | 'missed' | 'custom'
 type Ref = HTMLElement | null
+type TNamesRow = {
+    id: string
+    nameOne: string
+    isFlaggedByNameOne: boolean
+    nameTwo?: string
+    isFlaggedByNameTwo?: boolean
+    nameThree?: string
+    isFlaggedByNameThree?: boolean
+}
+
+type TViewNames = {
+    [ key: string ]: {
+        id: string
+        name: string
+        isFlaggedByStudent: boolean
+    }[]
+}
 
 @Component({
     components: {
         PocketButton,
         Icon,
+        Table,
+        OverflowTooltip,
     },
     directives: {
         breakpoint,
@@ -931,6 +1039,7 @@ export default class Question extends Vue {
     @Prop({ default: false }) reviewMode!: boolean
     @Prop({ default: null }) previousChoices!: TChoiceKey[] | null
     @Prop({ default: null }) globalMetrics!: Study.Class.GlobalQuestionMetricJSON | null
+    @Prop({ default: null }) showNames!: TViewNames | null
     @Prop({ default: true }) allowKeyboardShortcuts!: boolean
     @Prop({ default: null }) containerEl!: Element | null
     @Prop({ default: false }) isDarkMode!: boolean
@@ -957,6 +1066,21 @@ export default class Question extends Vue {
         y: number | null
     } = { x: null, y: null }
 
+    sortSettings: ITableSortSettings | null = null
+    showNamesColumns: ITableColumn[] = [{
+        name: '',
+        propName: 'nameOne',
+        isSortDisabled: true,
+    }, {
+        name: '',
+        propName: 'nameTwo',
+        isSortDisabled: true,
+    }, {
+        name: '',
+        propName: 'nameThree',
+        isSortDisabled: true,
+    }]
+
     get paywallImages () {
         return {
             light: PaywallImageLight,
@@ -1120,7 +1244,8 @@ export default class Question extends Vue {
             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
+            // In case we have NaN here when nobody answered the question and nobody got it right
+            scores[key] = answerPct || 0
         })
 
         return scores
@@ -1155,6 +1280,10 @@ export default class Question extends Vue {
                 contextEl?.focus()
             }, 0)
         }
+        this.sortSettings = {
+            column: this.showNamesColumns[0] || null,
+            direction: 1,
+        }
     }
 
     beforeUnmount () {
@@ -1489,9 +1618,50 @@ export default class Question extends Vue {
         }
     }
 
-    @Emit('selectedChoices')
-    emitSelectedChoices (selectedChoices: Study.Cloud.IQuizAnswer) {
-        return selectedChoices
+    mappedNameRows (choiceKey: string) {
+        /*
+            There is a specific order in which we have to fill the rows in the table for visible names.
+            Here are the rules for filling the names in:
+            
+            1. The first two names go in the first column
+            2. The third and fourth names go in the second column
+            3. Any subsequent names fill out the first two rows
+            4. Any additional names after those fill out the last row
+            5. Alphabetical by col
+            6. Names truncate when they don't fit the width of the table cell
+        */
+        const rows: TNamesRow[] = []
+        const students = this.showNames && this.showNames[choiceKey] || []
+        if (students.length) {
+            // Row length is dynamic depending on how many students we have
+            const rowLength =  students.length < 3 ? 1 :
+                students.length >= 3 && students.length < 5 ? 2 : 
+                    3
+            for (let i = 0; i < students.length; i += rowLength) {
+                const row = students.slice(i, i + rowLength).reduce((acc, student) => {
+                    if (!acc.id) {
+                        // Need a unique ID for the row
+                        acc.id = student.id
+                    }
+                    if (!acc.nameOne && !acc.isFlaggedByNameOne) {
+                        // Does our row have a nameOne filled in?
+                        acc.nameOne = student.name
+                        acc.isFlaggedByNameOne = student.isFlaggedByStudent
+                    } else if (!acc.nameTwo && !acc.isFlaggedByNameTwo) {
+                        // Does our row have a nameTwo filled in?
+                        acc.nameTwo = student.name
+                        acc.isFlaggedByNameTwo = student.isFlaggedByStudent
+                    } else if (!acc.nameThree && !acc.isFlaggedByNameThree) {
+                        // Does our row have a nameThree filled in?
+                        acc.nameThree = student.name
+                        acc.isFlaggedByNameThree = student.isFlaggedByStudent
+                    }
+                    return acc
+                }, {} as TNamesRow)
+                rows.push(row)
+            }
+        }
+        return rows
     }
 
     @Watch('reviewMode')
@@ -1508,6 +1678,11 @@ export default class Question extends Vue {
         this.updateSelectedChoices(choices)
     }
 
+    @Emit('selectedChoices')
+    emitSelectedChoices (selectedChoices: Study.Cloud.IQuizAnswer) {
+        return selectedChoices
+    }
+
     @Watch('selectedChoices', { deep: true })
     selectedChoicesChanged () {
         this.emitSelectedChoices({
@@ -2371,19 +2546,23 @@ export default class Question extends Vue {
         }
     }
 
+    &__choices-container {
+        width: 100%;
+
+        &:not(:last-child) {
+            margin-bottom: 9px;
+        }
+    }
+
     &__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;
-        }
+        position: relative;
+        outline: none;
+        transition: 0.1s width ease;
 
         &::after {
             content: '';
@@ -2500,6 +2679,33 @@ export default class Question extends Vue {
         }
     }
 
+    &__view-names-table {
+        background-color: $gray-background;
+        min-height: 50px;
+        padding: 15px 0 15px 14px;
+    }
+
+    &__flag-icon {
+        padding: 3px 0 0 0;
+        margin: 0 4px 0 3px;
+        color: $steel;
+    }
+
+    &__icon-space {
+        min-width: 17px;
+        height: 0;
+    }
+
+    &__view-names-name {
+        color: $ash;
+        font-size: 13px;
+        line-height: 18px;
+        text-overflow: ellipsis;
+        overflow: hidden;
+        white-space: nowrap;
+        max-width: 129px;
+    }
+
     &__choice-letter {
         position: absolute;
         left: -26px;
@@ -3165,6 +3371,7 @@ export default class Question extends Vue {
         color: $ash;
         font-size: 13px;
         line-height: 16px;
+        text-align: center;
 
         &--dark {
             color: $white;