EVOgeek
/
Vmeda.Online
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

MOBILE-4638 quiz: Apply new correctness icons depending on LMS version

main
Pau Ferrer Ocaña 2024-09-03 11:20:56 +02:00
parent fdf7ac7fab
commit e1984110b6
4 changed files with 48 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
src/addons/qtype/ordering/component/addon-qtype-ordering.html
View File

@ -19,11 +19,12 @@
@if (dragDisabled) {
@if (item.correctClass === 'correct') {
<ion-icon name="fas-check-double" slot="start" [ariaLabel]="'core.question.correct' | translate" color="success" />
<ion-icon [name]="correctIcon" slot="start" [ariaLabel]="'core.question.correct' | translate" color="success" />
} @else if (item.correctClass === 'incorrect') {
<ion-icon name="fas-xmark" slot="start" [ariaLabel]="'core.question.incorrect' | translate" color="danger" />
} @else if (item.correctClass.startsWith('partial')) {
<ion-icon name="fas-check" slot="start" [ariaLabel]="'core.question.partiallycorrect' | translate" color="warning" />
<ion-icon [name]="partialCorrectIcon" slot="start" [ariaLabel]="'core.question.partiallycorrect' | translate"
color="warning" />
}
}

6
src/addons/qtype/ordering/component/ordering.ts
View File

@ -39,6 +39,9 @@ export class AddonQtypeOrderingComponent extends CoreQuestionBaseComponent<Addon
value: '',
};
correctIcon = '';
partialCorrectIcon = '';
constructor(elementRef: ElementRef) {
super('AddonQtypeOrderingComponent', elementRef);
}
@ -56,6 +59,9 @@ export class AddonQtypeOrderingComponent extends CoreQuestionBaseComponent<Addon
return;
}
this.correctIcon = CoreQuestionHelper.getCorrectIcon();
this.partialCorrectIcon = CoreQuestionHelper.getPartiallyCorrectIcon();
// Replace Moodle's feedback classes with our own.
CoreQuestionHelper.replaceFeedbackClasses(questionElement);

4
src/core/features/question/classes/base-question-component.ts
View File

@ -497,12 +497,12 @@ export class CoreQuestionBaseComponent<T extends AddonModQuizQuestion = AddonMod
question.input.correctIconLabel = 'core.question.incorrect';
} else if (input.classList.contains('correct')) {
question.input.correctClass = 'core-question-correct';
question.input.correctIcon = 'fas-check-double';
question.input.correctIcon = CoreQuestionHelper.getCorrectIcon();
question.input.correctIconColor = CoreIonicColorNames.SUCCESS;
question.input.correctIconLabel = 'core.question.correct';
} else if (input.classList.contains('partiallycorrect')) {
question.input.correctClass = 'core-question-partiallycorrect';
question.input.correctIcon = 'fas-check';
question.input.correctIcon = CoreQuestionHelper.getPartiallyCorrectIcon();
question.input.correctIconColor = CoreIonicColorNames.WARNING;
question.input.correctIconLabel = 'core.question.partiallycorrect';
} else {

46
src/core/features/question/services/question-helper.ts
View File

@ -795,6 +795,36 @@ export class CoreQuestionHelperProvider {
onAbort?.emit();
}
/**
* Returns correct icon based on the LMS version.
* In LMS 4.4 and older, fa-check means correct. In 4.5+, fa-check means partially correct.
*
* @param withPrefix Whether to include the prefix in the icon name.
* @returns Icon name.
*/
getCorrectIcon(withPrefix = true): string {
const icon = CoreSites.getRequiredCurrentSite().isVersionGreaterEqualThan('4.5')
? 'check-double'
: 'check';
return withPrefix ? `fas-${icon}` : icon;
}
/**
* Returns partially correct icon based on the LMS version.
* In LMS 4.4 and older, fa-check means correct. In 4.5+, fa-check means partially correct.
*
* @param withPrefix Whether to include the prefix in the icon name.
* @returns Icon name.
*/
getPartiallyCorrectIcon(withPrefix = true): string {
const icon = CoreSites.getRequiredCurrentSite().isVersionGreaterEqualThan('4.5')
? 'check'
: 'square-check';
return withPrefix ? `fas-${icon}` : icon;
}
/**
* Treat correctness icons, replacing them with local icons and setting click events to show the feedback if needed.
*
@ -806,24 +836,22 @@ export class CoreQuestionHelperProvider {
let iconName: string | undefined;
let color: string | undefined;
const correctIcon = this.getCorrectIcon(false);
const partiallyCorrectIcon = this.getCorrectIcon(false);
if ('src' in icon) {
if ((icon as HTMLImageElement).src.indexOf('correct') >= 0) {
iconName = 'check';
iconName = correctIcon;
color = CoreIonicColorNames.SUCCESS;
} else if ((icon as HTMLImageElement).src.indexOf('incorrect') >= 0 ) {
iconName = 'xmark';
color = CoreIonicColorNames.DANGER;
}
} else {
// In LMS 4.4 and older, fa-check means correct. In 4.5+, fa-check means partially correct.
if (
icon.classList.contains('fa-check-square') ||
(icon.classList.contains('fa-check') && icon.classList.contains('text-warning'))
) {
iconName = 'check';
if (icon.classList.contains(`fa-${partiallyCorrectIcon}`)) {
iconName = partiallyCorrectIcon;
color = CoreIonicColorNames.WARNING;
} else if (icon.classList.contains('fa-check-double') || icon.classList.contains('fa-check')) {
iconName = 'check-double';
} else if (icon.classList.contains(`fa-${correctIcon}`)) {
iconName = correctIcon;
color = CoreIonicColorNames.SUCCESS;
} else if (icon.classList.contains('fa-xmark') || icon.classList.contains('fa-remove')) {
iconName = 'xmark';