Exam mode: Redesign the user interface of the exam mode for students

[edkaya]

Checklist

General

• I tested all changes and their related features with all corresponding user types on a test server.
• This is a small issue that I tested locally and was confirmed by another developer 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.

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 strictly followed the client 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

In the current design of Artemis, we display real and test exams side by side. In other parts of Artemis, such as lectures and exercises, we use sidebars to group elements. To maintain consistency, the sidebar is also implemented in the course exams view in order to group and display real and test exams. Besides, exam view itself contains visual inconsistencies and therefore it is not user-friendly. With the implementation of a new exam navigation sidebar, exam footer, and exam bar, it will become easier to navigate through different sections of the exam efficiently, track progress, and access essential tools and information quickly, enhancing the overall user experience. This implementation is therefore served as the new design of exam mode.

Description

• New sidebar in course exams to display real and test exams
• Welcome-page, exam-summary and submission error text are displayed in sidebar-content.
• New design of welcome page, which consists of information boxes to display exam information details such as examiner, examined student, course, module number, max points, number of exercises, date and working time.
• Exam view consists of three different design changes:
  • New exam navigation sidebar instead of navigation bar. The navigation sidebar contains exercise icons, exercise titles and current submission status. The sidebar is collapsible to maximize the size of exercise content.
  • New status icons
  • New exam bar to display remaining time and handle hand in early functionality. The bar is now more minimalistic and the format of remaining time is changed from "2h 10min" to "02:10:00". Save&Continue button is removed.
  • New exam footer, which is similar to the new footer design that is used in the exercise edit / create screen.
• Documentation is also updated with new screenshots respectively. You can check the documentation changes here.

Steps for Testing

Prerequisites:

• 1 Admin
• 1 Students
• 1 Real Exam
• 1 Test Exam

(There are already two real exams available under my course "Ege Dogu Kaya" on TS4 and 13 test accounts (artemis_test_user_1 to artemis_test_user 13) are registered for these two exams, feel free to register other accounts if needed. If you want to use these two exams to test it, you can skip first 8 steps. )

1. Log in to Artemis with Admin account
2. Navigate to Course Management
3. Select a Course
4. Navigate to Exams
5. Create an Exam
6. Register the student account
7. Go to Student Exams
8. Click 'Generate individual exams' and then 'Prepare exercise start'
9. Log in to Artemis with Student account
10. Select the course
11. Navigate to Exams
12. Verify that you have real and test exams being displayed in the sidebar with correct information
13. Verify that you see the welcome page of the exam in the sidebar-content
14. Verify that you are correctly navigated to exam after clicking on 'Start'
15. Verify that you can collapse the exam navigation sidebar
16. Verify that status icons in the sidebar work as expected
17. Verify that tooltips for icons work as expected
18. Verify that hand in early button works fine
19. Verify that you can see the exam summary in the sidebar-content when you finished the exam

Exam Mode Testing

• 1 Student
• 1 Exam

1. Log in to Artemis
2. Participate in the exam as a student
3. Make sure that nothing changes in the exam itself functionally

Testserver States

Note

These badges show the state of the test servers.
Green = Currently available, Red = Currently locked
Click on the badges to get to the test servers.

Review Progress

Performance Review

• I (as a reviewer) confirm that the client changes (in particular related to REST calls and UI responsiveness) 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

Class/File	Line Coverage	Confirmation (assert/expect)
exam-participation.component.ts	90%	✅
exam-bar.component.ts	95%	✅
exam-participation-cover.component.ts	99%	✅
exam-navigation-sidebar.component.ts	90%	✅
exam-start-information.component.ts	100%	✅
exam-result-summary.component.ts	91%	✅
course-exams.component.ts	94%	✅

Screenshots

• Current system

Displaying real and test exams

Welcome Page

Exam View


Exam Navigation Bar

• Implemented design

Sidebar for real and test exams with welcome page

Exam View

Sidebar not collapsed

Sidebar collapsed

[iyannsch]

All issues fixed, thanks a lot!!

[florian-glombik]

Approving Code

[Jan-Thurner]

code

[undernagruzez]

thanks for addressing the feedback

[rabeatwork]

maintainer approve