@pocketprep/ui-kit 3.4.52 → 3.4.54

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"
@@ -193,6 +194,9 @@
                     @toggleDropdownExplanationImageLongAlt="toggleExplanationImageLongAlt"
                     @click="keywordClick"
                 >
+                    <template #explanationTopExperiment>
+                        <slot name="explanationTopExperiment"></slot>
+                    </template>
                     <template #motivationalMoment="{
                         isCorrect,
                         choiceKey,
@@ -216,10 +220,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,20 +313,30 @@
                 :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"
                 :question-el="questionEl"
                 :breakpoints="breakpoints"
+                :keyword-definitions="keywordDefinitions"
+                @click="keywordClick"
                 @toggleSummaryExplanation="toggleExplanation"
                 @toggleSummaryExplanationImageLongAlt="toggleExplanationImageLongAlt"
-            />
+            >
+                <template #explanationTopExperiment>
+                    <slot name="explanationTopExperiment"></slot>
+                </template>
+            </Summary>
             <slot name="metricsTiles">
                 <StatsSummary
                     v-if="globalMetrics"
                     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 +369,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"
@@ -354,7 +454,11 @@
                 @toggleExplanationImageLongAlt="toggleExplanationImageLongAlt"
                 @toggleExplanation="toggleExplanation"
                 @click="keywordClick"
-            />
+            >
+                <template #explanationTopExperiment>
+                    <slot name="explanationTopExperiment"></slot>
+                </template>
+            </Explanation>
         </div> 
     </div>
 </template>
@@ -376,10 +480,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 +512,8 @@ import type { Ref, TQuizMode, TChoiceKey, TChoice, TChoiceScores, TNamesRow, TVi
         StatsSummary,
         Explanation,
         PassageAndImage,
+        MatrixChoicesContainer,
+        MobileMatrixChoicesContainer,
     },
     directives: {
         breakpoint,
@@ -414,6 +532,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 +551,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 +611,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 +649,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 +676,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 +717,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 +757,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 +799,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) {
@@ -737,7 +915,7 @@ export default class Question extends Vue {
     keywordClick (event: MouseEvent) {
         const target = event.target as HTMLElement
         if (target.classList.contains('keyword-highlight')) {
-            const keyword = target.innerHTML
+            const keyword = target.innerText
             const location = target.getAttribute('data-location')
             const clickLocation = { x: event.clientX, y: event.clientY }
             return {
@@ -750,21 +928,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 +1126,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 +1285,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 +1368,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 +1388,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()
@@ -1294,12 +1537,24 @@ export default class Question extends Vue {
             padding-right: 11px;
             font-size: 16.5px;
             line-height: 26px;
+
+            .keyword-highlight {
+                span {
+                    font-size: 16.5px;
+                }
+            }
         }
 
         &--explanation#{&}--tablet-landscape {
             padding-top: 22px;
             font-size: 16px;
             line-height: 24px;
+
+            .keyword-highlight {
+                span {
+                    font-size: 16px;
+                }
+            }
         }
     }
 
@@ -1315,13 +1570,11 @@ 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-color: transparent !important;
         border-radius: 2px;
 
         &[data-location="explanation"] {
-            height: 20px;
             background-color: rgba($banana-bread, 0.4);
         }
     }
@@ -1331,17 +1584,16 @@ export default class Question extends Vue {
         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;
+        padding: 5.84px 2px 0 1px;
         margin: 0 -2px 0 -1px;
         cursor: pointer;
+        font-size: 10px;
+        line-height: 1;
         
         &[data-location="explanation"] {
-            height: 20px;
-            line-height: 21px;
+            padding-top: 4.84px;
             background-color: $manilla;
-            border-radius: 1px 1px 0 0;
+            border-radius: 2px 2px 0 0;
         }
 
         &:hover:not(&--active) {
@@ -1355,15 +1607,11 @@ export default class Question extends Vue {
         }
 
         &--active {
-            height: 22px;
-            line-height: 23px;
             background-color: $beach-sand;
-            border-bottom: none;
+            border-color: $beach-sand;
             border-radius: 2px;
 
             &[data-location="explanation"] {
-                height: 20px;
-                line-height: 21px;
                 background-color: $beach-sand;
                 border-radius: 2px;
             }
@@ -1403,6 +1651,12 @@ export default class Question extends Vue {
         max-width: 492px;
         box-sizing: border-box;
 
+        .keyword-highlight {
+            span {
+                font-size: 17.5px;
+            }
+        }
+
         &--passage-and-image {
             &--mobile {
                 margin-bottom: 14px;
@@ -1637,5 +1891,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/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/lib/utils.ts

@@ -83,7 +83,8 @@ export const highlightKeywordsInText = (params: {
         return acc.replace(
             regex, 
             `$1<span class="keyword-highlight${params.isDarkMode 
-                ? ' keyword-highlight--dark' : ''}" data-location="${params.location}">$2</span>$3`
+                ? ' keyword-highlight--dark' : ''}" data-location="${
+                params.location}""><span style="pointer-events: none;">$2</span></span>$3`
         )
     }, params.text)
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pocketprep/ui-kit",
-  "version": "3.4.52",
+  "version": "3.4.54",
   "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",