Exam mode: Improve usability and readability of results summary

src/main/webapp/app/exam/manage/exam-management.module.ts

@@ -25,7 +25,7 @@ import { ArtemisMarkdownEditorModule } from 'app/shared/markdown-editor/markdown
 import { DurationPipe } from 'app/shared/pipes/artemis-duration.pipe';
 import { StudentExamStatusComponent } from 'app/exam/manage/student-exams/student-exam-status/student-exam-status.component';
 import { StudentExamSummaryComponent } from 'app/exam/manage/student-exams/student-exam-summary.component';
-import { ArtemisParticipationSummaryModule } from 'app/exam/participate/summary/exam-participation-summary.module';
+import { ArtemisParticipationSummaryModule } from 'app/exam/participate/summary/exam-result-summary.module';
 import { ExamExerciseRowButtonsComponent } from 'app/exercises/shared/exam-exercise-row-buttons/exam-exercise-row-buttons.component';
 import { ArtemisProgrammingExerciseStatusModule } from 'app/exercises/programming/manage/status/programming-exercise-status.module';
 import { TestRunManagementComponent } from 'app/exam/manage/test-runs/test-run-management.component';

src/main/webapp/app/exam/participate/exam-cover/exam-participation-cover.component.html

@@ -27,7 +27,7 @@ <h2 style="text-align: center; font-weight: normal" *ngIf="startView">
         </span>
         <br />
     </h2>
-    <jhi-exam-information *ngIf="startView" [exam]="exam" [studentExam]="studentExam"></jhi-exam-information>
+    <jhi-exam-general-information *ngIf="startView" [exam]="exam" [studentExam]="studentExam" [displayOnExamCover]="true" />
     <div><span style="display: table; margin-left: auto; margin-right: auto" [innerHTML]="formattedGeneralInformation"></span></div>
     <div *ngIf="studentFailedToSubmit" class="mb-2 font-weight-bold text-danger">
         {{ 'artemisApp.studentExam.submissionNotInTime' | artemisTranslate }}

src/main/webapp/app/exam/participate/exam-participation.module.ts

@@ -22,7 +22,7 @@ import { ArtemisResultModule } from 'app/exercises/shared/result/result.module';
 import { ArtemisProgrammingExerciseActionsModule } from 'app/exercises/programming/shared/actions/programming-exercise-actions.module';
 import { ArtemisProgrammingExerciseInstructionsRenderModule } from 'app/exercises/programming/shared/instructions-render/programming-exercise-instructions-render.module';
 import { ArtemisCoursesModule } from 'app/overview/courses.module';
-import { ArtemisParticipationSummaryModule } from 'app/exam/participate/summary/exam-participation-summary.module';
+import { ArtemisParticipationSummaryModule } from 'app/exam/participate/summary/exam-result-summary.module';
 import { ExamTimerComponent } from './timer/exam-timer.component';
 import { ArtemisExerciseButtonsModule } from 'app/overview/exercise-details/exercise-buttons.module';
 import { ArtemisHeaderExercisePageWithDetailsModule } from 'app/exercises/shared/exercise-headers/exercise-headers.module';

src/main/webapp/app/exam/participate/general-information/exam-general-information.component.html

@@ -0,0 +1,98 @@
+<div>
+    <h3 *ngIf="!displayOnExamCover" id="general-information-title">
+        {{ 'artemisApp.exam.examSummary.generalInformation' | artemisTranslate }}
+    </h3>
+    <div class="mt-3 mb-4 text-center">
+        <table class="table table-borderless mx-auto d-block">
+            <tbody>
+                <tr *ngIf="isTestExam">
+                    <th class="text-end text-right">{{ 'artemisApp.examManagement.testExam.examMode' | artemisTranslate }}:</th>
+                    <td>
+                        <span class="mx-2 badge bg-primary">{{ 'artemisApp.examManagement.testExam.testExam' | artemisTranslate }}</span>
+                    </td>
+                </tr>
+                <tr *ngIf="exam?.moduleNumber">
+                    <th>{{ 'artemisApp.examManagement.moduleNumber' | artemisTranslate }}:</th>
+                    <td>{{ exam.moduleNumber }}</td>
+                </tr>
+                <tr *ngIf="exam?.courseName">
+                    <th>{{ 'artemisApp.exam.course' | artemisTranslate }}:</th>
+                    <td>{{ exam.courseName }}</td>
+                </tr>
+                <tr *ngIf="exam?.examiner">
+                    <th>{{ 'artemisApp.examManagement.examiner' | artemisTranslate }}:</th>
+                    <td>{{ exam.examiner }}</td>
+                </tr>
+                <ng-container *ngIf="exam && !isTestExam && exam.startDate">
+                    <tr *ngIf="isExamOverMultipleDays; else examSingleDay">
+                        <th>{{ 'artemisApp.exam.time' | artemisTranslate }}:</th>
+                        <td>
+                            {{ exam.startDate | artemisDate: 'long-date' }} {{ exam.startDate | artemisDate: 'time' }} &nbsp;-&nbsp;{{ examEndDate | artemisDate: 'long-date' }}
+                            {{ examEndDate | artemisDate: 'time' }}
+                        </td>
+                    </tr>
+                    <ng-template #examSingleDay>
+                        <tr class="mb-2">
+                            <th>{{ 'artemisApp.exam.date' | artemisTranslate }}:</th>
+                            <td>{{ exam.startDate | artemisDate: 'long-date' }}</td>
+                        </tr>
+                        <tr class="mb-2">
+                            <th>{{ 'artemisApp.exam.workingTime' | artemisTranslate }}:</th>
+                            <td>{{ exam.startDate | artemisDate: 'time' }} - {{ examEndDate | artemisDate: 'time' }}</td>
+                        </tr>
+                    </ng-template>
+
+                    <tr *ngIf="exam.endDate && studentExam?.workingTime">
+                        <th>{{ 'artemisApp.exam.duration' | artemisTranslate }}:</th>
+                        <td><jhi-student-exam-working-time [studentExam]="studentExam" /></td>
+                    </tr>
+                </ng-container>
+
+                <ng-container *ngIf="displayOnExamCover">
+                    <tr *ngIf="exam.examMaxPoints">
+                        <th>{{ 'artemisApp.exam.points' | artemisTranslate }}:</th>
+                        <td>{{ exam.examMaxPoints }}</td>
+                    </tr>
+                    <tr *ngIf="exam.numberOfExercisesInExam">
+                        <th>{{ 'artemisApp.exam.exercises' | artemisTranslate }}:</th>
+                        <td>{{ exam.numberOfExercisesInExam }}</td>
+                    </tr>
+                </ng-container>
+
+                <tr *ngIf="exam && studentExam?.ended && (exam.examStudentReviewStart || exam.examStudentReviewEnd)">
+                    <th>{{ 'artemisApp.exam.examStudentReviewTimespan' | artemisTranslate }}:&nbsp;</th>
+                    <td class="d-flex align-items-center">
+                        <span *ngIf="exam.examStudentReviewStart"> {{ exam.examStudentReviewStart | artemisDate }} </span>
+                        <span *ngIf="exam.examStudentReviewStart && exam.examStudentReviewEnd">&nbsp;-&nbsp;</span>
+                        <span *ngIf="exam.examStudentReviewEnd">{{ exam.examStudentReviewEnd | artemisDate }}</span>
+                        <div *ngIf="reviewIsOpen" class="mx-2 badge bg-success">{{ 'artemisApp.exam.studentReviewEnabled' | artemisTranslate }}</div>
+                    </td>
+                </tr>
+
+                <tr *ngIf="studentExam?.user?.name">
+                    <th>{{ 'artemisApp.exam.examinedStudent' | artemisTranslate }}:</th>
+                    <td>{{ studentExam!.user!.name }}</td>
+                </tr>
+
+                <!-- For test exams, the currentDate (analogous to the real exam) and the workingTime should be displayed -->
+                <ng-container *ngIf="exam && isTestExam">
+                    <tr>
+                        <th>{{ 'artemisApp.exam.date' | artemisTranslate }}:</th>
+                        <td>{{ currentDate! | artemisDate: 'long-date' }}</td>
+                    </tr>
+                    <tr *ngIf="exam?.workingTime">
+                        <th>{{ 'artemisApp.exam.workingTime' | artemisTranslate }}:</th>
+                        <td>{{ exam.workingTime! | artemisDurationFromSeconds }}</td>
+                        <td></td>
+                    </tr>
+                    <tr *ngIf="studentExam.submitted && studentExam.submissionDate && studentExam.startedDate">
+                        <th>{{ 'artemisApp.exam.overview.testExam.workingTimeCalculated' | artemisTranslate }} :</th>
+                        <td>
+                            <jhi-testexam-working-time [studentExam]="studentExam" />
+                        </td>
+                    </tr>
+                </ng-container>
+            </tbody>
+        </table>
+    </div>
+</div>

src/main/webapp/app/exam/participate/general-information/exam-general-information.component.scss

@@ -0,0 +1,9 @@
+table {
+    width: fit-content;
+}
+
+th,
+td {
+    text-align: start;
+    padding: 0.25em;
+}

src/main/webapp/app/exam/participate/information/exam-information.component.ts → src/main/webapp/app/exam/participate/general-information/exam-general-information.component.ts

@@ -5,12 +5,18 @@ import { endTime, getAdditionalWorkingTime, isExamOverMultipleDays, normalWorkin
 import dayjs from 'dayjs/esm';
 
 @Component({
-    selector: 'jhi-exam-information',
-    templateUrl: './exam-information.component.html',
+    selector: 'jhi-exam-general-information',
+    styleUrls: ['./exam-general-information.component.scss'],
+    templateUrl: './exam-general-information.component.html',
 })
-export class ExamInformationComponent implements OnInit {
+export class ExamGeneralInformationComponent implements OnInit {
     @Input() exam: Exam;
     @Input() studentExam: StudentExam;
+    @Input() reviewIsOpen?: boolean = false;
+
+    /** The exam cover will contain e.g. the number of exercises which is hidden in the exam summary as
+     * the information is shown in the {@link ExamResultOverviewComponent} */
+    @Input() displayOnExamCover?: boolean = false;
 
     examEndDate?: dayjs.Dayjs;
     normalWorkingTime?: number;

src/main/webapp/app/exam/participate/summary/exam-participation-summary.component.html → src/main/webapp/app/exam/participate/summary/exam-result-summary.component.html

@@ -1,27 +1,26 @@
 <div>
     <h2 id="exam-title">
-        <ng-container *ngIf="!instructorView">
-            {{ 'artemisApp.exam.examSummary.yourSubmissionTo' | artemisTranslate: { examTitle: studentExam?.exam?.title, studentName: studentExam?.user?.name } }}
-        </ng-container>
-        <ng-container *ngIf="instructorView">
-            {{ 'artemisApp.exam.examSummary.studentSubmissionTo' | artemisTranslate: { examTitle: studentExam?.exam?.title, studentName: studentExam?.user?.name } }}
+        <ng-container>
+            {{ 'artemisApp.exam.examSummary.examResults' | artemisTranslate }}
         </ng-container>
         <button id="exportToPDFButton" class="btn btn-primary float-end" (click)="printPDF()">
             <fa-icon [icon]="faPrint"></fa-icon>
             <span jhiTranslate="artemisApp.exam.examSummary.exportPDF">Export PDF</span>
         </button>
     </h2>
 </div>
-<jhi-exam-information *ngIf="studentExam?.exam" [exam]="studentExam.exam!" [studentExam]="studentExam"></jhi-exam-information>
-<div class="mb-4 container text-center" *ngIf="studentExam?.exam && isBeforeStudentReviewEnd() && isAfterStudentReviewStart() && !isTestRun">
-    <div class="row justify-content-center">
-        <div class="alert alert-success col-12 col-lg-6" role="alert">
-            {{ 'artemisApp.exam.studentReviewEnabled' | artemisTranslate }}
-        </div>
-    </div>
-</div>
-<div class="mb-4 container exam-points-summary-container" *ngIf="studentExam && studentExam.exercises && studentExam.exam?.course && studentExamGradeInfoDTO">
-    <jhi-exam-points-summary [studentExamWithGrade]="studentExamGradeInfoDTO"></jhi-exam-points-summary>
+<jhi-exam-general-information
+    *ngIf="studentExam?.exam"
+    [exam]="studentExam.exam!"
+    [studentExam]="studentExam"
+    [reviewIsOpen]="studentExam?.exam && isBeforeStudentReviewEnd() && isAfterStudentReviewStart() && !isTestRun"
+/>
+<div class="mb-4" *ngIf="studentExam && studentExam.exercises && studentExam.exam?.course && studentExamGradeInfoDTO">
+    <jhi-exam-result-overview
+        [studentExamWithGrade]="studentExamGradeInfoDTO"
+        [isGradingKeyCollapsed]="isGradingKeyCollapsed"
+        [isBonusGradingKeyCollapsed]="isBonusGradingKeyCollapsed"
+    />
 </div>
 <div *ngIf="!resultsPublished" class="mb-0">
     <fa-icon [icon]="faInfoCircle" class="info-icon"></fa-icon>
@@ -91,7 +90,7 @@ <h5>
                 </span>
                 <!-- prettier-ignore -->
                 <h5 class="exercise-title">{{ exercise?.exerciseGroup?.title ?? '-' }}
-                [{{ exercise.maxPoints }} {{ 'artemisApp.examParticipation.points' | artemisTranslate }}<span
+                    [{{ exercise.maxPoints }} {{ 'artemisApp.examParticipation.points' | artemisTranslate }}<span
                         *ngIf="exercise.bonusPoints">, {{ exercise.bonusPoints }} {{ 'artemisApp.examParticipation.bonus' | artemisTranslate }}</span>]
                     <jhi-included-in-score-badge
                         *ngIf="exercise.includedInOverallScore !== IncludedInOverallScore.INCLUDED_COMPLETELY"

src/main/webapp/app/exam/participate/summary/exam-participation-summary.component.ts → src/main/webapp/app/exam/participate/summary/exam-result-summary.component.ts

@@ -18,10 +18,10 @@ import { PlagiarismVerdict } from 'app/exercises/shared/plagiarism/types/Plagiar
 
 @Component({
     selector: 'jhi-exam-participation-summary',
-    templateUrl: './exam-participation-summary.component.html',
-    styleUrls: ['../../../course/manage/course-exercise-card.component.scss', '../../../exercises/quiz/shared/quiz.scss', 'exam-participation-summary.component.scss'],
+    templateUrl: './exam-result-summary.component.html',
+    styleUrls: ['../../../course/manage/course-exercise-card.component.scss', '../../../exercises/quiz/shared/quiz.scss', 'exam-result-summary.component.scss'],
 })
-export class ExamParticipationSummaryComponent implements OnInit {
+export class ExamResultSummaryComponent implements OnInit {
     // make constants available to html for comparison
     readonly TEXT = ExerciseType.TEXT;
     readonly QUIZ = ExerciseType.QUIZ;
@@ -58,6 +58,9 @@ export class ExamParticipationSummaryComponent implements OnInit {
      */
     studentExamGradeInfoDTO: StudentExamWithGradeDTO;
 
+    isGradingKeyCollapsed: boolean = true;
+    isBonusGradingKeyCollapsed: boolean = true;
+
     @Input()
     instructorView = false;
 
@@ -142,10 +145,6 @@ export class ExamParticipationSummaryComponent implements OnInit {
         return exam?.publishResultsDate && dayjs(exam.publishResultsDate).isBefore(this.serverDateService.now());
     }
 
-    getIcon(exerciseType: ExerciseType) {
-        return getIcon(exerciseType);
-    }
-
     asProgrammingExercise(exercise: Exercise): ProgrammingExercise {
         return exercise as ProgrammingExercise;
     }
@@ -163,11 +162,16 @@ export class ExamParticipationSummaryComponent implements OnInit {
      * called for exportPDF Button
      */
     printPDF() {
-        // expand all exercises before printing
-        this.collapsedExerciseIds = [];
+        this.expandExercisesAndGradingKeysBeforePrinting();
         setTimeout(() => this.themeService.print());
     }
 
+    private expandExercisesAndGradingKeysBeforePrinting() {
+        this.collapsedExerciseIds = [];
+        this.isGradingKeyCollapsed = false;
+        this.isBonusGradingKeyCollapsed = false;
+    }
+
     public generateLink(exercise: Exercise) {
         if (exercise?.studentParticipations?.length) {
             return ['/courses', this.courseId, `${exercise.type}-exercises`, exercise.id, 'participate', exercise.studentParticipations[0].id];
@@ -248,4 +252,6 @@ export class ExamParticipationSummaryComponent implements OnInit {
         }
         return false;
     }
+
+    protected readonly getIcon = getIcon;
 }