@pocketprep/ui-kit 3.4.52 → 3.4.54

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"
@@ -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"
@@ -97,7 +98,7 @@
             </div>
         </div>
         <Icon
-            v-if="isCorrect"
+            v-if="isQuestionCorrect"
             v-dark="isDarkMode"
             type="correct"
             class="uikit-question-summary__summary-correct-icon"
@@ -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: {
@@ -139,15 +141,31 @@ 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,
         '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 () {
@@ -186,6 +204,7 @@ export default class Summary extends Vue {
         display: inline-block;
     }
 
+
     &__summary-title {
         font-weight: 600;
         font-size: 15.5px;
@@ -289,6 +308,12 @@ export default class Summary extends Vue {
                 margin: 0;
             }
         }
+
+        .keyword-highlight {
+            span {
+                font-size: 16px;
+            }
+        }
     }
 
     &__summary-dropdown-explanation-image {