From 9a6a715bcfef260ec9d1c8b3467258036ba840a1 Mon Sep 17 00:00:00 2001
From: Tanja Ulmen <tanja.ulmen@sva.de>
Date: Wed, 26 Nov 2025 16:50:32 +0100
Subject: [PATCH] feat(): add modal to finish button if quiz is not submitted

---
 src/app/scenario/step.component.html | 25 +++++++++++++++++++++++++
 src/app/scenario/step.component.ts   | 27 +++++++++++++++++++++++++++
 2 files changed, 52 insertions(+)

diff --git a/src/app/scenario/step.component.html b/src/app/scenario/step.component.html
index 53a59440..a91d409a 100644
--- a/src/app/scenario/step.component.html
+++ b/src/app/scenario/step.component.html
@@ -67,6 +67,7 @@ <h4 class="card-title">
               @if (step.quiz) {
                 <div class="mt-3">
                   <quiz
+                    #quizComponent
                     [quizId]="step.quiz"
                     [scenarioId]="scenario.id"
                     [scenarioName]="scenario.name | atob"
@@ -368,3 +369,27 @@ <h3 class="modal-title">Your session has expired!</h3>
     <img src="{{ srcImgXlarge }}" alt="ImageMadeLarger" class="modal-image" />
   </div>
 </clr-modal>
+
+<clr-modal
+  [(clrModalOpen)]="unsubmittedQuizModalOpen"
+  [clrModalClosable]="false"
+>
+  <h3 class="modal-title">Quiz not submitted</h3>
+  <div class="modal-body">
+    <p>
+      Do you really want to finish without submitting your quiz? Your quiz
+      progress will not be saved.
+    </p>
+  </div>
+  <div class="modal-footer">
+    <button class="btn btn-outline" (click)="cancelUnsubmittedQuizFinish()">
+      Cancel
+    </button>
+    <button
+      class="btn btn-success-outline"
+      (click)="confirmUnsubmittedQuizFinish()"
+    >
+      Finish anyway
+    </button>
+  </div>
+</clr-modal>
diff --git a/src/app/scenario/step.component.ts b/src/app/scenario/step.component.ts
index b7eacef9..1bfa7cc5 100644
--- a/src/app/scenario/step.component.ts
+++ b/src/app/scenario/step.component.ts
@@ -52,6 +52,7 @@ import { Course } from '../course/course';
 import { CourseService } from '../services/course.service';
 import { LanguageCommandService } from './bashbrawl/languages/language-command.service';
 import { SidenavService } from '../services/sidenav.service';
+import { QuizComponent } from '../quiz/quiz.component';
 
 type Service = {
   name: string;
@@ -99,6 +100,7 @@ export class StepComponent implements OnInit, AfterViewInit, OnDestroy {
 
   maxInterfaceTabs = 2;
   private activeWebinterface: Service;
+  public unsubmittedQuizModalOpen = false;
 
   public pauseOpen = false;
 
@@ -123,6 +125,7 @@ export class StepComponent implements OnInit, AfterViewInit, OnDestroy {
   @ViewChild('pausemodal', { static: true }) private pauseModal: ClrModal;
   @ViewChild('contentdiv', { static: false }) private contentDiv: ElementRef;
   @ViewChild('divider', { static: true }) divider: SplitComponent;
+  @ViewChild('quizComponent', { static: false }) quizComponent?: QuizComponent;
 
   constructor(
     private route: ActivatedRoute,
@@ -402,6 +405,16 @@ export class StepComponent implements OnInit, AfterViewInit, OnDestroy {
   }
 
   public goFinish() {
+    console.log(this.quizComponent);
+    if (
+      this.quizComponent &&
+      this.quizComponent.isPersistent &&
+      !this.quizComponent.isSubmitted
+    ) {
+      this.unsubmittedQuizModalOpen = true;
+      return;
+    }
+
     if (this.isContentOnly) {
       this.actuallyFinish();
       return;
@@ -616,4 +629,18 @@ export class StepComponent implements OnInit, AfterViewInit, OnDestroy {
       this.router.navigateByUrl('/app/home');
     }
   }
+  public cancelUnsubmittedQuizFinish() {
+    this.unsubmittedQuizModalOpen = false;
+  }
+
+  public confirmUnsubmittedQuizFinish() {
+    this.unsubmittedQuizModalOpen = false;
+
+    if (this.isContentOnly) {
+      this.actuallyFinish();
+      return;
+    }
+
+    this.finishOpen = true;
+  }
 }