MOBILE-4362 lesson: Display 'Correct response' as badge
parent
b3af76705e
commit
cc472e58f5
|
@ -128,7 +128,7 @@
|
||||||
<ng-container *ngIf="page.isQuestion">
|
<ng-container *ngIf="page.isQuestion">
|
||||||
<!-- Question page, show the right input for the answer. -->
|
<!-- Question page, show the right input for the answer. -->
|
||||||
|
|
||||||
<!-- Truefalse or matching. -->
|
<!-- Truefalse or multichoice. -->
|
||||||
<ion-item class="ion-text-wrap" *ngIf="answer[0].isCheckbox"
|
<ion-item class="ion-text-wrap" *ngIf="answer[0].isCheckbox"
|
||||||
[ngClass]="{'addon-mod_lesson-highlight': answer[0].highlight}">
|
[ngClass]="{'addon-mod_lesson-highlight': answer[0].highlight}">
|
||||||
<ion-label>
|
<ion-label>
|
||||||
|
@ -138,12 +138,15 @@
|
||||||
[courseId]="courseId">
|
[courseId]="courseId">
|
||||||
</core-format-text>
|
</core-format-text>
|
||||||
</p>
|
</p>
|
||||||
<ion-badge *ngIf="answer[1]" color="dark">
|
<ion-badge *ngIf="answer[1]" color="dark" class="addon-mod_lesson-answer-stats">
|
||||||
<core-format-text [component]="component" [componentId]="lesson?.coursemodule"
|
<core-format-text [component]="component" [componentId]="lesson?.coursemodule"
|
||||||
[text]="answer[1]" contextLevel="module" [contextInstanceId]="lesson?.coursemodule"
|
[text]="answer[1]" contextLevel="module" [contextInstanceId]="lesson?.coursemodule"
|
||||||
[courseId]="courseId">
|
[courseId]="courseId">
|
||||||
</core-format-text>
|
</core-format-text>
|
||||||
</ion-badge>
|
</ion-badge>
|
||||||
|
<ion-badge *ngIf="answer[0].successBadge" color="success" class="addon-mod_lesson-answer-success">
|
||||||
|
{{ answer[0].successBadge }}
|
||||||
|
</ion-badge>
|
||||||
</ion-label>
|
</ion-label>
|
||||||
<ion-checkbox [attr.name]="answer[0].name" [ngModel]="answer[0].checked" [disabled]="true" slot="end">
|
<ion-checkbox [attr.name]="answer[0].name" [ngModel]="answer[0].checked" [disabled]="true" slot="end">
|
||||||
</ion-checkbox>
|
</ion-checkbox>
|
||||||
|
|
|
@ -1,3 +1,5 @@
|
||||||
|
@import "~theme/globals";
|
||||||
|
|
||||||
:host {
|
:host {
|
||||||
.button-disabled {
|
.button-disabled {
|
||||||
opacity: 0.4;
|
opacity: 0.4;
|
||||||
|
@ -14,4 +16,8 @@
|
||||||
.item-interactive-disabled ion-label {
|
.item-interactive-disabled ion-label {
|
||||||
opacity: 0.5;
|
opacity: 0.5;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.addon-mod_lesson-answer-success {
|
||||||
|
@include margin-horizontal(4px, null);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -461,25 +461,28 @@ export class AddonModLessonHelperProvider {
|
||||||
const element = CoreDomUtils.convertToElement(html);
|
const element = CoreDomUtils.convertToElement(html);
|
||||||
|
|
||||||
// Check if it has a checkbox.
|
// Check if it has a checkbox.
|
||||||
let input = <HTMLInputElement> element.querySelector('input[type="checkbox"][name*="answer"]');
|
let input = element.querySelector<HTMLInputElement>('input[type="checkbox"][name*="answer"]');
|
||||||
if (input) {
|
if (input) {
|
||||||
// Truefalse or multichoice.
|
// Truefalse or multichoice.
|
||||||
|
const successBadge = element.querySelector<HTMLElement>('.badge.badge-success');
|
||||||
const data: AddonModLessonCheckboxAnswerData = {
|
const data: AddonModLessonCheckboxAnswerData = {
|
||||||
isCheckbox: true,
|
isCheckbox: true,
|
||||||
checked: !!input.checked,
|
checked: !!input.checked,
|
||||||
name: input.name,
|
name: input.name,
|
||||||
highlight: !!element.querySelector('.highlight'),
|
highlight: !!element.querySelector('.highlight'),
|
||||||
content: '',
|
content: '',
|
||||||
|
successBadge: successBadge?.innerText,
|
||||||
};
|
};
|
||||||
|
|
||||||
input.remove();
|
input.remove();
|
||||||
|
successBadge?.remove();
|
||||||
data.content = element.innerHTML.trim();
|
data.content = element.innerHTML.trim();
|
||||||
|
|
||||||
return data;
|
return data;
|
||||||
}
|
}
|
||||||
|
|
||||||
// Check if it has an input text or number.
|
// Check if it has an input text or number.
|
||||||
input = <HTMLInputElement> element.querySelector('input[type="number"],input[type="text"]');
|
input = element.querySelector<HTMLInputElement>('input[type="number"],input[type="text"]');
|
||||||
if (input) {
|
if (input) {
|
||||||
// Short answer or numeric.
|
// Short answer or numeric.
|
||||||
return {
|
return {
|
||||||
|
@ -700,6 +703,7 @@ export type AddonModLessonCheckboxAnswerData = {
|
||||||
name: string;
|
name: string;
|
||||||
highlight: boolean;
|
highlight: boolean;
|
||||||
content: string;
|
content: string;
|
||||||
|
successBadge?: string;
|
||||||
};
|
};
|
||||||
|
|
||||||
/**
|
/**
|
||||||
|
|
Loading…
Reference in New Issue