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

MOBILE-4362 lesson: Display 'Correct response' as badge

main
Dani Palou 2023-10-10 11:17:22 +02:00
parent b3af76705e
commit cc472e58f5
3 changed files with 17 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
src/addons/mod/lesson/pages/user-retake/user-retake.html
View File

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

6
src/addons/mod/lesson/pages/user-retake/user-retake.scss
View File

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

8
src/addons/mod/lesson/services/lesson-helper.ts
View File

@ -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;
}; };
/** /**