{{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;
+};