Exam mode: Visualize student submissions in exam timeline

jest.config.js

@@ -3,7 +3,7 @@ const esModules = ['lodash-es', 'franc-min', 'trigram-utils', 'n-gram', 'collaps
     '@ngx-translate/core', '@ngx-translate/http-loader', '@fortawesome/angular-fontawesome', '@angular/cdk', '@angular/material', '@angular/cdk', 'dayjs/esm',
     'rxjs/operators', '@ng-bootstrap/ng-bootstrap', 'ngx-webstorage', '@ctrl/ngx-emoji-mart', 'ngx-device-detector', '@swimlane/ngx-charts',
     '@angular/service-worker', '@danielmoncada/angular-datetime-picker', '@flaviosantoro92/ngx-datatable', 'd3-color', 'd3-interpolate', 'd3-transition', 'd3-brush',
-    'd3-drag', 'd3-selection', 'd3-scale', 'd3-array', 'd3-format', 'd3-shape', 'd3-path', 'd3-ease', 'd3-time', 'd3-hierarchy', 'ngx-infinite-scroll', 'internmap'].join('|');
+    'd3-drag', 'd3-selection', 'd3-scale', 'd3-array', 'd3-format', 'd3-shape', 'd3-path', 'd3-ease', 'd3-time', 'd3-hierarchy', 'ngx-infinite-scroll', 'internmap', 'ngx-slider-v2'].join('|');
 
 const {
     compilerOptions: { baseUrl = './' },

package.json

@@ -25,6 +25,7 @@
         "@angular/platform-browser-dynamic": "16.1.3",
         "@angular/router": "16.1.3",
         "@angular/service-worker": "16.1.3",
+        "ngx-slider-v2": "16.0.2",
         "@ctrl/ngx-emoji-mart": "9.2.0",
         "@danielmoncada/angular-datetime-picker": "16.0.1",
         "@fingerprintjs/fingerprintjs": "3.4.1",

src/main/java/de/tum/in/www1/artemis/repository/SubmissionRepository.java

@@ -440,4 +440,8 @@ default Submission findOneWithEagerResultAndFeedback(long submissionId) {
     default Submission findByIdWithResultsElseThrow(long submissionId) {
         return findWithEagerResultsAndAssessorById(submissionId).orElseThrow(() -> new EntityNotFoundException("Submission", +submissionId));
     }
+
+    default Submission findByIdElseThrow(long submissionId) {
+        return findById(submissionId).orElseThrow(() -> new EntityNotFoundException("Submission", +submissionId));
+    }
 }

src/main/java/de/tum/in/www1/artemis/repository/SubmissionVersionRepository.java

@@ -1,5 +1,6 @@
 package de.tum.in.www1.artemis.repository;
 
+import java.util.List;
 import java.util.Optional;
 
 import org.springframework.data.jpa.repository.JpaRepository;
@@ -18,4 +19,6 @@ public interface SubmissionVersionRepository extends JpaRepository<SubmissionVer
     @Query("select version from SubmissionVersion version left join version.submission submission left join submission.versions where submission.id = :#{#submissionId} and version.id = (select max(id) from submission.versions)")
     Optional<SubmissionVersion> findLatestVersion(@Param("submissionId") long submissionId);
 
+    List<SubmissionVersion> findSubmissionVersionBySubmissionIdOrderByCreatedDateAsc(long submissionId);
+
 }

src/main/java/de/tum/in/www1/artemis/web/rest/ModelingSubmissionResource.java

@@ -236,7 +236,7 @@ public ResponseEntity<ModelingSubmission> getModelingSubmission(@PathVariable Lo
     @GetMapping(value = "/exercises/{exerciseId}/modeling-submission-without-assessment")
     @EnforceAtLeastTutor
     public ResponseEntity<ModelingSubmission> getModelingSubmissionWithoutAssessment(@PathVariable Long exerciseId,
-            @RequestParam(value = "lock", defaultValue = "false") boolean lockSubmission, @RequestParam(value = "correction-round", defaultValue = "0") int correctionRound) {
+                                                                                     @RequestParam(value = "lock", defaultValue = "false") boolean lockSubmission, @RequestParam(value = "correction-round", defaultValue = "0") int correctionRound) {
 
         log.debug("REST request to get a modeling submission without assessment");
         final var exercise = exerciseRepository.findByIdElseThrow(exerciseId);

src/main/java/de/tum/in/www1/artemis/web/rest/SubmissionResource.java

@@ -59,9 +59,11 @@ public class SubmissionResource {
 
     private final BuildLogStatisticsEntryRepository buildLogStatisticsEntryRepository;
 
+    private final SubmissionVersionRepository submissionVersionRepository;
+
     public SubmissionResource(SubmissionService submissionService, SubmissionRepository submissionRepository, BuildLogEntryService buildLogEntryService,
             ResultService resultService, StudentParticipationRepository studentParticipationRepository, AuthorizationCheckService authCheckService, UserRepository userRepository,
-            ExerciseRepository exerciseRepository, BuildLogStatisticsEntryRepository buildLogStatisticsEntryRepository) {
+            ExerciseRepository exerciseRepository, BuildLogStatisticsEntryRepository buildLogStatisticsEntryRepository, SubmissionVersionRepository submissionVersionRepository) {
         this.submissionService = submissionService;
         this.submissionRepository = submissionRepository;
         this.buildLogEntryService = buildLogEntryService;
@@ -71,6 +73,7 @@ public SubmissionResource(SubmissionService submissionService, SubmissionReposit
         this.authCheckService = authCheckService;
         this.userRepository = userRepository;
         this.buildLogStatisticsEntryRepository = buildLogStatisticsEntryRepository;
+        this.submissionVersionRepository = submissionVersionRepository;
     }
 
     /**
@@ -109,7 +112,7 @@ public ResponseEntity<Void> deleteSubmission(@PathVariable Long submissionId) {
 
     /**
      * GET /test-run-submissions : get test run submission for an exercise.
-     *
+     * <p>
      * Only returns the users test run submission for a specific exercise
      *
      * @param exerciseId exerciseID for which all submissions should be returned
@@ -145,7 +148,7 @@ public ResponseEntity<List<Submission>> getTestRunSubmissionsForAssessment(@Path
 
     /**
      * Get /exercises/:exerciseId/submissions-with-complaints
-     *
+     * <p>
      * Get all submissions associated to an exercise which have complaints in,
      * but filter out the ones that are about the tutor who is doing the request, since tutors cannot act on their own complaint
      * Additionally, filter out the ones where the student is the same as the assessor as this indicated that this is a test run.
@@ -166,7 +169,7 @@ public ResponseEntity<List<SubmissionWithComplaintDTO>> getSubmissionsWithCompla
 
     /**
      * Get /exercises/:exerciseId//more-feedback-requests-with-complaints
-     *
+     * <p>
      * Get all more feedback requests associated to an exercise which have more feedback requests in,
      * but filter out the ones that are about the tutor who is doing the request, since tutors cannot act on their own complaint
      * Additionally, filter out the ones where the student is the same as the assessor as this indicated that this is a test run.
@@ -221,4 +224,12 @@ private Course findCourseFromSubmission(Submission submission) {
 
         return studentParticipationRepository.findByIdElseThrow(participation.getId()).getExercise().getCourseViaExerciseGroupOrCourseMember();
     }
+
+    @GetMapping("/submissions/{submissionId}/versions")
+    @EnforceAtLeastInstructor
+    public List<SubmissionVersion> getSubmissionVersions(@PathVariable long submissionId) {
+        var submission = submissionRepository.findByIdElseThrow(submissionId);
+        authCheckService.checkHasAtLeastRoleForExerciseElseThrow(Role.INSTRUCTOR, submission.getParticipation().getExercise(), userRepository.getUser());
+        return submissionVersionRepository.findSubmissionVersionBySubmissionIdOrderByCreatedDateAsc(submission.getId());
+    }
 }

src/main/webapp/app/entities/submission-version.model.ts

@@ -0,0 +1,10 @@
+import { BaseEntity } from 'app/shared/model/base-entity';
+import { Submission } from 'app/entities/submission.model';
+import dayjs from 'dayjs/esm';
+
+export class SubmissionVersion implements BaseEntity {
+    public id?: number;
+    public submission: Submission;
+    public createdDate: dayjs.Dayjs;
+    public content: string;
+}

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

@@ -52,8 +52,11 @@ import { ExamExerciseImportComponent } from 'app/exam/manage/exams/exam-exercise
 import { FeatureToggleModule } from 'app/shared/feature-toggle/feature-toggle.module';
 import { BonusComponent } from 'app/grading-system/bonus/bonus.component';
 import { ArtemisModePickerModule } from 'app/exercises/shared/mode-picker/mode-picker.module';
+import { StudentExamTimelineComponent } from './student-exams/student-exam-timeline/student-exam-timeline.component';
 import { TitleChannelNameModule } from 'app/shared/form/title-channel-name/title-channel-name.module';
-
+import { ArtemisExamNavigationBarModule } from 'app/exam/participate/exam-navigation-bar/exam-navigation-bar.module';
+import { ArtemisExamSubmissionComponentsModule } from 'app/exam/participate/exercises/exam-submission-components.module';
+import { NgxSliderModule } from 'ngx-slider-v2';
 const ENTITY_STATES = [...examManagementState];
 
 @NgModule({
@@ -87,6 +90,9 @@ const ENTITY_STATES = [...examManagementState];
         ArtemisModePickerModule,
         StudentsUploadImagesModule,
         TitleChannelNameModule,
+        ArtemisExamNavigationBarModule,
+        ArtemisExamSubmissionComponentsModule,
+        NgxSliderModule,
     ],
     declarations: [
         ExamManagementComponent,
@@ -115,6 +121,7 @@ const ENTITY_STATES = [...examManagementState];
         ExamImportComponent,
         ExamExerciseImportComponent,
         BonusComponent,
+        StudentExamTimelineComponent,
     ],
 })
 export class ArtemisExamManagementModule {}

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

@@ -55,6 +55,7 @@ import { FileUploadExerciseManagementResolve } from 'app/exercises/file-upload/m
 import { ModelingExerciseResolver } from 'app/exercises/modeling/manage/modeling-exercise-resolver.service';
 import { ExamResolve, ExerciseGroupResolve, StudentExamResolve } from 'app/exam/manage/exam-management-resolve.service';
 import { BonusComponent } from 'app/grading-system/bonus/bonus.component';
+import { StudentExamTimelineComponent } from 'app/exam/manage/student-exams/student-exam-timeline/student-exam-timeline.component';
 
 export const examManagementRoute: Routes = [
     {
@@ -276,6 +277,18 @@ export const examManagementRoute: Routes = [
         },
         canActivate: [UserRouteAccessService],
     },
+    {
+        path: ':examId/student-exams/:studentExamId/timeline',
+        component: StudentExamTimelineComponent,
+        resolve: {
+            studentExam: StudentExamResolve,
+        },
+        data: {
+            authorities: [Authority.INSTRUCTOR, Authority.ADMIN],
+            pageTitle: 'artemisApp.examManagement.title',
+        },
+        canActivate: [UserRouteAccessService],
+    },
     {
         path: ':examId/student-exams/:studentExamId/summary/overview/grading-key',
         component: GradingKeyOverviewComponent,
@@ -307,7 +320,7 @@ export const examManagementRoute: Routes = [
     },
     {
         path: ':examId/test-runs/:studentExamId/summary',
-        component: StudentExamSummaryComponent,
+        component: StudentExamTimelineComponent,
         resolve: {
             studentExam: StudentExamResolve,
         },

src/main/webapp/app/exam/manage/student-exams/student-exam-detail.component.html

@@ -11,25 +11,32 @@ <h4 *ngIf="isTestRun" class="mb-0" jhiTranslate="artemisApp.studentExamDetail.te
 <br />
 <div *ngIf="student && studentExam">
     <div class="mb-3">
-        <h5><span jhiTranslate="artemisApp.studentExamDetail.student">Student</span></h5>
-        <ol class="indented-list">
-            <li>
-                <strong jhiTranslate="artemisApp.studentExamDetail.name">Name:</strong>
-                {{ student.name }}
-            </li>
-            <li>
-                <strong jhiTranslate="artemisApp.studentExamDetail.login">Login:</strong>
-                {{ student.login }}
-            </li>
-            <li>
-                <strong jhiTranslate="artemisApp.studentExamDetail.email">Email:</strong>
-                {{ student.email }}
-            </li>
-            <li>
-                <strong jhiTranslate="artemisApp.studentExamDetail.matriculationNumber">Matriculation number:</strong>
-                {{ student.visibleRegistrationNumber }}
-            </li>
-        </ol>
+        <div class="col d-flex">
+            <div class="row d-flex col-md-5">
+                <h5><span jhiTranslate="artemisApp.studentExamDetail.student">Student</span></h5>
+                <ol class="indented-list">
+                    <li>
+                        <strong jhiTranslate="artemisApp.studentExamDetail.name">Name:</strong>
+                        {{ student.name }}
+                    </li>
+                    <li>
+                        <strong jhiTranslate="artemisApp.studentExamDetail.login">Login:</strong>
+                        {{ student.login }}
+                    </li>
+                    <li>
+                        <strong jhiTranslate="artemisApp.studentExamDetail.email">Email:</strong>
+                        {{ student.email }}
+                    </li>
+                    <li>
+                        <strong jhiTranslate="artemisApp.studentExamDetail.matriculationNumber">Matriculation number:</strong>
+                        {{ student.visibleRegistrationNumber }}
+                    </li>
+                </ol>
+            </div>
+            <a *ngIf="course?.isAtLeastInstructor && studentExam.submitted" class="btn btn-primary mb-auto pl-5" [routerLink]="'./timeline'">
+                <span jhiTranslate="artemisApp.studentExams.examTimeline">Timeline</span>
+            </a>
+        </div>
     </div>
 
     <div class="mb-3" *ngIf="!isTestExam">

src/main/webapp/app/exam/manage/student-exams/student-exam-timeline/student-exam-timeline.component.html

@@ -0,0 +1,60 @@
+<h4 class="mb-4" jhiTranslate="artemisApp.timeline.title" [translateValues]="{ username: studentExam.user!.login! }">Exam timeline</h4>
+<div *ngIf="studentExam">
+    <ngx-slider class="mb-5" #slider [(value)]="value" [options]="options" (userChange)="onInputChange($event)"></ngx-slider>
+    <jhi-exam-navigation-bar
+        #examNavigationBar
+        id="exam-navigation-bar"
+        class="sticky-top d-block"
+        [exercises]="studentExam?.exercises!"
+        [exerciseIndex]="exerciseIndex"
+        [examTimeLineView]="true"
+        (onPageChanged)="onPageChange($event)"
+    ></jhi-exam-navigation-bar>
+    <!-- exercises -->
+    <ng-container *ngFor="let exercise of studentExam.exercises; let i = index">
+        <ng-container *ngIf="exercise && exercise.studentParticipations && exercise.studentParticipations[0]">
+            <ng-container *ngIf="pageComponentVisited[i]">
+                <ng-container [ngSwitch]="exercise.type">
+                    <div [hidden]="i !== activePageIndex" [id]="'exercise-' + exercise.id">
+                        <jhi-quiz-submission-exam
+                            *ngSwitchCase="QUIZ"
+                            [exercise]="exercise"
+                            [studentSubmission]="exercise.studentParticipations[0].submissions![0]"
+                            [readonly]="true"
+                            [examTimeline]="true"
+                        ></jhi-quiz-submission-exam>
+                        <jhi-file-upload-submission-exam
+                            *ngSwitchCase="FILEUPLOAD"
+                            [exercise]="exercise"
+                            [studentSubmission]="exercise.studentParticipations[0].submissions![0]"
+                            [readonly]="true"
+                            [examTimeline]="true"
+                        ></jhi-file-upload-submission-exam>
+                        <jhi-text-editor-exam
+                            *ngSwitchCase="TEXT"
+                            [exercise]="exercise"
+                            [studentSubmission]="exercise.studentParticipations[0].submissions![0]"
+                            [readonly]="true"
+                            [examTimeline]="true"
+                        ></jhi-text-editor-exam>
+                        <jhi-modeling-submission-exam
+                            *ngSwitchCase="MODELING"
+                            [exercise]="exercise"
+                            [studentSubmission]="exercise.studentParticipations[0].submissions![0]"
+                            [readonly]="true"
+                            [examTimeline]="true"
+                        ></jhi-modeling-submission-exam>
+                        <jhi-programming-submission-exam
+                            *ngSwitchCase="PROGRAMMING"
+                            [exercise]="exercise"
+                            [studentParticipation]="exercise.studentParticipations[0]"
+                            [courseId]="courseId"
+                            [readonly]="true"
+                            [examTimeline]="true"
+                        ></jhi-programming-submission-exam>
+                    </div>
+                </ng-container>
+            </ng-container>
+        </ng-container>
+    </ng-container>
+</div>