@pocketprep/ui-kit 3.4.52 → 3.4.53

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

@@ -0,0 +1,614 @@
+<template>
+    <div
+        v-dark="isDarkMode"
+        class="uikit-question-matrix-choices-container"
+        ref="uikit-question-matrix-choices-container"
+    >
+        <div 
+            v-dark="isDarkMode" 
+            v-breakpoint:questionEl="breakpoints" 
+            class="uikit-question-matrix-choices-container__columns"
+        >
+            <div 
+                v-dark="isDarkMode"
+                v-breakpoint:questionEl="breakpoints"
+                class="uikit-question-matrix-choices-container__column-row-header"
+                :class="{
+                    'uikit-question-matrix-choices-container__column-row-header--two-columns': 
+                        numberOfMatrixColumnLabels === 2 
+                }"
+                v-html="matrixColumnLabelsForRows"
+            />
+            <div
+                class="uikit-question-matrix-choices-container__column-header"
+                :class="{
+                    'uikit-question-matrix-choices-container__column-header--two-columns': 
+                        numberOfMatrixColumnLabels === 2 
+                }"
+                lang="de"
+                v-for="(columnLabel, index) in matrixColumnLabels"
+                :key="index"
+                v-dark="isDarkMode"
+                v-breakpoint:questionEl="breakpoints"
+                v-html="columnLabel"
+            />
+        </div>
+        <div 
+            class="uikit-question-matrix-choices-container__choices-container"
+            :class="{
+                'uikit-question-matrix-choices-container__choices-container--correct': 
+                    (showMatrixAnswers || reviewMode) && isMatrixQuestionCorrect,
+                'uikit-question-matrix-choices-container__choices-container--incorrect': 
+                    (showMatrixAnswers || reviewMode) && !isMatrixQuestionCorrect,
+                
+            }"
+            v-dark="isDarkMode"
+            v-breakpoint:questionEl="breakpoints"
+        >
+            <div 
+                class="uikit-question-matrix-choices-container__choices"
+                :class="{
+                    'uikit-question-matrix-choices-container__choices--two-columns': 
+                        numberOfMatrixColumnLabels === 2 
+                }"
+                v-dark="isDarkMode"
+                v-breakpoint:questionEl="breakpoints"
+                v-for="(rowLabel, rowIndex) in matrixRowLabels"
+                :key="rowIndex"
+            >
+                <div
+                    class="uikit-question-matrix-choices-container__choice-text"
+                    :class="{
+                        'uikit-question-matrix-choices-container__choice-text--two-columns': 
+                            numberOfMatrixColumnLabels === 2 
+                    }"
+                    v-dark="isDarkMode"
+                    v-breakpoint:questionEl="breakpoints"
+                    v-html="rowLabel"
+                />
+                <template 
+                    v-if="
+                        question.type === 'Matrix Checkbox' &&
+                            matrixCheckboxGrid &&
+                            matrixCheckboxGrid[rowIndex]"
+                >
+                    <div
+                        class="uikit-question-matrix-choices-container__checkbox"
+                        :class="{
+                            'uikit-question-matrix-choices-container__checkbox--two-columns': 
+                                numberOfMatrixColumnLabels === 2 
+                        }"
+                        v-for="(columnLabel, columnIndex) in matrixColumnLabels"
+                        :key="columnIndex"
+                        v-dark="isDarkMode"
+                        v-breakpoint:questionEl="breakpoints"
+                    >
+                        <Checkbox
+                            v-if="(showMatrixAnswers || reviewMode) &&
+                                correctAnswerButNotSelected(rowIndex, columnIndex)"
+                            :model-value="true"
+                            :is-dark-mode="isDarkMode"
+                            :disabled="showMatrixAnswers || reviewMode"
+                            :checkbox-check-styles="checkboxCheckStyling(rowIndex, columnIndex)"
+                        />
+                        <Checkbox
+                            v-else
+                            v-model="matrixCheckboxGrid[rowIndex][columnIndex]"
+                            :is-dark-mode="isDarkMode"
+                            :disabled="showMatrixAnswers || reviewMode"
+                            :checkbox-styles="checkboxContainerStyling(rowIndex, columnIndex)"
+                        />
+                        <Icon
+                            v-if="
+                                (showMatrixAnswers || reviewMode) && 
+                                    (incorrectlySelectedChoice(rowIndex, columnIndex) ||
+                                        correctAnswerButNotSelected(rowIndex, columnIndex))"
+                            class="uikit-question-matrix-choices-container__incorrect-answer-icon"
+                            type="incorrect"
+                        />
+                    </div>
+                </template>
+                <template 
+                    v-if="
+                        question.type === 'Matrix Radio Button' &&
+                            matrixRadioGrid &&
+                            matrixRadioGrid[rowIndex]"
+                >
+                    <MatrixRadioGroup
+                        :modelValue="getRadioRowSelection(rowIndex)"
+                        :review-mode="reviewMode"
+                        :show-answers="showMatrixAnswers"
+                        class="uikit-question-matrix-choices-container__radio-btns"
+                        :choices="getRadioRowChoices(rowIndex)"
+                        :is-dark-mode="isDarkMode"
+                        :disabled="false"
+                        :question-el="questionEl"
+                        :breakpoints="breakpoints"
+                        @update:modelValue="updateRadioRowSelection(rowIndex, $event)"
+                    >
+                        <template #optionIcon="{ optionIcon }">
+                            <template v-if="optionIcon.isVisible">
+                                <Icon
+                                    v-if="optionIcon.isCorrect"
+                                    type="correct"
+                                    class="uikit-question-matrix-choices-container__correct-answer-icon"
+                                />
+                                <Icon
+                                    v-else
+                                    type="incorrect"
+                                    class="uikit-question-matrix-choices-container__incorrect-answer-icon"
+                                />
+                            </template>
+                        </template>
+                    </MatrixRadioGroup>
+                </template>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script lang="ts">
+import { Component, Vue, Prop, Emit, Watch } from 'vue-facing-decorator'
+import Icon from '../../Icons/Icon.vue'
+import PocketButton from '../../Buttons/Button.vue'
+import Checkbox from '../../Forms/Checkbox.vue'
+import MatrixRadioGroup from './MatrixRadioGroup.vue'
+import { dark, breakpoint } from '../../../directives'
+import type { TBreakPointsObject, IRadioOptions, TMatrixChoiceKey } from './../question'
+import type { Study } from '@pocketprep/types'
+import BrandColors from '../../../pocketprep-export.module.scss'
+
+@Component({
+    components: {
+        Icon,
+        Checkbox,
+        MatrixRadioGroup,
+        PocketButton,
+    },
+    directives: {
+        dark,
+        breakpoint,
+    },
+})
+export default class MatrixChoicesContainer extends Vue {
+    @Prop({ default: false }) reviewMode!: boolean
+    @Prop({ default: false }) isDarkMode!: boolean
+    @Prop({ default: null }) questionEl!: Element | null
+    @Prop({ default: {
+        'mobile': 767,
+        'tablet-portrait': 1023,
+        'tablet-landscape': 1439,
+    } }) breakpoints!: TBreakPointsObject
+    @Prop() question!: Study.Class.QuestionJSON
+    @Prop() matrixChoiceLayout!: string[][]
+    @Prop({ default: false }) showMatrixAnswers!: boolean
+    @Prop({ default: false }) isUnanswered!: boolean
+    @Prop({ default: false }) isMatrixQuestionCorrect!: boolean
+    @Prop() matrixAnswerKeys!: TMatrixChoiceKey[]
+    @Prop() matrixDistractorKeys!: TMatrixChoiceKey[]
+    @Prop() selectedMatrixChoices!: TMatrixChoiceKey[]
+
+    matrixCheckboxGrid: boolean[][] | undefined = undefined
+    matrixRadioGrid: IRadioOptions[] | undefined = undefined
+    columnIndex = 0
+    rowIndex = 0
+    brandColors = BrandColors
+
+    get defaultCheckboxGrid () {
+        return this.matrixChoiceLayout?.map(row => {
+            const choiceRow = row.map(() => false)
+            return choiceRow
+        })
+    }
+
+    get defaultRadioButtonGrid () {
+        return this.matrixChoiceLayout?.map(row => {
+            return {
+                choices: row as TMatrixChoiceKey[],
+                value: null,
+            }
+        })
+    }
+
+    get matrixRowLabels () {
+        return this.question.matrixLabels?.rows
+    }
+
+    get matrixColumnLabels () {
+        return this.question.matrixLabels?.columns
+    }
+
+    get numberOfMatrixColumnLabels () {
+        return this.question.matrixLabels?.columns.length || 0
+    }
+
+    get matrixColumnLabelsForRows () {
+        return this.question.matrixLabels?.columnLabelForRows
+    }
+
+    mounted () {
+        if (this.question.type === 'Matrix Checkbox') {
+            this.matrixCheckboxGrid = this.defaultCheckboxGrid
+        }
+        
+        if (this.question.type === 'Matrix Radio Button') {
+            this.matrixRadioGrid = this.defaultRadioButtonGrid
+        }
+    }
+
+    convertSelectedMatrixChoiceToCheckboxGrid () {
+        const checkboxGrid = this.defaultCheckboxGrid
+        this.selectedMatrixChoices.forEach(choice => {
+            const rowIndex = Number(choice.substring(1, choice.indexOf('_'))) - 1
+            const colIndex = Number(choice.split('_').pop()) - 1
+            if (checkboxGrid && checkboxGrid[rowIndex]) {
+                checkboxGrid[rowIndex][colIndex] = true
+            }
+        })
+        return checkboxGrid
+    }
+
+    convertSelectedMatrixChoiceToRadioBtnGrid () {
+        const radioBtnGrid = this.matrixRadioGrid
+        this.selectedMatrixChoices.forEach(choice => {
+            const rowIndex = Number(choice.substring(1, choice.indexOf('_'))) - 1
+            if (radioBtnGrid && radioBtnGrid[rowIndex]) {
+                radioBtnGrid[rowIndex].value = choice
+            }
+        })
+        return radioBtnGrid
+    }
+
+    getRadioRowSelection (rowIndex: number) {
+        return this.matrixRadioGrid?.[rowIndex]?.value
+    }
+
+    getRadioRowChoices (rowIndex: number) {
+        const choices = this.matrixRadioGrid?.[rowIndex]?.choices
+        return choices
+    }
+
+    updateRadioRowSelection (rowIndex: number, choiceKey: TMatrixChoiceKey) {
+        const row = this.matrixRadioGrid?.[rowIndex]
+        if (row) {
+            row.value = choiceKey
+        }
+    }
+
+    selectedChoiceKey (rowIndex: number, colIndex: number) {
+        const row = rowIndex += 1
+        const column = colIndex += 1
+        if (this.selectedMatrixChoices && this.matrixAnswerKeys) {
+            const matrixSelectedChoiceKey = this.selectedMatrixChoices.find((choice) => {
+                const substring = choice.substring(1)
+                return substring === `${row}_${column}`
+            })
+            return matrixSelectedChoiceKey
+        }
+        return undefined
+    }
+
+    correctlySelectedChoice (rowIndex: number, colIndex: number) {
+        if (this.selectedMatrixChoices && this.matrixAnswerKeys) {
+            const selectedChoice = this.selectedChoiceKey(rowIndex, colIndex)
+            if (selectedChoice && selectedChoice.startsWith('a') && this.matrixAnswerKeys.includes(selectedChoice)) {
+                return true
+            }
+        }
+        return false
+    }
+
+    incorrectlySelectedChoice (rowIndex: number, colIndex: number) {
+        if (this.selectedMatrixChoices && this.matrixAnswerKeys) {
+            const selectedChoice = this.selectedChoiceKey(rowIndex, colIndex)
+            if (selectedChoice && selectedChoice.startsWith('d')) {
+                return true
+            }
+        }
+        return false
+    }
+                        
+    correctAnswerButNotSelected (rowIndex: number, colIndex: number) {
+        const selectedChoice = this.selectedChoiceKey(rowIndex, colIndex)
+        const answerKey = this.matrixAnswerKeys.find(choice => choice === `a${rowIndex + 1}_${colIndex + 1}`)
+        return answerKey && !selectedChoice
+    }
+
+    checkboxContainerStyling (rowIndex: number, columnIndex: number) {
+        const isReviewMode = this.showMatrixAnswers || this.reviewMode
+        const incorrectlySelectedChoice = this.incorrectlySelectedChoice(rowIndex, columnIndex)
+
+        // check box is correctlySelected
+        if (isReviewMode && this.correctlySelectedChoice(rowIndex, columnIndex)) {
+            const borderColor = this.isDarkMode ? this.brandColors.jungleGreen : this.brandColors.cadaverous
+            return {
+                borderColor: `${borderColor} !important`,
+                background: `${borderColor} !important`,
+            }
+        }
+
+        if (isReviewMode && incorrectlySelectedChoice) {
+            return {
+                background: `${this.brandColors.steel} !important`,
+                border: `1px solid ${this.brandColors.steel} !important`,
+            }
+        }
+    }
+
+    checkboxCheckStyling (rowIndex: number, columnIndex: number) {
+        const isReviewMode = this.showMatrixAnswers || this.reviewMode
+        if (isReviewMode && this.correctAnswerButNotSelected(rowIndex, columnIndex)) {
+            const color = this.isDarkMode ? this.brandColors.jungleGreen : this.brandColors.cadaverous
+            return {
+                color: `${color} !important`,
+            }
+        }
+    }
+
+    @Emit('emitSelectedMatrixChoice')
+    emitSelectedMatrixChoice (matrixChoiceKeys: TMatrixChoiceKey[]) {
+        return matrixChoiceKeys
+    }
+
+    @Emit('emitAnsweredMatrixRowIndex')
+    emitAnsweredMatrixRowIndex (answeredRowIndexes: number[]) {
+        return answeredRowIndexes
+    }
+
+    @Watch('matrixCheckboxGrid', { deep: true })
+    matrixCheckboxGridChange () {
+        if (this.matrixChoiceLayout && this.matrixCheckboxGrid) {
+            const selectedCheckboxChoices: TMatrixChoiceKey[] = []
+            const answeredCheckBoxRowIndexes: number[] = []
+
+            this.matrixCheckboxGrid.forEach((row, rowIndex) => {
+                row.forEach((choice, choiceIndex) => {
+                    if (
+                        choice && 
+                            this.matrixChoiceLayout[rowIndex] && 
+                            this.matrixChoiceLayout[rowIndex][choiceIndex]
+                    ) {
+                        const choiceKey = this.matrixChoiceLayout[rowIndex][choiceIndex] as TMatrixChoiceKey
+                        selectedCheckboxChoices.push(choiceKey)
+                        if (!answeredCheckBoxRowIndexes.some(index => index === rowIndex)) {
+                            answeredCheckBoxRowIndexes.push(rowIndex)
+                        }
+                    }
+                })
+            })  
+            this.emitSelectedMatrixChoice(selectedCheckboxChoices)
+            this.emitAnsweredMatrixRowIndex(answeredCheckBoxRowIndexes)
+        }
+    }
+
+    @Watch('matrixRadioGrid', { deep: true })
+    matrixRadioGridChange () {
+        if (this.matrixChoiceLayout && this.matrixRadioGrid) {
+            const selectedRadioButtonChoices: TMatrixChoiceKey[] = []
+            const answeredRadioBtnRowIndexes: number[] = []
+
+            this.matrixRadioGrid.forEach((row, rowIndex) => {
+                const choiceKey = row.value
+                if (choiceKey && this.matrixChoiceLayout[rowIndex]) {
+                    selectedRadioButtonChoices.push(choiceKey)
+                    if (!answeredRadioBtnRowIndexes.some(index => index === rowIndex)) {
+                        answeredRadioBtnRowIndexes.push(rowIndex)
+                    }
+                    this.emitAnsweredMatrixRowIndex(answeredRadioBtnRowIndexes)
+                }
+            }) 
+            this.emitSelectedMatrixChoice(selectedRadioButtonChoices)
+        }
+    }
+
+    @Watch('selectedMatrixChoices')
+    selectedMatrixChoicesChange () {
+        if ((this.reviewMode || this.showMatrixAnswers) && this.question.type === 'Matrix Checkbox') {
+            const selectedCheckboxGrid = this.convertSelectedMatrixChoiceToCheckboxGrid() 
+            this.matrixCheckboxGrid = selectedCheckboxGrid ? selectedCheckboxGrid : this.defaultCheckboxGrid
+        }
+
+        if ((this.reviewMode || this.showMatrixAnswers) && this.question.type === 'Matrix Radio Button') {
+            const selectedRadioBtnGrid = this.convertSelectedMatrixChoiceToRadioBtnGrid() 
+            this.matrixRadioGrid = selectedRadioBtnGrid
+        }
+    }
+}
+
+</script>
+
+<style lang="scss">
+@import '../../../styles/colors';
+@import '../../../styles/breakpoints';
+
+.uikit-question-matrix-choices-container {
+    width: 100%;
+    &__columns {
+        display: flex;
+        padding: 0px 1px 0px 14px;
+        align-items: center;
+        width: 100%;
+        height: 32px;
+        margin-bottom: 16px;
+        color: $brand-black;
+        font-size: 12px;
+        line-height: 16px;
+
+        &--dark {
+            color: $white;
+        }
+
+        &--mobile {
+            display: none;
+        }
+    }
+
+    &__column-row-header {
+        width: 284px;
+
+        &--tablet-landscape {
+            width: 285px;
+        }
+
+        &--tablet-portrait {
+            width: 275px;
+        }
+
+        &--two-columns {
+            width: 303px;
+        }
+    }
+
+    &__column-header {
+        width: 56px;
+        hyphens: auto;
+
+        &:not(:last-child) {
+            margin-right: 8px;
+        }
+
+        &--tablet-landscape {
+            &:not(:last-child) {
+                margin-right: 10px;
+            }
+        }
+
+        &--two-columns {
+            &:not(:last-child) {
+                margin-right: 24px;
+            }
+        }
+    }
+
+    &__choices-container {
+        cursor: default;
+        position: relative;
+        outline: none;
+        transition: 0.1s width ease;
+
+        &::after {
+            content: '';
+            position: absolute;
+            top: -8px;
+            bottom: -8px;
+            left: -8px;
+            right: -8px;
+            border-radius: 11px;
+            pointer-events: none;
+        }
+
+        &--incorrect {
+            &::after {
+                display: block;
+                border: 2px solid $pepper;
+            }
+
+            &--dark::after {
+                border-color: $rosa;
+            }
+        }
+
+        &--correct {
+            &::after {
+                display: block;
+                border: 2px solid $cadaverous;
+            }
+
+            &--dark::after {
+                border-color: $jungle-green;
+            }
+        }
+
+        &--mobile {
+            display: none;
+        }
+    }
+
+    &__choices {
+        border-radius: 5px;
+        border: 1px solid rgba($pewter, 0.85);
+        background: $white;
+        box-shadow: 0px 1px 4px 0px rgba(71, 89, 103, 0.30);
+        display: flex;
+        padding: 12px 10px 12px 14px;
+        position: relative;
+        transition: 0.1s padding ease;
+        align-items: center;
+        gap: 16px;
+        margin-bottom: 9px;
+
+        &--two-columns {
+            gap: 0;
+        }
+
+        &--dark {
+            border: 1px solid rgba(136, 163, 182, 0.85);
+            background: $brand-black;
+        }
+
+        &--mobile {
+            display: none;
+        }
+    }
+
+    &__choice-text {
+        width: 303px;
+        min-height: fit-content;
+        color: $brand-black;
+        font-size: 16.5px;
+        font-weight: 500;
+        line-height: 23px;
+        letter-spacing: -0.1px;
+
+        &--two-columns {
+            width: 279px;
+            margin-right: 24px;
+        }
+
+        &--dark {
+            color: $barely-background;
+        }
+
+        &--tablet-portrait {
+            width: 279px;
+        }
+        
+        &--mobile {
+            font-size: 16px;
+            font-weight: 600;
+        }
+    }
+
+    &__mobile-choices {
+        margin-bottom: 9px;
+    }
+
+    &__checkbox {
+        width: 56px;
+        display: flex;
+        align-items: center;
+
+        &--two-columns {
+            width: 80px;
+        }
+
+        .uikit-checkbox--disabled {
+            background: transparent;
+        }
+    }
+
+    &__correct-answer-icon {
+        margin-left: 6px;
+        width: 21px;
+        height: 22px;
+        color: $cadaverous;
+    }
+
+    &__incorrect-answer-icon {
+        margin-left: 6px;
+        width: 21px;
+        height: 22px;
+        color: $pepper;
+    }
+}
+</style>

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

@@ -0,0 +1,98 @@
+<script setup lang="ts">
+import RadioButton from '../../Forms/RadioButton.vue'
+import { dark as vDark } from '../../../directives'
+
+defineProps<{
+    isDarkMode: boolean
+    choices: string[]
+    labels?: string[]
+    showAnswers: boolean
+    disabled: boolean
+}>()
+
+const selectedChoice = defineModel<string>()
+
+const selectChoice = (choiceKey: string) => {
+    selectedChoice.value = choiceKey
+}
+</script>
+
+<template>
+    <ul
+        v-if="choices.length"
+        class="uikit-matrix-radio-group"
+        v-dark="isDarkMode"
+        role="radiogroup"
+    >
+        <li
+            class="uikit-matrix-radio-group__option"
+            :class="{
+                'uikit-matrix-radio-group__option--two-options': 
+                    choices.length === 2 
+            }"
+            v-dark="isDarkMode"
+            role="radio"
+            v-for="(choice) in choices"
+            :key="choice"
+        >
+            <RadioButton
+                class="uikit-matrix-radio-group__radio-btn"
+                :selected="choice === selectedChoice"
+                :disabled="disabled"
+                :isDarkMode="isDarkMode"
+                :color="showAnswers
+                    ? selectedChoice?.startsWith('a')
+                        ? 'green'
+                        : 'gray'
+                    : 'blue'
+                "
+                @click="!disabled && !showAnswers && selectChoice(choice)"
+            />
+            <div class="uikit-matrix-radio-group__option-icon">
+                <slot
+                    name="optionIcon"
+                    :optionIcon="{
+                        isVisible: showAnswers
+                            && !selectedChoice?.startsWith('a')
+                            && (
+                                choice.startsWith('a')
+                                || (choice === selectedChoice)
+                            ),
+                        isCorrect: choice.startsWith('a')
+                    }"
+                />
+            </div>
+        </li>
+    </ul>
+</template>
+
+<style lang="scss" scoped>
+@import '../../../styles/breakpoints';
+@import '../../../styles/colors';
+
+.uikit-matrix-radio-group {
+    display: flex;
+    list-style: none;
+    margin: 0;
+    padding: 0;
+
+    &__option {
+        display: flex;
+        align-items: center;
+        width: 72px;
+
+        &--two-options {
+            width: 80px;
+        }
+
+        &:last-child {
+            width: 59px;
+        }
+    }
+
+    &__option-icon {
+        display: flex;
+        align-items: center;
+    }
+}
+</style>