@pocketprep/ui-kit 3.4.51 → 3.4.53

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) {
@@ -739,29 +904,44 @@ export default class Question extends Vue {
         if (target.classList.contains('keyword-highlight')) {
             const keyword = target.innerHTML
             const location = target.getAttribute('data-location')
+            const clickLocation = { x: event.clientX, y: event.clientY }
             return {
                 keyword,
                 location,
+                clickLocation,
+                target,
             }
         }
     }
 
     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) => {
@@ -933,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
 
@@ -1077,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.
@@ -1137,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
@@ -1152,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()
@@ -1311,13 +1544,80 @@ export default class Question extends Vue {
         }
     }
 
+    .keyword-highlight--dark.keyword-highlight--active {
+        height: 22px;
+        background-color: rgba($banana-bread, 0.4);
+        border-bottom: none;
+        border-radius: 2px;
+
+        &[data-location="explanation"] {
+            height: 20px;
+            background-color: rgba($banana-bread, 0.4);
+        }
+    }
+
     .keyword-highlight {
-        text-decoration: underline;
-        text-decoration-color: $brand-blue;
+        box-sizing: border-box;
+        background-color: rgba($banana-bread, 0.25);
+        border-radius: 2px 2px 0 0;
+        border-bottom: 1.5px solid $banana-bread;
+        height: 21px;
+        line-height: 22px;
+        padding: 0 2px 0 1px;
+        margin: 0 -2px 0 -1px;
         cursor: pointer;
+        
+        &[data-location="explanation"] {
+            height: 20px;
+            line-height: 21px;
+            background-color: $manilla;
+            border-radius: 1px 1px 0 0;
+        }
+
+        &:hover:not(&--active) {
+            background-color: rgba($banana-bread, 0.4);
+            border-color: $butterscotch;
+
+            &[data-location="explanation"] {
+                background-color: $buttermilk;
+                border-radius: 2px 2px 0 0;
+            }
+        }
+
+        &--active {
+            height: 22px;
+            line-height: 23px;
+            background-color: $beach-sand;
+            border-bottom: none;
+            border-radius: 2px;
+
+            &[data-location="explanation"] {
+                height: 20px;
+                line-height: 21px;
+                background-color: $beach-sand;
+                border-radius: 2px;
+            }
+        }
 
         &--dark {
-            text-decoration-color: $banana-bread;
+            color: $white;
+            background-color: rgba($banana-bread, 0.3);
+            border-color: rgba($banana-bread, 0.6);
+
+            &[data-location="explanation"] {
+                background-color: rgba($banana-bread, 0.3);
+                border-color: rgba($banana-bread, 0.6);
+            }
+
+            &:hover:not(&--active) {
+                background-color: rgba($banana-bread, 0.4);
+                border-color: rgba($banana-bread, 0.8);
+
+                &[data-location="explanation"] {
+                    background-color: rgba($banana-bread, 0.4);
+                    border-color: rgba($banana-bread, 0.8);
+                }
+            }
         }
     }
 
@@ -1567,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>

package/lib/components/Quiz/QuizContainer.vue

@@ -8,6 +8,7 @@
         <div
             v-breakpoint:quizContainerEl
             class="uikit-quiz-container__header"
+            :class="{'uikit-quiz-container__header--dark': isDarkMode}"
             :style="customHeaderStyles"
         >
             <slot name="header" />
@@ -19,6 +20,7 @@
                 v-dark="isDarkMode"
                 class="uikit-quiz-container__side"
             >
+                <slot name="definition"></slot>
                 <slot name="side" />
             </div>
             <div
@@ -35,6 +37,7 @@
         <div
             v-breakpoint:quizContainerEl
             class="uikit-quiz-container__footer"
+            :class="{'uikit-quiz-container__footer--dark': isDarkMode}"
             :style="customFooterStyles"
         >
             <slot name="footer" />
@@ -117,6 +120,8 @@ export default class QuizContainer extends Vue {
         width: 100%;
         height: 65px;
         color: $white;
+        background-color: $brand-black;
+        z-index: 4;
         position: relative;
 
         &--mobile {
@@ -124,6 +129,10 @@ export default class QuizContainer extends Vue {
             padding: 0 10px;
             box-sizing: border-box;
         }
+
+        &--dark {
+            background-color: $jet;
+        }
     }
 
     &__main {
@@ -143,7 +152,6 @@ export default class QuizContainer extends Vue {
         height: 100%;
         margin-right: 23px;
         border-radius: 6px;
-        z-index: 2;
 
         &--dark {
             background-color: $mariner;
@@ -198,6 +206,12 @@ export default class QuizContainer extends Vue {
         width: 100%;
         height: 65px;
         color: $white;
+        background-color: $brand-black;
+        z-index: 3;
+
+        &--dark {
+            background-color: $jet;
+        }
 
         &--mobile {
             height: 54px;

package/lib/components/Quiz/question.d.ts

@@ -1,6 +1,7 @@
 export type Ref = HTMLElement | null
 
 export type TChoiceKey = `${'a' | 'd'}${1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9}`
+export type TMatrixChoiceKey = `${'a' | 'd'}${1 | 2 | 3 }_${1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12}`
 
 export type TQuizMode = 'qotd' | 'quick10' | 'timed' | 'weakest' | 'missed' | 'custom'
 
@@ -20,6 +21,11 @@ export type TChoiceScores = Partial<Record<TChoiceKey, number>> & {
     answeredCorrectly: number
 }
 
+export type TMatrixChoiceScores = {
+    totalAnswered: number
+    answeredCorrectly: number
+}
+
 export type TQuestionPassageAndImageTitle = 'Passage + Image' | 'Image' | 'Passage'
 
 export type TNamesRow = {
@@ -38,4 +44,10 @@ export type TViewNames = {
         name: string
         isFlaggedByStudent: boolean
     }[]
+}
+
+export interface IRadioOptions {
+    choices: TMatrixChoiceKey[]
+    value: TMatrixChoiceKey | null
+    label?: string
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pocketprep/ui-kit",
-  "version": "3.4.51",
+  "version": "3.4.53",
   "description": "Pocket Prep UI Kit",
   "author": "pocketprep",
   "scripts": {
@@ -78,7 +78,7 @@
     "vue-router": "4.2.5"
   },
   "devDependencies": {
-    "@pocketprep/types": "1.11.1",
+    "@pocketprep/types": "1.14.10",
     "@tsconfig/node16": "1.0.3",
     "@types/node": "16.18.25",
     "@vitejs/plugin-vue": "4.6.2",