MOBILE-4550 quiz: Change how quiz result info is displayed

src/addons/mod/quiz/components/index/addon-mod-quiz-index.html

@@ -45,11 +45,64 @@
     </ion-card>
 
     <!-- List of user attempts. -->
-    <ion-card class="addon-mod_quiz-attempts-summary" *ngIf="quiz && attempts.length">
+    @if (quiz && attempts.length) {
+    <ion-card class="addon-mod_quiz-attempts-summary">
         <ion-card-header class="ion-text-wrap">
             <ion-card-title>{{ 'addon.mod_quiz.summaryofattempts' | translate }}</ion-card-title>
         </ion-card-header>
 
+        <!-- Quiz result info. -->
+        @if (quiz && showResults && (gradeResult || gradeOverridden || gradebookFeedback || (quiz.showFeedback && overallFeedback))) {
+
+        @if (overallStats && gradeResult) {
+        <ion-item class="ion-text-wrap addon-mod_quiz-grade-result">
+            <ion-label>
+                <div class="addon-mod_quiz-grade-result-grade">
+                    @if (moreAttempts) {
+                    <span>{{ gradeMethodReadable }}</span>
+                    <span>{{ gradeResult }}</span>
+                    } @else {
+                    <span>{{ 'addon.mod_quiz.yourfinalgradeis' | translate:{ $a: gradeResult } }}</span>
+                    }
+                </div>
+
+                @if (gradeOverridden) {
+                <p class="addon-mod_quiz-grade-overridden-notice">
+                    <ion-icon name="fas-circle-info" color="info" slot="start" aria-hidden="true" />
+                    {{ 'core.course.overriddennotice' | translate }}
+                </p>
+                }
+            </ion-label>
+        </ion-item>
+        }
+
+        @if (gradebookFeedback) {
+        <ion-item class="ion-text-wrap addon-mod_quiz-gradebook-feedback">
+            <ion-label>
+                <p class="item-heading">{{ 'addon.mod_quiz.comment' | translate }}</p>
+                <p>
+                    <core-format-text [component]="component" [componentId]="componentId" [text]="gradebookFeedback" contextLevel="module"
+                        [contextInstanceId]="module.id" [courseId]="courseId" />
+                </p>
+            </ion-label>
+        </ion-item>
+        }
+
+        @if (quiz.showFeedback && overallFeedback) {
+        <hr>
+        <ion-item class="ion-text-wrap addon-mod_quiz-overall-feedback">
+            <ion-label>
+                <p class="item-heading">{{ 'addon.mod_quiz.overallfeedback' | translate }}</p>
+                <p>
+                    <core-format-text [component]="component" [componentId]="componentId" [text]="overallFeedback" contextLevel="module"
+                        [contextInstanceId]="module.id" [courseId]="courseId" />
+                </p>
+            </ion-label>
+        </ion-item>
+        }
+
+        }
+
         <ion-accordion-group>
             @for (attempt of attempts; track attempt.id) {
             <ion-accordion [value]="attempt.id" toggleIconSlot="start">
@@ -108,37 +161,7 @@
             }
         </ion-accordion-group>
     </ion-card>
-
+    }
-    <!-- Result info. -->
-    <ion-card *ngIf="quiz && showResults &&
-        (gradeResult || gradeOverridden || gradebookFeedback || (quiz.showFeedback && overallFeedback))">
-        <ion-list>
-            <ion-item class="ion-text-wrap" *ngIf="gradeResult">
-                <ion-label>{{ gradeResult }}</ion-label>
-            </ion-item>
-            <ion-item class="ion-text-wrap" *ngIf="gradeOverridden">
-                <ion-label>{{ 'core.course.overriddennotice' | translate }}</ion-label>
-            </ion-item>
-            <ion-item class="ion-text-wrap" *ngIf="gradebookFeedback">
-                <ion-label>
-                    <p class="item-heading">{{ 'addon.mod_quiz.comment' | translate }}</p>
-                    <p>
-                        <core-format-text [component]="component" [componentId]="componentId" [text]="gradebookFeedback"
-                            contextLevel="module" [contextInstanceId]="module.id" [courseId]="courseId" />
-                    </p>
-                </ion-label>
-            </ion-item>
-            <ion-item class="ion-text-wrap" *ngIf="quiz.showFeedback && overallFeedback">
-                <ion-label>
-                    <p class="item-heading">{{ 'addon.mod_quiz.overallfeedback' | translate }}</p>
-                    <p>
-                        <core-format-text [component]="component" [componentId]="componentId" [text]="overallFeedback" contextLevel="module"
-                            [contextInstanceId]="module.id" [courseId]="courseId" />
-                    </p>
-                </ion-label>
-            </ion-item>
-        </ion-list>
-    </ion-card>
 
     <!-- More data. -->
     <ng-container *ngIf="quiz">

src/addons/mod/quiz/components/index/index.scss

@@ -2,41 +2,73 @@
 
 :host {
 
-    .addon-mod_quiz-attempt-title-info {
+    .addon-mod_quiz-attempts-summary {
-        text-align: end;
+        ion-card-header {
-        padding-top: 8px;
+            border-bottom: 1px solid var(--stroke);
-        padding-bottom: 8px;
-
-        p {
-            margin: 0px;
-            margin-top: 4px;
         }
-    }
 
-    .accordion-expanded	.addon-mod_quiz-attempt-title-info,
+        .addon-mod_quiz-grade-result {
-    .accordion-expanding .addon-mod_quiz-attempt-title-info {
+            margin-top: var(--mdl-spacing-2);
-        visibility: hidden;
-    }
 
-    hr {
-        background-color: var(--stroke);
-        height: 1px;
-        margin: 0px 16px;
-    }
 
-    ion-accordion:nth-child(odd) {
+            .addon-mod_quiz-grade-overridden-notice {
-        background-color: var(--core-table-odd-cell-background);
+                margin-top: var(--mdl-spacing-2);
+                margin-bottom: 0px;
+            }
 
-        ::ng-deep ion-item {
+            .addon-mod_quiz-grade-result-grade {
-            --background: var(--core-table-odd-cell-background);
+                display: flex;
+
+                span:first-child {
+                    flex-grow: 1;
+                }
+            }
         }
-    }
 
-    ion-accordion:nth-child(even) {
+        .addon-mod_quiz-attempt-title-info {
-        background-color: var(--core-table-even-cell-background);
+            display: flex;
+            flex-direction: column;
+            align-items: end;
+            justify-content: center;
+            min-height: 60px;
+            padding-top: var(--mdl-spacing-2);
+            padding-bottom: var(--mdl-spacing-2);
 
-        ::ng-deep ion-item {
+            p {
-            --background: var(--core-table-even-cell-background);
+                margin: 0px;
+                margin-top: var(--mdl-spacing-2);
+            }
+        }
+
+        ion-accordion-group {
+            border-top: 1px solid var(--stroke);
+
+            .accordion-expanded	.addon-mod_quiz-attempt-title-info,
+            .accordion-expanding .addon-mod_quiz-attempt-title-info {
+                visibility: hidden;
+            }
+
+            hr {
+                background-color: var(--stroke);
+                height: 1px;
+                margin: 0px var(-mdl-spacing-4);
+            }
+
+            ion-accordion:nth-child(odd) {
+                background-color: var(--core-table-odd-cell-background);
+
+                ::ng-deep ion-item {
+                    --background: var(--core-table-odd-cell-background);
+                }
+            }
+
+            ion-accordion:nth-child(even) {
+                background-color: var(--core-table-even-cell-background);
+
+                ::ng-deep ion-item {
+                    --background: var(--core-table-even-cell-background);
+                }
+            }
         }
     }
 

src/addons/mod/quiz/components/index/index.ts

@@ -348,23 +348,10 @@ export class AddonModQuizIndexComponent extends CoreCourseModuleMainActivityComp
             gradeToShow = formattedBestGrade;
         }
 
-        if (this.overallStats) {
+        this.gradeResult = Translate.instant('core.grades.gradelong', { $a: {
-            // Show the quiz grade. The message shown is different if the quiz is finished.
+            grade: gradeToShow,
-            if (this.moreAttempts) {
+            max: quiz.gradeFormatted,
-                this.gradeResult = Translate.instant('addon.mod_quiz.gradesofar', { $a: {
+        } });
-                    method: this.gradeMethodReadable,
-                    mygrade: gradeToShow,
-                    quizgrade: quiz.gradeFormatted,
-                } });
-            } else {
-                const outOfShort = Translate.instant('addon.mod_quiz.outofshort', { $a: {
-                    grade: gradeToShow,
-                    maxgrade: quiz.gradeFormatted,
-                } });
-
-                this.gradeResult = Translate.instant('addon.mod_quiz.yourfinalgradeis', { $a: outOfShort });
-            }
-        }
 
         if (quiz.showFeedback) {
             // Get the quiz overall feedback.