From cc472e58f5a57c2fdb28e966a1a08cb44a7abeb9 Mon Sep 17 00:00:00 2001
From: Dani Palou <dani@moodle.com>
Date: Tue, 10 Oct 2023 11:17:22 +0200
Subject: [PATCH] MOBILE-4362 lesson: Display 'Correct response' as badge

---
 src/addons/mod/lesson/pages/user-retake/user-retake.html | 7 +++++--
 src/addons/mod/lesson/pages/user-retake/user-retake.scss | 6 ++++++
 src/addons/mod/lesson/services/lesson-helper.ts          | 8 ++++++--
 3 files changed, 17 insertions(+), 4 deletions(-)

diff --git a/src/addons/mod/lesson/pages/user-retake/user-retake.html b/src/addons/mod/lesson/pages/user-retake/user-retake.html
index c11ce5186..a787489d8 100644
--- a/src/addons/mod/lesson/pages/user-retake/user-retake.html
+++ b/src/addons/mod/lesson/pages/user-retake/user-retake.html
@@ -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>
diff --git a/src/addons/mod/lesson/pages/user-retake/user-retake.scss b/src/addons/mod/lesson/pages/user-retake/user-retake.scss
index 8e5d088c2..88e4e2989 100644
--- a/src/addons/mod/lesson/pages/user-retake/user-retake.scss
+++ b/src/addons/mod/lesson/pages/user-retake/user-retake.scss
@@ -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);
+    }
 }
diff --git a/src/addons/mod/lesson/services/lesson-helper.ts b/src/addons/mod/lesson/services/lesson-helper.ts
index 6e5c00106..18b3276c5 100644
--- a/src/addons/mod/lesson/services/lesson-helper.ts
+++ b/src/addons/mod/lesson/services/lesson-helper.ts
@@ -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;
 };
 
 /**