Exam mode: Visualize student submissions in exam timeline

[tobias-lippert]

Checklist

General

• I tested all changes and their related features with all corresponding user types on a test server.
• Language: I followed the guidelines for inclusive, diversity-sensitive, and appreciative language.
• I chose a title conforming to the naming conventions for pull requests.

Server

• Important: I implemented the changes with a very good performance and prevented too many (unnecessary) database calls.
• I followed the coding and design guidelines.
• I added multiple integration tests (Spring) related to the features (with a high test coverage).
• I added pre-authorization annotations according to the guidelines and checked the course groups for all new REST Calls (security).
• I documented the Java code using JavaDoc style.

Client

• Important: I implemented the changes with a very good performance, prevented too many (unnecessary) REST calls and made sure the UI is responsive, even with large data.
• I followed the coding and design guidelines.
• Following the theming guidelines, I specified colors only in the theming variable files and checked that the changes look consistent in both the light and the dark theme.
• I added multiple integration tests (Jest) related to the features (with a high test coverage), while following the test guidelines.
• I added authorities to all new routes and checked the course groups for displaying navigation elements (links, buttons).
• I documented the TypeScript code using JSDoc style.
• I added multiple screenshots/screencasts of my UI changes.
• I translated all newly inserted strings into English and German.

Motivation and Context

Artemis already stores every submission made during an exam in the database. So far, this data has not been made available to instructors to analyze potential suspicious behavior or just to understand how a student behaved during an exam.

Description

On the student exam detail page, there's now a button to the exam timeline.
I heavily reused the exam-submission-components in read-only view. Additionally, we show a timeline that allows to navigate to a particular timestamp, when a submission happened.
Instructors can also navigate to a particular exercise and are then shown the submission for the exercise that is closest to the last timestamp they selected.

• in case the two submissions happen in the same second, the behavior is not really defined as we then have multiple submissions with the same timestamp and cannot reliably find the submission corresponding to a particular timestamp. To address this, we would need to store the timestamp in the database with a higher precision than seconds, which we won't do for now.

Steps for Testing

Have a look at the limitations above first.
For code review: Ignore all changes regarding apollon imports, as they will be gone as soon as Paul's branch is merged into develop.

Prerequisites:

• 1 Instructor
• 1 Student

1. Log in to Artemis
2. Navigate to Course Administration
3. Create an exam with all exercise types (programming,file upload, quiz, modeling,text)
4. participate as student in the exam and submit the exam.
5. As an instructor go to student exams -> student exam of student -> view -> exam timeline
6. navigate around the timeline and make sure the correct submission is shown for the timestamp.

Exam Mode Testing

This PR touches every exam-submission component, therefore the student view of the exam mode needs thorough testing

Prerequisites:

• 1 Instructor
• 2 Students

1. Log in to Artemis
2. Participate in the exam as a student
3. Make sure submitting exercises of all types is still possible.
4. Make sure the UI didn't change.

Review Progress

Performance Review

• I confirm that the client changes (in particular related to REST calls and UI responsiveness) are implemented with a very good performance
• I confirm that the server changes (in particular related to database calls) are implemented with a very good performance

Code Review

• Code Review 1
• Code Review 2

Manual Tests

• Test 1
• Test 2

Exam Mode Test

• Test 1
• Test 2

Test Coverage

Client

Class/File	Line Coverage	Confirmation (assert/expect)	Comment
submission-version.model.ts	100%	✅
student-exam-timeline.component.ts	95.45%	✅
exam-navigation-bar.component.ts	85.29%	✅	my changes are covered
exam-page.component.ts	100%	✅
exam-submission.component.ts	100%	✅
file-upload-exam-submission.component.ts	92.18%		empty methods that throw an error because submission versions are not supported.
modeling-exam-submission.component.ts	97.67%	✅
programming-exam-submission.component.ts	88.88%		empty methods that throw an error because submission versions are not supported.
quiz-exam-submission.component.ts	93.1%	✅
text-exam-submission.component.ts	100%	✅
submission.service.ts	98.03%	✅
navbar.component.ts	89.89%	✅

Server

Class/File	Line Coverage	Confirmation (assert/expect)	Comment
SubmissionRepository.java	89%	✅	my changes are covered
SubmissionResource.java	87%	✅	my changes are covered

Screenshots

exam_timeline_new.mp4

[florian-glombik]

Tested on ts2, for me the timeline was not displayed properly

TypeError: Cannot read properties of undefined (reading 'diff'), there seems to be an issue with missing timestamps

[MaximilianAnzinger]

Code

[florian-glombik]

Tested on ts2, the feature now works for my submission from the testing session!

[laurenzfb]

Tested in testing session. Very nice!

[max-bergmann]

Tested in testing session - for my submission everything worked as expected