From ac677b5af748536f82e32a47be48dd01efc9bbbf Mon Sep 17 00:00:00 2001
From: Albert Gasset <albert.gasset@moodle.com>
Date: Fri, 25 Apr 2025 11:22:20 +0200
Subject: [PATCH] MOBILE-4626 grades: Display grade penalties

---
 .../edit-feedback-modal.html                  | 26 +++++--
 .../edit-feedback-modal.scss                  | 21 ++++++
 .../edit-feedback-modal.ts                    |  4 ++
 .../addon-mod-assign-submission.html          | 24 ++++++-
 .../components/submission/submission.scss     | 19 ++++++
 .../components/submission/submission.ts       |  4 ++
 .../tests/behat/grade_penalties.feature       | 68 +++++++++++++++++++
 .../module-summary/module-summary.html        | 34 +++++++---
 .../module-summary/module-summary.scss        | 20 ++++++
 .../features/grades/pages/course/course.html  | 30 ++++++--
 .../features/grades/pages/course/course.scss  | 22 +++++-
 .../features/grades/services/grades-helper.ts | 21 ++++++
 .../tests/behat/grade_penalties.feature       | 50 ++++++++++++++
 13 files changed, 317 insertions(+), 26 deletions(-)
 create mode 100644 src/addons/mod/assign/components/edit-feedback-modal/edit-feedback-modal.scss
 create mode 100644 src/addons/mod/assign/tests/behat/grade_penalties.feature
 create mode 100644 src/core/features/grades/tests/behat/grade_penalties.feature

diff --git a/src/addons/mod/assign/components/edit-feedback-modal/edit-feedback-modal.html b/src/addons/mod/assign/components/edit-feedback-modal/edit-feedback-modal.html
index 238495a69bb..c03fbd11754 100644
--- a/src/addons/mod/assign/components/edit-feedback-modal/edit-feedback-modal.html
+++ b/src/addons/mod/assign/components/edit-feedback-modal/edit-feedback-modal.html
@@ -59,13 +59,27 @@ <h1>{{'core.gradenoun' | translate}}</h1>
                 <ion-item class="ion-text-wrap" *ngIf="grade.method === 'simple'">
                     <ion-label>
                         <p class="item-heading">{{ 'addon.mod_assign.currentgrade' | translate }}</p>
-                        <p *ngIf="grade.gradebookGrade && !grade.scale">
-                            {{ grade.gradebookGrade }}
+                        <p class="core-grading-summary-grade">
+                            @if (grade.gradebookGrade) {
+                                @if (grade.penalty) {
+                                    <ion-icon name="fas-triangle-exclamation" color="danger" aria-hidden="true" />
+                                }
+                                <span>
+                                    @if (grade.scale) {
+                                        {{ grade.scale[grade.gradebookGrade].label }}
+                                    } @else {
+                                        {{ grade.gradebookGrade }}
+                                    }
+                                </span>
+                            } @else {
+                                -
+                            }
                         </p>
-                        <p *ngIf="grade.gradebookGrade && grade.scale">
-                            {{ grade.scale[grade.gradebookGrade].label }}
-                        </p>
-                        <p *ngIf="!grade.gradebookGrade">-</p>
+                        @if (grade.penalty) {
+                            <p class="core-grading-summary-penalty">
+                                {{ grade.penalty }}
+                            </p>
+                        }
                     </ion-label>
                 </ion-item>
 
diff --git a/src/addons/mod/assign/components/edit-feedback-modal/edit-feedback-modal.scss b/src/addons/mod/assign/components/edit-feedback-modal/edit-feedback-modal.scss
new file mode 100644
index 00000000000..085a4e4c721
--- /dev/null
+++ b/src/addons/mod/assign/components/edit-feedback-modal/edit-feedback-modal.scss
@@ -0,0 +1,21 @@
+:host {
+
+    .core-grading-summary-grade {
+        display: flex;
+        align-items: center;
+        gap: 0.25rem;
+
+        ion-icon {
+            flex-shrink: 0;
+        }
+
+        .penalty-indicator-icon {
+            display: none;
+        }
+    }
+
+    .core-grading-summary-penalty {
+        color: var(--danger);
+        font-size: 0.75em;
+    }
+}
diff --git a/src/addons/mod/assign/components/edit-feedback-modal/edit-feedback-modal.ts b/src/addons/mod/assign/components/edit-feedback-modal/edit-feedback-modal.ts
index 1b02e19c3b5..c850a8f1564 100644
--- a/src/addons/mod/assign/components/edit-feedback-modal/edit-feedback-modal.ts
+++ b/src/addons/mod/assign/components/edit-feedback-modal/edit-feedback-modal.ts
@@ -53,6 +53,7 @@ import { CoreFormFields, CoreForms } from '@singletons/form';
 @Component({
     selector: 'addon-mod-assign-edit-feedback-modal',
     templateUrl: 'edit-feedback-modal.html',
+    styleUrl: 'edit-feedback-modal.scss',
     standalone: true,
     imports: [
         CoreSharedModule,
@@ -359,6 +360,8 @@ export class AddonModAssignEditFeedbackModalComponent implements OnDestroy, OnIn
                 });
                 gradeInfo.disabled = grade.gradeislocked || grade.gradeisoverridden;
             }
+
+            this.grade.penalty = CoreGradesHelper.getPenaltyFromGrade(grade.gradeformatted);
         });
 
         gradeInfo.outcomes = outcomes;
@@ -599,6 +602,7 @@ type AddonModAssignSubmissionGrade = {
     lang: string;
     disabled: boolean;
     unreleasedGrade?: SafeNumber | string;
+    penalty?: string; // Parsed from grade.
 };
 
 type AddonModAssignGradeInfo = Omit<CoreCourseModuleGradeInfo, 'outcomes'> & {
diff --git a/src/addons/mod/assign/components/submission/addon-mod-assign-submission.html b/src/addons/mod/assign/components/submission/addon-mod-assign-submission.html
index b07a3739751..a0d2d7d8b0b 100644
--- a/src/addons/mod/assign/components/submission/addon-mod-assign-submission.html
+++ b/src/addons/mod/assign/components/submission/addon-mod-assign-submission.html
@@ -262,9 +262,19 @@ <h2 class="big">{{'addon.mod_assign.feedback' | translate}}</h2>
                         <ion-item class="ion-text-wrap core-grading-summary">
                             <ion-label>
                                 <p class="item-heading">{{ 'core.gradenoun' | translate }}</p>
-                                <p>
-                                    <core-format-text [text]="feedback.gradefordisplay" [filter]="false" />
+                                <p class="core-grading-summary-grade">
+                                    @if (feedback.penalty) {
+                                        <ion-icon name="fas-triangle-exclamation" color="danger" aria-hidden="true" />
+                                    }
+                                    <span>
+                                        <core-format-text [text]="feedback.gradefordisplay" [filter]="false" />
+                                    </span>
                                 </p>
+                                @if (feedback.penalty) {
+                                    <p class="core-grading-summary-penalty">
+                                        {{ feedback.penalty }}
+                                    </p>
+                                }
                             </ion-label>
                             @if (feedback.advancedgrade) {
                                 <ion-button slot="end" (click)="showAdvancedGrade(feedback.gradefordisplay)"
@@ -365,9 +375,17 @@ <h4 class="big">{{'core.gradenoun' | translate}}</h4>
                                             <ion-item class="ion-text-wrap core-grading-summary">
                                                 <ion-label>
                                                     <p class="item-heading">{{ 'core.gradenoun' | translate }}</p>
-                                                    <p>
+                                                    <p class="core-grading-summary-grade">
+                                                        @if (attempt.penalty) {
+                                                            <ion-icon name="fas-triangle-exclamation" color="danger" aria-hidden="true" />
+                                                        }
                                                         <core-format-text [text]="attempt.grade.gradefordisplay" [filter]="false" />
                                                     </p>
+                                                    @if (attempt.penalty) {
+                                                        <p class="core-grading-summary-penalty">
+                                                            {{ attempt.penalty }}
+                                                        </p>
+                                                    }
                                                 </ion-label>
                                                 @if (attempt.advancedgrade) {
                                                     <ion-button slot="end" (click)="showAdvancedGrade(attempt.grade.gradefordisplay)"
diff --git a/src/addons/mod/assign/components/submission/submission.scss b/src/addons/mod/assign/components/submission/submission.scss
index e07a11d8c1e..ea942c63c0a 100644
--- a/src/addons/mod/assign/components/submission/submission.scss
+++ b/src/addons/mod/assign/components/submission/submission.scss
@@ -25,6 +25,25 @@
         display: none;
     }
 
+    .core-grading-summary-grade {
+        display: flex;
+        align-items: center;
+        gap: 0.25rem;
+
+        ion-icon {
+            flex-shrink: 0;
+        }
+
+        .penalty-indicator-icon {
+            display: none;
+        }
+    }
+
+    .core-grading-summary-penalty {
+        color: var(--danger);
+        font-size: 0.75em;
+    }
+
     ion-badge {
         margin-left: 2px;
         margin-right: 2px;
diff --git a/src/addons/mod/assign/components/submission/submission.ts b/src/addons/mod/assign/components/submission/submission.ts
index da5f1138197..466f6c5f860 100644
--- a/src/addons/mod/assign/components/submission/submission.ts
+++ b/src/addons/mod/assign/components/submission/submission.ts
@@ -511,6 +511,7 @@ export class AddonModAssignSubmissionComponent implements OnInit, OnDestroy {
                 // If we have data about the grader, get its profile.
                 attempt.grader = await this.getGrader(attempt.grade);
                 attempt.advancedgrade = this.getAdvancedGrade(attempt.grade?.gradefordisplay);
+                attempt.penalty = CoreGradesHelper.getPenaltyFromGrade(attempt.grade?.gradefordisplay);
             });
 
             promises.push(...graderPromises);
@@ -596,6 +597,7 @@ export class AddonModAssignSubmissionComponent implements OnInit, OnDestroy {
 
             // Check if the grade uses advanced grading.
             this.feedback.advancedgrade = this.getAdvancedGrade(feedback.gradefordisplay);
+            this.feedback.penalty = CoreGradesHelper.getPenaltyFromGrade(feedback.gradefordisplay);
         }
 
         // Get the grade for the assign.
@@ -1042,12 +1044,14 @@ type AddonModAssignSubmissionAttemptFormatted = AddonModAssignSubmissionAttempt
  */
 type AddonModAssignSubmissionFeedbackFormatted = AddonModAssignSubmissionFeedback & {
     advancedgrade?: boolean; // Calculated in the app. Whether it uses advanced grading.
+    penalty?: string; // Parsed from gradefordisplay.
 };
 
 type AddonModAssignSubmissionPreviousAttemptFormatted = AddonModAssignSubmissionPreviousAttempt & {
     submissionStatusBadge?: StatusBadge;
     grader?: CoreUserProfile;
     advancedgrade?: boolean;
+    penalty?: string; // Parsed from gradefordisplay.
 };
 
 type StatusBadge = {
diff --git a/src/addons/mod/assign/tests/behat/grade_penalties.feature b/src/addons/mod/assign/tests/behat/grade_penalties.feature
new file mode 100644
index 00000000000..762837e92ae
--- /dev/null
+++ b/src/addons/mod/assign/tests/behat/grade_penalties.feature
@@ -0,0 +1,68 @@
+@addon_mod_assign @app @mod @mod_assign @javascript @lms_from5.0
+Feature: Grade penalties in the assignment activity
+
+  Background:
+    Given the Moodle site is compatible with this feature
+    And the following "courses" exist:
+      | fullname | shortname | category |
+      | Course 1 | C1        | 0        |
+    And the following "users" exist:
+      | username | firstname | lastname | email                 |
+      | teacher1 | Teacher   | 1        | teacher1@example.com  |
+      | student1 | Student   | 1        | student10@example.com |
+    And the following "course enrolments" exist:
+      | user | course | role           |
+      | teacher1 | C1 | editingteacher |
+      | student1 | C1 | student        |
+    And I enable grade penalties for assignment
+    And the following "activity" exists:
+      | activity                             | assign                      |
+      | course                               | C1                          |
+      | name                                 | Test assignment name        |
+      | intro                                | Test assignment description |
+      | grade                                | 100                         |
+      | duedate                              | ##yesterday##               |
+      | gradepenalty                         | 1                           |
+      | assignsubmission_onlinetext_enabled  | 1                           |
+      | submissiondrafts                     | 0                           |
+      | maxattempts                          | -1                          |
+      | attemptreopenmethod                  | manual                      |
+    # Add a submission.
+    And the following "mod_assign > submissions" exist:
+      | assign                | user      | onlinetext                         |
+      | Test assignment name  | student1  | I'm the student first submission   |
+    And I am on the "Test assignment name" Activity page logged in as teacher1
+    And I go to "Student 1" "Test assignment name" activity advanced grading page
+    And I set the following fields to these values:
+      | Grade out of 100      | 50 |
+      | Notify student        | 0  |
+      | Allow another attempt | 1  |
+    And I press "Save changes"
+    And I log out
+
+  Scenario: View submission with grade penalty as student
+    Given I entered the assign activity "Test assignment name" on course "Course 1" as "student1" in the app
+    When I press "Attempt 1" in the app
+    Then I should find "Late penalty applied -10.00 marks" within "Feedback" "ion-card" in the app
+    And I should find "Late penalty applied -10.00 marks" within "Attempt 1" "ion-accordion" in the app
+
+  Scenario: View activity summary with grade penalty as student
+    Given I entered the assign activity "Test assignment name" on course "Course 1" as "student1" in the app
+    When I press "Information" "ion-button" in the app
+    And I press "Grade" "ion-item" in the app
+    Then I should find "Late penalty applied -10.00 marks" within "Gradebook" "ion-card" in the app
+
+  Scenario: View submission with grade penalty as teacher
+    Given I entered the assign activity "Test assignment name" on course "Course 1" as "teacher1" in the app
+    When I press "Participants" in the app
+    And I press "Student 1" in the app
+    And I press "Attempt 1" in the app
+    Then I should find "Late penalty applied -10.00 marks" within "Feedback" "ion-card" in the app
+    And I should find "Late penalty applied -10.00 marks" within "Attempt 1" "ion-accordion" in the app
+
+  Scenario: Edit feedback with grade penalty as teacher
+    Given I entered the assign activity "Test assignment name" on course "Course 1" as "teacher1" in the app
+    When I press "Participants" in the app
+    And I press "Student 1" in the app
+    And I press "Grade" "ion-button" in the app
+    Then I should find "Late penalty applied -10.00 marks" in the app
diff --git a/src/core/features/course/components/module-summary/module-summary.html b/src/core/features/course/components/module-summary/module-summary.html
index 760668e4fcb..3adbb2b7c08 100644
--- a/src/core/features/course/components/module-summary/module-summary.html
+++ b/src/core/features/course/components/module-summary/module-summary.html
@@ -69,22 +69,34 @@ <h2>
                         <ion-icon name="fas-chevron-right" flip-rtl slot="start" aria-hidden="true" class="expandable-status-icon"
                             [class.expandable-status-icon-expanded]="grade.expanded" />
                         <ion-label>
-                            <p class="item-heading" *ngIf="!grade.itemmodule">
-                                <core-format-text [text]="grade.gradeitem" contextLevel="course" [contextInstanceId]="courseId" />
+                            <p class="item-heading">
+                                @if (grade.itemmodule) {
+                                    {{ 'core.gradenoun' | translate }}
+                                } @else {
+                                    <core-format-text [text]="grade.gradeitem" contextLevel="course" [contextInstanceId]="courseId" />
+                                }
                             </p>
-                            <p class="item-heading" *ngIf="grade.itemmodule">
-                                {{ 'core.gradenoun' | translate }}
-                            </p>
-                            <p *ngIf="grade.grade && grade.grade !== '-'" [innerHTML]="grade.grade"></p>
-                            <ion-badge *ngIf="!grade.grade || grade.grade === '-'" color="light">
-                                {{ 'core.grades.notgraded' | translate }}
-                            </ion-badge>
+                            @if (grade.grade && grade.grade !== '-') {
+                                <p class="core-grading-summary-grade">
+                                    @if (grade.penalty) {
+                                        <ion-icon name="fas-triangle-exclamation" color="danger" aria-hidden="true" />
+                                    }
+                                    <span [innerHTML]="grade.grade"></span>
+                                </p>
+                            } @else {
+                                <ion-badge color="light">
+                                    {{ 'core.grades.notgraded' | translate }}
+                                </ion-badge>
+                            }
+                            @if (grade.penalty) {
+                                <p class="core-grading-summary-penalty" [class.sr-only]="!grade.expanded">
+                                    {{ grade.penalty }}
+                                </p>
+                            }
                         </ion-label>
                         <ion-icon *ngIf="grade.icon" name="{{grade.icon}}" slot="end" [attr.aria-label]="grade.iconAlt" />
                         <img *ngIf="grade.image && !grade.itemmodule" [url]="grade.image" slot="end" [alt]="grade.iconAlt"
                             core-external-content />
-                        <ion-icon *ngIf="grade.image && grade.itemmodule" name="fas-chart-bar" slot="end"
-                            [attr.aria-label]="grade.iconAlt" />
                     </ion-item>
                     <div *ngIf="grade.expanded" [id]="'grade-'+grade.id">
                         <ion-item class="ion-text-wrap" *ngIf="grade.weight?.length > 0 && grade.weight !== '-'">
diff --git a/src/core/features/course/components/module-summary/module-summary.scss b/src/core/features/course/components/module-summary/module-summary.scss
index 0ddaae93b11..372ce5bd455 100644
--- a/src/core/features/course/components/module-summary/module-summary.scss
+++ b/src/core/features/course/components/module-summary/module-summary.scss
@@ -1,5 +1,25 @@
 @use "theme/globals" as *;
 
+:host {
+    .core-grading-summary-grade {
+        display: flex;
+        align-items: center;
+
+        ion-icon {
+            flex-shrink: 0;
+        }
+
+        ::ng-deep .penalty-indicator-icon {
+            display: none;
+        }
+    }
+
+    .core-grading-summary-penalty {
+        color: var(--danger);
+        font-size: 0.75em;
+    }
+}
+
 :host ::ng-deep ion-item[collapsible] ion-label {
     margin-top: 12px;
 }
diff --git a/src/core/features/grades/pages/course/course.html b/src/core/features/grades/pages/course/course.html
index 2a247f878e3..40ad9fb936b 100644
--- a/src/core/features/grades/pages/course/course.html
+++ b/src/core/features/grades/pages/course/course.html
@@ -79,10 +79,21 @@ <h1>{{ title }}</h1>
                                                 } @else if (column.name === 'grade') {
                                                     <td [class.ion-hide-md-down]="column.hiddenPhone"
                                                         class="ion-text-start core-grades-table-grade {{row.gradeClass}}">
-                                                        @if (row.gradeIcon) {
-                                                            <ion-icon [name]="row.gradeIcon" [attr.aria-label]="row.gradeIconAlt" />
+                                                        <div>
+                                                            @if (row.gradeIcon) {
+                                                                <ion-icon [name]="row.gradeIcon" [attr.aria-label]="row.gradeIconAlt" />
+                                                            }
+                                                            @if (row.penalty) {
+                                                                <ion-icon name="fas-triangle-exclamation" color="danger"
+                                                                    aria-hidden="true" />
+                                                            }
+                                                            <span [innerHTML]="row[column.name]"></span>
+                                                        </div>
+                                                        @if (row.penalty) {
+                                                            <div class="core-grades-expanded-grade-penalty" [class.sr-only]="showSummary">
+                                                                {{ row.penalty }}
+                                                            </div>
                                                         }
-                                                        <span [innerHTML]="row[column.name]"></span>
                                                     </td>
                                                 } @else if (column.name !== 'gradeitem' && column.name !== 'feedback' &&
                                                         column.name !== 'grade' && row[column.name] !== undefined) {
@@ -112,7 +123,18 @@ <h1>{{ title }}</h1>
                                                 <ion-item class="ion-text-wrap">
                                                     <ion-label>
                                                         <p class="item-heading">{{ 'core.gradenoun' | translate}}</p>
-                                                        <p [innerHTML]="row.grade"></p>
+                                                        <p class="core-grades-expanded-grade">
+                                                            @if (row.penalty) {
+                                                                <ion-icon name="fas-triangle-exclamation" color="danger"
+                                                                    aria-hidden="true" />
+                                                            }
+                                                            <span [innerHTML]="row.grade"></span>
+                                                        </p>
+                                                        @if (row.penalty) {
+                                                            <p class="core-grades-expanded-grade-penalty">
+                                                                {{ row.penalty }}
+                                                            </p>
+                                                        }
                                                     </ion-label>
                                                 </ion-item>
                                             }
diff --git a/src/core/features/grades/pages/course/course.scss b/src/core/features/grades/pages/course/course.scss
index 34ad31d51e6..a48a3fd4d9d 100644
--- a/src/core/features/grades/pages/course/course.scss
+++ b/src/core/features/grades/pages/course/course.scss
@@ -78,14 +78,18 @@ table.core-table.core-grades-table {
 
     }
 
-    .core-grades-table-grade {
+    .core-grades-table-grade > div {
         * {
             line-height: var(--mdl-typography-label-lineHeight-sm);
             vertical-align: middle;
         }
 
         ion-icon {
-            @include padding(null, 4px, null, null);
+            @include padding(null, 4px, 2px, null);
+        }
+
+        ::ng-deep .penalty-indicator-icon {
+            display: none;
         }
     }
 
@@ -116,6 +120,20 @@ table.core-table.core-grades-table {
         opacity: 0;
     }
 
+    .core-grades-expanded-grade {
+        display: flex;
+        align-items: center;
+        gap: 0.25rem;
+
+        ion-icon {
+            flex-shrink: 0;
+        }
+    }
+
+    .core-grades-expanded-grade-penalty {
+        color: var(--danger);
+        font-size: 0.75em;
+    }
 }
 
 @include media-breakpoint-down(md) {
diff --git a/src/core/features/grades/services/grades-helper.ts b/src/core/features/grades/services/grades-helper.ts
index f1af1709359..5dbbd1f1d18 100644
--- a/src/core/features/grades/services/grades-helper.ts
+++ b/src/core/features/grades/services/grades-helper.ts
@@ -132,6 +132,8 @@ export class CoreGradesHelperProvider {
                     row.gradeIconAlt = Translate.instant('core.grades.fail');
                     content = CoreText.cleanTags(content);
                 }
+
+                row.penalty = CoreGradesHelper.getPenaltyFromGrade(content);
             } else {
                 content = CoreText.replaceNewLines(content, '<br>');
             }
@@ -426,6 +428,24 @@ export class CoreGradesHelperProvider {
         }));
     }
 
+    /**
+     * Parse the penalty message from the grade HTML content.
+     *
+     * @param grade Grade to parse.
+     * @returns The penalty message or undefined if not found.
+     */
+    getPenaltyFromGrade(grade?: string): string | undefined {
+        if (!grade) {
+            return undefined;
+        }
+
+        const template = document.createElement('template');
+        template.innerHTML = grade;
+        const icon = template.content.querySelector<HTMLElement>('.penalty-indicator-icon');
+
+        return icon?.title;
+    }
+
     /**
      * Go to view grades.
      *
@@ -758,6 +778,7 @@ export type CoreGradesFormattedTableRow = CoreGradesFormattedRowCommonData & {
     gradeClass?: string;
     gradeIcon?: string;
     gradeIconAlt?: string;
+    penalty?: string;
 };
 
 export type CoreGradesFormattedTableColumn = {
diff --git a/src/core/features/grades/tests/behat/grade_penalties.feature b/src/core/features/grades/tests/behat/grade_penalties.feature
new file mode 100644
index 00000000000..42e06698511
--- /dev/null
+++ b/src/core/features/grades/tests/behat/grade_penalties.feature
@@ -0,0 +1,50 @@
+@addon_mod_assign @app @mod @mod_assign @javascript @lms_from5.0
+Feature: Grade penalties in the gradebook
+
+  Background:
+    Given the Moodle site is compatible with this feature
+    And the following "courses" exist:
+      | fullname | shortname | category |
+      | Course 1 | C1        | 0        |
+    And the following "users" exist:
+      | username | firstname | lastname | email                 |
+      | teacher1 | Teacher   | 1        | teacher1@example.com  |
+      | student1 | Student   | 1        | student10@example.com |
+    And the following "course enrolments" exist:
+      | user | course | role           |
+      | teacher1 | C1 | editingteacher |
+      | student1 | C1 | student        |
+    And I enable grade penalties for assignment
+    And the following "activity" exists:
+      | activity                             | assign                      |
+      | course                               | C1                          |
+      | name                                 | Test assignment name        |
+      | intro                                | Test assignment description |
+      | grade                                | 100                         |
+      | duedate                              | ##yesterday##               |
+      | gradepenalty                         | 1                           |
+      | assignsubmission_onlinetext_enabled  | 1                           |
+      | submissiondrafts                     | 0                           |
+    # Add a submission.
+    And the following "mod_assign > submissions" exist:
+      | assign                | user      | onlinetext                         |
+      | Test assignment name  | student1  | I'm the student first submission   |
+    And I am on the "Test assignment name" Activity page logged in as teacher1
+    And I go to "Student 1" "Test assignment name" activity advanced grading page
+    And I set the following fields to these values:
+      | Grade out of 100      | 50 |
+      | Notify student        | 0  |
+    And I press "Save changes"
+    And I log out
+
+ Scenario: View gradebook with grade penalties on a phone
+    Given I entered the course "Course 1" as "student1" in the app
+    When I press "Grades" in the app
+    And I press "Test assignment name" in the app
+    Then I should find "Late penalty applied -10.00 marks" within "Test assignment name" "tr" in the app
+
+ Scenario: View gradebook with grade penalties on a tablet
+    Given I entered the course "Course 1" as "student1" in the app
+    And I change viewport size to "1200x640" in the app
+    When I press "Grades" in the app
+    Then I should find "Late penalty applied -10.00 marks" within "Test assignment name" "tr" in the app