@pocketprep/ui-kit 3.4.52 → 3.4.53

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

@@ -0,0 +1,131 @@
+<script setup lang="ts">
+import RadioButton from '../../Forms/RadioButton.vue'
+import { dark as vDark } from '../../../directives'
+
+interface Props {
+    isDarkMode: boolean
+    choices: string[]
+    labels: string[]
+    showAnswers: boolean
+    disabled: boolean
+}
+
+const props = withDefaults(defineProps<Props>(), {
+    isDarkMode: false,
+    showAnswers: false,
+    disabled: false,
+})
+
+const selectedChoice = defineModel<string>()
+
+const selectChoice = (choiceKey: string) => {
+    selectedChoice.value = choiceKey
+}
+
+const radioButtonColor = (choice: string) => {
+    if (props.showAnswers) {
+        if (choice === selectedChoice.value && selectedChoice.value?.startsWith('a')) {
+            return 'green'
+        }
+
+        if (choice === selectedChoice.value && selectedChoice.value?.startsWith('d')) {
+            return 'gray'
+        }
+
+        if (choice.startsWith('a')) {
+            return 'green'
+        }
+    }
+
+    return 'blue'
+}
+
+const stripText = (string?: string) => {
+    return string?.replace(/<[^\s>]+[^>]*>/gi, ' ').trim()
+}
+</script>
+
+<template>
+    <ul
+        v-if="choices.length"
+        class="uikit-mobile-matrix-radio-group"
+        v-dark="isDarkMode"
+        role="radiogroup"
+    >
+        <li
+            class="uikit-mobile-matrix-radio-group__option"
+            v-dark="isDarkMode"
+            role="radio"
+            v-for="(choice, index) in choices"
+            :key="choice"
+        >
+            <RadioButton
+                class="uikit-mobile-matrix-radio-group__radio-btn"
+                :selected="(choice === selectedChoice) || (showAnswers && choice.startsWith('a'))"
+                :disabled="disabled"
+                :isDarkMode="isDarkMode"
+                :color="radioButtonColor(choice)"
+                @click="!disabled && !showAnswers && selectChoice(choice)"
+            />
+            <div 
+                v-if="labels"
+                v-dark="props.isDarkMode"
+                class="uikit-mobile-matrix-radio-group__label"
+                :class="{
+                    'uikit-mobile-matrix-radio-group__label--distractor': 
+                        showAnswers && choice?.startsWith('d')
+                }"
+                @click="!disabled && !showAnswers && selectChoice(choice)"
+            >
+                {{ stripText(labels[index]) }}
+            </div>
+        </li>
+    </ul>
+</template>
+
+<style lang="scss" scoped>
+@import '../../../styles/breakpoints';
+@import '../../../styles/colors';
+
+.uikit-mobile-matrix-radio-group {
+    list-style: none;
+    margin: 0;
+    padding: 0;
+    display: block;
+    background: $white;
+    border-radius: 0px 0px 5px 5px;
+
+    &--dark {
+        background: $brand-black;
+    }
+
+    &__option {
+        display: flex;
+        align-items: center;
+        padding-left: 15px;
+        height: 47px;
+        max-width: 325px;
+        border: 0.5px solid rgba($pewter, 0.85);
+        border-top: none;
+    }
+
+
+    &__label {
+        display: block;
+        margin-left: 12px;
+        color: $brand-black;
+        font-size: 16px;
+        font-weight: 500;
+        line-height: 23px;
+        letter-spacing: -0.1px;
+
+        &--dark {
+            color: $barely-background;
+        }
+
+        &--distractor {
+            text-decoration: line-through;
+        }
+    }
+}
+</style>

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

@@ -4,17 +4,23 @@
         class="uikit-question-stats-summary"
     >
         <div v-dark="isDarkMode" class="uikit-question-stats-summary__stats-summary-total">
-            <div class="uikit-question-stats-summary__stats-summary-value">
+            <div v-if="!isMatrixQuestion" class="uikit-question-stats-summary__stats-summary-value">
                 {{ choiceScores.totalAnswered }}
             </div>
+            <div v-else class="uikit-question-stats-summary__stats-summary-value">
+                {{ matrixChoiceScores.totalAnswered }}
+            </div>
             <div v-dark="isDarkMode" class="uikit-question-stats-summary__stats-summary-label">
                 Studiers Answered
             </div>
         </div>
         <div v-dark="isDarkMode" class="uikit-question-stats-summary__stats-summary-correct">
-            <div class="uikit-question-stats-summary__stats-summary-value">
+            <div v-if="!isMatrixQuestion" class="uikit-question-stats-summary__stats-summary-value">
                 {{ Math.round((choiceScores.answeredCorrectly / choiceScores.totalAnswered) * 100) }}%
             </div>
+            <div v-else class="uikit-question-stats-summary__stats-summary-value">
+                {{ Math.round((matrixChoiceScores.answeredCorrectly / matrixChoiceScores.totalAnswered) * 100) }}%
+            </div>
             <div v-dark="isDarkMode" class="uikit-question-stats-summary__stats-summary-label">
                 Answered Correctly
             </div>
@@ -26,7 +32,7 @@
 import { Component, Vue, Prop } from 'vue-facing-decorator'
 import type { Study } from '@pocketprep/types'
 import { dark, breakpoint } from '../../../directives'
-import type { TChoiceScores } from './../question'
+import type { TChoiceScores, TMatrixChoiceScores } from './../question'
 
 
 @Component({
@@ -39,6 +45,8 @@ export default class StatsSummary extends Vue {
     @Prop({ default: null }) globalMetrics!: Study.Class.GlobalQuestionMetricJSON | null
     @Prop() choiceScores!: TChoiceScores
     @Prop({ default: false }) isDarkMode!: boolean
+    @Prop({ default: false }) isMatrixQuestion!: boolean
+    @Prop() matrixChoiceScores!: TMatrixChoiceScores
 }
 
 </script>

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

@@ -6,7 +6,7 @@
         class="uikit-question-summary"
     >
         <div class="uikit-question-summary__summary-title">
-            {{ isCorrect ? 'Correct': isUnanswered ? 'Unanswered' : 'Incorrect' }}
+            {{ isQuestionCorrect ? 'Correct': isUnanswered ? 'Unanswered' : 'Incorrect' }}
         </div>
         <PocketButton
             v-breakpoint:questionEl="breakpoints"
@@ -97,7 +97,7 @@
             </div>
         </div>
         <Icon
-            v-if="isCorrect"
+            v-if="isQuestionCorrect"
             v-dark="isDarkMode"
             type="correct"
             class="uikit-question-summary__summary-correct-icon"
@@ -139,9 +139,11 @@ export default class Summary extends Vue {
     @Prop({ default: undefined }) reference!: string | undefined
     @Prop({ default: false }) hideReferences!: boolean
     @Prop({ default: false }) isCorrect!: boolean
+    @Prop({ default: false }) isMatrixQuestionCorrect!: boolean
     @Prop({ default: false }) isUnanswered!: boolean
     @Prop({ default: false }) reviewMode!: boolean
     @Prop({ default: false }) isDarkMode!: boolean
+    @Prop({ default: false }) isMatrixQuestion!: boolean
     @Prop({ default: null }) questionEl!: Element | null
     @Prop({ default: {
         'mobile': 767,
@@ -149,6 +151,10 @@ export default class Summary extends Vue {
         'tablet-landscape': 1439,
     } }) breakpoints!: TBreakPointsObject
 
+    get isQuestionCorrect () {
+        return (!this.isMatrixQuestion && this.isCorrect) || (this.isMatrixQuestion && this.isMatrixQuestionCorrect)
+    }
+
     @Emit('toggleSummaryExplanation')
     toggleSummaryExplanation () {
         return
@@ -186,6 +192,7 @@ export default class Summary extends Vue {
         display: inline-block;
     }
 
+
     &__summary-title {
         font-weight: 600;
         font-size: 15.5px;

package/lib/components/Quiz/Question.vue

@@ -123,7 +123,7 @@
                         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)
+                    'uikit-question__choices--no-actions': !(isMCR || isUnanswered || isMatrixQuestion)
                         && !globalMetrics
                         && (
                             reviewMode
@@ -152,6 +152,7 @@
                     />
                 </div>
                 <ChoicesContainer
+                    v-if="question.type !== 'Matrix Checkbox' && question.type !== 'Matrix Radio Button'"
                     ref="uikit-question__choices-container"
                     :question="question"
                     :choices="choices"
@@ -216,10 +217,88 @@
                         />
                     </template>
                 </ChoicesContainer>
+                <MatrixChoicesContainer
+                    v-if="question.type === 'Matrix Checkbox' || question.type === 'Matrix Radio Button'"
+                    class="uikit-question__matrix-choices-container"
+                    ref="uikit-question__matrix-choices-container"
+                    v-breakpoint:questionEl="breakpoints"
+                    :question="question"
+                    :matrix-choice-layout="question.matrixChoiceLayout"
+                    :is-matrix-question-correct="isMatrixQuestionCorrect"
+                    :matrix-answer-keys="matrixAnswerKeys"
+                    :matrix-distractor-keys="matrixDistractorKeys"
+                    :selected-matrix-choices="selectedMatrixChoices"
+                    :show-matrix-answers="showMatrixAnswers"
+                    :review-mode="reviewMode"
+                    :matrix-choice-scores="matrixChoiceScores"
+                    :global-metrics="globalMetrics"
+                    :is-dark-mode="isDarkMode"
+                    :question-el="questionEl"
+                    :breakpoints="breakpoints"
+                    @emitSelectedMatrixChoice="selectMatrixChoice"
+                    @emitAnsweredMatrixRowIndex="answeredMatrixRowIndex"
+                > 
+                    <template #motivationalMoment="{
+                        isCorrect,
+                        choiceKey,
+                        showAnswers,
+                        answerKeys,
+                    }">
+                        <slot 
+                            name="motivationalMoment"
+                            :showAnswers="showAnswers"
+                            :answerKeys="answerKeys"
+                            :choiceKey="choiceKey"
+                            :isCorrect="isCorrect"
+                        />
+                    </template>
+                    <template #showNamesTable="{
+                        choiceKey,
+                    }" >
+                        <slot 
+                            name="showNamesTable"
+                            :choiceKey="choiceKey"
+                        />
+                    </template>
+                </MatrixChoicesContainer>
+                <MobileMatrixChoicesContainer
+                    v-if="question.type === 'Matrix Checkbox' || question.type === 'Matrix Radio Button'"
+                    class="uikit-question__mobile-matrix-choices-container"
+                    v-breakpoint:questionEl="breakpoints"
+                    :question="question"
+                    :matrix-choice-layout="question.matrixChoiceLayout"
+                    :is-matrix-question-correct="isMatrixQuestionCorrect"
+                    :matrix-answer-keys="matrixAnswerKeys"
+                    :matrix-distractor-keys="matrixDistractorKeys"
+                    :selected-matrix-choices="selectedMatrixChoices"
+                    :show-matrix-answers="showMatrixAnswers"
+                    :review-mode="reviewMode"
+                    :global-metrics="globalMetrics"
+                    :is-dark-mode="isDarkMode"
+                    :question-el="questionEl"
+                    :breakpoints="breakpoints"
+                    @emitSelectedMatrixChoice="selectMatrixChoice"
+                    @emitAnsweredMatrixRowIndex="answeredMatrixRowIndex"
+                > 
+                    <template #motivationalMoment="{
+                        isCorrect,
+                        choiceKey,
+                        showAnswers,
+                        answerKeys,
+                    }">
+                        <slot 
+                            name="motivationalMoment"
+                            :showAnswers="showAnswers"
+                            :answerKeys="answerKeys"
+                            :choiceKey="choiceKey"
+                            :isCorrect="isCorrect"
+                        />
+                    </template>
+                </MobileMatrixChoicesContainer>
                 <slot name="unansweredFlaggedNamesTable" />
             </div>
             <Summary
-                v-if="isMCR && showAnswers && !showPaywall"
+                v-if="((isMCR && showAnswers) || (isMatrixQuestion && showMatrixAnswers)) && !showPaywall"
                 ref="uikit-question__summary"
                 class="uikit-question__summary"
                 :question="question"
@@ -231,6 +310,8 @@
                 :reference="reference"
                 :hide-references="hideReferences"
                 :is-correct="isCorrect"
+                :is-matrix-question-correct="isMatrixQuestionCorrect"
+                :is-matrix-question="isMatrixQuestion"
                 :is-unanswered="isUnanswered"
                 :review-mode="reviewMode"
                 :is-dark-mode="isDarkMode"
@@ -245,6 +326,8 @@
                     class="uikit-question__stats-summary"
                     :global-metrics="globalMetrics"
                     :choice-scores="choiceScores"
+                    :matrix-choice-scores="matrixChoiceScores"
+                    :is-matrix-question="isMatrixQuestion"
                     :is-dark-mode="isDarkMode"
                 />
             </slot>
@@ -277,13 +360,21 @@
             >
                 <slot name="action">
                     <PocketButton
-                        v-if="!showAnswers && !hideAnswer && (showCheckAnswer || isMCR)"
+                        v-if="!showAnswers && !hideAnswer && (showCheckAnswer || isMCR) && !isMatrixQuestion"
                         :disabled="!selectedChoices.length"
                         :is-dark-mode="isDarkMode"
                         @click="clickCheckAnswer"
                     >
                         Check Answer
                     </PocketButton>
+                    <PocketButton
+                        v-if="!showMatrixAnswers && !hideAnswer && isMatrixQuestion && allMatrixRowsAreAnswered"
+                        :disabled="!selectedMatrixChoices.length"
+                        :is-dark-mode="isDarkMode"
+                        @click="clickCheckMatrixAnswer"
+                    >
+                        Check Answer
+                    </PocketButton>
                     <PocketButton
                         v-else-if="(showAnswers || hideAnswer) && (questionNumber >= quizLength)"
                         :is-dark-mode="isDarkMode"
@@ -376,10 +467,22 @@ import ChoicesContainer from '../Quiz/Question/ChoicesContainer.vue'
 import StatsSummary from '../Quiz/Question/StatsSummary.vue'
 import Explanation from '../Quiz/Question/Explanation.vue'
 import PassageAndImage from '../Quiz/Question/PassageAndImage.vue'
+import MatrixChoicesContainer from '../Quiz/Question/MatrixChoicesContainer.vue'
+import MobileMatrixChoicesContainer from '../Quiz/Question/MobileMatrixChoicesContainer.vue'
 import type { Study } from '@pocketprep/types'
 import { breakpoint, dark } from '../../directives'
 import { highlightKeywordsInText, studyModes } from '../../utils'
-import type { Ref, TQuizMode, TChoiceKey, TChoice, TChoiceScores, TNamesRow, TViewNames } from './question'
+import type { 
+    Ref,
+    TQuizMode,
+    TChoiceKey,
+    TMatrixChoiceKey,
+    TChoice,
+    TChoiceScores,
+    TMatrixChoiceScores,
+    TNamesRow,
+    TViewNames,
+} from './question'
 
 @Component({
     components: {
@@ -396,6 +499,8 @@ import type { Ref, TQuizMode, TChoiceKey, TChoice, TChoiceScores, TNamesRow, TVi
         StatsSummary,
         Explanation,
         PassageAndImage,
+        MatrixChoicesContainer,
+        MobileMatrixChoicesContainer,
     },
     directives: {
         breakpoint,
@@ -414,6 +519,7 @@ export default class Question extends Vue {
     @Prop({ default: true }) showNextQuestion!: boolean
     @Prop({ default: false }) reviewMode!: boolean
     @Prop({ default: null }) previousChoices!: TChoiceKey[] | null
+    @Prop({ default: null }) previousMatrixChoices!: TMatrixChoiceKey[] | null
     @Prop({ default: null }) globalMetrics!: Study.Class.GlobalQuestionMetricJSON | null
     @Prop({ default: null }) showNames!: TViewNames | null
     @Prop({ default: true }) allowKeyboardShortcuts!: boolean
@@ -432,7 +538,11 @@ export default class Question extends Vue {
     focusChoiceKey: TChoiceKey | null = null
     choiceStrikes: TChoiceKey[] = []
     selectedChoices: TChoiceKey[] = []
+    selectedMatrixChoices: TMatrixChoiceKey[] = []
+    answeredMatrixRowIndexes: number[] = []
+    allMatrixRowsAreAnswered = false
     showAnswers = false
+    showMatrixAnswers = false
     showExplanation = false
     showPassageImageLongAlt = false
     showExplanationImageDropdown = false
@@ -488,6 +598,10 @@ export default class Question extends Vue {
         return this.question.type === 'Multiple Correct Response'
     }
 
+    get isMatrixQuestion () {
+        return this.question.type === 'Matrix Checkbox' || this.question.type === 'Matrix Radio Button'
+    }
+
     get passageImageUrl () {
         const imageUrl = this.question.passageImage?.url
         
@@ -522,11 +636,13 @@ export default class Question extends Vue {
 
     get passageAndImageTitle () {
         if (this.question.passage && this.passageImageUrl) {
-            return 'Passage + Image'
+            return this.question.passageLabel ? `${this.question.passageLabel} + Image` :
+                'Passage + Image'
         } else if (!this.question.passage && this.passageImageUrl) {
             return 'Image'
         } else {
-            return 'Passage'
+            return this.question.passageLabel ? `${this.question.passageLabel}` :
+                'Passage'
         }
     }
 
@@ -547,6 +663,20 @@ export default class Question extends Vue {
         return this.answers.map(choice => choice.key)
     }
 
+    get matrixAnswerKeys () {
+        if (this.question?.matrixChoiceLayout) {
+            return this.question?.matrixChoiceLayout.flat().filter(choice => choice.startsWith('a'))
+        }
+        return []
+    }
+
+    get matrixDistractorKeys () {
+        if (this.question?.matrixChoiceLayout) {
+            return this.question?.matrixChoiceLayout.flat().filter(choice => choice.startsWith('d'))
+        }
+        return []
+    }
+
     get distractors (): TChoice[] {
         const distractors = this.question.choices.filter(choice => !choice.isCorrect).map((choice, index) => ({
             text: choice.text,
@@ -574,6 +704,12 @@ export default class Question extends Vue {
             && !this.selectedChoices.join(' ').includes('d')
     }
 
+    get isMatrixQuestionCorrect () {
+        return this.showMatrixAnswers
+            && this.selectedMatrixChoices.length === this.matrixAnswerKeys.length
+            && !this.selectedMatrixChoices.join(' ').includes('d')
+    }
+
     get choiceScores (): TChoiceScores {
         const globalMetrics = this.globalMetrics
 
@@ -608,8 +744,32 @@ export default class Question extends Vue {
         return scores
     }
 
+    get matrixChoiceScores (): TMatrixChoiceScores {
+        const globalMetrics = this.globalMetrics
+
+        const scores: TMatrixChoiceScores = {
+            totalAnswered: this.selectedMatrixChoices.length && 
+                this.showMatrixAnswers && !this.reviewMode ? 1 : 0,
+            answeredCorrectly: this.isCorrect && !this.reviewMode ? 1 : 0,
+        }
+
+        if (!globalMetrics) {
+            return scores
+        }
+
+        scores.totalAnswered += (
+            (globalMetrics.answeredCorrectlyCount || 0)
+            + (globalMetrics.answeredIncorrectlyCount || 0)
+        )
+        scores.answeredCorrectly += (globalMetrics.answeredCorrectlyCount || 0)
+        return scores
+    }
+
     get isUnanswered () {
-        return this.selectedChoices.length === 0
+        if (!this.isMatrixQuestion) {
+            return this.selectedChoices.length === 0
+        }
+        return this.selectedMatrixChoices.length === 0
     }
 
     get prompt () {
@@ -626,12 +786,17 @@ export default class Question extends Vue {
             this.startReviewMode()
         }
 
-        if (this.previousChoices) {
+        if (!this.isMatrixQuestion && this.previousChoices) {
             this.updateSelectedChoices(this.previousChoices)
         }
 
+        if (this.isMatrixQuestion && this.previousMatrixChoices) {
+            this.updateSelectedMatrixChoices(this.previousMatrixChoices)
+        }
+
         if (this.initialShowAnswers) {
             this.showAnswers = this.initialShowAnswers
+            this.showMatrixAnswers = this.initialShowAnswers
         }
 
         if (this.allowKeyboardShortcuts) {
@@ -750,21 +915,33 @@ export default class Question extends Vue {
     }
 
     startReviewMode () {
-        this.showAnswers = true
-        this.showExplanation = this.defaultShowExplanation === null ? true : this.defaultShowExplanation
-        this.selectedChoices = this.answerKeys
+        if (!this.isMatrixQuestion) {
+            this.showAnswers = true
+            this.showExplanation = this.defaultShowExplanation === null ? true : this.defaultShowExplanation
+            this.selectedChoices = this.answerKeys
+        } else {
+            this.showMatrixAnswers = true
+            this.showExplanation = this.defaultShowExplanation === null ? true : this.defaultShowExplanation
+            this.selectedMatrixChoices = this.matrixAnswerKeys as TMatrixChoiceKey[]
+        }
     }
 
     stopReviewMode () {
         this.showAnswers = false
+        this.showMatrixAnswers = false
         this.showExplanation = false
         this.selectedChoices = []
+        this.selectedMatrixChoices = []
     }
 
     updateSelectedChoices (choices: TChoiceKey[]) {
         this.selectedChoices = [ ...choices ]
     }
 
+    updateSelectedMatrixChoices (matrixChoices: TMatrixChoiceKey[]) {
+        this.selectedMatrixChoices = [ ...matrixChoices ]
+    }
+
     // 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) => {
@@ -936,6 +1113,21 @@ export default class Question extends Vue {
         }
     }
 
+    selectMatrixChoice (matrixChoiceKeys: TMatrixChoiceKey[]) {
+        if (this.showMatrixAnswers) {
+            return
+        }
+        this.selectedMatrixChoices = matrixChoiceKeys
+    }
+
+    answeredMatrixRowIndex (answeredRowIndexes: number[]) {
+        if (this.showMatrixAnswers) {
+            return
+        }
+        this.answeredMatrixRowIndexes = answeredRowIndexes
+        this.allMatrixRowsAreAnswered = this.answeredMatrixRowIndexes.length === this.question.matrixLabels?.rows.length
+    }
+
     togglePassageImageLongAlt () {
         this.showPassageImageLongAlt = !this.showPassageImageLongAlt
 
@@ -1080,6 +1272,29 @@ export default class Question extends Vue {
         }
     }
 
+    clickCheckMatrixAnswer () {
+        if (!this.hideAnswer) {
+            this.showMatrixAnswers = true
+
+            this.emitCheckAnswer({
+                isCorrect: this.isMatrixQuestionCorrect,
+                selectedChoices: this.selectedMatrixChoices,
+                questionSerial: this.question.serial,
+            })
+
+            setTimeout(() => {
+                const summaryMatrixComp = 
+                    this.$refs['uikit-question__summary'] as ComponentPublicInstance | undefined
+                const summaryMatrixExplanation = 
+                    // eslint-disable-next-line max-len
+                    summaryMatrixComp?.$refs['uikit-question-summary__summary-toggle-explanation-text'] as HTMLElement | undefined
+                if (summaryMatrixExplanation) {
+                    summaryMatrixExplanation?.focus()
+                }
+            }, 500)
+        }
+    }
+
     mappedNameRows (choiceKey: string) {
         /*
             There is a specific order in which we have to fill the rows in the table for visible names.
@@ -1140,6 +1355,11 @@ export default class Question extends Vue {
         this.updateSelectedChoices(choices)
     }
 
+    @Watch('previousMatrixChoices', { deep: true })
+    previousMatrixChoicesChanged (matrixChoice: TMatrixChoiceKey[]) {
+        this.updateSelectedMatrixChoices(matrixChoice)
+    }
+
     @Emit('selectedChoices')
     emitSelectedChoices (selectedChoices: Study.Cloud.IQuizAnswer) {
         return selectedChoices
@@ -1155,6 +1375,16 @@ export default class Question extends Vue {
         } as Study.Cloud.IQuizAnswer)
     }
 
+    @Watch('selectedMatrixChoices', { deep: true })
+    selectedMatrixChoicesChanged () {
+        this.emitSelectedChoices({
+            isCorrect: this.selectedMatrixChoices.length === this.matrixAnswerKeys.length
+                && !this.selectedMatrixChoices.join(' ').includes('d'),
+            selectedChoices: this.selectedMatrixChoices,
+            questionSerial: this.question.serial,
+        } as Study.Cloud.IQuizAnswer)
+    }
+
     @Watch('showExplanation')
     showExplanationChanged () {
         this.emitUpdateShowExplanation()
@@ -1637,5 +1867,16 @@ export default class Question extends Vue {
             margin-top: 24px;
         }
     }
+
+    &__matrix-choices-container {
+        display: block;
+        @include breakpoint(black-bear) {
+            display: none;
+        }
+    }
+
+    &__mobile-matrix-choices-container {
+        display: block;
+    }
 }
 </style>