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.

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.

I excluded one cypress tests that blocks this PR because it only fails on CI. It works locally and manual tests confirm that the functionality works. We try debugging and fixing this test in #6631 not further to block this PR.

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, replacing Drag Items and Questions to make sure the files get cleared up and not sent to the server

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

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):

[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.

[codecov-commenter]

Codecov Report

Merging #6456 (827f6d5) into develop (d5897fe) will decrease coverage by 4.54%.
The diff coverage is 81.67%.

❗ Your organization is not using the GitHub App Integration. As a result you may experience degraded service beginning May 15th. Please install the Github App Integration for your organization. Read more.

Additional details and impacted files

@@              Coverage Diff              @@
##             develop    #6456      +/-   ##
=============================================
- Coverage      84.96%   80.42%   -4.54%     
- Complexity     13912    13952      +40     
=============================================
  Files           1156     2448    +1292     
  Lines          44886    93506   +48620     
  Branches        4623    13137    +8514     
=============================================
+ Hits           38137    75203   +37066     
- Misses          4225    10055    +5830     
- Partials        2524     8248    +5724     

Impacted Files	Coverage Δ
.../tum/in/www1/artemis/domain/quiz/QuizExercise.java	74.87% <0.00%> (ø)
.../de/tum/in/www1/artemis/web/rest/ExamResource.java	95.02% <ø> (ø)
...n/www1/artemis/web/rest/ExerciseGroupResource.java	91.52% <ø> (ø)
...ercises/quiz/manage/quiz-exercise-popup.service.ts	31.81% <0.00%> (ø)
.../re-evaluate/quiz-re-evaluate-warning.component.ts	38.38% <0.00%> (ø)
...in/webapp/app/shared/http/file-uploader.service.ts	42.85% <ø> (ø)
...z/manage/re-evaluate/quiz-re-evaluate.component.ts	78.48% <28.57%> (ø)
...n/www1/artemis/service/exam/ExamImportService.java	90.26% <57.14%> (+0.34%)	⬆️
.../www1/artemis/domain/quiz/DragAndDropQuestion.java	70.42% <63.63%> (-0.09%)	⬇️
...-question/drag-and-drop-question-edit.component.ts	78.18% <65.21%> (ø)
... and 17 more

... and 1281 files with indirect coverage changes

Flag	Coverage Δ
client	76.19% <77.91%> (?)
server	84.98% <84.34%> (+0.01%)	⬆️

---

Continue to review full report in Codecov by Sentry.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update d5897fe...827f6d5. Read the comment docs.

[YeetTheFirst21]

Retested on TS1,

both normal quiz and exam mode seems to be working as expected with imports.

[JohannesStoehr]

Code looks good to me

[tobias-lippert]

Retested on ts4. Everything still seems to work.

[dearjasmina]

reapprove

[Santia-go]

Re approved!
The last changes do not change the behavior previously tested.