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

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

main
Dani Palou 2024-04-29 10:40:38 +02:00
parent 497030595e
commit 9c3d2caef8
4 changed files with 56 additions and 23 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

30
src/core/features/question/question.scss
View File

@ -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 {

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

@ -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;
} else if ((icon as HTMLImageElement).src.indexOf('incorrect') < 0 ) {
return;
iconName = 'check';
color = 'success';
} else if ((icon as HTMLImageElement).src.indexOf('incorrect') >= 0 ) {
iconName = 'xmark';
color = 'danger';
}
} else {
const classList = icon.classList.toString();
if (classList.indexOf('fa-check') >= 0) {
correct = true;
} else if (classList.indexOf('fa-xmark') < 0 && classList.indexOf('fa-remove') < 0) {
return;
if (icon.classList.contains('fa-check-square')) {
iconName = 'square-check';
color = 'warning';
} else if (icon.classList.contains('fa-check')) {
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) {
const iconName = 'check';
newIcon.setAttribute('name', `fas-${iconName}`);
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.setAttribute('name', `fas-${iconName}`);
newIcon.setAttribute('src', CoreIcons.getIconSrc('font-awesome', 'solid', iconName));
newIcon.className = `core-correct-icon ion-color ion-color-${color} questioncorrectnessicon`;
newIcon.title = icon.title;
newIcon.setAttribute('aria-label', icon.title);
icon.parentNode?.replaceChild(newIcon, icon);

2
src/theme/theme.dark.scss
View File

@ -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);

2
src/theme/theme.light.scss
View File

@ -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);