generate Ques without vs

.gitignore

@@ -40,3 +40,26 @@ testem.log
 # System files
 .DS_Store
 Thumbs.db
+
+
+# Visual Studio / .NET
+.vs/
+bin/
+obj/
+
+# Angular/Node
+node_modules/
+dist/
+.angular/
+
+# Python
+__pycache__/
+*.pyc
+.venv/
+venv/
+
+# OS / secrets
+.DS_Store
+Thumbs.db
+.env
+

src/app/generate-questions/generate-questions.component.css

@@ -25,7 +25,7 @@ body {
   width: 100%;
   position: sticky;
   top: 0;
-  z-index:1;
+  z-index: 1;
 }
 
 .logo img {
@@ -38,24 +38,24 @@ body {
 
 .header-title {
   text-align: center;
-  flex: 1; 
+  flex: 1;
 }
 
   .header-title h1 {
-    font-size: 3vw; 
-    color: #fff; 
+    font-size: 3vw;
+    color: #fff;
     margin: 0;
   }
 
 .home-btn img {
-  width: 5vw; 
+  width: 5vw;
 }
 
   .home-btn img:hover {
-    transform: scale(1.1); 
+    transform: scale(1.1);
   }
 
- /* ==================================================*/
+/* ==================================================*/
 
 
 
@@ -77,27 +77,24 @@ body {
 .btn-generate,
 .reset-btn {
   padding: 1vw 2vw;
-  font-size: 1.6rem; 
+  font-size: 1.6rem;
   border: none;
-  border-radius: 0.5vw; 
+  border-radius: 0.5vw;
   cursor: pointer;
   background-color: #5c67f2;
   color: white;
   font-family: "Open Sans", sans-serif;
   font-weight: bold;
-  transition: all 0.3s ease; 
+  transition: all 0.3s ease;
 }
 
-  .btn-generate:hover,
-  .reset-btn:hover {
-    background-color: #0056b3;
-  }
+
 
   .btn-generate:disabled,
   .reset-btn:disabled {
-    background-color: #cccccc; 
-    color: #666666; 
-    cursor: not-allowed; 
+    background-color: #cccccc;
+    color: #666666;
+    cursor: not-allowed;
   }
 
 
@@ -111,7 +108,7 @@ body {
   left: 0;
   width: 100vw;
   height: 100vh;
-  background-color: rgba(0, 0, 0, 0.5); 
+  background-color: rgba(0, 0, 0, 0.5);
   display: flex;
   justify-content: center;
   align-items: center;
@@ -130,7 +127,7 @@ body {
 
   .error-popup-content p {
     font-size: 1.4vw;
-    color: #dc3545; 
+    color: #dc3545;
     margin-bottom: 1vw;
   }
 
@@ -185,19 +182,19 @@ body {
 
 
 
-  /* Use the `src` of the hidden image */
-  .app-container::before {
-    content: "";
-    position: fixed;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    background-image: attr(data-bg); /* This doesn't work in CSS alone */
-    background-size: cover;
-    background-position: center;
-    z-index: -1; /* Push behind other content */
-  }
+/* Use the `src` of the hidden image */
+.app-container::before {
+  content: "";
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-image: attr(data-bg); /* This doesn't work in CSS alone */
+  background-size: cover;
+  background-position: center;
+  z-index: -1; /* Push behind other content */
+}
 
 
 
@@ -218,15 +215,16 @@ body {
   }
 
 
-  .full-content {
-    display: flex;
-    padding: 10px;
-    box-sizing: border-box;
-    margin-top: 1vw;
-  }
+.full-content {
+  display: flex;
+  padding: 10px;
+  box-sizing: border-box;
+  margin-top: 1vw;
+}
 
 /* Questions Section */
 .questions-container {
+  position: relative; /* important for centering inside this box */
   max-height: 100%;
   overflow: hidden;
   margin: 1vw;
@@ -238,6 +236,8 @@ body {
   background: #e3f2fd;
   padding: 1vw 1vw 1vw 2vw;
   width: 100%;
+  box-shadow: 0 .4vw 1vw rgba(0, 0, 0, .1);
+  border: 9px solid #009688;
 }
 
 
@@ -270,14 +270,15 @@ body {
 }
 
 
-  .btn-submit:disabled {
-    background-color: #ccc;
-    cursor: not-allowed;
-  }
+.btn-submit:disabled {
+  background-color: #ccc;
+  cursor: not-allowed;
+}
+
 .section-title {
   font-size: 2.5rem;
   color: #4ca1af;
-  font-family: 'Open Sans', sans-serif;  
+  font-family: 'Open Sans', sans-serif;
 }
 
 
@@ -401,7 +402,6 @@ body {
   text-align: center;
   margin: 50px auto;
   padding: 40px;
-  
   background: white;
   border-radius: 15px;
   width: 66vw;
@@ -411,62 +411,64 @@ body {
   justify-content: center;
   align-items: center;
   font-family: 'Pacifico', cursive;
-  position: relative; 
-  z-index: 1; 
+  position: relative;
+  z-index: 1;
+  box-shadow: 0 .4vw 1vw rgba(0, 0, 0, .1);
+  border: 9px solid #009688;
 }
 
 
-.congratulation-message h2 {
-  color: #4ca1af;
-  margin-bottom: 15px;
-  font-size: 2.5vw; 
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis; 
-  text-align: center; 
-}
+  .congratulation-message h2 {
+    color: #4ca1af;
+    margin-bottom: 15px;
+    font-size: 2.5vw;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    text-align: center;
+  }
 
 @media (max-width: 768px) {
   .congratulation-message h2 {
-    font-size: 2vw; 
+    font-size: 2vw;
   }
 }
 
 @media (max-width: 480px) {
   .congratulation-message h2 {
-    font-size: 3vw; 
+    font-size: 3vw;
   }
 }
 
 
-  .congratulation-message p {
-    color: #333;
-    margin-bottom: 20px;
-    font-size: 1.8vw;
-  }
+.congratulation-message p {
+  color: #333;
+  margin-bottom: 20px;
+  font-size: 1.8vw;
+}
 
-  .congratulation-message button {
-    padding: 20px 40px;
-    font-size: 1.7em; 
-    background: linear-gradient(to right, #4ca1af, #6ac5cb);
-    color: white;
-    border: none;
-    border-radius: 10px;
-    cursor: pointer;
-    margin-top: 20px;
-    transition: all 0.3s ease;
-    font-family: 'Open Sans', sans-serif;
-    font-weight: bold;
+.congratulation-message button {
+  padding: 20px 40px;
+  font-size: 1.7em;
+  background: #006780;
+  color: white;
+  border: none;
+  border-radius: 10px;
+  cursor: pointer;
+  margin-top: 20px;
+  transition: all 0.3s ease;
+  font-family: 'Open Sans', sans-serif;
+  font-weight: bold;
+}
+
+  .congratulation-message button:hover {
+    background-color: #006780;
+    transform: scale(1.03);
   }
 
-    .congratulation-message button:hover {
-      background-color: #081f95;
-      transform: scale(1.03);
-    }
 
 
 
- 
 
 .hint-toggle-btn {
   background-color: #5c67f2;
@@ -495,7 +497,7 @@ body {
   }
 
   .hint-toggle-btn::before {
-    content: "i"; 
+    content: "i";
     font-weight: bold;
     font-size: 2rem;
     color: white;
@@ -508,7 +510,7 @@ body {
 .side-menu {
   position: fixed;
   top: 0;
-  right: -100%; 
+  right: -100%;
   width: 50%;
   height: 100%;
   background-color: #ffffff;
@@ -516,12 +518,12 @@ body {
   padding: 20px;
   box-sizing: border-box;
   overflow-y: auto;
-  transition: right 0.3s ease; 
+  transition: right 0.3s ease;
   z-index: 999;
 }
 
   .side-menu.active {
-    right: 0; 
+    right: 0;
   }
 
 
@@ -532,21 +534,21 @@ body {
   margin-bottom: 20px;
 }
 
-.side-menu-header h3 {
-  font-size: 1.5rem;
-  color: #4ca1af;
-}
+  .side-menu-header h3 {
+    font-size: 1.5rem;
+    color: #4ca1af;
+  }
 
-.side-menu-header .close-btn {
-  background-color: #ff5c5c;
-  color: white;
-  border: none;
-  border-radius: 50%;
-  font-size: 1.2rem;
-  width: 30px;
-  height: 30px;
-  cursor: pointer;
-}
+  .side-menu-header .close-btn {
+    background-color: #ff5c5c;
+    color: white;
+    border: none;
+    border-radius: 50%;
+    font-size: 1.2rem;
+    width: 30px;
+    height: 30px;
+    cursor: pointer;
+  }
 
 .side-menu ul {
   list-style: none;
@@ -591,7 +593,6 @@ body {
 
   .logo-container {
     width: 10vw; /* Adjust logo width */
- 
   }
 
   .back-button {
@@ -633,7 +634,7 @@ body {
 
 
   .side-menu {
-    width: 40%; 
+    width: 40%;
   }
 
   .congratulation-message {
@@ -666,14 +667,14 @@ body {
   }
 
 
-    .congratulation-message p {
-      font-size: 1.4rem;
-    }
+  .congratulation-message p {
+    font-size: 1.4rem;
+  }
 
-    .congratulation-message button {
-      padding: 15px 30px;
-      font-size: 1.4rem;
-    }
+  .congratulation-message button {
+    padding: 15px 30px;
+    font-size: 1.4rem;
+  }
 }
 
 
@@ -739,7 +740,7 @@ h3 {
   left: 0;
   width: 100%;
   height: 100%;
-/*  background: rgba(0, 0, 0, 0.6);*/
+  /*  background: rgba(0, 0, 0, 0.6);*/
   display: flex;
   flex-direction: column;
   justify-content: center;
@@ -882,12 +883,12 @@ h3 {
 
 /* Button Colors */
 .btn-generate {
-  background-color: #3f51b5;
+  background-color: #006780;
   color: white;
 }
 
 .reset-btn {
-  background-color: #3f51b5;
+  background-color: #006780;
   color: white;
 }
 
@@ -958,7 +959,7 @@ h3 {
   transform: translateY(-50%);
   display: flex;
   justify-content: space-between;
- /* z-index: 2;*/
+  /* z-index: 2;*/
   padding: 0 8px;
 }
 
@@ -991,7 +992,7 @@ h3 {
   border-radius: 6px;
   white-space: nowrap;
   box-shadow: 0px 2px 6px rgba(0, 0, 0, 0.2);
- /* z-index: 5;*/
+  /* z-index: 5;*/
   opacity: 1;
 }
 
@@ -1023,9 +1024,9 @@ h3 {
 /*hint button css start here */
 /* Anchor the i button on the right side of the screen (adjust as you like) */
 .hint-anchor {
-  position: fixed; /* or absolute relative to a container */
-  top: 30vh; /* vertical position */
-  right: 33px; /* distance from right edge */
+  position: fixed;
+  top: 15.6vw;
+  right: 3vw;
   z-index: 1101;
 }
 
@@ -1175,3 +1176,146 @@ h3 {
       transform: rotate(45deg);
     }
 }
+
+
+/* Circular countdown */
+.ring {
+  position: relative;
+  width: 220px;
+  height: 220px;
+  margin: 0 auto 8px;
+}
+
+.ring-svg {
+  width: 220px;
+  height: 220px;
+  display: block;
+}
+
+/* static track */
+.ring-track {
+  fill: none;
+  stroke: rgba(15, 23, 42, 0.18); /* slate-900 @ 18% */
+  stroke-width: 16;
+}
+
+/* animated arc */
+.ring-progress {
+  fill: none;
+  stroke: #006780; /* accent */
+  stroke-width: 16;
+  stroke-linecap: round;
+  transform: rotate(-90deg); /* start at 12 o’clock */
+  transform-origin: 50% 50%;
+  transition: stroke-dashoffset 0.1s linear; /* smooth update */
+}
+
+/* big number in the center */
+.ring-number {
+  position: absolute;
+  inset: 0;
+  display: grid;
+  place-items: center;
+  font-weight: 800;
+  font-size: 56px;
+  color: #0f172a;
+}
+
+
+.global-countdown-overlay {
+  position: absolute; /* not fixed */
+  inset: 0;
+  display: grid;
+  place-items: center;
+  background: transparent;
+  pointer-events: none;
+  z-index: 20;
+}
+
+
+/* Keep overlay centered and always on top */
+:host ::ng-deep .global-countdown-overlay {
+  position: fixed;
+  inset: 0;
+  display: grid;
+  place-items: center;
+  background: transparent;
+  pointer-events: none;
+  z-index: 2000; /* higher to avoid being covered */
+}
+
+/* Frosted card so text never blends with page content */
+:host ::ng-deep .overlay-card {
+  background: rgba(255,255,255,0.98);
+  backdrop-filter: blur(2px);
+  -webkit-backdrop-filter: blur(2px);
+  border: 1px solid rgba(15,23,42,0.10);
+  border-radius: 16px;
+  padding: 18px 22px;
+  box-shadow: 0 10px 32px rgba(0,0,0,.18);
+  text-align: center;
+  pointer-events: none;
+}
+
+/* Ensure the ring forms a stacking context for the disk/number */
+:host ::ng-deep .ring {
+  position: relative;
+  width: 220px;
+  height: 220px;
+  margin: 0 auto 8px;
+}
+
+/* Place the SVG above the disk, below the number */
+:host ::ng-deep .ring-svg {
+  position: relative;
+  z-index: 2;
+}
+
+/* ADD a white center disk behind the number (no HTML changes) */
+:host ::ng-deep .ring::before {
+  content: "";
+  position: absolute;
+  inset: 0;
+  margin: auto;
+  width: 120px; /* adjust if you scale the ring */
+  height: 120px;
+  border-radius: 50%;
+  background: #ffffff;
+  border: 1px solid rgba(15,23,42,.08);
+  box-shadow: inset 0 0 0 4px rgba(255,255,255,.9), 0 2px 10px rgba(0,0,0,.08);
+  z-index: 1; /* under number, over background */
+}
+
+/* Stronger, crisper number; always readable */
+:host ::ng-deep .ring-number {
+  position: absolute;
+  inset: 0;
+  display: grid;
+  place-items: center;
+  z-index: 3; /* above everything in the ring */
+  font-weight: 900;
+  font-size: 64px; /* bump if you increased ring size */
+  line-height: 1;
+  color: #0b1220; /* deep slate */
+  text-shadow: 0 0 2px #fff, 0 0 8px rgba(255,255,255,.85), 0 2px 8px rgba(0,0,0,.35);
+}
+
+/* Keep the ring thicker for visibility (optional) */
+:host ::ng-deep .ring-track,
+:host ::ng-deep .ring-progress {
+  stroke-width: 18px; /* increase if needed */
+}
+
+/* Caption pill with high contrast */
+:host ::ng-deep .caption-pill {
+  display: inline-block;
+  margin-top: 10px;
+  padding: 8px 14px;
+  border-radius: 999px;
+  background: #0ea5e9 !important;
+  color: #ffffff !important;
+  font-weight: 700;
+  font-size: 15px;
+  letter-spacing: .2px;
+  filter: drop-shadow(0 3px 10px rgba(14,165,233,.25));
+}

src/app/generate-questions/generate-questions.component.html

@@ -3,7 +3,7 @@
   <div *ngIf="isLoading" class="loading-overlay">
     <span class="loader"></span>
   </div>
-  
+
 
   <div class="header-container">
     <!-- Logo Section -->
@@ -38,7 +38,7 @@
                (focus)="showSuggestions = true"
                onclick="showSuggestions = true"
                (blur)="hideSuggestions()" />
-       
+
 
 
 
@@ -99,39 +99,47 @@
     <div class="questions-container" *ngIf="questions.length > 0 && !isAllLevelsCompleted">
       <div class="quesHintbtn">
         <h2 class="section-title">📝 Questions</h2>
-        <!--<button *ngIf="isFirstAttemptDone && hints.length > 0"
-            class="hint-toggle-btn"
-            [class.blink]="hasNewHints"
-            (click)="toggleHintMenu()">
-    </button>-->
       </div>
 
-
-
-
-
       <ul class="questions-list">
         <li *ngFor="let question of questions" class="question-item">
           <div class="question-wrapper">
             <div class="question-text-wrapper">
               <span class="question-text" *ngFor="let part of question.parts; let i = index">
                 {{ part }}
-
-
-                <input *ngIf="i < question.parts.length - 1"
-                       [(ngModel)]="userAnswers[question.index]"
-                       [readonly]="isValidationInProgress || readonlyAnswers[question.index]"
-                       placeholder=""
-                       class="answer-input"
-                       [ngClass]="{
+                <span class="answer-slot">
+                  <input *ngIf="i < question.parts.length - 1"
+                         [(ngModel)]="userAnswers[question.index]"
+                         [readonly]="isValidationInProgress || readonlyAnswers[question.index]"
+                         placeholder=""
+                         class="answer-input"
+                         pattern="[A-Za-z]*"
+                         (input)="onInput($event, question.index)"
+                         [ngClass]="{
          'correct-answer': !isLoading && isChecked && userAnswers[question.index] === questionsWithAnswers[question.index].correctAnswer,
          'wrong-answer': !isLoading && isChecked && userAnswers[question.index] !== questionsWithAnswers[question.index].correctAnswer
        }"
-                       (input)="onAnswerChange(question.index)" />
+                         (input)="onAnswerChange(question.index)" />
 
 
+                  <div *ngIf="showGlobalCountdown" class="global-countdown-overlay" role="status" aria-live="assertive">
+                    <div class="overlay-card">
+                      <div class="ring">
+                        <svg class="ring-svg" viewBox="0 0 220 220" aria-hidden="true">
+                          <circle class="ring-track" cx="110" cy="110" r="90"></circle>
+                          <circle class="ring-progress"
+                                  cx="110" cy="110" r="90"
+                                  [attr.stroke-dasharray]="ringCircumference"
+                                  [attr.stroke-dashoffset]="ringDashoffset"></circle>
+                        </svg>
+                        <div class="ring-number">{{ globalCountdown }}</div>
+                      </div>
+                      <div class="caption-pill">{{ overlayCaption }}  {{ globalCountdown }}s</div>
+                    </div>
+                  </div>
 
 
+                </span>
 
 
               </span>
@@ -139,39 +147,21 @@
           </div>
         </li>
       </ul>
-      <!-- Show the i button ONLY after first validation and when there are hints -->
+
       <ng-container *ngIf="isFirstAttemptDone && hints?.length">
         <div class="hint-anchor" (click)="$event.stopPropagation()">
-          <!-- i button -->
-          <button type="button"
-                  class="hint-toggle-btn"
-                  aria-haspopup="dialog"
-                  [attr.aria-expanded]="isHintMenuVisible ? 'true' : 'false'"
-                  aria-controls="hintsPanel"
-                  (click)="toggleHintMenu()">
-            
+          <button type="button" class="hint-toggle-btn" aria-haspopup="dialog" [attr.aria-expanded]="isHintMenuVisible ? 'true' : 'false'" aria-controls="hintsPanel" (click)="toggleHintMenu()">
           </button>
 
-          <!-- Popover opening to the LEFT -->
-          <section *ngIf="isHintMenuVisible"
-                   id="hintsPanel"
-                   class="hint-popover"
-                   role="dialog"
-                   aria-modal="true"
-                   aria-label="Hints"
-                   (click)="$event.stopPropagation()">
-            <button type="button"
-                    class="hint-close"
-                    aria-label="Close hints"
-                    (click)="closeHints()">
+          <section *ngIf="isHintMenuVisible" id="hintsPanel" class="hint-popover" role="dialog" aria-modal="true" aria-label="Hints" (click)="$event.stopPropagation()">
+            <button type="button" class="hint-close" aria-label="Close hints" (click)="closeHints()">
               ×
             </button>
 
             <h3 class="hint-title">Hints</h3>
             <ul class="hint-list" role="list">
               <ng-container *ngFor="let hint of hints; let i = index">
-                <li *ngIf="hint && hint.trim() !== '' && userAnswers[i] !== questionsWithAnswers[i]?.correctAnswer"
-                    class="hint-item">
+                <li *ngIf="hint && hint.trim() !== '' && userAnswers[i] !== questionsWithAnswers[i]?.correctAnswer" class="hint-item">
                   <strong>Hint for Question {{ i + 1 }}:</strong> {{ hint }}
                 </li>
               </ng-container>
@@ -179,14 +169,8 @@
           </section>
         </div>
 
-        <!-- Outside click closes it -->
-        <div *ngIf="isHintMenuVisible"
-             class="hint-backdrop"
-             (click)="closeHints()"></div>
+        <div *ngIf="isHintMenuVisible" class="hint-backdrop" (click)="closeHints()"></div>
       </ng-container>
-
-
-
     </div>
   </div>
 

src/app/generate-questions/generate-questions.component.ts

@@ -25,27 +25,33 @@ interface Question {
   styleUrls: ['./generate-questions.component.css']
 })
 export class GenerateQuestionsComponent {
-  topic: string = '';
-  hardcodedTopics: string[] = ['Noun', 'Verb', 'Past Tense', 'Adjective', 'Present Continuous'];
+  topic: string = "";
+  hardcodedTopics: string[] = [
+    "Noun",
+    "Verb",
+    "Past Tense",
+    "Adjective",
+    "Present Continuous",
+  ];
 
   showSuggestions: boolean = false;
-  //questions: string[] = [];
-  userAnswers: string[] = [];  // Array to store user answers
-  feedback: string[] = [];  // Array to store feedback for each answer
-  error: string = '';
-  isChecked: boolean = false;  // Flag to disable button after clicking
+
+  userAnswers: string[] = [];
+  feedback: string[] = [];
+  error: string = "";
+  isChecked: boolean = false;
   isAnswerModified: boolean = false;
   questions: { parts: string[]; index: number }[] = [];
   attemptCounts: { [key: number]: number } = {};
   correctAnswers: string[] = [];
-  questionsWithAnswers: QuestionWithAnswer[] = []; // Track questions with answers
-  currentDifficulty: string = 'basic';
-  difficultyLevels: string[] = ['basic', 'elementary', 'pre-intermediate', 'intermediate', 'upper-intermediate', 'medium', 'hard'];
-  //difficultyLevels: string[] = ['basic', 'hard'];
+  questionsWithAnswers: QuestionWithAnswer[] = [];
+  currentDifficulty: string = "basic";
+  // difficultyLevels: string[] = ['basic', 'elementary', 'pre-intermediate', 'intermediate', 'upper-intermediate', 'advanced', 'hard'];
+  difficultyLevels: string[] = ["basic", "intermediate", "expert"];
   isDropdownDisabled: boolean = false;
   isValidationInProgress: boolean = false;
   isTopicLocked: boolean = false;
-  isAllLevelsCompleted: boolean = false; // Tracks if all levels are completed
+  isAllLevelsCompleted: boolean = false;
   readonlyAnswers: boolean[] = [];
   hints: string[] = [];
   attempts: number[] = [];
@@ -53,178 +59,150 @@ export class GenerateQuestionsComponent {
   isGenerateDisabled: boolean = true;
   isResetDisabled: boolean = true;
   isFirstAttemptDone: boolean = false;
-  hasNewHints: boolean = false; // Track new hints for animation
+  hasNewHints: boolean = false;
   isLoading: boolean = false;
   isValidationCompleted = false;
 
   showLevelTooltip: boolean = false;
   activateLevelDot: boolean = false;
 
+  isTyping: boolean = false;
+  validated: boolean = false;
 
-
-
-
-
-  isTyping: boolean = false;  // Track if the user is typing
-  validated: boolean = false; // Track if validation has been triggered
-
-
-
-  constructor(private generateQuestionsService: GenerateQuestionsService, private router: Router, private cdr: ChangeDetectorRef) { }
-
-
+  constructor(
+    private generateQuestionsService: GenerateQuestionsService,
+    private router: Router,
+    private cdr: ChangeDetectorRef,
+  ) { }
 
   onTopicChange() {
     if (this.topic.trim().length > 0) {
-      this.isGenerateDisabled = false; // Enable the Generate button when there's input
+      this.isGenerateDisabled = false;
     } else {
-      this.isGenerateDisabled = true; // Disable the Generate button if input is empty
+      this.isGenerateDisabled = true;
     }
     if (this.topic.trim().length === 0) {
-      this.showSuggestions = true; // Hide suggestions when the topic is empty
+      this.showSuggestions = true;
     } else {
-      this.showSuggestions = false; // Show suggestions when there's text in the input field
+      this.showSuggestions = false;
     }
   }
-  
-
 
   getProgressWidth(): string {
     const index = this.difficultyLevels.indexOf(this.currentDifficulty);
-    if (index === -1 || this.difficultyLevels.length <= 1) return '0%';
+    if (index === -1 || this.difficultyLevels.length <= 1) return "0%";
     const percent = (index / (this.difficultyLevels.length - 1)) * 100;
     return `${percent}%`;
   }
 
-
-
-  getProgressGradient(): string {
-    const index = this.difficultyLevels.indexOf(this.currentDifficulty);
-    const gradientColors = [
-      "#4caf50",  // Basic (Green)
-      "#8bc34a",  // Elementary
-      "#ffc107",  // Pre-Intermediate (Yellow)
-      "#ff9800",  // Intermediate
-      "#ff5722",  // Upper-Intermediate (Orange)
-      "#f44336",  // Medium (Red)
-      "#b71c1c"   // Hard (Dark Red)
-    ];
-
-    if (index === 0) {
-      return gradientColors[0];
-    }
-
-    const gradient = gradientColors.slice(0, index + 1).join(', ');
-    return `linear-gradient(to right, ${gradient})`;
-  }
-
-
-
-
-
-
-
-
+  
 
   generateQuestions() {
     this.hints = [];
-    this.isQuestionsGenerated = false; // Reset the flag before generating
+    this.isQuestionsGenerated = false;
     this.showLevelTooltip = true;
     this.activateLevelDot = true;
 
-
     if (this.isAllLevelsCompleted) {
-      this.error = 'Please reset to start over.';
+      this.error = "Please reset to start over.";
       return;
     }
-    this.isTopicLocked = true; // Lock the topic field
-    this.showSuggestions = false; // Hide the dropdown after Generate is clicked
-    this.readonlyAnswers = []; // Reset readonlyAnswers state
-    this.isDropdownDisabled = true; // Disable the dropdown
-    console.log(`Generating questions for difficulty level: ${this.currentDifficulty}`);
 
-    this.generateQuestionsService.generateQuestions(this.topic, this.currentDifficulty).subscribe(
-      (response) => {
-        console.log('Response from backend:', response);
-        if (response.generations && response.generations.length > 0) {
-          const rawQuestions = response.generations[0].text;
-          console.log('Raw Questions:', rawQuestions);
-          this.isQuestionsGenerated = true; // Set flag to true after questions are generated
+    this.isTopicLocked = true;
+    this.showSuggestions = false;
+    this.readonlyAnswers = [];
+    this.isDropdownDisabled = true;
 
-          // Disable the Generate button once questions are generated
-          this.isGenerateDisabled = true;
+    console.log(`Generating questions for difficulty level: ${this.currentDifficulty}`);
 
-          // Enable the Reset button when questions are displayed
-          this.isResetDisabled = false;
+    this.generateQuestionsService
+      .generateQuestions(this.topic, this.currentDifficulty)
+      .subscribe(
+        (response) => {
+          console.log("Response from backend:", response);
 
-          this.questionsWithAnswers = [];
+          if (response.generations && response.generations.length > 0) {
+            const rawQuestions = response.generations[0].text;
+            console.log("Raw Questions:", rawQuestions);
+            this.isQuestionsGenerated = true;
 
-          const regex = /(\d+\.\s*.+?_______)\s*(.*?)\s*\(([^)]+)\)\s*$/gm;
-          let match;
+            this.isGenerateDisabled = true;
+            this.isResetDisabled = false;
 
-          while ((match = regex.exec(rawQuestions)) !== null) {
-            console.log('Match:', match);
+            this.questionsWithAnswers = [];
 
-            const questionText = match[1]?.trim() || ''; // Full question text up to the blank
-            const afterBlank = match[2]?.trim() || ''; // Text after the blank
-            const correctAnswer = match[3]?.trim() || ''; // Correct answer inside the parentheses
+            // same regex you already use
+            const regex = /(\d+\.\s*.+?_______)\s*(.*?)\s*\(([^)]+)\)\s*$/gm;
+            let match;
 
-            if (questionText && correctAnswer) {
-              this.questionsWithAnswers.push({
-                question: `${questionText}${afterBlank}`, // Combine parts for the full question
-                correctAnswer,
-              });
-            }
-          }
+            while ((match = regex.exec(rawQuestions)) !== null) {
+              console.log("Match:", match);
 
-          console.log('Extracted Questions with Answers:', this.questionsWithAnswers);
+              const questionText = (match[1] ?? "").trim(); // up to _______
+              const afterBlankRaw = (match[2] ?? "");         // text after the blank
+              const correctAnswer = (match[3] ?? "").trim(); // answer in parentheses
 
-          this.questions = this.questionsWithAnswers.map((q, index) => {
-            const cleanedQuestion = q.question.replace(/\s*\(.*?\)/g, ''); // Remove parentheses content
-            const parts = cleanedQuestion.split(/_______/);
+              // NEW: clean any stray "_" or "-" that sometimes appear right after the blank
+              const afterBlankClean = afterBlankRaw
+                .replace(/^[_-]+/, "")   // drop leading underscores/dashes like "_ moment"
+                .replace(/^\s+/, " ")    // ensure exactly one leading space if any
+                .replace(/\s{2,}/g, " "); // collapse multiple spaces
 
-            if (parts.length === 2) {
-              parts[0] = parts[0].trim(); // Text before the blank
-              parts[1] = parts[1].trim(); // Text after the blank
-            } else if (parts.length === 1) {
-              parts[0] = parts[0].trim();
-              parts.push(''); // Ensure a second part exists
+              if (questionText && correctAnswer) {
+                this.questionsWithAnswers.push({
+                  question: `${questionText}${afterBlankClean}`,
+                  correctAnswer,
+                });
+              }
             }
 
-            return { parts, index };
-          });
+            console.log("Extracted Questions with Answers:", this.questionsWithAnswers);
 
-          this.userAnswers = new Array(this.questions.length).fill('');
-          this.feedback = new Array(this.questions.length).fill('');
-          this.readonlyAnswers = new Array(this.questions.length).fill(false);
-          this.isChecked = false;
+            // Build renderable questions (parts before/after the blank)
+            this.questions = this.questionsWithAnswers.map((q, index) => {
+              // NEW: normalize any odd spacing around the marker
+              const normalized = q.question.replace(/\s*_{3,}\s*/g, "_______");
+              const parts = normalized.split("_______");
 
-          this.attemptCounts = this.questions.reduce((acc, question, index) => {
-            acc[index] = 0;  // Set initial attempt count for each question
-            return acc;
-          }, {} as { [key: number]: number });
-          console.log('Questions without answers:', this.questions);
-        } else {
-          this.error = 'No questions generated. Please try again.';
-        }
-      },
-      (error) => {
-        if (error.status === 400 && error.error.message) {
-          this.error = error.error.message; // Display the message from the backend
-        } else {
-          this.error = 'Failed to fetch questions. Please try again later.';
-        }
-        console.error('Error fetching questions:', error);
-      }
-    );
-  }
+              if (parts.length === 2) {
+                // NEW: remove any stray underscores touching the gap
+                parts[0] = parts[0].replace(/_+$/, "").trim();
+                parts[1] = parts[1].replace(/^_+/, "").trim();
+              }
 
+              return { parts, index };
+            });
 
+            this.userAnswers = new Array(this.questions.length).fill("");
+            this.feedback = new Array(this.questions.length).fill("");
+            this.readonlyAnswers = new Array(this.questions.length).fill(false);
+            this.isChecked = false;
+
+            this.attemptCounts = this.questions.reduce((acc, _q, i) => {
+              acc[i] = 0;
+              return acc;
+            }, {} as { [key: number]: number });
+
+            console.log("Questions without answers:", this.questions);
+          } else {
+            this.error = "No questions generated. Please try again.";
+          }
+        },
+        (error) => {
+          if (error.status === 400 && error.error.message) {
+            this.error = error.error.message;
+          } else {
+            this.error = "Failed to fetch questions. Please try again later.";
+          }
+          console.error("Error fetching questions:", error);
+        },
+      );
+  }
 
 
 
   resetTopic() {
-    this.topic = '';
+    this.topic = "";
     this.questions = [];
     this.questionsWithAnswers = [];
     this.userAnswers = [];
@@ -240,44 +218,45 @@ export class GenerateQuestionsComponent {
     this.isQuestionsGenerated = false;
     this.isTopicLocked = false;
     this.validated = false;
-    this.currentDifficulty = 'basic';
-    this.error = '';
+    this.currentDifficulty = "basic";
+    this.error = "";
     this.isGenerateDisabled = false;
     this.isResetDisabled = true;
     this.showSuggestions = false;
     this.showLevelTooltip = false;
     this.activateLevelDot = false;
     this.showSuggestions = false;
-   
-    this.isDropdownDisabled = false; // ✅ Ensure dropdown is not disabled
-    this.isTopicLocked = false; // ✅ Ensure the topic can be typed again
-
-
-
+    this.isDropdownDisabled = false;
+    this.isTopicLocked = false;
     this.stopConfetti();
-  }
-
-
-
+    // Stop any active countdowns
+    Object.keys(this.countdownTimers).forEach(k => clearInterval(this.countdownTimers[+k]));
+    this.countdownTimers = {};
+    this.countdowns = [];
+    this.showCountdown = [];
+    this.stopGlobalCountdown();
+    this.stopOverlay()
 
+  }
 
   areAllAnswersFilled(): boolean {
-    return this.userAnswers.every(answer => answer?.trim() !== '');
+    return this.userAnswers.every((answer) => answer?.trim() !== "");
   }
 
-
-
-
   closeErrorPopup() {
-    this.error = ''; // Clear the error message
-    this.isGenerateDisabled = true; // Disable Generate button
-    this.isResetDisabled = false; // Enable Reset button
+    this.error = "";
+    this.isGenerateDisabled = true;
+    this.isResetDisabled = false;
   }
 
+  
 
+  // Hint icon one-time flags  (ADD THESE)
+  showHintIcon: boolean = false;      // controls rendering of the “i” button
+  hasShownHintIcon: boolean = false;  // remembers if it was shown once
 
-
-
+  // If you call toggleHintMenu(), also ensure this exists:
+  isHintMenuVisible: boolean = false; // remove if you already have it
 
 
   checkAllAnswers() {
@@ -290,27 +269,38 @@ export class GenerateQuestionsComponent {
 
     const requestPayload = this.questions.map((questionObj, index) => ({
       topic: this.topic,
-      question: questionObj.parts.join('_______'),
+      question: questionObj.parts.join("_______"),
       user_answer: this.userAnswers[index],
     }));
 
     console.log("Checking answers...");
     console.log("User Answers:", this.userAnswers);
-    console.log("Correct Answers:", this.questionsWithAnswers.map(q => q.correctAnswer));
+    console.log(
+      "Correct Answers:",
+      this.questionsWithAnswers.map((q) => q.correctAnswer),
+    );
 
     this.generateQuestionsService.validateAllAnswers(requestPayload).subscribe(
       (response) => {
-        console.log('Response from backend for all answers validation:', response);
+        console.log("Response from backend for all answers validation:", response);
 
         if (response.results && response.results.length > 0) {
           let allAttemptsCompleted = true;
 
+          // Track what happened this validation cycle
+          let hadFirstAttemptWrong = false;   // someone is on first wrong attempt
+          let hadSecondAttemptWrong = false;  // someone is on second wrong attempt (autofill path)
+
           response.results.forEach((result: any, index: number) => {
             this.attemptCounts[index]++;
             const validationResponse = result.validation_response;
-            const hint = result.hint ? result.hint.trim() : '';
-            const userAnswer = this.userAnswers[index].trim().toLowerCase();
-            const correctAnswer = this.questionsWithAnswers[index].correctAnswer.trim().toLowerCase();
+            const hint = result.hint ? result.hint.trim() : "";
+
+            const userAnswerRaw = this.userAnswers[index] ?? '';
+            const userAnswer = userAnswerRaw.trim().toLowerCase();
+
+            const correctAnswerRaw = this.questionsWithAnswers[index].correctAnswer ?? '';
+            const correctAnswer = correctAnswerRaw.trim().toLowerCase();
 
             console.log(`Validation Response for Question ${index + 1}: ${validationResponse}`);
             console.log(`User Answer: ${userAnswer}, Correct Answer: ${correctAnswer}`);
@@ -318,38 +308,60 @@ export class GenerateQuestionsComponent {
             if (userAnswer === correctAnswer) {
               console.log(`✅ Correct answer for question ${index + 1}: ${this.userAnswers[index]}`);
               this.readonlyAnswers[index] = true;
-              this.hints[index] = '';
-              //this.userAnswers[index] = correctAnswer;
+              this.hints[index] = "";
               this.userAnswers[index] = this.questionsWithAnswers[index].correctAnswer;
             } else {
               console.log(`❌ Incorrect answer for question ${index + 1}: ${this.userAnswers[index]}`);
 
-              setTimeout(() => {
-                if (this.attemptCounts[index] === 1) {
+              // ====== 1) FIRST WRONG ATTEMPT: show "Try again" countdown, then clear input ======
+              if (this.attemptCounts[index] === 1) {
+                hadFirstAttemptWrong = true;
+                if (!this.globalCountdownActive) {
+                  this.startOverlay("Try again in");
+                }
+
+                setTimeout(() => {
                   console.log(`🔄 Resetting incorrect answer for Question ${index + 1}`);
-                  this.userAnswers[index] = '';
+                  this.userAnswers[index] = "";      // give user a clean slate
+                  this.stopOverlay();                // ensure the HUD disappears
+                }, this.COUNTDOWN_SECS * 1000);
+              }
+              // ====== 2) SECOND WRONG ATTEMPT: show "Showing correct answer" countdown, then autofill ======
+              else if (this.attemptCounts[index] >= 2) {
+                hadSecondAttemptWrong = true;
+                if (!this.globalCountdownActive) {
+                  this.startOverlay("Showing correct answer in");
                 }
 
-                if (this.attemptCounts[index] >= 2) {
+                setTimeout(() => {
+                  // after countdown, force the correct answer
                   if (!this.userAnswers[index] || this.userAnswers[index].trim() === "" || userAnswer !== correctAnswer) {
                     this.userAnswers[index] = this.questionsWithAnswers[index].correctAnswer;
                     console.log(`✔️ Auto-filled correct answer for Question ${index + 1}: ${this.userAnswers[index]}`);
                   }
+                  this.stopOverlay();   // hide the first overlay (showing correct answer)
+
+                  // ====== 3) LAST LEVEL: show a second countdown before congratulations ======
                   if (this.isLastLevel() && index === this.questions.length - 1) {
+                    // Give time to read the just-filled correct answer
+                    this.startOverlay("Finishing in");
                     setTimeout(() => {
+                      this.stopOverlay();
                       this.isAllLevelsCompleted = true;
-                      console.log('🎉 You have completed all difficulty levels.');
+                      console.log("🎉 You have completed all difficulty levels.");
                       this.triggerConfetti();
-                    }, 2000);
+                    }, this.COUNTDOWN_SECS * 1000);
                   }
-                }
-              }, 2000);
+
+                }, this.COUNTDOWN_SECS * 1000);
+              }
 
               this.hints[index] = hint.length > 0 ? hint : null;
             }
 
-            this.feedback[index] = validationResponse || 'No feedback provided.';
+            this.feedback[index] = validationResponse || "No feedback provided.";
 
+            // minor 2s reflection (kept as-is)
             setTimeout(() => {
               if (userAnswer === correctAnswer) {
                 this.userAnswers[index] = this.userAnswers[index];
@@ -363,57 +375,85 @@ export class GenerateQuestionsComponent {
             }
           });
 
-          this.hasNewHints = this.hints.some(hint => hint && hint.trim() !== "");
-
+          // Hints auto-hide (unchanged)
+          this.hasNewHints = this.hints.some((h) => h && h.trim() !== "");
           if (this.hasNewHints) {
-            setTimeout(() => {
-              this.hasNewHints = false;
-            }, 5000);
+            setTimeout(() => { this.hasNewHints = false; }, 5000);
           }
 
-          if (this.areAllCorrectAnswersDisplayed() || allAttemptsCompleted) {
-            this.triggerNextLevelWithDelay();
+          // --- ONE-TIME “i” icon reveal right after the first validation ---
+          // Show once if there are any hints OR there were wrong attempts this cycle.
+          const hasAnyHint = Array.isArray(this.hints) && this.hints.some(h => !!h && h.trim() !== "");
+          const shouldRevealIconOnce = hasAnyHint || hadFirstAttemptWrong || hadSecondAttemptWrong;
+
+          if (!this.hasShownHintIcon && shouldRevealIconOnce) {
+            this.showHintIcon = true;          // reveal once
+            this.hasShownHintIcon = true;      // lock it
+          } else {
+            this.showHintIcon = false;         // never show again in later validations
           }
+          // --- END ONE-TIME “i” icon reveal ---
+
+          if (this.isLastLevel() && this.areAllCorrectAnswersDisplayed()) {
+            // Last level, all correct: show finish counter, then congratulations
+            this.stopOverlay();                          // ensure no old timer remains
+            this.startOverlay("Finishing in");
+            setTimeout(() => {
+              this.stopOverlay();
+              this.isAllLevelsCompleted = true;
+              this.triggerConfetti();
+            }, this.COUNTDOWN_SECS * 1000);
+
+          } else if (!this.isLastLevel() && (this.areAllCorrectAnswersDisplayed() || allAttemptsCompleted)) {
+            // Not last level: even if all answers were correct on first try,
+            // show the counter before moving to the next level
+            this.stopOverlay();                          // ensure fresh HUD
+            this.startOverlay("Moving to next level in");
+            setTimeout(() => {
+              this.stopOverlay();
+              this.triggerNextLevelWithDelay();
+            }, this.COUNTDOWN_SECS * 1000);
+          }
+
         } else {
-          this.error = 'Failed to validate answers. Please try again.';
+          this.error = "Failed to validate answers. Please try again.";
         }
 
         this.isValidationInProgress = false;
         this.isLoading = false;
       },
       (error) => {
-        console.error('Error validating answers:', error);
-        this.error = 'Error validating answers. Please try again later.';
+        console.error("Error validating answers:", error);
+        this.error = "Error validating answers. Please try again later.";
         this.isValidationInProgress = false;
         this.isLoading = false;
-      }
+      },
     );
   }
 
 
 
-
-
-
-
   isLastLevel(): boolean {
-    return this.currentDifficulty === this.difficultyLevels[this.difficultyLevels.length - 1];
+    return (
+      this.currentDifficulty ===
+      this.difficultyLevels[this.difficultyLevels.length - 1]
+    );
   }
 
-
-
   triggerNextLevelWithDelay() {
     setTimeout(() => {
       this.transitionDifficulty();
-    }, 2000); // Introduce a delay before generating the next level
+    }, 2000);
   }
 
   areAllCorrectAnswersDisplayed(): boolean {
-    return this.userAnswers.every((answer, index) =>
-      (answer ?? '').trim().toLowerCase() ===
-      (this.questionsWithAnswers[index]?.correctAnswer ?? '').trim().toLowerCase()
+    return this.userAnswers.every(
+      (answer, index) =>
+        (answer ?? "").trim().toLowerCase() ===
+        (this.questionsWithAnswers[index]?.correctAnswer ?? "")
+          .trim()
+          .toLowerCase(),
     );
-
   }
 
   transitionDifficulty() {
@@ -421,30 +461,27 @@ export class GenerateQuestionsComponent {
     if (currentIndex < this.difficultyLevels.length - 1) {
       this.currentDifficulty = this.difficultyLevels[currentIndex + 1];
       console.log(`Switching to ${this.currentDifficulty} difficulty level.`);
-      this.generateQuestions();  // Fetch new set of questions for the next difficulty level
+      this.generateQuestions();
     } else {
       setTimeout(() => {
-        this.questions = []; // Clear the list
+        this.questions = [];
         this.isAllLevelsCompleted = true;
         this.isChecked = false;
         this.isValidationInProgress = false;
         this.isLoading = false;
-        console.log('🎉 You have completed all difficulty levels.');
+        console.log("🎉 You have completed all difficulty levels.");
         this.triggerConfetti();
-      }, 3000); // Ensure a small delay before showing the message
+      }, 3000);
     }
   }
 
   shouldShowHint(index: number): boolean {
-    return this.attemptCounts[index] < 1;  // Show hint only on the first attempt
+    return this.attemptCounts[index] < 1;
   }
 
-
-
-
   resetAllLevels() {
     this.isAllLevelsCompleted = false;
-    this.currentDifficulty = 'basic';
+    this.currentDifficulty = "basic";
     this.questions = [];
     this.userAnswers = [];
     this.feedback = [];
@@ -453,48 +490,39 @@ export class GenerateQuestionsComponent {
     this.isValidationInProgress = false;
     this.isTopicLocked = false;
     this.hints = [];
-    this.error = '';
+    this.error = "";
     this.isGenerateDisabled = true;
     this.isResetDisabled = false;
-    console.log('All levels reset. Starting from basic level.');
+    console.log("All levels reset. Starting from basic level.");
   }
 
-
-
-
-
   onAnswerChange(index: number) {
     if (!this.isValidationInProgress) {
       this.isChecked = false;
       this.validated = false;
     }
     const userAnswer = this.userAnswers[index]?.trim();
-    console.log('User Answers:', this.userAnswers);
-    console.log('Are All Answers Filled:', this.areAllAnswersFilled());
+    console.log("User Answers:", this.userAnswers);
+    console.log("Are All Answers Filled:", this.areAllAnswersFilled());
     if (userAnswer) {
       this.userAnswers[index] = userAnswer;
     } else {
-      this.userAnswers[index] = '';
+      this.userAnswers[index] = "";
     }
     this.userAnswers = [...this.userAnswers];
   }
 
-
   goToHome() {
-    this.router.navigate(['/home']);
+    this.router.navigate(["/home"]);
   }
 
   private confettiInterval: any;
 
-
-
   triggerConfetti() {
-
     if (this.confettiInterval) {
       clearInterval(this.confettiInterval);
     }
 
-
     this.confettiInterval = setInterval(() => {
       confetti({
         startVelocity: 30,
@@ -508,54 +536,29 @@ export class GenerateQuestionsComponent {
     }, 250);
   }
 
-
-
   stopConfetti() {
-    this.isAllLevelsCompleted = false; // ✅ Hides congratulatory message
+    this.isAllLevelsCompleted = false;
 
-    // Clear interval if using confetti animations
     if (this.confettiInterval) {
       clearInterval(this.confettiInterval);
       this.confettiInterval = null;
     }
 
-    // Remove canvas or any extra DOM elements related to confetti
-    const canvas = document.querySelector('canvas.confetti-canvas');
+    const canvas = document.querySelector("canvas.confetti-canvas");
     if (canvas) {
       canvas.remove();
     }
 
-    const confettiDivs = document.querySelectorAll('.confetti, .ts-confetti');
-    confettiDivs.forEach(el => el.remove());
+    const confettiDivs = document.querySelectorAll(".confetti, .ts-confetti");
+    confettiDivs.forEach((el) => el.remove());
   }
 
-  // Handler for "Start Over" button in congratulation message
   stopConfettiAndReset() {
     this.stopConfetti();
     this.resetTopic();
   }
 
 
-
-
-  isHintMenuVisible: boolean = false; // Track visibility of the hint menu
-
-
-
-  //toggleHintMenu() {
-  //  if (this.hints.length > 0) {
-  //    this.isHintMenuVisible = !this.isHintMenuVisible; // Toggle only if hints exist
-  //    console.log("Hint Menu Toggled:", this.isHintMenuVisible); // Debugging
-  //  }
-  //}
-
-  
-
-
-
-
-
-
   selectTopic(suggestion: string): void {
     this.topic = suggestion;
     this.showSuggestions = false;
@@ -564,42 +567,27 @@ export class GenerateQuestionsComponent {
     this.isDropdownDisabled = true;
   }
 
-
-
-
-  // Hide suggestions when clicking outside
   hideSuggestions(): void {
     setTimeout(() => {
       this.showSuggestions = false;
     }, 200);
   }
 
-
-
-
-  /* // Add this property to your component
-   hasNewHints: boolean = false;*/
-
-  // Call this function when hints are generated
   processHints(hints: string[]) {
     this.hints = hints;
 
-    // Set `hasNewHints` to true if there are hints
     this.hasNewHints = hints.length > 0;
 
-    // Optionally, stop the blinking after a delay
     if (this.hasNewHints) {
       setTimeout(() => {
-        this.hasNewHints = false; // Stop blinking after 5 seconds
-      }, 5000); // Adjust the delay as needed
+        this.hasNewHints = false;
+      }, 5000);
     }
   }
 
-
-
   closeHints(): void {
     this.isHintMenuVisible = false;
-    this.hasNewHints = false; // optional: mark hints as seen
+    this.hasNewHints = false;
   }
 
   openHints(): void {
@@ -609,18 +597,161 @@ export class GenerateQuestionsComponent {
     }
   }
 
-  /* Keep your existing toggle if you’re calling it from the i button */
-  toggleHintMenu(): void {
-    this.isHintMenuVisible ? this.closeHints() : this.openHints();
+  toggleHintMenu() {
+    this.isHintMenuVisible = !this.isHintMenuVisible;
+    if (this.isHintMenuVisible) this.showHintIcon = false; // hide after first use
   }
 
-  ///* Close on Esc key */
-  //@HostListener('document:keydown.escape')
-  //onEscClose(): void {
-  //  if (this.isHintMenuVisible) this.closeHints();
-  //}
 
-  
+  onInput(event: any, index: number) {
+    const value = event.target.value;
+    const filteredValue = value.replace(/[^a-zA-Z]/g, "");
+    this.userAnswers[index] = filteredValue;
+    event.target.value = filteredValue;
+  }
+
+
+
+
+  //timer implemetation
+
+  // --- Countdown state (per question) ---
+  countdowns: number[] = [];          // current number (5..0) for each question
+  showCountdown: boolean[] = [];      // whether to show the badge
+  private countdownTimers: { [idx: number]: any } = {};  // interval handles
+  private readonly COUNTDOWN_SECS = 10;
+  // === Global countdown overlay state ===
+  showGlobalCountdown = false;     // controls the centered overlay
+  globalCountdown = 0;             // 5..1
+  private globalCountdownActive = false;
+  private globalTimer: any = null;
+
+  overlayCaption = '';
+
+
+
+
+  private beginResetCountdown(index: number, seconds: number = this.COUNTDOWN_SECS): void {
+    // avoid duplicate timers for the same question
+    if (this.countdownTimers[index]) { return; }
+
+    this.countdowns[index] = seconds;
+    this.showCountdown[index] = true;
+
+    this.countdownTimers[index] = setInterval(() => {
+      this.countdowns[index] = this.countdowns[index] - 1;
+
+      if (this.countdowns[index] <= 0) {
+        this.finishCountdown(index);
+      }
+    }, 1000);
+  }
+
+  /** Stop timer, hide badge, clear the wrong input, and allow retry. */
+  private finishCountdown(index: number): void {
+    const t = this.countdownTimers[index];
+    if (t) {
+      clearInterval(t);
+      delete this.countdownTimers[index];
+    }
+
+    this.showCountdown[index] = false;
+    this.countdowns[index] = 0;
+
+    // Clear only the wrong answer and allow the learner to try again.
+    this.userAnswers[index] = '';
+
+    // Turn off the global "checked" flag so inputs are not stuck red.
+    // (If you track per-question flags, toggle those instead.)
+    this.isChecked = false;
+  }
+
+  private startGlobalCountdown(): void {
+    if (this.globalCountdownActive) return; // prevent duplicates
+    this.globalCountdownActive = true;
+    this.showGlobalCountdown = true;
+    this.globalCountdown = this.COUNTDOWN_SECS;
+
+    this.globalTimer = setInterval(() => {
+      this.globalCountdown--;
+      if (this.globalCountdown <= 0) {
+        this.stopGlobalCountdown();
+      }
+    }, 1000);
+  }
+
+  private stopGlobalCountdown(): void {
+    if (this.globalTimer) {
+      clearInterval(this.globalTimer);
+      this.globalTimer = null;
+    }
+    this.showGlobalCountdown = false;
+    this.globalCountdownActive = false;
+    this.globalCountdown = 0;
+  }
+
+  ngOnDestroy(): void {
+    this.stopGlobalCountdown();
+  }
+  private startOverlay(baseText: string, seconds: number = this.COUNTDOWN_SECS): void {
+    if (this.globalTimer) { clearTimeout(this.globalTimer as any); this.globalTimer = null; }
+    if (this.overlayTicker) { clearInterval(this.overlayTicker); this.overlayTicker = null; }
+
+    this.globalCountdownActive = true;
+    this.showGlobalCountdown = true;
+    this.overlayCaption = baseText;
+
+    this.globalCountdown = seconds;
+    this.overlayEndTs = Date.now() + seconds * 1000;
+    this.ringDashoffset = this.ringCircumference;
+
+    this.overlayTicker = setInterval(() => {
+      const now = Date.now();
+      const remainingMs = Math.max(0, this.overlayEndTs - now);
+      const elapsedMs = seconds * 1000 - remainingMs;
+
+      this.globalCountdown = Math.ceil(remainingMs / 1000);
+
+      const progress = Math.min(1, elapsedMs / (seconds * 1000));
+      this.ringDashoffset = this.ringCircumference * (1 - progress);
+
+      if (remainingMs <= 0) this.stopOverlay();
+    }, 50) as any;
+
+    this.globalTimer = setTimeout(() => this.stopOverlay(), seconds * 1000) as any;
+  }
+
+  private stopOverlay(): void {
+    if (this.overlayTicker) { clearInterval(this.overlayTicker); this.overlayTicker = null; }
+    if (this.globalTimer) { clearTimeout(this.globalTimer as any); this.globalTimer = null; }
+
+    this.showGlobalCountdown = false;
+    this.globalCountdownActive = false;
+    this.overlayCaption = '';
+    this.globalCountdown = 0;
+    this.ringDashoffset = this.ringCircumference;
+  }
+
+
+
+
+
+  ringRadius = 90;
+  ringCircumference = 2 * Math.PI * this.ringRadius;
+  ringDashoffset = this.ringCircumference;
+
+
+  private overlayTicker: any = null;
+  private overlayEndTs = 0;
+
+
+
+
+
+
+
+
+
 
 }