@pocketprep/ui-kit 3.4.53 → 3.4.54

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

@@ -169,7 +169,11 @@
                     :keyword-definitions="keywordDefinitions"
                     @toggleDropdownExplanationImageLongAlt="toggleDropdownExplanationImageLongAlt"
                     @click="handleClick"
-                />
+                >
+                    <template #explanationTopExperiment>
+                        <slot name="explanationTopExperiment"></slot>
+                    </template>
+                </DropdownExplanation>
             </div>
             <template v-if="!globalMetrics">
                 <div

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

@@ -7,6 +7,7 @@
             'uikit-question-dropdown-explanation__dropdown-explanation--show-stats': globalMetrics
         }"
     >
+        <slot name="explanationTopExperiment"></slot>
         <div
             v-dark="isDarkMode"
             class="uikit-question-dropdown-explanation__dropdown-explanation-text"
@@ -113,7 +114,7 @@ export default class DropdownExplanation extends Vue {
             text: this.question.explanation || '', 
             keywordDefinitions: this.keywordDefinitions, 
             isDarkMode: this.isDarkMode,
-            location: 'dropdown-explanation',
+            location: 'explanation',
         })
     }
     
@@ -174,6 +175,12 @@ export default class DropdownExplanation extends Vue {
         line-height: 24px;
         font-weight: 400;
         padding-bottom: 6px;
+        
+        .keyword-highlight {
+            span {
+                font-size: 16px;
+            }
+        }
 
         p {
             margin: 10px 0;

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

@@ -13,6 +13,7 @@
         >
             Explanation Details
         </div>
+        <slot name="explanationTopExperiment"></slot>
         <div
             v-dark="isDarkMode"
             v-breakpoint:questionEl="breakpoints"
@@ -233,6 +234,12 @@ export default class Explanation extends Vue {
         margin-bottom: 24px;
         word-break: break-word;
 
+        .keyword-highlight {
+            span {
+                font-size: 16.5px;
+            }
+        }
+
         &--dark {
             color: $white;
         }

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

@@ -38,10 +38,11 @@
             ref="uikit-question-summary__summary-dropdown-explanation"
             class="uikit-question-summary__summary-dropdown-explanation"
         >
+            <slot name="explanationTopExperiment"></slot>
             <div
                 v-dark="isDarkMode"
                 class="uikit-question-summary__summary-dropdown-explanation-text"
-                v-html="question.explanation"
+                v-html="summary"
             />
             <img
                 v-if="explanationImageUrl"
@@ -118,6 +119,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: {
@@ -150,11 +152,21 @@ export default class Summary extends Vue {
         'tablet-portrait': 1023,
         'tablet-landscape': 1439,
     } }) breakpoints!: TBreakPointsObject
+    @Prop({ default: [] }) keywordDefinitions!: { keyword: string; definition: string }[]
 
     get isQuestionCorrect () {
         return (!this.isMatrixQuestion && this.isCorrect) || (this.isMatrixQuestion && this.isMatrixQuestionCorrect)
     }
 
+    get summary () {
+        return highlightKeywordsInText({
+            text: this.question.explanation || '', 
+            keywordDefinitions: this.keywordDefinitions, 
+            isDarkMode: this.isDarkMode,
+            location: 'explanation',
+        })
+    }
+
     @Emit('toggleSummaryExplanation')
     toggleSummaryExplanation () {
         return
@@ -296,6 +308,12 @@ export default class Summary extends Vue {
                 margin: 0;
             }
         }
+
+        .keyword-highlight {
+            span {
+                font-size: 16px;
+            }
+        }
     }
 
     &__summary-dropdown-explanation-image {

package/lib/components/Quiz/Question.vue

@@ -194,6 +194,9 @@
                     @toggleDropdownExplanationImageLongAlt="toggleExplanationImageLongAlt"
                     @click="keywordClick"
                 >
+                    <template #explanationTopExperiment>
+                        <slot name="explanationTopExperiment"></slot>
+                    </template>
                     <template #motivationalMoment="{
                         isCorrect,
                         choiceKey,
@@ -317,9 +320,15 @@
                 :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"
@@ -445,7 +454,11 @@
                 @toggleExplanationImageLongAlt="toggleExplanationImageLongAlt"
                 @toggleExplanation="toggleExplanation"
                 @click="keywordClick"
-            />
+            >
+                <template #explanationTopExperiment>
+                    <slot name="explanationTopExperiment"></slot>
+                </template>
+            </Explanation>
         </div> 
     </div>
 </template>
@@ -902,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 {
@@ -1524,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;
+                }
+            }
         }
     }
 
@@ -1545,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);
         }
     }
@@ -1561,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) {
@@ -1585,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;
             }
@@ -1633,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;

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.53",
+  "version": "3.4.54",
   "description": "Pocket Prep UI Kit",
   "author": "pocketprep",
   "scripts": {