MOBILE-4362 lesson: Display 'Correct response' as badge
parent
b3af76705e
commit
cc472e58f5
|
@ -128,7 +128,7 @@
|
|||
<ng-container *ngIf="page.isQuestion">
|
||||
<!-- 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"
|
||||
[ngClass]="{'addon-mod_lesson-highlight': answer[0].highlight}">
|
||||
<ion-label>
|
||||
|
@ -138,12 +138,15 @@
|
|||
[courseId]="courseId">
|
||||
</core-format-text>
|
||||
</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"
|
||||
[text]="answer[1]" contextLevel="module" [contextInstanceId]="lesson?.coursemodule"
|
||||
[courseId]="courseId">
|
||||
</core-format-text>
|
||||
</ion-badge>
|
||||
<ion-badge *ngIf="answer[0].successBadge" color="success" class="addon-mod_lesson-answer-success">
|
||||
{{ answer[0].successBadge }}
|
||||
</ion-badge>
|
||||
</ion-label>
|
||||
<ion-checkbox [attr.name]="answer[0].name" [ngModel]="answer[0].checked" [disabled]="true" slot="end">
|
||||
</ion-checkbox>
|
||||
|
|
|
@ -1,3 +1,5 @@
|
|||
@import "~theme/globals";
|
||||
|
||||
:host {
|
||||
.button-disabled {
|
||||
opacity: 0.4;
|
||||
|
@ -14,4 +16,8 @@
|
|||
.item-interactive-disabled ion-label {
|
||||
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);
|
||||
|
||||
// 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) {
|
||||
// Truefalse or multichoice.
|
||||
const successBadge = element.querySelector<HTMLElement>('.badge.badge-success');
|
||||
const data: AddonModLessonCheckboxAnswerData = {
|
||||
isCheckbox: true,
|
||||
checked: !!input.checked,
|
||||
name: input.name,
|
||||
highlight: !!element.querySelector('.highlight'),
|
||||
content: '',
|
||||
successBadge: successBadge?.innerText,
|
||||
};
|
||||
|
||||
input.remove();
|
||||
successBadge?.remove();
|
||||
data.content = element.innerHTML.trim();
|
||||
|
||||
return data;
|
||||
}
|
||||
|
||||
// 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) {
|
||||
// Short answer or numeric.
|
||||
return {
|
||||
|
@ -700,6 +703,7 @@ export type AddonModLessonCheckboxAnswerData = {
|
|||
name: string;
|
||||
highlight: boolean;
|
||||
content: string;
|
||||
successBadge?: string;
|
||||
};
|
||||
|
||||
/**
|
||||
|
|
Loading…
Reference in New Issue