@pocketprep/ui-kit 3.4.34 → 3.4.36

package/lib/components/Forms/Textarea.vue

@@ -18,6 +18,7 @@
             >{{ label }}</label>
             <div
                 v-if="showIconAndTooltip"
+                class="uikit-textarea__tooltip-container"
                 @mouseenter="showTextAreaTooltip = true"
                 @mouseleave="showTextAreaTooltip = false"
                 @focus="showTextAreaTooltip = true"
@@ -152,6 +153,10 @@ export default class Textarea extends Vue {
         }
     }
 
+    &__tooltip-container {
+        margin-top: -2px;
+    }
+
     &__icon {
         padding: 0 0 2px 5px;
         color: $brand-blue;
@@ -218,4 +223,4 @@ export default class Textarea extends Vue {
         }
     }
 }
-</style>
+</style>

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

@@ -166,7 +166,9 @@
                     :is-dark-mode="isDarkMode"
                     :question-el="questionEl"
                     :breakpoints="breakpoints"
+                    :keyword-definitions="keywordDefinitions"
                     @toggleDropdownExplanationImageLongAlt="toggleDropdownExplanationImageLongAlt"
+                    @click="handleClick"
                 />
             </div>
             <template v-if="!globalMetrics">
@@ -323,6 +325,7 @@ export default class ChoicesContainer extends Vue {
         'tablet-portrait': 1023,
         'tablet-landscape': 1439,
     } }) breakpoints!: TBreakPointsObject
+    @Prop({ default: [] }) keywordDefinitions!: { keyword: string; definition: string }[]
 
     stripText (string?: string) {
         return string?.replace(/<[^\s>]+[^>]*>/gi, ' ').trim()
@@ -383,6 +386,11 @@ export default class ChoicesContainer extends Vue {
     toggleDropdownExplanationImageLongAlt () {
         return
     }
+
+    @Emit('click')
+    handleClick (event: MouseEvent) {
+        return event
+    }
 }
 </script>
 

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

@@ -10,7 +10,7 @@
         <div
             v-dark="isDarkMode"
             class="uikit-question-dropdown-explanation__dropdown-explanation-text"
-            v-html="question.explanation"
+            v-html="explanation"
         />
         <img
             v-if="explanationImageUrl"
@@ -74,6 +74,7 @@ import Icon from '../../Icons/Icon.vue'
 import PocketButton from '../../Buttons/Button.vue'
 import { breakpoint, dark } from '../../../directives'
 import type { TBreakPointsObject, TChoice, TChoiceKey } from './../question'
+import { highlightKeywordsInText } from '../../../utils'
 
 @Component({
     components: {
@@ -105,6 +106,16 @@ export default class DropdownExplanation extends Vue {
         'tablet-portrait': 1023,
         'tablet-landscape': 1439,
     } }) breakpoints!: TBreakPointsObject
+    @Prop({ default: [] }) keywordDefinitions!: { keyword: string; definition: string }[]
+    
+    get explanation () {
+        return highlightKeywordsInText({
+            text: this.question.explanation || '', 
+            keywordDefinitions: this.keywordDefinitions, 
+            isDarkMode: this.isDarkMode,
+            location: 'dropdown-explanation',
+        })
+    }
     
     @Emit('toggleDropdownExplanationImageLongAlt')
     toggleDropdownExplanationImageLongAlt () {

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

@@ -17,7 +17,7 @@
             v-dark="isDarkMode"
             v-breakpoint:questionEl="breakpoints"
             class="uikit-question-explanation__explanation-text"
-            v-html="question.explanation"
+            v-html="explanation"
         />
         <img
             v-if="explanationImageUrl"
@@ -92,6 +92,7 @@ import Icon from '../../Icons/Icon.vue'
 import PocketButton from '../../Buttons/Button.vue'
 import { breakpoint, dark } from '../../../directives'
 import type { TBreakPointsObject } from './../question'
+import { highlightKeywordsInText } from '../../../utils'
 
 @Component({
     components: {
@@ -121,6 +122,16 @@ export default class Explanation extends Vue {
         'tablet-portrait': 1023,
         'tablet-landscape': 1439,
     } }) breakpoints!: TBreakPointsObject
+    @Prop({ default: [] }) keywordDefinitions!: { keyword: string; definition: string }[]
+
+    get explanation () {
+        return highlightKeywordsInText({
+            text: this.question.explanation || '', 
+            keywordDefinitions: this.keywordDefinitions, 
+            isDarkMode: this.isDarkMode,
+            location: 'explanation',
+        })
+    }
     
     @Emit('toggleExplanationImageLongAlt')
     toggleExplanationImageLongAlt () {

package/lib/components/Quiz/Question.vue

@@ -66,7 +66,8 @@
                 :class="{
                     'uikit-question__prompt--passage-and-image': question.passage || passageImageUrl,
                 }"
-                v-html="question.prompt"
+                @click="keywordClick"
+                v-html="prompt"
             />
             <PocketButton
                 v-if="question.passage || passageImageUrl"
@@ -178,6 +179,7 @@
                     :is-dark-mode="isDarkMode"
                     :question-el="questionEl"
                     :breakpoints="breakpoints"
+                    :keyword-definitions="keywordDefinitions"
                     @emitChoiceMouseOver="choiceMouseOver"
                     @emitChoiceMouseLeave="choiceMouseLeave"
                     @emitChoiceFocusIn="choiceFocusIn"
@@ -189,6 +191,7 @@
                     @emitClickChoiceStrike="clickChoiceStrike"
                     @toggleChoiceExplanation="toggleExplanation"
                     @toggleDropdownExplanationImageLongAlt="toggleExplanationImageLongAlt"
+                    @click="keywordClick"
                 >
                     <template #motivationalMoment="{
                         isCorrect,
@@ -330,7 +333,7 @@
                 :breakpoints="breakpoints"
                 @emitTogglePassageImageLongAlt="togglePassageImageLongAlt"
                 @emitMoveFocusToPrompt="moveFocusToPrompt"
-            />         
+            />
             <Explanation
                 ref="uikit-question__explanation"
                 class="uikit-question__explanation"
@@ -347,8 +350,10 @@
                 :is-dark-mode="isDarkMode"
                 :question-el="questionEl"
                 :breakpoints="breakpoints"
+                :keyword-definitions="keywordDefinitions"
                 @toggleExplanationImageLongAlt="toggleExplanationImageLongAlt"
                 @toggleExplanation="toggleExplanation"
+                @click="keywordClick"
             />
         </div> 
     </div>
@@ -373,7 +378,7 @@ import Explanation from '../Quiz/Question/Explanation.vue'
 import PassageAndImage from '../Quiz/Question/PassageAndImage.vue'
 import type { Study } from '@pocketprep/types'
 import { breakpoint, dark } from '../../directives'
-import { studyModes } from '../../utils'
+import { highlightKeywordsInText, studyModes } from '../../utils'
 import type { Ref, TQuizMode, TChoiceKey, TChoice, TChoiceScores, TNamesRow, TViewNames } from './question'
 
 @Component({
@@ -421,6 +426,7 @@ export default class Question extends Vue {
     @Prop({ default: false }) showPaywall!: boolean
     @Prop({ default: false }) hideReferences!: boolean
     @Prop({ default: false }) isTeachReview!: boolean
+    @Prop({ default: [] }) keywordDefinitions!: { keyword: string; definition: string }[]
 
     hoverChoiceKey: TChoiceKey | null = null
     focusChoiceKey: TChoiceKey | null = null
@@ -606,6 +612,15 @@ export default class Question extends Vue {
         return this.selectedChoices.length === 0
     }
 
+    get prompt () {
+        return highlightKeywordsInText({
+            text: this.question.prompt, 
+            keywordDefinitions: this.keywordDefinitions, 
+            isDarkMode: this.isDarkMode,
+            location: 'prompt',
+        })
+    }
+
     mounted () {
         if (this.reviewMode) {
             this.startReviewMode()
@@ -718,6 +733,19 @@ export default class Question extends Vue {
         }, 0)
     }
 
+    @Emit('keyword-click')
+    keywordClick (event: MouseEvent) {
+        const target = event.target as HTMLElement
+        if (target.classList.contains('keyword-highlight')) {
+            const keyword = target.innerHTML
+            const location = target.getAttribute('data-location')
+            return {
+                keyword,
+                location,
+            }
+        }
+    }
+
     startReviewMode () {
         this.showAnswers = true
         this.showExplanation = this.defaultShowExplanation === null ? true : this.defaultShowExplanation
@@ -1283,6 +1311,16 @@ export default class Question extends Vue {
         }
     }
 
+    .keyword-highlight {
+        text-decoration: underline;
+        text-decoration-color: $brand-blue;
+        cursor: pointer;
+
+        &--dark {
+            text-decoration-color: $banana-bread;
+        }
+    }
+
     &__prompt {
         outline: none;
         font-weight: 600;

package/lib/utils.ts

@@ -58,3 +58,25 @@ export const studyModes = {
         iconColorDM: BrandColors.pewter,
     },
 } as const
+
+export const highlightKeywordsInText = (params: {
+    text: string
+    keywordDefinitions: { keyword: string }[]
+    isDarkMode: boolean
+    location?: string
+}) => {
+    if (!params.keywordDefinitions.length) {
+        return params.text
+    }
+
+    const keywords = params.keywordDefinitions.map(k => k.keyword)
+
+    return keywords.reduce((acc, word) => {
+        const regex = new RegExp(`(${word})`, 'i')
+        return acc.replace(
+            regex, 
+            `<span class="keyword-highlight${params.isDarkMode 
+                ? ' keyword-highlight--dark' : ''}" data-location="${params.location}">$1</span>`
+        )
+    }, params.text)
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pocketprep/ui-kit",
-  "version": "3.4.34",
+  "version": "3.4.36",
   "description": "Pocket Prep UI Kit",
   "author": "pocketprep",
   "scripts": {