From bfa9b056a627d0420000d946b64817e69629b60a Mon Sep 17 00:00:00 2001 From: Dani Palou Date: Mon, 16 Sep 2024 16:48:47 +0200 Subject: [PATCH] MOBILE-4638 question: Update correctness icons to match last LMS changes --- .../match/component/addon-qtype-match.html | 4 +- .../component/addon-qtype-multichoice.html | 8 +- .../component/addon-qtype-ordering.html | 2 +- .../qtype/ordering/component/ordering.ts | 9 +- .../classes/base-question-component.ts | 14 ++- .../question/services/question-helper.ts | 110 +++++++++++++----- 6 files changed, 101 insertions(+), 46 deletions(-) diff --git a/src/addons/qtype/match/component/addon-qtype-match.html b/src/addons/qtype/match/component/addon-qtype-match.html index 13c88457a..ccbc6a00b 100644 --- a/src/addons/qtype/match/component/addon-qtype-match.html +++ b/src/addons/qtype/match/component/addon-qtype-match.html @@ -19,9 +19,9 @@ {{ row.accessibilityLabel }} - - {{option.label}} diff --git a/src/addons/qtype/multichoice/component/addon-qtype-multichoice.html b/src/addons/qtype/multichoice/component/addon-qtype-multichoice.html index 4e69f9ce5..ef8424e64 100644 --- a/src/addons/qtype/multichoice/component/addon-qtype-multichoice.html +++ b/src/addons/qtype/multichoice/component/addon-qtype-multichoice.html @@ -25,9 +25,9 @@ [contextLevel]="contextLevel" [contextInstanceId]="contextInstanceId" [courseId]="courseId" /> - -
@@ -53,9 +53,9 @@ [contextLevel]="contextLevel" [contextInstanceId]="contextInstanceId" [courseId]="courseId" />
- - diff --git a/src/addons/qtype/ordering/component/addon-qtype-ordering.html b/src/addons/qtype/ordering/component/addon-qtype-ordering.html index e39e23a65..d9b3fe1e6 100644 --- a/src/addons/qtype/ordering/component/addon-qtype-ordering.html +++ b/src/addons/qtype/ordering/component/addon-qtype-ordering.html @@ -21,7 +21,7 @@ @if (item.correctClass === 'correct') { } @else if (item.correctClass === 'incorrect') { - + } @else if (item.correctClass.startsWith('partial')) { diff --git a/src/addons/qtype/ordering/component/ordering.ts b/src/addons/qtype/ordering/component/ordering.ts index 3db001201..8d4edc9b4 100644 --- a/src/addons/qtype/ordering/component/ordering.ts +++ b/src/addons/qtype/ordering/component/ordering.ts @@ -39,9 +39,6 @@ export class AddonQtypeOrderingComponent extends CoreQuestionBaseComponent('[data-itemcontent]'); itemContentEl?.querySelector( - '.icon.fa-check, .icon.fa-remove, .icon.fa-check-square, .icon.fa-check-double, .icon.fa-xmark', + '.icon.fa-check, .icon.fa-remove, .icon.fa-check-square, .icon.fa-circle-check, .icon.fa-xmark, ' + + '.icon.fa-circle-xmark, .icon.fa-square-check, .icon.circle-half-stroke', )?.remove(); return { diff --git a/src/core/features/question/classes/base-question-component.ts b/src/core/features/question/classes/base-question-component.ts index 6bd342378..91a55fdf1 100644 --- a/src/core/features/question/classes/base-question-component.ts +++ b/src/core/features/question/classes/base-question-component.ts @@ -48,6 +48,10 @@ export class CoreQuestionBaseComponent(); // Will emit when a behaviour button is clicked. @Output() onAbort = new EventEmitter(); // Should emit an event if the question should be aborted. + correctIcon = ''; + incorrectIcon = ''; + partialCorrectIcon = ''; + protected logger: CoreLogger; protected hostElement: HTMLElement; @@ -60,6 +64,10 @@ export class CoreQuestionBaseComponent Array.from(element.querySelectorAll('img.icon, img.questioncorrectnessicon, i.icon')); icons.forEach((icon) => { - let iconName: string | undefined; + let iconData: IconData | undefined; let color: string | undefined; - const correctIcon = this.getCorrectIcon(false); - const partiallyCorrectIcon = this.getCorrectIcon(false); + const correctIcon = this.getCorrectIcon(); + const incorrectIcon = this.getIncorrectIcon(); + const partiallyCorrectIcon = this.getPartiallyCorrectIcon(); if ('src' in icon) { if ((icon as HTMLImageElement).src.indexOf('correct') >= 0) { - iconName = correctIcon; + iconData = correctIcon; color = CoreIonicColorNames.SUCCESS; } else if ((icon as HTMLImageElement).src.indexOf('incorrect') >= 0 ) { - iconName = 'xmark'; + iconData = incorrectIcon; color = CoreIonicColorNames.DANGER; } } else { - if (icon.classList.contains(`fa-${partiallyCorrectIcon}`)) { - iconName = partiallyCorrectIcon; + if (icon.classList.contains(`fa-${partiallyCorrectIcon.name}`)) { + iconData = partiallyCorrectIcon; color = CoreIonicColorNames.WARNING; - } else if (icon.classList.contains(`fa-${correctIcon}`)) { - iconName = correctIcon; + } else if (icon.classList.contains(`fa-${correctIcon.name}`)) { + iconData = correctIcon; color = CoreIonicColorNames.SUCCESS; - } else if (icon.classList.contains('fa-xmark') || icon.classList.contains('fa-remove')) { - iconName = 'xmark'; + } else if (icon.classList.contains(`fa-${incorrectIcon.name}`) || icon.classList.contains('fa-remove')) { + iconData = incorrectIcon; color = CoreIonicColorNames.DANGER; } } - if (!iconName) { + if (!iconData) { return; } // Replace the icon with the font version. const newIcon: HTMLIonIconElement = document.createElement('ion-icon'); - newIcon.setAttribute('name', `fas-${iconName}`); - newIcon.setAttribute('src', CoreIcons.getIconSrc('font-awesome', 'solid', iconName)); + newIcon.setAttribute('name', iconData.fullName); + newIcon.setAttribute('src', CoreIcons.getIconSrc('font-awesome', iconData.library, iconData.name)); newIcon.className = `core-correct-icon ion-color ion-color-${color} questioncorrectnessicon`; newIcon.title = icon.title; newIcon.setAttribute('aria-label', icon.title); @@ -997,3 +1039,13 @@ export type CoreQuestionBehaviourButton = { export type CoreQuestionBehaviourCertaintyOption = CoreQuestionBehaviourButton & { text: string; }; + +/** + * Data about a font-awesome icon. + */ +type IconData = { + name: string; + prefix: string; + library: string; + fullName: string; +};