Quiz exercises: Simplify drag-and-drop image upload

[julian-christl]

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

• I followed the coding and design guidelines.
• I added multiple integration tests (Spring) related to the features (with a high test coverage).
• I implemented the changes with a good performance and prevented too many database calls.
• I documented the Java code using JavaDoc style.

Client

• I followed the coding and design guidelines and ensured that the layout is responsive.
• I added multiple integration tests (Jest) related to the features (with a high test coverage), while following the test guidelines.
• 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

Follow-up of #5733 and #5427 to replace the file upload before entity persistence with a multipart file and entity upload.
Reimplementation after #6456 got reverted. After implementing the file service, the original issue got resolved.

Description

The changes only affect the drag-and-drop section of the quizzes. But because the quiz editor allows creating all different types of quiz questions, I had to make the component saving the entity to retrieve the files from potential drag-and-drop question children and upload them together with the files.

It affects the Creation, Update, Re-evaluation and Import of quiz exercises. Additionally, it also affects the creation of drag-and-drop mode quizzes. However, those use the same creation endpoint.

Steps for Testing

We need to fully test the quiz functionalities, including:

• Creation of a normal quiz
• Creation of a Drag and Drop Model Quiz
• Edit
• Import
• Reevaluation
• Adding existing questions (bottom of the editor) to a quiz exercise

During all of these five checks, it makes sense to work

• with and without dnd questions
• with and without background
• with and without picture drag and drop items
• with and without text drag and drop items
• with both drag and drop items
• with adding, removing, and replacing Drag Items and Questions to make sure the files get cleared up and not sent to the server
• try editing steps after a fresh reload as well as continuously editing and saving without a reload

Always check if the quiz gets rendered as expected.

Exam Mode Testing

Most of the changes are unrelated to the exam mode. I do not think testing is necessary to test the exam mode as extensively. However, it makes sense to just test the normal quiz exam workflow (creation and conduction) to be sure.

The only change that does require testing here is the import functionality of an existing exercise.

Review Progress

I squashed all changes from #6456 that already got approved, so technically, it should be enough to review the rest.

Code Review

• Review 1
• Review 2

Manual Tests

• Test 1
• Test 2

Exam Mode Tests

• Test 1
• Test 2

Test Coverage

Class/File	Line Coverage	Confirmation (assert/expect)
FileService.java	87.0%
QuizExerciseImportService.java	93.7%
QuizExerciseService.java	97.7%	✅
ExamImportService.java	95.5%
QuizExerciseResource.java	93.6%	✅
quiz-exercise-generator.ts	89.6%
drag-and-drop-question-edit.component.ts	91.6%	✅
quiz-exercise-detail.component.ts	92.8%	✅
quiz-question-list-edit.component.ts	94.8%	✅
quiz-question-list-edit-existing.component.ts	98.9%	✅
re-evaluate-drag-and-drop-question.component.ts	100%	✅
quiz-re-evaluate.component.ts	86.1%
quiz-exercise.service.ts	100%	✅
quiz-re-evaluate.service.ts	100%	✅
file.service.ts	63.0%	✅

Screenshots

Upload background before (before changes):

Upload Background before (after changes):

Upload background after (before changes):

Upload background after (after changes):

Upload picture drag item after (before changes):

Upload picture drag item after (after changes):

[pal03377]

The DND quiz preview breaks for me with draggable image items. The video shows the current behavior on the left (develop, running locally) and the behavior with this PR on the right (on TS4). Note that the image already seems to break while dragging it.

screenshot-2023-09-26_001986.mp4

[Kroko-fant]

I tested uploading files a bit and was able to consistently reproduce a bug that occurs, when I edit a quiz, stay on the page.

1. Upload at least one file
2. Press "Save"
3. Delete any (could be the one you uploaded could be another file that previously was uploaded)
4. Try to save the changes

Desktop.2023.09.27.-.00.19.28.06.mp4

[julian-christl]

@pal03377 Fixed the your first issue in d8d3e22, the second in 052d639

@Kroko-fant Fixed in c211afd

(not yet ready for a retest, need to fix something else first)

fixed

[github-actions]

There hasn't been any activity on this pull request recently. Therefore, this pull request has been automatically marked as stale and will be closed if no further activity occurs within seven days. Thank you for your contributions.

[max-bergmann]

Tested in testing session - quizzes worked as expected

[egekurt123]

Tested in testing session - Multiple choice / Single choice and "Fill in the blanks" exercises work as expected.
Re-evalution works as expected.

[milljoniaer]

Tested in testing session, works as expected

[Strohgelaender]

tested on ts1, all previusly found issues are now resolved. code lgtm.

[Santia-go]

I created a quiz with a question (DnD). Works perfect.
However, I created another quiz in the same course, and when I look for the question (the recently created one) to import into this new quiz, it does not appear in the list.

[laadvo]

Code looks good 👍