MOBILE-4560 question: Fix partially graded answers icon & color

src/core/features/question/question.scss

@@ -5,10 +5,31 @@
         color: var(--core-question-correct-color);
     }
 
+    .core-question-answer-partiallycorrect {
+        color: var(--core-question-partial-color);
+    }
+
     .core-question-answer-incorrect {
         color: var(--core-question-incorrect-color);
     }
 
+    input, select {
+        &.core-question-answer-correct {
+            --background: var(--core-question-correct-color-bg);
+            --contrast-background: var(--background);
+        }
+
+        &.core-question-answer-partiallycorrect {
+            --background: var(--core-question-partial-color-bg);
+            --contrast-background: var(--background);
+        }
+
+        &.core-question-answer-incorrect {
+            --background: var(--core-question-incorrect-color-bg);
+            --contrast-background: var(--background);
+        }
+    }
+
     .core-question-feedback-container ::ng-deep {
         --color: var(--core-question-feedback-color);
         --background: var(--core-question-feedback-background-color);
@@ -45,6 +66,7 @@
 
     .core-question-feedback-inline {
         display: inline-block;
+        @include margin-horizontal(4px, 0px);
     }
 
     .core-question-feedback-padding {
@@ -60,11 +82,15 @@
         color: var(--core-question-correct-color);
     }
     .core-question-partiallycorrect {
-        background-color: var(--core-question-state-partial-color);
+        --background: var(--core-question-partial-color-bg);
+        background-color: var(--core-question-partial-color-bg);
+        color: var(--core-question-partial-color);
     }
     .core-question-notanswered,
     .core-question-incorrect {
-        background-color: var(--core-question-state-incorrect-color);
+        --background: var(--core-question-incorrect-color-bg);
+        background-color: var(--core-question-incorrect-color-bg);
+        color: var(--core-question-incorrect-color);
     }
     .core-question-answersaved,
     .core-question-requiresgrading {

src/core/features/question/services/question-helper.ts

@@ -731,6 +731,7 @@ export class CoreQuestionHelperProvider {
         CoreDomUtils.replaceClassesInElement(element, {
             correct: 'core-question-answer-correct',
             incorrect: 'core-question-answer-incorrect',
+            partiallycorrect: 'core-question-answer-partiallycorrect',
         });
     }
 
@@ -799,38 +800,40 @@ export class CoreQuestionHelperProvider {
     treatCorrectnessIcons(element: HTMLElement): void {
         const icons = <HTMLElement[]> Array.from(element.querySelectorAll('img.icon, img.questioncorrectnessicon, i.icon'));
         icons.forEach((icon) => {
-            let correct = false;
+            let iconName: string | undefined;
+            let color: string | undefined;
 
             if ('src' in icon) {
                 if ((icon as HTMLImageElement).src.indexOf('correct') >= 0) {
-                    correct = true;
+                    iconName = 'check';
-                } else if ((icon as HTMLImageElement).src.indexOf('incorrect') < 0 ) {
+                    color = 'success';
-                    return;
+                } else if ((icon as HTMLImageElement).src.indexOf('incorrect') >= 0 ) {
+                    iconName = 'xmark';
+                    color = 'danger';
                 }
             } else {
-                const classList = icon.classList.toString();
+                if (icon.classList.contains('fa-check-square')) {
-                if (classList.indexOf('fa-check') >= 0) {
+                    iconName = 'square-check';
-                    correct = true;
+                    color = 'warning';
-                } else if (classList.indexOf('fa-xmark') < 0 && classList.indexOf('fa-remove') < 0) {
+                } else if (icon.classList.contains('fa-check')) {
-                    return;
+                    iconName = 'check';
+                    color = 'success';
+                } else if (icon.classList.contains('fa-xmark') || icon.classList.contains('fa-remove')) {
+                    iconName = 'xmark';
+                    color = 'danger';
                 }
             }
 
+            if (!iconName) {
+                return;
+            }
+
             // Replace the icon with the font version.
             const newIcon: HTMLIonIconElement = document.createElement('ion-icon');
 
-            if (correct) {
+            newIcon.setAttribute('name', `fas-${iconName}`);
-                const iconName = 'check';
+            newIcon.setAttribute('src', CoreIcons.getIconSrc('font-awesome', 'solid', iconName));
-                newIcon.setAttribute('name', `fas-${iconName}`);
+            newIcon.className = `core-correct-icon ion-color ion-color-${color} questioncorrectnessicon`;
-                newIcon.setAttribute('src', CoreIcons.getIconSrc('font-awesome', 'solid', iconName));
-                newIcon.className = 'core-correct-icon ion-color ion-color-success questioncorrectnessicon';
-            } else {
-                const iconName = 'xmark';
-                newIcon.setAttribute('name', `fas-${iconName}`);
-                newIcon.setAttribute('src', CoreIcons.getIconSrc('font-awesome', 'solid', iconName));
-                newIcon.className = 'core-correct-icon ion-color ion-color-danger questioncorrectnessicon';
-            }
-
             newIcon.title = icon.title;
             newIcon.setAttribute('aria-label', icon.title);
             icon.parentNode?.replaceChild(newIcon, icon);

src/theme/theme.dark.scss

@@ -135,6 +135,8 @@ html.dark {
     --core-question-correct-color-bg: var(--success-shade);
     --core-question-incorrect-color: var(--danger);
     --core-question-incorrect-color-bg: var(--danger-shade);
+    --core-question-partial-color: var(--warning-tint);
+    --core-question-partial-color-bg: var(--warning-shade);
     --core-question-feedback-color: var(--warning-tint);
     --core-question-feedback-color-bg: var(--warning-shade);
     --core-question-warning-color: var(--danger);

src/theme/theme.light.scss

@@ -171,6 +171,8 @@ html {
     --core-question-correct-color-bg: var(--success-tint);
     --core-question-incorrect-color: var(--danger);
     --core-question-incorrect-color-bg: var(--danger-tint);
+    --core-question-partial-color: var(--warning-shade);
+    --core-question-partial-color-bg: var(--warning-tint);
     --core-question-feedback-color: var(--warning-shade);
     --core-question-feedback-color-bg: var(--warning-tint);
     --core-question-warning-color: var(--danger);