Merge pull request #4298 from crazyserver/MOBILE-4736

MOBILE-4736 question: Add partial to match and multichoice
moodlehq · Jan 28, 2025 · 2fa7673 · 2fa7673
2 parents ffb8642 + 2c3e980
commit 2fa7673
Show file tree

Hide file tree

Showing 3 changed files with 42 additions and 20 deletions.
diff --git a/src/addons/qtype/match/component/addon-qtype-match.html b/src/addons/qtype/match/component/addon-qtype-match.html
@@ -8,8 +8,9 @@
     <ion-item class="ion-text-wrap question-rows" *ngFor="let row of question.rows">
 
         <ion-select id="{{row.id}}" [name]="row.name" [(ngModel)]="row.selected" interface="action-sheet" [disabled]="row.disabled"
-            [cancelText]="'core.cancel' | translate"
-            [ngClass]="{'addon-qtype-match-correct': row.isCorrect === 1,'addon-qtype-match-incorrect': row.isCorrect === 0}">
+            [cancelText]="'core.cancel' | translate" [class.addon-qtype-match-correct]="row.correctClass === 'correct'"
+            [class.addon-qtype-match-incorrect]="row.correctClass === 'incorrect'"
+            [class.addon-qtype-match-partiallycorrect]="row.correctClass === 'partiallycorrect'">
             <div slot="label" class="flex-row ion-text-wrap">
                 <div>
                     <core-format-text [component]="component" [componentId]="componentId" [text]="row.text" [contextLevel]="contextLevel"
@@ -19,10 +20,14 @@
                     {{ row.accessibilityLabel }}
                 </label>
             </div>
-            <ion-icon *ngIf="row.isCorrect === 1" class="core-correct-icon" [name]="correctIcon" color="success" slot="start"
+
+            <ion-icon *ngIf="row.correctClass === 'correct'" class="core-correct-icon" [name]="correctIcon" color="success" slot="start"
                 [attr.aria-label]="'core.question.correct' | translate" />
-            <ion-icon *ngIf="row.isCorrect === 0" class="core-correct-icon" [name]="incorrectIcon" color="danger" slot="start"
+            <ion-icon *ngIf="row.correctClass === 'partiallycorrect'" class="core-correct-icon" [name]="partialCorrectIcon" color="warning"
+                slot="start" [attr.aria-label]="'core.question.partiallycorrect' | translate" />
+            <ion-icon *ngIf="row.correctClass === 'incorrect'" class="core-correct-icon" [name]="incorrectIcon" color="danger" slot="start"
                 [attr.aria-label]="'core.question.incorrect' | translate" />
+
             <ion-select-option *ngFor="let option of row.options" [value]="option.value">
                 {{option.label}}
             </ion-select-option>

diff --git a/src/addons/qtype/multichoice/component/addon-qtype-multichoice.html b/src/addons/qtype/multichoice/component/addon-qtype-multichoice.html
@@ -18,16 +18,19 @@
         <ion-item class="ion-text-wrap answer" *ngFor="let option of question.options">
             <div class="flex-column">
                 <ion-checkbox [attr.name]="option.name" [(ngModel)]="option.checked" [disabled]="option.disabled"
-                    [color]='(option.isCorrect === 1 ? "success": "") + (option.isCorrect === 0 ? "danger": "")'>
+                    [color]="option.correctColor">
                     <div class="flex-grow ion-text-wrap">
                         <div [class]="option.class">
                             <core-format-text [component]="component" [componentId]="componentId" [text]="option.text"
                                 [contextLevel]="contextLevel" [contextInstanceId]="contextInstanceId" [courseId]="courseId" />
                         </div>
                     </div>
-                    <ion-icon *ngIf="option.isCorrect === 1" class="core-correct-icon" [name]="correctIcon" color="success"
+
+                    <ion-icon *ngIf="option.correctClass === 'correct'" class="core-correct-icon" [name]="correctIcon" color="success"
                         [attr.aria-label]="'core.question.correct' | translate" />
-                    <ion-icon *ngIf="option.isCorrect === 0" class="core-correct-icon" [name]="incorrectIcon" color="danger"
+                    <ion-icon *ngIf="option.correctClass === 'partiallycorrect'" class="core-correct-icon" [name]="partialCorrectIcon"
+                        color="warning" [attr.aria-label]="'core.question.partiallycorrect' | translate" />
+                    <ion-icon *ngIf="option.correctClass === 'incorrect'" class="core-correct-icon" [name]="incorrectIcon" color="danger"
                         [attr.aria-label]="'core.question.incorrect' | translate" />
                 </ion-checkbox>
                 <div *ngIf="option.feedback" class="specificfeedback">
@@ -45,17 +48,19 @@
     <ion-radio-group *ngIf="!question.multi" [(ngModel)]="question.singleChoiceModel" [name]="question.optionsName">
         <ion-item class="ion-text-wrap answer" *ngFor="let option of question.options">
             <div class="flex-column">
-                <ion-radio [value]="option.value" [disabled]="option.disabled"
-                    [color]='(option.isCorrect === 1 ? "success": "") + (option.isCorrect === 0 ? "danger": "")'>
+                <ion-radio [value]="option.value" [disabled]="option.disabled" [color]="option.correctColor">
                     <div class="flex-grow ion-text-wrap">
                         <div [class]="option.class">
                             <core-format-text [component]="component" [componentId]="componentId" [text]="option.text"
                                 [contextLevel]="contextLevel" [contextInstanceId]="contextInstanceId" [courseId]="courseId" />
                         </div>
                     </div>
-                    <ion-icon *ngIf="option.isCorrect === 1" class="core-correct-icon" [name]="correctIcon" color="success"
+
+                    <ion-icon *ngIf="option.correctClass === 'correct'" class="core-correct-icon" [name]="correctIcon" color="success"
                         [attr.aria-label]="'core.question.correct' | translate" />
-                    <ion-icon *ngIf="option.isCorrect === 0" class="core-correct-icon" [name]="incorrectIcon" color="danger"
+                    <ion-icon *ngIf="option.correctClass === 'partiallycorrect'" class="core-correct-icon" [name]="partialCorrectIcon"
+                        color="warning" [attr.aria-label]="'core.question.partiallycorrect' | translate" />
+                    <ion-icon *ngIf="option.correctClass === 'incorrect'" class="core-correct-icon" [name]="incorrectIcon" color="danger"
                         [attr.aria-label]="'core.question.incorrect' | translate" />
                 </ion-radio>
 

diff --git a/src/core/features/question/classes/base-question-component.ts b/src/core/features/question/classes/base-question-component.ts
@@ -589,10 +589,15 @@ export class CoreQuestionBaseComponent<T extends AddonModQuizQuestion = AddonMod
             };
 
             // Check if answer is correct.
-            if (columns[1].className.indexOf('incorrect') >= 0) {
-                rowModel.isCorrect = 0;
+            if (columns[1].className.indexOf('partiallycorrect') >= 0) {
+                rowModel.correctClass = 'partiallycorrect';
+                rowModel.correctColor = CoreIonicColorNames.WARNING;
+            } else if (columns[1].className.indexOf('incorrect') >= 0) {
+                rowModel.correctClass = 'incorrect';
+                rowModel.correctColor = CoreIonicColorNames.DANGER;
             } else if (columns[1].className.indexOf('correct') >= 0) {
-                rowModel.isCorrect = 1;
+                rowModel.correctClass = 'correct';
+                rowModel.correctColor = CoreIonicColorNames.SUCCESS;
             }
 
             // Treat each option.
@@ -710,10 +715,15 @@ export class CoreQuestionBaseComponent<T extends AddonModQuizQuestion = AddonMod
 
                 if (parent) {
                     // Check if answer is correct.
-                    if (parent && parent.className.indexOf('incorrect') >= 0) {
-                        option.isCorrect = 0;
-                    } else if (parent && parent.className.indexOf('correct') >= 0) {
-                        option.isCorrect = 1;
+                    if (parent.className.indexOf('partiallycorrect') >= 0) {
+                        option.correctClass = 'partiallycorrect';
+                        option.correctColor = CoreIonicColorNames.WARNING;
+                    } else if (parent.className.indexOf('incorrect') >= 0) {
+                        option.correctClass = 'incorrect';
+                        option.correctColor = CoreIonicColorNames.DANGER;
+                    } else if (parent.className.indexOf('correct') >= 0) {
+                        option.correctClass = 'correct';
+                        option.correctColor = CoreIonicColorNames.SUCCESS;
                     }
 
                     // Search the feedback.
@@ -796,7 +806,8 @@ export type AddonModQuizQuestionRadioOption = {
     disabled: boolean;
     checked: boolean;
     text?: string;
-    isCorrect?: number;
+    correctClass?: 'correct' | 'incorrect' | 'partiallycorrect';
+    correctColor?: CoreIonicColorNames;
     feedback?: string;
 };
 
@@ -868,7 +879,8 @@ export type AddonModQuizMatchQuestion = AddonModQuizQuestionBasicData & {
  */
 export type AddonModQuizQuestionMatchSelect = AddonModQuizQuestionSelect & {
     text: string;
-    isCorrect?: number;
+    correctClass?: 'correct' | 'incorrect' | 'partiallycorrect';
+    correctColor?: CoreIonicColorNames;
 };
 
 /**