Exam mode: Fix an issue where the end page of exam does not scroll wh…

…en the page is too small (#8916)
ls1intum · Jun 30, 2024 · 8e9567a · 8e9567a
1 parent 14d7a89
commit 8e9567a
Show file tree

Hide file tree

Showing 6 changed files with 25 additions and 0 deletions.
diff --git a/src/main/webapp/app/exam/participate/exam-cover/exam-participation-cover.component.ts b/src/main/webapp/app/exam/participate/exam-cover/exam-participation-cover.component.ts
@@ -88,9 +88,11 @@ export class ExamParticipationCoverComponent implements OnChanges, OnDestroy, On
         this.testExam = this.exam.testExam;
 
         if (this.startView) {
+            this.examParticipationService.setEndView(false);
             this.formattedGeneralInformation = this.artemisMarkdown.safeHtmlForMarkdown(this.exam.startText);
             this.formattedConfirmationText = this.artemisMarkdown.safeHtmlForMarkdown(this.exam.confirmationStartText);
         } else {
+            this.examParticipationService.setEndView(true);
             this.formattedGeneralInformation = this.artemisMarkdown.safeHtmlForMarkdown(this.exam.endText);
             this.formattedConfirmationText = this.artemisMarkdown.safeHtmlForMarkdown(this.exam.confirmationEndText);
             // this should be the individual working end + the grace period

diff --git a/src/main/webapp/app/exam/participate/exam-participation.service.ts b/src/main/webapp/app/exam/participate/exam-participation.service.ts
@@ -30,6 +30,9 @@ export class ExamParticipationService {
     private testRunSubject = new BehaviorSubject<boolean>(false);
     testRunStarted$ = this.testRunSubject.asObservable();
 
+    private examEndViewSubject = new BehaviorSubject<boolean>(false);
+    endViewDisplayed$ = this.examEndViewSubject.asObservable();
+
     private examExerciseIds: number[];
 
     public getResourceURL(courseId: number, examId: number): string {
@@ -351,6 +354,10 @@ export class ExamParticipationService {
         this.examExerciseIds = examExerciseIds;
     }
 
+    setEndView(isEndView: boolean) {
+        this.examEndViewSubject.next(isEndView);
+    }
+
     setExamLayout(isExamStarted: boolean = true, isTestRun: boolean = false) {
         this.examIsStartedSubject.next(isExamStarted);
         this.testRunSubject.next(isTestRun);

diff --git a/src/main/webapp/app/overview/course-overview.component.html b/src/main/webapp/app/overview/course-overview.component.html
@@ -129,6 +129,7 @@
                     'exam-wrapper': isExamStarted,
                     'exam-height-dev': isExamStarted && (!isProduction || isTestServer),
                     'sidenav-height-dev': !isProduction || isTestServer,
+                    'exam-end-view': isExamEndView,
                 }"
             >
                 <div class="dropdown-content" [hidden]="!dropdownOpen" [style.top.px]="dropdownOffset" [ngClass]="{ fixedContentSize: hiddenItems.length >= 3 }">

diff --git a/src/main/webapp/app/overview/course-overview.component.scss b/src/main/webapp/app/overview/course-overview.component.scss
@@ -126,6 +126,10 @@ $breadcrumb-height: 45px; // needed to make the exam fullscreen
     }
 }
 
+.exam-end-view {
+    overflow-y: auto !important;
+}
+
 a:not(.btn):not(.tab-link):hover {
     text-decoration: none !important;
 }

diff --git a/src/main/webapp/app/overview/course-overview.component.ts b/src/main/webapp/app/overview/course-overview.component.ts
@@ -121,7 +121,9 @@ export class CourseOverviewComponent implements OnInit, OnDestroy, AfterViewInit
     profileSubscription?: Subscription;
     showRefreshButton: boolean = false;
     isExamStarted = false;
+    isExamEndView = false;
     private examStartedSubscription: Subscription;
+    private examEndViewSubscription: Subscription;
     readonly MIN_DISPLAYED_COURSES: number = 6;
 
     // Properties to track hidden items for dropdown menu
@@ -207,6 +209,9 @@ export class CourseOverviewComponent implements OnInit, OnDestroy, AfterViewInit
         this.examStartedSubscription = this.examParticipationService.examIsStarted$.subscribe((isStarted) => {
             this.isExamStarted = isStarted;
         });
+        this.examEndViewSubscription = this.examParticipationService.endViewDisplayed$.subscribe((isEndView) => {
+            this.isExamEndView = isEndView;
+        });
         this.getCollapseStateFromStorage();
         this.course = this.courseStorageService.getCourse(this.courseId);
         this.isNotManagementView = !this.router.url.startsWith('/course-management');
@@ -757,6 +762,7 @@ export class CourseOverviewComponent implements OnInit, OnDestroy, AfterViewInit
         this.subscription?.unsubscribe();
         this.profileSubscription?.unsubscribe();
         this.examStartedSubscription?.unsubscribe();
+        this.examEndViewSubscription?.unsubscribe();
         this.dashboardSubscription?.unsubscribe();
         this.ngUnsubscribe.next();
         this.ngUnsubscribe.complete();

diff --git a/src/test/javascript/spec/helpers/mocks/service/mock-exam-participation.service.ts b/src/test/javascript/spec/helpers/mocks/service/mock-exam-participation.service.ts
@@ -10,6 +10,7 @@ const exercises = [exercise];
 studentExamInstance.exercises = exercises as Exercise[];
 
 const examParticipationSubjectMock = new BehaviorSubject<StudentExam>(studentExamInstance);
+const examEndViewSubject = new BehaviorSubject<boolean>(false);
 
 export class MockExamParticipationService {
     loadStudentExam = (courseId: number, examId: number): Observable<StudentExam> => {
@@ -40,4 +41,8 @@ export class MockExamParticipationService {
     public getOwnStudentExam(courseId: number, examId: number): Observable<StudentExam> {
         return of({} as StudentExam);
     }
+
+    setEndView(isEndView: boolean): void {
+        examEndViewSubject.next(false);
+    }
 }