Merge pull request #4166 from crazyserver/MOBILE-4638

MOBILE-4638 quiz: Apply new correctness icons depending on LMS version
moodlehq · Sep 3, 2024 · d800909 · d800909
2 parents fdf7ac7 + e198411
commit d800909
Show file tree

Hide file tree

Showing 4 changed files with 48 additions and 13 deletions.
diff --git a/src/addons/qtype/ordering/component/addon-qtype-ordering.html b/src/addons/qtype/ordering/component/addon-qtype-ordering.html
@@ -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" />
                 }
                 }
 

diff --git a/src/addons/qtype/ordering/component/ordering.ts b/src/addons/qtype/ordering/component/ordering.ts
@@ -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);
 

diff --git a/src/core/features/question/classes/base-question-component.ts b/src/core/features/question/classes/base-question-component.ts
@@ -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 {

diff --git a/src/core/features/question/services/question-helper.ts b/src/core/features/question/services/question-helper.ts
@@ -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';