Quiz exercises: Improve user experience when creating modeling drag a…

…nd drop exercises (#7261)

src/main/webapp/app/exercises/quiz/manage/apollon-diagrams/apollon-diagram-detail.component.ts

@@ -1,5 +1,5 @@
 import { Component, ElementRef, OnDestroy, OnInit, ViewChild } from '@angular/core';
-import { ActivatedRoute } from '@angular/router';
+import { ActivatedRoute, Router } from '@angular/router';
 import { ApollonEditor, ApollonMode, Locale, UMLModel } from '@ls1intum/apollon';
 import { NgbModal } from '@ng-bootstrap/ng-bootstrap';
 import { JhiLanguageHelper } from 'app/core/language/language.helper';
@@ -52,6 +52,7 @@ export class ApollonDiagramDetailComponent implements OnInit, OnDestroy {
         private languageHelper: JhiLanguageHelper,
         private modalService: NgbModal,
         private route: ActivatedRoute,
+        private router: Router,
     ) {}
 
     /**
@@ -153,6 +154,7 @@ export class ApollonDiagramDetailComponent implements OnInit, OnDestroy {
      */
     async generateExercise() {
         if (!this.hasInteractive) {
+            this.alertService.error('artemisApp.apollonDiagram.create.validationError');
             return;
         }
 
@@ -165,6 +167,7 @@ export class ApollonDiagramDetailComponent implements OnInit, OnDestroy {
             const result = await modalRef.result;
             if (result) {
                 this.alertService.success('artemisApp.apollonDiagram.create.success', { title: result.title });
+                this.router.navigate(['course-management', this.courseId, 'quiz-exercises', result.id, 'edit']);
             }
         } catch (error) {
             this.alertService.error('artemisApp.apollonDiagram.create.error');

src/main/webapp/app/exercises/quiz/manage/apollon-diagrams/exercise-generation/quiz-exercise-generator.ts

@@ -68,9 +68,9 @@ export async function generateDragAndDropQuizExercise(
     const quizExercise = createDragAndDropQuizExercise(course, title, dragAndDropQuestion);
 
     // Save the quiz exercise
-    await lastValueFrom(quizExerciseService.create(quizExercise));
+    const creationResponse = await lastValueFrom(quizExerciseService.create(quizExercise));
 
-    return quizExercise;
+    return creationResponse.body ?? quizExercise;
 }
 
 /**

src/main/webapp/app/exercises/quiz/shared/questions/drag-and-drop-question/drag-and-drop-question.component.html

@@ -96,6 +96,7 @@ <h4 class="question-title-display">
                             (onDragOver)="preventDefault($event)"
                             (onDragLeave)="preventDefault($event)"
                             cdkDropList
+                            [cdkDropListAutoScrollStep]="60"
                         >
                             <jhi-drag-item
                                 (dragenter)="drag()"
@@ -229,7 +230,7 @@ <h4 class="question-title-display">
                     </div>
                 </div>
             </div>
-            <div class="drag-and-drop-items" [ngStyle]="{ 'max-height': '100vh' }">
+            <div class="drag-and-drop-items">
                 <div class="dnd-instructions" *ngIf="!showResult">
                     <span jhiTranslate="artemisApp.dragAndDropQuestion.studentInstructions"></span>
                 </div>
@@ -244,6 +245,7 @@ <h4 class="question-title-display">
                     (onDragOver)="preventDefault($event)"
                     (onDragLeave)="preventDefault($event)"
                     cdkDropList
+                    [cdkDropListAutoScrollStep]="60"
                 >
                     <jhi-drag-item
                         id="drag-item-{{ i }}"

src/main/webapp/app/exercises/quiz/shared/questions/drag-and-drop-question/drag-and-drop-question.component.scss

@@ -165,7 +165,7 @@
                 margin-right: auto;
                 min-height: 50px;
                 overflow: auto;
-                max-height: 80vh;
+                max-height: calc(100vh - 90px);
 
                 @media (min-width: 1200px) {
                     flex-direction: column;

src/main/webapp/i18n/de/apollonDiagram.json

@@ -13,7 +13,8 @@
             "deleted": "Apollon Diagram gelöscht mit ID {{ param }}",
             "create": {
                 "success": "Apollon Diagram mit Titel {{ title }} wurde erfolgreich generiert",
-                "error": "Fehler beim Erstellen des Apollon Diagramms"
+                "error": "Fehler beim Erstellen des Apollon Diagramms",
+                "validationError": "Validierungsfehler: Interaktive Elemente werden zum Generieren benötigt."
             },
             "update": {
                 "error": "Fehler beim Aktualisieren des Apollon Diagramms"

src/main/webapp/i18n/en/apollonDiagram.json

@@ -13,7 +13,8 @@
             "deleted": "Deleted Apollon Diagram with ID {{ param }}",
             "create": {
                 "success": "Apollon Diagram with title {{ title }} was created successfully",
-                "error": "Error while creating Apollon Diagram"
+                "error": "Error while creating Apollon Diagram",
+                "validationError": "Validation Error: Please add interactive elements first."
             },
             "update": {
                 "error": "Error while updating Apollon Diagram"

src/test/javascript/spec/component/apollon-diagrams/exercise-generation/quiz-exercise-generator.spec.ts

@@ -8,11 +8,10 @@ import { TranslateService } from '@ngx-translate/core';
 import { Course } from 'app/entities/course.model';
 import { DragAndDropQuestion } from 'app/entities/quiz/drag-and-drop-question.model';
 import { QuizExercise } from 'app/entities/quiz/quiz-exercise.model';
-import { QuizQuestion, QuizQuestionType } from 'app/entities/quiz/quiz-question.model';
+import { QuizQuestionType } from 'app/entities/quiz/quiz-question.model';
 import { generateDragAndDropQuizExercise } from 'app/exercises/quiz/manage/apollon-diagrams/exercise-generation/quiz-exercise-generator';
 import { QuizExerciseService } from 'app/exercises/quiz/manage/quiz-exercise.service';
 import { FileUploaderService } from 'app/shared/http/file-uploader.service';
-import dayjs from 'dayjs/esm';
 import { MockProvider } from 'ng-mocks';
 import { LocalStorageService, SessionStorageService } from 'ngx-webstorage';
 import { of } from 'rxjs';
@@ -27,19 +26,6 @@ Text.size = () => {
     return { width: 0, height: 0 };
 };
 
-const question1 = { id: 1, type: QuizQuestionType.DRAG_AND_DROP, points: 1 } as QuizQuestion;
-const question2 = { id: 2, type: QuizQuestionType.MULTIPLE_CHOICE, points: 2, answerOptions: [], invalid: false, exportQuiz: false, randomizeOrder: true } as QuizQuestion;
-const question3 = { id: 3, type: QuizQuestionType.SHORT_ANSWER, points: 3 } as QuizQuestion;
-const now = dayjs();
-
-const quizExercise = {
-    id: 1,
-    quizQuestions: [question1, question2, question3],
-    releaseDate: dayjs(now).subtract(2, 'minutes'),
-    dueDate: dayjs(now).add(2, 'minutes'),
-    quizStarted: true,
-} as QuizExercise;
-
 describe('QuizExercise Generator', () => {
     let quizExerciseService: QuizExerciseService;
     let fileUploaderService: FileUploaderService;
@@ -80,7 +66,7 @@ describe('QuizExercise Generator', () => {
         configureServices();
         const examplePath = '/path/to/file';
         jest.spyOn(fileUploaderService, 'uploadFile').mockReturnValue(Promise.resolve({ path: examplePath }));
-        jest.spyOn(quizExerciseService, 'create').mockReturnValue(of({ body: quizExercise } as HttpResponse<QuizExercise>));
+        jest.spyOn(quizExerciseService, 'create').mockImplementation((generatedExercise) => of({ body: generatedExercise } as HttpResponse<QuizExercise>));
         jest.spyOn(svgRenderer, 'convertRenderedSVGToPNG').mockReturnValue(new Blob());
         // @ts-ignore
         const classDiagram: UMLModel = testClassDiagram as UMLModel;