shared button component

src/app/app.module.ts

@@ -2,19 +2,19 @@ import { NgModule } from '@angular/core';
 import { BrowserModule } from '@angular/platform-browser';
 import { FormsModule } from '@angular/forms';
 import { HttpClientModule } from '@angular/common/http';
+import { CommonModule } from '@angular/common';
 import { AppRoutingModule } from './app-routing.module';
 
 // Angular Material
 import { MatDialogModule } from '@angular/material/dialog';
 import { MatSlideToggleModule } from '@angular/material/slide-toggle';
 import { MatIconModule } from '@angular/material/icon';
+import { MatCardModule } from '@angular/material/card';
 
 // Components
 import { AppComponent } from './app.component';
 import { GenerateQuestionsComponent } from './generate-questions/generate-questions.component';
 import { HomeComponent } from './home/home.component';
-import { VoiceComponent } from './voice/voice.component';
-import { ListenComponent } from './listen/listen.component';
 import { WritingComponent } from './writing/writing.component';
 import { VocabularyBuilderComponent } from './vocabulary-builder/vocabulary-builder.component';
 import { FindwordComponent } from './findword/findword.component';
@@ -26,37 +26,39 @@ import { HeaderComponent } from './shared/header/header.component';
 import { SignInComponent } from './sign-in/sign-in.component';
 import { PronunciationComponent } from './pronunciation/pronunciation.component';
 import { FooterComponent } from './footer/footer.component';
+// If you have AppButtonComponent, import it here as well
+// import { AppButtonComponent } from './app-button/app-button.component';
 
 @NgModule({
   declarations: [
-    AppComponent,  // Add AppComponent here
-    //GenerateQuestionsComponent,
+    AppComponent,
     HomeComponent,
-    VoiceComponent,
-    ListenComponent,
-    WritingComponent,
-    VocabularyBuilderComponent,
-    FindwordComponent,
-    ReadingComponent,
     AuthenticationComponent,
     AuthComponent,
     RootRedirectComponent,
     PronunciationComponent,
-    FooterComponent
-
+    FooterComponent,
+    //GenerateQuestionsComponent,
+    //VocabularyBuilderComponent,
+    //FindwordComponent,
+    //HeaderComponent,
+    //SignInComponent,
+    //ReadingComponent,
+    //WritingComponent,
+    // AppButtonComponent 
   ],
   imports: [
     BrowserModule,
     AppRoutingModule,
     FormsModule,
     HttpClientModule,
+    CommonModule,
     MatDialogModule,
     MatSlideToggleModule,
     MatIconModule,
-    HeaderComponent, // standalone component imported for use in declared components
-    SignInComponent // import the standalone sign-in (which embeds sign-up)
+    MatCardModule
   ],
   providers: [],
-  bootstrap: [AppComponent]  // Bootstrap AppComponent
+  bootstrap: [AppComponent]
 })
 export class AppModule { }

src/app/findword/findword.component.css

@@ -1,4 +1,3 @@
-/* General Styles */
 body {
   font-family: 'Roboto', sans-serif;
   background-color: #f9f9f9;
@@ -6,15 +5,12 @@ body {
   padding: 0;
 }
 
-
-/* Responsive Card */
 .card1 {
   background: #fff;
   width: 80vw;
-  /*max-width: 1000px;*/
   margin: 4vh auto;
   padding: 2vw;
-  border: 10px solid #009688;
+  border: 10px solid var(--main-accent-color);
   border-radius: 1vw;
   box-shadow: 0 0.4vw 0.8vw rgba(0, 0, 0, 0.6);
   position: absolute;
@@ -39,7 +35,6 @@ body {
 
 .quiz-image {
   width: 100%;
-  /*max-width: 350px;*/
   height: auto;
   border-radius: 10px;
 }
@@ -82,8 +77,6 @@ h2 {
     cursor: not-allowed;
   }
 
-/* Media Queries for Responsiveness */
-
 @media (max-width: 768px) {
   .content-container {
     flex-direction: column;
@@ -116,7 +109,6 @@ h2 {
   }
 }
 
-/* Game Screen */
 .game-screen {
   height: 71vh;
   display: flex;
@@ -126,7 +118,7 @@ h2 {
   width: 85vw;
   margin: 4vh auto;
   padding: 2vw;
-  border: 10px solid #009688;
+  border: 10px solid var(--main-accent-color);
   border-radius: 1vw;
   box-shadow: 0 0.4vw 0.8vw rgba(0, 0, 0, 0.6);
   position: absolute;
@@ -135,7 +127,6 @@ h2 {
   transform: translate(-50%, -50%);
 }
 
-/* Game Content Layout */
 .game-content {
   display: flex;
   justify-content: space-between;
@@ -143,7 +134,6 @@ h2 {
   align-items: center;
 }
 
-/* Cards */
 .audio-card, .input-card {
   width: 50%;
   height: 20vw;
@@ -158,7 +148,6 @@ h2 {
   align-items: center;
 }
 
-/* Input Wrapper */
 .input-card {
   display: flex;
   flex-direction: column;
@@ -194,19 +183,16 @@ h2 {
       opacity: 0.8;
     }
 
-    /* Green border for correct input */
     .input-wrapper input.correct {
-      border: 2px solid #4caf50 !important; /* green */
+      border: 2px solid #4caf50 !important;
       background-color: #e8f5e9;
     }
 
-    /* Red border for incorrect input */
     .input-wrapper input.error {
-      border: 2px solid #f44336 !important; /* red */
+      border: 2px solid #f44336 !important;
       background-color: #ffebee;
     }
 
-
 .error-message {
   color: #ff4d4d;
   font-weight: bold;
@@ -215,30 +201,6 @@ h2 {
   text-align: center;
 }
 
-/* Submit Button */
-.submit-btn {
-  width: 85%;
-  background-color: #006780;
-  color: white;
-  font-size: 1rem;
-  padding: 1rem;
-  border: none;
-  border-radius: 8px;
-  cursor: pointer;
-  transition: background-color 0.3s;
-  text-align: center;
-}
-
-  .submit-btn:hover {
-    background-color: #004d5c;
-  }
-
-  .submit-btn:disabled {
-    background-color: #cccccc;
-    cursor: not-allowed;
-  }
-
-/* Action Buttons */
 .action-buttons {
   width: 100%;
   display: flex;
@@ -290,7 +252,6 @@ h2 {
     cursor: not-allowed;
   }
 
-/* Generate Button Section */
 .generate-buttons {
   display: flex;
   gap: 10px;
@@ -332,7 +293,6 @@ h2 {
     background-color: #e68900;
   }
 
-/* Responsive */
 @media (max-width: 768px) {
   .game-content {
     flex-direction: column;
@@ -354,7 +314,6 @@ h2 {
   }
 }
 
-/* Popup */
 .popup-overlay {
   position: fixed;
   top: 0;
@@ -369,14 +328,16 @@ h2 {
 }
 
 .popup-content {
-  background-color: #daf5ff;
+  background-color: #ffffff;
   padding: 2vw;
   border-radius: 8px;
   text-align: center;
+  border: 10px solid var(--main-accent-color);
+  max-width: 50vw;
 }
 
   .popup-content p {
-    font-size: 1vw;
+    font-size: 1.3vw;
     margin-bottom: 2vw;
     color: #004d5c;
     font-weight: bold;
@@ -394,23 +355,6 @@ h2 {
   }
 }
 
-.close-btn {
-  padding: 0.7vw;
-  font-size: 1vw;
-  background-color: #009688;
-  color: white;
-  border: none;
-  border-radius: 8px;
-  cursor: pointer;
-  transition: background-color 0.3s;
-  font-weight: bold;
-}
-
-  .close-btn:hover {
-    background-color: #00796b;
-  }
-
-/* Game Header */
 .game-header {
   position: relative;
   width: 100%;
@@ -421,49 +365,25 @@ h2 {
 }
 
 .back-btn {
-  position: absolute;
   left: 0;
   top: 40%;
-  transform: translateY(-50%);
-  background: transparent;
-  border: none;
-  font-size: 2rem;
-  color: #006780;
-  cursor: pointer;
-  padding: 0 1rem;
-  transition: transform 0.3s;
   width: 6vw;
 }
 
-  .back-btn:hover {
-    transform: translateY(-50%) scale(1.1);
-  }
-
 .game-title {
   font-size: 2vw;
   color: #004d5c;
-  /*font-family: 'Super Cartoon', sans-serif;*/
   margin: 0;
   text-align: center;
 }
 
-
-
-
-/* Optional: Modify the appearance of the disabled "Sentence" button specifically */
 .info-btn:disabled {
-  background-color: #b0bec5; /* Light gray color for the disabled button */
-  color: #757575; /* Dark gray color for text */
+  background-color: #b0bec5;
+  color: #757575;
   cursor: not-allowed;
   opacity: 0.6;
 }
 
-
-
-/*step 2  left aside css start here*/
-
-
-/* ===== Step 2: Left Audio Panel — Kid-friendly Player ===== */
 .audio-card--kids {
   --primary: #006780;
   --accent: #009688;
@@ -525,7 +445,6 @@ h2 {
     filter: grayscale(0.2);
   }
 
-/* Big circular play button */
 .play-btn {
   position: relative;
   width: 65px;
@@ -591,7 +510,6 @@ h2 {
   }
 }
 
-/* Wave shell (equalizer bars) */
 .wave-shell {
   display: flex;
   align-items: flex-end;
@@ -608,7 +526,7 @@ h2 {
     background: var(--bar);
     border-radius: 4px;
     animation: wave 1s ease-in-out infinite;
-    animation-play-state: paused; /* start paused */
+    animation-play-state: paused;
   }
 
 .ac-player.is-playing .wave-shell .bar {
@@ -627,7 +545,6 @@ h2 {
   }
 }
 
-/* Timeline / progress */
 .timeline {
   position: relative;
   height: 10px;
@@ -651,7 +568,6 @@ h2 {
     transition: width 0.15s linear;
   }
 
-/* Time labels */
 .time {
   width: 80%;
   max-width: 520px;
@@ -661,7 +577,6 @@ h2 {
   color: #004d5c;
 }
 
-/* Small helper text */
 .ac-hint {
   font-size: 0.95rem;
   color: #004d5c;
@@ -671,7 +586,6 @@ h2 {
   border-radius: 10px;
 }
 
-/* Responsive */
 @media (max-width: 768px) {
   .play-btn {
     width: 84px;
@@ -692,11 +606,6 @@ h2 {
   }
 }
 
-
-/*step =2 right aside css wstart herwe */
-
-
-/* === Step 2: Right-side kid panel === */
 .kid-panel {
   --primary: #006780;
   --accent: #009688;
@@ -711,7 +620,6 @@ h2 {
   position: relative;
 }
 
-/* top row */
 .kp-top {
   display: flex;
   align-items: center;
@@ -725,12 +633,10 @@ h2 {
   font-weight: 800;
 }
 
-/* attempts (hearts) */
 .kp-attempts .heart {
   font-size: 1.15rem;
   margin-left: 6px;
   transition: opacity 0.25s ease, transform 0.25s ease;
-
 }
 
   .kp-attempts .heart.is-off {
@@ -738,7 +644,6 @@ h2 {
     transform: scale(0.88);
   }
 
-/* input with subtle animation */
 .kp-input-wrap {
   position: relative;
   display: grid;
@@ -766,7 +671,6 @@ h2 {
     border-color: var(--accent);
   }
 
-  /* success + error states (reuse your classes) */
   .kp-input.correct {
     border-color: #4caf50 !important;
     background: #e8f5e9;
@@ -777,7 +681,6 @@ h2 {
     background: #ffebee;
   }
 
-/* pop tick */
 .ok-badge {
   position: absolute;
   right: 8%;
@@ -824,7 +727,6 @@ h2 {
   }
 }
 
-/* subtle shake on wrong */
 .kid-panel.is-shake .kp-input {
   animation: kpShake 0.35s ease;
 }
@@ -847,7 +749,6 @@ h2 {
   }
 }
 
-/* primary submit re-using your color token */
 .kp-submit {
   width: 44%;
   margin: 0 auto;
@@ -856,7 +757,6 @@ h2 {
   font-size: 1.2vw;
 }
 
-/* info panel for meaning/example */
 .info-panel {
   background: #ffffffd9;
   border: 1px dashed var(--accent);
@@ -891,7 +791,6 @@ h2 {
   font-size: 0.98rem;
 }
 
-/* responsive tweaks */
 @media (max-width: 768px) {
   .kp-title {
     font-size: 1.05rem;
@@ -911,8 +810,6 @@ h2 {
   }
 }
 
-
-/* Shared action bar layout */
 .action-bar {
   display: flex;
   justify-content: space-between;
@@ -927,14 +824,13 @@ h2 {
     flex-wrap: wrap;
   }
 
-/* Base button using your spec */
 .py-btn {
   background-color: #006780;
   color: #ffffff;
   border: none;
   padding: 15px 32px;
-  font-size: 1.2vw; /* per your request */
-  border-radius: 0.5vw; /* per your request */
+  font-size: 1.2vw;
+  border-radius: 0.5vw;
   cursor: pointer;
   transition: background-color 0.3s, transform 0.3s;
   font-weight: bold;
@@ -944,80 +840,49 @@ h2 {
   line-height: 1;
 }
 
-  /* Hover (your spec) */
   .py-btn:hover:not(:disabled) {
     background-color: #18788f;
     transform: scale(1.05);
   }
 
-  /* Press feedback */
   .py-btn:active:not(:disabled) {
     transform: scale(0.98);
   }
 
-  /* Disabled */
   .py-btn:disabled {
     opacity: 0.55;
     cursor: not-allowed;
     transform: none;
   }
 
-  /* Focus ring for keyboard users */
   .py-btn:focus-visible {
     outline: 3px solid #94c7d6;
     outline-offset: 2px;
   }
 
-  /* Optional tiny icon motion on hover */
   .py-btn .btn__icon {
     display: inline-block;
     transform: translateY(0);
     transition: transform 0.25s ease;
-   
   }
 
   .py-btn:hover:not(:disabled) .btn__icon {
     transform: translateY(-2px);
   }
 
-/* Small-screen fallback so 1.5vw does not get too small */
 @media (max-width: 768px) {
   .py-btn {
-    font-size: 16px; /* fallback for phones/tablets */
-    border-radius: 10px; /* visual balance on small screens */
+    font-size: 16px;
+    border-radius: 10px;
     padding: 12px 22px;
   }
 }
 
-
-.close-btn1 {
-  background-color: #009688;
-  color: black;
-  border: none;
-  padding: 0.4vw 0.9vw;
-  border-radius: 50%;
-  cursor: pointer;
-  border: 1px solid black;
-  width: 3vw;
-  top: -5vw;
+.user-guide-close-icon {
+  top: -5.4vw;
   right: -3.5vw;
-  position: absolute;
-  height: 3vw;
-  font-size: 1.3vw;
-  font-weight: bold;
 }
 
-  .close-btn1:hover {
-    transform: scale(1.06);
-    box-shadow: 0 6px 14px rgba(0,0,0,.22);
-    background: #f7fafc;
-  }
-
-  .close-btn1:active {
-    transform: scale(0.98);
-  }
-
-/* Clean, static image at the left side (no blur, no animation) */
 .left-illustration {
   position: absolute;
   left: -2vw;
@@ -1033,7 +898,6 @@ h2 {
   image-rendering: crisp-edges;
 }
 
-/* Smaller width on narrow screens */
 @media (max-width: 768px) {
   .left-illustration {
     width: 170px;

src/app/findword/findword.component.html

@@ -1,7 +1,6 @@
 <div class="full-container">
   <app-header [title]="'Find the Word'"></app-header>
 
-
   <img src="assets/images/grammar-bg.png" alt="Chat Background" class="grammar-bg" />
 
   <div class="findword-container">
@@ -18,25 +17,19 @@
             If needed, they can listen again. The exercise also has buttons to show the word’s meaning and an example sentence.
             A reset option lets students try again. This activity helps students practice listening and writing skills in an easy and engaging way, making learning more enjoyable and effective.
           </p>
-          <button (click)="startGame()" class="submit-button">Start Learning</button>
+          <app-button (click)="startGame()">Start Learning</app-button>
         </div>
       </div>
     </div>
 
-
-
     <div *ngIf="step === 2" class="game-screen">
       <div class="game-header">
         <img src="assets/images/back.png" alt="Go Back" class="back-btn" (click)="goBack()" />
         <h2 class="game-title">Listen & Type</h2>
-        <!--<img class="wave-photo" src="assets/images/find_word/audio.png" alt="Learning image">-->
-        <button class="close-btn1" (click)=" closeToStart()" aria-label="Close">✖</button>
+        <button class="user-guide-close-icon" (click)=" closeToStart()">×</button>
       </div>
 
       <div class="game-content">
-
-        <!-- Audio Section -->
-        <!-- Audio Section (Left) -->
         <div class="audio-card audio-card--kids">
           <div class="ac-header">
             <button (click)="fetchAudio()"
@@ -44,22 +37,18 @@
                     class="btn generate-btn ac-generate"
                     aria-label="Generate a new question">
               <span *ngIf="!isLoading">Generate audio</span>
-              <!-- <span *ngIf="isLoading" class="spinner" aria-hidden="true"></span>-->
               <span *ngIf="isLoading">Generating</span>
             </button>
           </div>
-          <!-- Left mascot (decorative) -->
           <img class="left-illustration"
                src="assets/images/find_word/audio.png"
                alt="" />
-          <!-- Player Shell -->
           <div class="ac-player" [class.is-disabled]="!audioUrl" [class.is-playing]="isPlaying">
             <button class="play-btn"
                     [disabled]="!audioUrl"
                     (click)="togglePlayback()"
                     [attr.aria-pressed]="isPlaying"
                     [attr.aria-label]="isPlaying ? 'Pause audio' : 'Play audio'">
-              <!-- Inline SVG icons (no external deps) -->
               <svg *ngIf="!isPlaying" viewBox="0 0 24 24" class="icon">
                 <path d="M8 5v14l11-7z"></path>
               </svg>
@@ -69,25 +58,19 @@
               <span class="pulse" aria-hidden="true"></span>
             </button>
 
-
-            <!-- Wave shell (animated bars while playing) -->
             <div class="wave-shell" aria-hidden="true">
               <span class="bar" *ngFor="let b of bars; let i = index" [style.animation-delay.ms]="(i%6)*120"></span>
             </div>
 
-            <!-- Timeline -->
             <div class="timeline" [class.is-disabled]="!audioUrl">
               <div class="progress" [style.width.%]="progress"></div>
             </div>
 
-
-
             <div class="ac-hint" *ngIf="!audioUrl">
               Tap <strong>Generate audio</strong> to load the audio.
             </div>
           </div>
 
-          <!-- Keep the audio element; wire player events -->
           <audio #audioPlayer
                  (timeupdate)="onTimeUpdate()"
                  (ended)="onAudioEnded()"
@@ -98,30 +81,17 @@
           </audio>
         </div>
 
-
-
-
-
-
-
-        <!-- RIGHT SIDE: Kid-friendly input panel -->
         <div class="input-card kid-panel"
              [class.is-correct]="isCorrect"
              [class.is-shake]="ui.shake">
-
-          <!-- Top row: title + attempts -->
           <div class="kp-top">
             <h3 class="kp-title">Type the word</h3>
-
-            <!-- Attempts with hearts -->
             <div class="kp-attempts" aria-label="Attempts left">
               <span class="heart" [class.is-off]="attemptsLeft < 1"></span>
               <span class="heart" [class.is-off]="attemptsLeft < 2"></span>
               <span class="heart" [class.is-off]="attemptsLeft < 3"></span>
             </div>
           </div>
-
-          <!-- Input + success badge -->
           <div class="kp-input-wrap">
             <input type="text"
                    class="kp-input"
@@ -130,8 +100,6 @@
                    (ngModelChange)="onInputChange()"
                    placeholder="Type what you heard"
                    [ngClass]="{ 'correct': isCorrect, 'error': !isCorrect && validationMessage }" />
-
-            <!-- Pop tick on correct -->
             <div class="ok-badge" *ngIf="isCorrect || ui?.pulseOk" aria-hidden="true">
               <svg viewBox="0 0 24 24" class="ok-icon">
                 <circle cx="12" cy="12" r="10"></circle>
@@ -139,61 +107,40 @@
               </svg>
             </div>
           </div>
-
-          <!-- Validation message (only when needed) -->
           <p *ngIf="validationMessage" class="error-message">{{ validationMessage }}</p>
-
-          <!-- Primary action -->
-          <button (click)="validateWord()"
-                  [disabled]="!canSubmit || attemptsLeft === 0"
-                  class="btn submit-btn kp-submit">
+          <app-button (click)="validateWord()"
+                      [disabled]="!canSubmit || attemptsLeft === 0">
             Submit
-          </button>
-
+          </app-button>
           <div class="action-bar">
             <div class="left-buttons">
-              <button class="py-btn"
-                      (click)="showMeaningPanel()"
-                      [disabled]="isMeaningButtonDisabled">
+              <app-button (click)="showMeaningPanel()"
+                          [disabled]="isMeaningButtonDisabled">
                 <span class="btn__icon" aria-hidden="true">📘</span>
                 <span>Meaning</span>
-              </button>
+              </app-button>
 
-              <button class="py-btn"
-                      (click)="showSentencePanel()"
-                      [disabled]="isExampleButtonDisabled">
+              <app-button (click)="showSentencePanel()"
+                          [disabled]="isExampleButtonDisabled">
                 <span class="btn__icon" aria-hidden="true">✍️</span>
                 <span>Example</span>
-              </button>
+              </app-button>
             </div>
 
-            <button class="py-btn"
-                    (click)="nextQuestion()"
-                    [disabled]="attemptsLeft > 0 && !isCorrect">
+            <app-button (click)="nextQuestion()"
+                        [disabled]="attemptsLeft > 0 && !isCorrect">
               <span class="btn__icon" aria-hidden="true">⟲</span>
               <span>Reset</span>
-            </button>
+            </app-button>
           </div>
-
-
         </div>
-
-
-
-
-
-
-
       </div>
     </div>
 
-
-
-
     <div *ngIf="isPopupVisible" class="popup-overlay">
       <div class="popup-content">
         <p>{{ popupMessage }}</p>
-        <button class="btn close-btn" (click)="closePopup()">Close</button>
+        <app-button (click)="closePopup()">Close</app-button>
       </div>
     </div>
   </div>

src/app/findword/findword.component.ts

@@ -1,17 +1,22 @@
 import { Component, ViewChild, ElementRef, ChangeDetectorRef } from '@angular/core';
 import { FindwordService } from '../findword/findword.service';
 import { Router } from '@angular/router';
+import { HeaderComponent } from '../shared/header/header.component';
+import { ButtonComponent } from '../shared/button/button.component';
+import { CommonModule } from '@angular/common';
+import { FormsModule } from '@angular/forms';
 
 @Component({
   selector: 'app-findword',
   templateUrl: './findword.component.html',
-  styleUrl: './findword.component.css'
+  styleUrl: './findword.component.css',
+  standalone: true,
+  imports: [ButtonComponent, CommonModule, FormsModule, HeaderComponent]
 })
 export class FindwordComponent {
   @ViewChild('audioPlayer', { static: false }) audioPlayer?: ElementRef<HTMLAudioElement>;
   @ViewChild('audioPlayer') audioRef!: ElementRef<HTMLAudioElement>;
 
-
   step: number = 1;
   progress: number = 0;
   audioUrl: string | null = null;
@@ -31,8 +36,6 @@ export class FindwordComponent {
   audioFinished: boolean = false;
   canSubmit: boolean = false;
   isPlaying: boolean = false;
-  
-
   currentTimeDisplay = '0:00';
   durationDisplay = '0:00';
   constructor(
@@ -41,7 +44,6 @@ export class FindwordComponent {
     private router: Router
   ) { }
 
-  // Fetch audio from backend
   fetchAudio() {
     this.isLoading = true;
     this.correctWord = null;
@@ -69,10 +71,7 @@ export class FindwordComponent {
       this.wordSentence = response.sentence;
       console.log("✅ Correct Word Set:", this.correctWord);
 
-        // ✅ use service helper (works on local & HF)
       this.audioUrl = this.findwordService.buildAssetUrl(response.audio_file_path);
-      
-
       this.cd.detectChanges();
 
       setTimeout(() => {
@@ -122,61 +121,8 @@ export class FindwordComponent {
     this.isPopupVisible = true;
   }
 
-  //validateWord() {
-  //  if (this.attemptsLeft <= 0) {
-  //    // Show Meaning and Example buttons after all attempts are used
-  //    this.showMeaning = true;
-  //    this.showSentence = true;
-  //    return;
-  //  }
-
-  //  console.log(`📝 Validating answer: ${this.userInput} (Attempts left: ${this.attemptsLeft})`);
-
-  //  if (!this.correctWord) {
-  //    console.error("❌ Error: No correct word set for validation!");
-  //    this.validationMessage = 'Error validating word: Missing correct word.';
-  //    this.showMeaning = true;
-  //    this.showSentence = true;
-  //    return;
-  //  }
-
-  //  const requestData = {
-  //    user_input: this.userInput.trim(),
-  //    correct_word: this.correctWord.trim().replace('.', '')
-  //  };
-  //  console.log("📤 Sending validation request:", requestData);
-
-  //  this.findwordService.validateWord(this.userInput, this.correctWord).subscribe(response => {
-  //    console.log("📥 Validation Response:", response);
-
-  //    if (response.status === 'success') {
-  //      this.validationMessage = "✅ Correct!";
-  //      this.isCorrect = true;
-  //      this.attemptsLeft = 0;
-  //      this.popupMessage = this.validationMessage;
-  //      this.isGenerateDisabled = true;
-  //    } else {
-  //      this.attemptsLeft--;
-  //      if (this.attemptsLeft === 0) {
-  //        this.validationMessage = `❌ Incorrect! The correct word was '${this.correctWord}'.`;
-  //        this.correctWord = response.correct_word;
-  //        this.isGenerateDisabled = true;
-  //        this.showMeaning = true;
-  //        this.showSentence = true;
-  //      } else {
-  //        this.validationMessage = `❌ Incorrect! You have ${this.attemptsLeft} attempt(s) left.`;
-  //      }
-  //      this.isCorrect = false;
-  //    }
-  //  }, error => {
-  //    console.error("❌ Validation API Error:", error);
-  //    this.validationMessage = 'Error validating word: API failed.';
-  //  });
-  //}
-
   validateWord() {
     if (this.attemptsLeft <= 0) {
-      // Show Meaning and Example buttons after all attempts are used
       this.showMeaning = true;
       this.showSentence = true;
       return;
@@ -204,11 +150,8 @@ export class FindwordComponent {
       if (response.status === 'success') {
         this.validationMessage = "✅ Correct!";
         this.isCorrect = true;
-
-        // ⬅ added: success pulse animation
         this.ui.pulseOk = true;
         setTimeout(() => (this.ui.pulseOk = false), 1200);
-
         this.attemptsLeft = 0;
         this.popupMessage = this.validationMessage;
         this.isGenerateDisabled = true;
@@ -224,8 +167,6 @@ export class FindwordComponent {
           this.validationMessage = `❌ Incorrect! You have ${this.attemptsLeft} attempt(s) left.`;
         }
         this.isCorrect = false;
-
-        // ⬅ added: gentle shake on wrong answer
         this.ui.shake = true;
         setTimeout(() => (this.ui.shake = false), 400);
       }
@@ -235,7 +176,6 @@ export class FindwordComponent {
     });
   }
 
-
   onAudioReady() {
     console.log("🎧 Audio is ready, trying to play...");
     if (this.audioPlayer) {
@@ -251,11 +191,6 @@ export class FindwordComponent {
       this.audioPlayer.nativeElement.pause();
     }
   }
-  //playAudio() {
-  //  if (!this.audioUrl) {
-  //    console.error("❌ Error: Audio URL is empty!");
-  //    return;
-  //  }
   playAudio() {
     if (this.audioPlayer?.nativeElement) {
       this.audioPlayer.nativeElement.play();
@@ -281,8 +216,8 @@ export class FindwordComponent {
     this.validationMessage = '';
     this.attemptsLeft = 3;
     this.correctWord = null;
-    this.showMeaning = false;  // Hide Meaning button
-    this.showSentence = false;  // Hide Example button
+    this.showMeaning = false;
+    this.showSentence = false;
     this.isCorrect = false;
     this.isLoading = false;
     this.fetchAudio();
@@ -327,20 +262,14 @@ export class FindwordComponent {
     this.isPopupVisible = false;
   }
 
- 
-
-  // Meaning button logic
   get isMeaningButtonDisabled(): boolean {
     return !(this.isCorrect || this.attemptsLeft <= 2);
   }
 
-  // Example button logic
   get isExampleButtonDisabled(): boolean {
     return !(this.isCorrect || this.attemptsLeft === 0);
   }
 
-
-  // 12 bars looks lively without being noisy for kids
   bars = Array.from({ length: 12 });
 
   togglePlayback(): void {
@@ -351,7 +280,6 @@ export class FindwordComponent {
       audio.play().then(() => {
         this.isPlaying = true;
       }).catch(() => {
-        // Autoplay guard
         this.isPlaying = false;
       });
     } else {
@@ -367,7 +295,6 @@ export class FindwordComponent {
     this.currentTimeDisplay = '0:00';
     this.progress = 0;
     this.isPlaying = false;
-    // Optional: lock typing until finished, if your flow needs it
     if (typeof this.audioFinished !== 'undefined') {
       this.audioFinished = false;
     }
@@ -385,7 +312,6 @@ export class FindwordComponent {
   onAudioEnded(): void {
     this.isPlaying = false;
     this.progress = 100;
-    // Enable typing only after full listen (matches your current UX)
     if (typeof this.audioFinished !== 'undefined') {
       this.audioFinished = true;
     }
@@ -398,7 +324,6 @@ export class FindwordComponent {
     return `${m}:${s.toString().padStart(2, '0')}`;
   }
 
-  // Optional: if your existing fetchAudio resets the state, ensure it also:
   private resetPlayerUI(): void {
     this.isPlaying = false;
     this.progress = 0;
@@ -406,7 +331,6 @@ export class FindwordComponent {
     this.durationDisplay = '0:00';
   }
 
-
   ui = {
     pulseOk: false,
     shake: false,
@@ -416,37 +340,28 @@ export class FindwordComponent {
     exampleText: ''
   };
 
-
-
   private resetStep2State(): void {
-    // stop & clear audio
     const audio = this.audioRef?.nativeElement;
     if (audio) {
       try { audio.pause(); } catch { }
       audio.currentTime = 0;
     }
-    this.audioUrl = null;               // forces "Generate audio" again
+    this.audioUrl = null;
     this.isPlaying = false;
     this.progress = 0;
     this.currentTimeDisplay = '0:00';
     this.durationDisplay = '0:00';
-
-    // quiz state
     this.userInput = '';
     this.validationMessage = '';
     this.isCorrect = false;
     this.attemptsLeft = 3;
     this.canSubmit = false;
-    this.audioFinished = false;         // input stays disabled until they finish the new audio
-
-    // metadata/buttons
+    this.audioFinished = false;
     this.correctWord = null;
     this.wordMeaning = null;
     this.wordSentence = null;
-    this.isGenerateDisabled = false;    // enable the "Generate audio" button
+    this.isGenerateDisabled = false;
     this.isLoading = false;
-
-    // meaning/example UI (if you use the `ui` object)
     this.showMeaning = false;
     this.showSentence = false;
     if (this.ui) {
@@ -457,22 +372,17 @@ export class FindwordComponent {
       this.ui.meaningText = '';
       this.ui.exampleText = '';
     }
-
-    // popup
     this.isPopupVisible = false;
     this.popupMessage = '';
   }
 
   closeToStart(): void {
-    // Safely stop and reset audio if present
     const audio = this.audioRef?.nativeElement;
     if (audio) {
       try { audio.pause(); } catch { }
       audio.currentTime = 0;
     }
     this.isPlaying = false;
-
-    // Clear key Step 2 data so the page is fresh when user comes back
     this.audioUrl = null;
     this.userInput = '';
     this.validationMessage = '';
@@ -486,11 +396,8 @@ export class FindwordComponent {
     this.showSentence = false;
     this.isPopupVisible = false;
     this.popupMessage = '';
-
-    // Go to starting page (Step 1)
     this.step = 1;
   }
-
 }
 
 

src/app/footer/footer.component.css

@@ -21,7 +21,7 @@
   padding: 1vw;
   z-index: 2001;
   overflow: visible;
-  border: 10px solid #009688;
+  border: 10px solid var(--main-accent-color);
   box-sizing: border-box;
   font-weight: lighter;
 }
@@ -35,30 +35,10 @@
   }
 
 .user-guide-close-icon {
-  position: absolute;
   top: -22px;
   right: -22px;
-  background: #009688;
-  border: none;
-  width: 44px;
-  height: 44px;
-  border-radius: 50%;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  font-size: 2vw;
-  color: black;
-  cursor: pointer;
-  z-index: 2010;
-  box-shadow: 0 2px 8px rgba(93,145,195,0.18);
-  transition: background 0.2s, color 0.2s;
-
 }
 
-  .user-guide-close-icon:hover {
-    background: white;
-    color: black;
-  }
 
 .user-guide-modal li {
   line-height: 1.7;
@@ -79,10 +59,10 @@
   font-weight: 600;
 }
 
-.user-guide-modal a:hover {
-  color: #009688;
-  text-decoration: underline;
-}
+  .user-guide-modal a:hover {
+    color: #009688;
+    text-decoration: underline;
+  }
 
 footer {
   background: linear-gradient(to right, #011022, #01030a);
@@ -223,7 +203,7 @@ footer .social-icons {
     justify-content: center;
     line-height: 1;
   }
-  
+
   .footer-watermark-row {
     text-align: center;
     margin-top: 8px;

src/app/home/home.component.css

@@ -306,7 +306,7 @@ h1 {
   padding: 1vw;
   z-index: 2001;
   overflow: visible;
-  border: 10px solid #009688;
+  border: 10px solid var(--main-accent-color);
   box-sizing: border-box;
 }
 
@@ -319,30 +319,10 @@ h1 {
   }
 
 .user-guide-close-icon {
-  position: absolute;
   top: -22px;
   right: -22px;
-  background: #009688;
-  border: none;
-  width: 44px;
-  height: 44px;
-  border-radius: 50%;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  font-size: 2vw;
-  color: black;
-  cursor: pointer;
-  z-index: 2010;
-  box-shadow: 0 2px 8px rgba(93,145,195,0.18);
-  transition: background 0.2s, color 0.2s;
 }
 
-  .user-guide-close-icon:hover {
-    background: white;
-    color: black;
-  }
-
 .user-guide-modal li {
   line-height: 1.7;
   font-size: 1.1vw;

src/app/listen/listen.component.css

@@ -1,4 +1,3 @@
-
 body, html {
   margin: 0;
   padding: 0;
@@ -10,10 +9,6 @@ body, html {
   background-color: rgb(35 34 32 / 43%);
 }
 
-
-
-
-/* Listen Card Style */
 .listen-card1 {
   background: rgba(255, 255, 255, 0.9);
   width: 80vw;
@@ -27,14 +22,13 @@ body, html {
   align-items: flex-start;
   padding: 3vw;
   gap: 2vw;
-  border: 10px solid #009688;
+  border: 10px solid var(--main-accent-color);
   border-radius: 1vw;
   box-shadow: 0 0.4vw 0.8vw rgba(0, 0, 0, 0.6);
   margin: 2vw auto;
   max-width: 90%;
 }
 
-  /* Left content */
   .listen-card1 .left-content {
     flex: 1;
     max-width: 50%;
@@ -53,7 +47,6 @@ body, html {
   text-align: justify;
 }
 
-/* Right content */
 .listen-card1 .video-upload-container {
   flex: 1;
   max-width: 50%;
@@ -70,7 +63,6 @@ body, html {
   width: 88%;
   max-width: 100%;
   border-radius: 1vw;
-  /* box-shadow: 0 0.4vw 0.8vw rgba(0, 0, 0, 0.2); */
   object-fit: contain;
   margin-left: 4vw;
 }
@@ -87,63 +79,6 @@ body, html {
   display: none;
 }
 
-
-
-
-
-
-
-
-
-button,
-.generate-btn,
-.upload-btn,
-.reset-btn,
-.next-btn,
-.prev-btn,
-.nav-arrow,
-.custom-file-upload,
-.replace-btn {
-  background-color: #006780;
-  color: white;
-  border: none;
-  padding: 15px 32px;
-  font-size: 1.5vw;
-  border-radius: 0.5vw;
-  cursor: pointer;
-  transition: background-color 0.3s, transform 0.3s;
-  font-weight: bold;
-}
-
-  /* Hover effect */
-  button:hover,
-  .generate-btn:hover,
-  .upload-btn:hover,
-  .reset-btn:hover,
-  .next-btn:hover,
-  .prev-btn:hover,
-  .nav-arrow:hover,
-  .custom-file-upload:hover,
-  .replace-btn:hover {
-    background-color: #18788f;
-    transform: scale(1.05);
-  }
-
-  /* Keep gray for normal disabled buttons */
-  button:disabled:not(.correct):not(.incorrect),
-  .generate-btn:disabled,
-  .upload-btn:disabled {
-    background-color: #b0b0b0 !important;
-    color: #ffffff;
-    cursor: not-allowed;
-    opacity: 0.6;
-    transform: none;
-  }
-
-
-
-
-/* Loader Overlay */
 .loader-overlay {
   position: fixed;
   top: 0;
@@ -158,9 +93,9 @@ button,
 }
 
 .loader {
-  font-size: 15px; /* Font size */
-  width: 1.5em; /* Width of the loader */
-  height: 1.5em; /* Height of the loader */
+  font-size: 15px;
+  width: 1.5em;
+  height: 1.5em;
   border-radius: 50%;
   position: relative;
   text-indent: -9999em;
@@ -202,13 +137,6 @@ button,
   }
 }
 
-/*the question page css*/
-
-.center-title {
-  text-align: center;
-  margin-bottom: 1vw;
-}
-
 .question-block {
   background: #ffffff;
   padding: 2vw;
@@ -217,11 +145,9 @@ button,
   max-width: 80%;
   margin: 2vw auto;
   position: relative;
-  border: 10px solid #009688;
+  border: 10px solid var(--main-accent-color);
   border-radius: 1vw;
-  /* ✅ Inside shadow */
-  box-shadow: inset 0 0 10px rgba(0, 150, 136, 0.5), /* inner glow */
-  0 0.4vw 0.8vw rgba(0, 0, 0, 0.2); /* existing outer shadow */
+  box-shadow: inset 0 0 10px rgba(0, 150, 136, 0.5), 0 0.4vw 0.8vw rgba(0, 0, 0, 0.2);
 }
 
 .options-container {
@@ -232,8 +158,6 @@ button,
   align-items: center;
 }
 
- 
-
   .options-container button {
     background-color: #ffffff;
     color: #333;
@@ -244,18 +168,16 @@ button,
     font-weight: 600;
     display: flex;
     align-items: center;
-    justify-content: center; /* ✅ center text horizontally */
+    justify-content: center;
     box-shadow: 0 0.2vw 0.5vw rgba(0, 0, 0, 0.1);
-    min-height: 6vw; /* ✅ ensures consistent height */
-    height: 100%; /* ensure buttons stretch inside grid cells */
+    min-height: 6vw;
+    height: 100%;
     text-align: center;
-    /*padding: 1vw;*/
-    white-space: normal; /* allow text to wrap */
-    word-break: break-word; /* break long words if needed */
+    white-space: normal;
+    word-break: break-word;
     width: 21vw;
   }
 
-
     .options-container button:hover {
       background-color: #f0f9ff;
       transform: scale(1.01);
@@ -276,8 +198,6 @@ button,
   font-weight: bold;
 }
 
- 
-
 .incorrect {
   background-color: #f443367d !important;
   border-color: #C62828 !important;
@@ -285,26 +205,6 @@ button,
   font-weight: bold;
 }
 
-  
-
-.correct-label,
-.incorrect-label {
-  font-size: 1.5vw;
-  font-weight: bold;
-  display: inline-block;
-  display: block;
-  text-align: center;
-  width: 100%;
-}
-
-.correct-label {
-  color: #2e7d32;
-}
-
-.incorrect-label {
-  color: #d32f2f;
-}
-
 .question-footer {
   display: flex;
   justify-content: space-between;
@@ -317,13 +217,16 @@ button,
   gap: 1vw;
 }
 
-
 .question-heading {
   font-size: 2vw;
   color: #006780;
   margin: 0;
   text-align: center;
   font-weight: bold;
+  flex: 1;
+  text-align: center;
+  font-weight: bold;
+  margin: 0;
 }
 
 .question-text {
@@ -333,17 +236,6 @@ button,
   text-align: left;
 }
 
-
-.question-decor-image {
-  position: absolute;
-  top: 1vw;
-  right: 1vw;
-  width: 5vw;
-  height: auto;
-  /* z-index: 2;*/
-}
-
-
 .question-content-row {
   display: flex;
   justify-content: space-between;
@@ -353,16 +245,12 @@ button,
 }
 
 .question-side-image img {
-  width: 39vw;
+  width: 34vw;
   height: auto;
   max-height: 16vw;
   object-fit: contain;
 }
 
-
-
-/*suceesful message */
-
 .upload-popup {
   position: fixed;
   top: 2vw;
@@ -399,16 +287,12 @@ button,
   }
 }
 
-
 .button-group {
   display: flex;
   gap: 1vw;
   margin-top: 1vw;
 }
 
-
-/*header question command close buttomn*/
-
 .question-header-row {
   display: flex;
   justify-content: space-between;
@@ -416,27 +300,25 @@ button,
   margin-bottom: 1vw;
 }
 
-.question-heading {
-  flex: 1;
-  text-align: center;
-  font-size: 2vw;
-  color: #006780;
-  font-weight: bold;
-  margin: 0;
+.user-guide-close-icon {
+  top: -1.2vw;
+  right: -1.3vw;
 }
 
-.close-btn {
-  background-color: #ffffff;
-  color: #0097a7;
-  border: none;
-  padding: 0.4vw 0.9vw;
-  border-radius: 50%;
-  cursor: pointer;
-  border: 1px solid black;
-  width: 3vw;
-  top: -27px;
-  left: 98.5%;
+
+
+/*back arrow button*/
+.back-btn {
   position: absolute;
-  height: 3vw;
+  top: 3vw;
+  left: 1vw;
+  transform: translateY(-50%);
+  cursor: pointer;
+  padding: 0 1rem;
+  transition: transform 0.3s;
+  width: 6vw;
 }
 
+  .back-btn:hover {
+    transform: translateY(-50%) scale(1.1);
+  }

src/app/listen/listen.component.html

@@ -1,17 +1,9 @@
-<!-- Loader shown while waiting -->
 <div *ngIf="isLoading" class="loader-overlay">
   <div class="loader"></div>
 </div>
-
 <app-header [title]="'Listen'"></app-header>
-
-
-<!-- Background image (optional) -->
 <img src="assets/images/listen.png" alt="Chat Background" class="grammar-bg" />
-
-<!-- Card Layout for Listen Exercise -->
 <div class="listen-card1" *ngIf="questions.length === 0">
-  <!-- Left Section: Description -->
   <div class="left-content">
     <h2>Welcome to the Listening Exercise</h2>
     <p>
@@ -20,142 +12,108 @@
       <strong>Generate Questions</strong> button will be enabled.
       Answer questions to practice and strengthen understanding and memory.
     </p>
-
-    <button class="generate-btn"
-            [disabled]="!isGenerateEnabled"
-            (click)="generateQuestions()">
+    <app-button [disabled]="!isGenerateEnabled"
+                (click)="generateQuestions()">
       Generate Questions
-    </button>
+    </app-button>
   </div>
-
-  <!-- Right Section: Video Upload -->
   <div class="video-upload-container">
-    <!-- Show placeholder image until video is uploaded -->
     <div class="video-preview-container" *ngIf="!videoUrl">
       <img src="assets/images/listen/listen3.png"
            alt="Upload a video"
            class="video-placeholder" />
     </div>
-
-    <!-- Video preview after upload -->
     <div class="video-preview-container" *ngIf="videoUrl">
       <video id="videoPreview"
              controls
              (ended)="onVideoEnded()"
              controlsList="nodownload"
              (error)="onVideoError()">
-        <source [src]="videoUrl" [type]="getVideoMimeType(videoUrl)" />
+        <source [src]="videoUrl"
+                [type]="getVideoMimeType(videoUrl)" />
         Your browser does not support the video tag.
       </video>
     </div>
-
-    <!-- Upload input -->
     <input #uploadInput
            type="file"
            accept="video/mp4"
            (change)="onFileSelected($event)"
            class="video-upload-input" />
-
-    <!-- Buttons -->
     <div class="button-group">
-      <button *ngIf="videoUrl"
-              class="upload-btn"
-              (click)="toggleVideoPlayPause()">
+      <app-button *ngIf="videoUrl"
+                  (click)="toggleVideoPlayPause()">
         {{ isVideoPlaying ? 'Pause' : 'Play' }}
-      </button>
-
-      <button class="replace-btn"
-              (click)="stopVideoIfPlaying(); uploadInput.click()"
-              [disabled]="isReplaceDisabled">
+      </app-button>
+      <app-button (click)="stopVideoIfPlaying(); uploadInput.click()"
+                  [disabled]="isReplaceDisabled">
         {{ uploadSuccess ? 'Replace Video' : 'Upload Video' }}
-      </button>
-
-      <button *ngIf="videoUrl && isReplaceDisabled"
-              class="reset-btn"
-              (click)="goToListen()">
+      </app-button>
+      <app-button *ngIf="videoUrl && isReplaceDisabled"
+                  (click)="goToListen()">
         Reset
-      </button>
+      </app-button>
     </div>
   </div>
 </div>
-
-
-
-
 <div *ngIf="questions.length > 0" class="question-navigation">
-
   <div class="question-block">
-
     <div class="question-header-row">
-      <div class="spacer"></div>
-      <h2 class="question-heading">Question {{ currentQuestionIndex + 1 }} of {{ questions.length }}</h2>
-      <button class="close-btn" (click)="goToListen()" aria-label="Close">✖</button>
+      <img src="assets/images/back.png"
+           alt="Go Back"
+           class="back-btn"
+           (click)="goBack()" />
+      <h2 class="question-heading">
+        Question {{ currentQuestionIndex + 1 }} of {{ questions.length }}
+      </h2>
+      <button class="user-guide-close-icon"
+              (click)="goToListen()"
+              aria-label="Close">
+        ×
+      </button>
     </div>
-
-    <p class="question-text">{{ questions[currentQuestionIndex].question }}</p>
-
-
+    <p class="question-text">
+      {{ questions[currentQuestionIndex].question }}
+    </p>
     <div class="question-content-row">
-      <!-- Left: Options -->
       <div class="options-container">
         <button *ngFor="let option of questions[currentQuestionIndex].options; let i = index"
                 (click)="checkAnswerTemp(i)"
                 [ngClass]="{
-              'selected-option': selectedOptionIndex === i && !validated,
-              'correct': validated && option === questions[currentQuestionIndex].answer,
-              'incorrect': validated && selectedOptionIndex === i && option !== questions[currentQuestionIndex].answer
-            }"
+            'selected-option': selectedOptionIndex === i && !validated,
+            'correct': validated && option === questions[currentQuestionIndex].answer,
+            'incorrect': validated && selectedOptionIndex === i && option !== questions[currentQuestionIndex].answer
+          }"
                 [disabled]="validated">
           {{ option }}
         </button>
       </div>
-
-      <!-- Right: Decorative Image -->
       <div class="question-side-image">
         <img [src]="getFeedbackImage()" alt="Rabbit Feedback Image" />
       </div>
     </div>
-
-
-
     <div class="question-footer">
-      <!-- Previous Button -->
-      <button class="prev-btn"
-              (click)="prevQuestion()"
-              [disabled]="currentQuestionIndex === 0">
+      <app-button (click)="prevQuestion()"
+                  [disabled]="currentQuestionIndex === 0">
         ◀ Previous
-      </button>
-
-      <!-- Right Side Buttons -->
+      </app-button>
       <div class="right-buttons">
-        <!-- Submit (before validation) -->
-        <button *ngIf="!validated"
-                class="submit-btn"
-                (click)="validateAnswer(questions[currentQuestionIndex].answer, currentQuestionIndex)"
-                [disabled]="selectedOptionIndex === null">
+        <app-button *ngIf="!validated"
+                    (click)="validateAnswer(questions[currentQuestionIndex].answer, currentQuestionIndex)"
+                    [disabled]="selectedOptionIndex === null">
           Submit
-        </button>
-
-        <!-- Next (after validation and not last question) -->
-        <button *ngIf="validated && currentQuestionIndex < questions.length - 1"
-                class="next-btn"
-                (click)="nextQuestion()">
+        </app-button>
+        <app-button *ngIf="validated && currentQuestionIndex < questions.length - 1"
+                    (click)="nextQuestion()">
           Next ▶
-        </button>
-
-        <!-- Reset (on last question after validation) -->
-        <button *ngIf="validated && currentQuestionIndex === questions.length - 1"
-                class="reset-btn"
-                (click)="resetQuestions()">
+        </app-button>
+        <app-button *ngIf="validated && currentQuestionIndex === questions.length - 1"
+                    (click)="resetQuestions()">
           Regenerate Questions
-        </button>
+        </app-button>
       </div>
     </div>
   </div>
 </div>
-
-
-<!-- Top-Right Popup Notification -->
 <div *ngIf="popupMessage" class="upload-popup">
   {{ popupMessage }}
 </div>

src/app/listen/listen.component.ts

@@ -2,9 +2,14 @@ import { Component, OnInit } from '@angular/core';
 import { HttpClient } from '@angular/common/http';
 import { ListenService } from './listen.service';
 import { Router } from '@angular/router';
+import { ButtonComponent } from '../shared/button/button.component';
+import { HeaderComponent } from '../shared/header/header.component';
+import { CommonModule } from '@angular/common';
 
 @Component({
   selector: 'app-listen',
+  standalone: true,
+  imports: [ButtonComponent, HeaderComponent, CommonModule],
   templateUrl: './listen.component.html',
   styleUrls: ['./listen.component.css']
 })
@@ -27,10 +32,8 @@ export class ListenComponent implements OnInit {
   questionsDisplayed: boolean = false;
 
   isVideoPlaying: boolean = false;
-
   isReplaceDisabled: boolean = false;
 
-
   constructor(
     private http: HttpClient,
     private listenService: ListenService,
@@ -50,77 +53,40 @@ export class ListenComponent implements OnInit {
     }
   }
 
-  //onFileSelected(event: any): void {
-  //  const file = event.target.files[0];
-  //  if (file && file.name.toLowerCase().endsWith('.mp4')) {
-  //    this.selectedFile = file;
-  //    const formData = new FormData();
-  //    formData.append('video', file);
-
-  //    this.listenService.uploadVideo(formData).subscribe({
-  //      next: (response) => {
-  //        this.videoUrl = `http://127.0.0.1:5000/static/videos/${response.filename}`;
-  //        this.uploadSuccess = true;
-  //        this.isGenerateEnabled = false;
-  //        // Show popup after a short delay
-  //        setTimeout(() => {
-  //          this.popupMessage = '✅ Video uploaded successfully!';
-  //          setTimeout(() => this.popupMessage = '', 1000); // Hide after 3s
-  //        }, 1000);
-  //      },
-  //      error: (err) => {
-  //        console.error('Upload failed', err);
-  //        alert('❌ Video upload failed.');
-  //      }
-  //    });
-  //  } else {
-  //    alert('Please upload a valid MP4 file.');
-  //  }
-  //}
-
- 
-onFileSelected(event: any): void {
-  const file = event.target.files[0];
-  if (file && file.name.toLowerCase().endsWith('.mp4')) {
-    this.selectedFile = file;
-    const formData = new FormData();
-    formData.append('video', file);
-
-    this.listenService.uploadVideo(formData).subscribe({
-      next: (response) => {
-        // Use backend /media/videos/<filename> path for preview (works both local & HF)
-        const newVideoUrl = this.listenService.getVideoUrl(response.filename);
-
-        this.videoUrl = ''; // Reset first to force re-binding
-        setTimeout(() => {
-          this.videoUrl = newVideoUrl;
-
-          const videoElement = document.getElementById('videoPreview') as HTMLVideoElement;
-          if (videoElement) {
-            videoElement.load(); // Reload the video player
-          }
-
-          this.uploadSuccess = true;
-          this.isGenerateEnabled = false;
-          this.isVideoPlaying = false;
-
+  onFileSelected(event: any): void {
+    const file = event.target.files[0];
+    if (file && file.name.toLowerCase().endsWith('.mp4')) {
+      this.selectedFile = file;
+      const formData = new FormData();
+      formData.append('video', file);
+      this.listenService.uploadVideo(formData).subscribe({
+        next: (response) => {
+          const newVideoUrl = this.listenService.getVideoUrl(response.filename);
+          this.videoUrl = '';
           setTimeout(() => {
-            this.popupMessage = '✅ Video uploaded successfully!';
-            setTimeout(() => this.popupMessage = '', 7000);
-          }, 1000);
-        });
-      },
-      error: (err) => {
-        console.error('Upload failed', err);
-        alert('❌ Video upload failed.');
-      }
-    });
-  } else {
-    alert('Please upload a valid MP4 file.');
+            this.videoUrl = newVideoUrl;
+            const videoElement = document.getElementById('videoPreview') as HTMLVideoElement;
+            if (videoElement) {
+              videoElement.load();
+            }
+            this.uploadSuccess = true;
+            this.isGenerateEnabled = false;
+            this.isVideoPlaying = false;
+            setTimeout(() => {
+              this.popupMessage = '✅ Video uploaded successfully!';
+              setTimeout(() => (this.popupMessage = ''), 7000);
+            }, 1000);
+          });
+        },
+        error: (err) => {
+          console.error('Upload failed', err);
+          alert('❌ Video upload failed.');
+        }
+      });
+    } else {
+      alert('Please upload a valid MP4 file.');
+    }
   }
-}
-
-
 
   onVideoEnded(): void {
     this.isGenerateEnabled = true;
@@ -128,23 +94,18 @@ onFileSelected(event: any): void {
   }
 
   generateQuestions(): void {
-
-    this.stopVideoIfPlaying(); // stop video first
-
+    this.stopVideoIfPlaying();
     if (!this.videoUrl) {
-      alert("Please upload a video first.");
+      alert('Please upload a video first.');
       return;
     }
-
     const filename = this.videoUrl.split('/').pop()?.trim();
     if (!filename) {
-      alert("Error: Unable to extract filename.");
-      console.error("Filename extraction failed from videoUrl:", this.videoUrl);
+      alert('Error: Unable to extract filename.');
+      console.error('Filename extraction failed from videoUrl:', this.videoUrl);
       return;
     }
-
     this.isLoading = true;
-
     this.listenService.generateQuestions(filename).subscribe({
       next: (response) => {
         if (response.questions && response.questions.length > 0) {
@@ -158,7 +119,7 @@ onFileSelected(event: any): void {
         console.error('Error generating questions:', error);
         alert(error.error?.error || 'Failed to generate questions.');
         this.isLoading = false;
-      },
+      }
     });
   }
 
@@ -171,18 +132,14 @@ onFileSelected(event: any): void {
     this.selectedOptionIndex = index;
   }
 
-
   validateAnswer(correctAnswer: string, index: number) {
     if (this.selectedOptionIndex === null) return;
-
     this.validated = true;
     const selectedOption = this.questions[index].options[this.selectedOptionIndex];
     this.selectedOptions[index] = selectedOption;
     this.selectedAnswers[index] = selectedOption === correctAnswer ? 'correct' : 'incorrect';
   }
 
-  
-
   prevQuestion() {
     if (this.currentQuestionIndex > 0) {
       this.currentQuestionIndex--;
@@ -192,7 +149,6 @@ onFileSelected(event: any): void {
     }
   }
 
-
   nextQuestion() {
     if (this.currentQuestionIndex < this.questions.length - 1) {
       this.currentQuestionIndex++;
@@ -202,18 +158,6 @@ onFileSelected(event: any): void {
     }
   }
 
-
- 
-
-  //resetQuestions(): void {
-  //  this.questions = [];
-  //  this.selectedAnswers = [];
-  //  this.questionsDisplayed = false;
-  //  this.currentQuestionIndex = 0; // reset to first
-  //  this.generateQuestions();
-  //}
-
-
   resetQuestions(): void {
     this.questions = [];
     this.selectedAnswers = [];
@@ -222,15 +166,12 @@ onFileSelected(event: any): void {
     this.selectedOptionIndex = null;
     this.currentQuestionIndex = 0;
     this.questionsDisplayed = false;
-
     const filename = this.videoUrl.split('/').pop()?.trim();
     if (!filename) {
-      alert("Error: Unable to extract filename.");
+      alert('Error: Unable to extract filename.');
       return;
     }
-
     this.isLoading = true;
-
     this.listenService.generateQuestions(filename).subscribe({
       next: (response) => {
         if (response.questions && response.questions.length > 0) {
@@ -244,11 +185,10 @@ onFileSelected(event: any): void {
         console.error('Error regenerating questions:', error);
         alert(error.error?.error || 'Failed to regenerate questions.');
         this.isLoading = false;
-      },
+      }
     });
   }
 
-
   goBack(): void {
     this.questions = [];
     this.selectedAnswers = [];
@@ -259,10 +199,7 @@ onFileSelected(event: any): void {
     this.router.navigate(['/home']);
   }
 
-  
-
   goToListen(): void {
-    // Clear all state
     this.questions = [];
     this.selectedAnswers = [];
     this.selectedOptions = {};
@@ -270,22 +207,17 @@ onFileSelected(event: any): void {
     this.selectedOptionIndex = null;
     this.currentQuestionIndex = 0;
     this.questionsDisplayed = false;
-
-    // Reset video to trigger image placeholder
     this.videoUrl = '';
     this.uploadSuccess = false;
     this.isGenerateEnabled = false;
     this.isVideoPlaying = false;
     this.isReplaceDisabled = false;
-
-    // Clear the file input
     const uploadInput = document.querySelector('input[type="file"]') as HTMLInputElement;
     if (uploadInput) {
-      uploadInput.value = ''; // Clears the selected file from memory
+      uploadInput.value = '';
     }
   }
 
-
   getVideoMimeType(videoUrl: string): string {
     if (videoUrl.endsWith('.mp4')) return 'video/mp4';
     if (videoUrl.endsWith('.mov')) return 'video/quicktime';
@@ -307,41 +239,24 @@ onFileSelected(event: any): void {
 
   getFeedbackImage(): string {
     if (!this.validated) {
-      return 'assets/images/listen/group.png'; // Default image
+      return 'assets/images/listen/group.png';
     }
-
     const result = this.selectedAnswers[this.currentQuestionIndex];
     if (result === 'correct') {
-      return 'assets/images/listen/confetti.png'; // Happy image
+      return 'assets/images/listen/confetti.png';
     } else if (result === 'incorrect') {
-      return 'assets/images/listen/sad.png'; // Sad image
+      return 'assets/images/listen/sad.png';
     }
-
-    return 'assets/images/listen/group.png'; // Fallback
+    return 'assets/images/listen/group.png';
   }
 
-
-
-  //toggleVideoPlayPause(): void {
-  //  const videoElement = document.getElementById('videoPreview') as HTMLVideoElement;
-  //  if (videoElement) {
-  //    if (videoElement.paused) {
-  //      videoElement.play();
-  //      this.isVideoPlaying = true;
-  //    } else {
-  //      videoElement.pause();
-  //      this.isVideoPlaying = false;
-  //    }
-  //  }
-  //}
-
   toggleVideoPlayPause(): void {
     const videoElement = document.getElementById('videoPreview') as HTMLVideoElement;
     if (videoElement) {
       if (videoElement.paused) {
         videoElement.play();
         this.isVideoPlaying = true;
-        this.isReplaceDisabled = true; // disable replace permanently on first play
+        this.isReplaceDisabled = true;
       } else {
         videoElement.pause();
         this.isVideoPlaying = false;
@@ -349,8 +264,6 @@ onFileSelected(event: any): void {
     }
   }
 
-
-
   stopVideoIfPlaying(): void {
     const videoElement = document.getElementById('videoPreview') as HTMLVideoElement;
     if (videoElement && !videoElement.paused) {
@@ -358,8 +271,4 @@ onFileSelected(event: any): void {
       this.isVideoPlaying = false;
     }
   }
-
-
-
-
 }

src/app/reading/reading.component.css

@@ -1,43 +1,40 @@
-/* === Container, header, background, main === */
 .reading-container {
-  font-family: 'Segoe UI',sans-serif;
+  font-family: 'Segoe UI', sans-serif;
   background-size: auto;
   background-position: center;
   background-attachment: fixed;
   width: 100%;
-  height: 100%
+  height: 100%;
 }
 
 .main-container {
   width: 85%;
   margin: 5vh auto;
-  border: 9px solid #009688;
+  border: 9px solid var(--main-accent-color);
   border-radius: 1.5vw;
   background: #fff;
   padding: 2vw;
   box-shadow: 0 .4vw 1vw rgba(0,0,0,.1);
-  height: 76vh
+  height: 76vh;
+  position: relative;
+  background: #fff;
+  overflow: visible;
 }
 
-
-
-/* ===== Intro split (match reference, minimal side margins) ===== */
 .intro-section.split {
-  padding-inline: 1vw; /* very small left/right padding */
+  padding-inline: 1vw;
   display: block;
 }
 
 .split-shell {
   width: 100%;
-  max-width: none; /* use full inner width */
+  max-width: none;
   margin: 0 auto;
   display: grid;
-  grid-template-columns: minmax(320px, 38%) 1fr; /* image left, content right */
+  grid-template-columns: minmax(320px, 38%) 1fr;
   align-items: center;
-  /*gap: 2.2vw;*/
 }
 
-/* Left image card */
 .split-left {
   display: grid;
   place-items: center;
@@ -47,7 +44,6 @@
   width: 60%;
 }
 
-/* Right content */
 .hero-title {
   font-size: 2.5vw;
   font-weight: 800;
@@ -62,7 +58,6 @@
   margin-bottom: 3vw;
 }
 
-/* Rows like the reference: label + control(s) */
 .form-row {
   display: flex;
   align-items: center;
@@ -77,33 +72,40 @@
   font-size: 1.3vw;
 }
 
-/* Inputs and selects (reuse your existing styles) */
 .input-wrap, .select-wrap {
   position: relative;
   flex: 1;
 }
 
-  .input-wrap input, .select-wrap select {
+  .input-wrap input,
+  .select-wrap select {
     width: 100%;
-    padding: 12px 40px 12px 36px;
+    min-width: 220px;
+    font-size: 1.1rem;
+    padding: 14px 44px 14px 40px;
     border-radius: 12px;
     border: 1px solid #cfe2e0;
     background: #fff;
     color: #0e3e45;
     outline: 0;
     transition: border-color .2s, box-shadow .2s;
+    box-sizing: border-box;
   }
 
-    .input-wrap input::placeholder {
-      color: #93a3b8;
-    }
+  .select-wrap select,
+  .select-wrap option {
+    font-size: 1.1rem;
+  }
 
-    .input-wrap input:focus, .select-wrap select:focus {
-      border-color: #009688;
-      box-shadow: 0 0 0 3px rgba(0,150,136,.12);
-    }
+  .input-wrap input::placeholder {
+    color: #93a3b8;
+  }
+
+  .input-wrap input:focus, .select-wrap select:focus {
+    border-color: #009688;
+    box-shadow: 0 0 0 3px rgba(0,150,136,.12);
+  }
 
-/* Icons */
 .icon-search, .icon-level {
   position: absolute;
   left: 12px;
@@ -125,7 +127,6 @@
     font-size: 16px;
   }
 
-/* Level badge */
 .badge {
   position: absolute;
   right: 10px;
@@ -157,35 +158,6 @@
     background: #fff3e9;
   }
 
-/* Generate button aligned like “Get Topic” */
-.btn-get {
-  min-width: 150px;
-  padding: 5px 16px;
-  border-radius: 12px;
-  border: 1px solid #009688;
-  background: #006780;
-  color: white;
-  font-weight: 700;
-  font-size: 1.5vw;
-  cursor: pointer;
-  transition: transform .08s, box-shadow .2s, opacity .2s;
-}
-
-  .btn-get:disabled {
-    /*opacity: .6;*/
-    background-color: #bbbbbb;
-    cursor: not-allowed;
-  }
-
-  .btn-get:not(:disabled):hover {
-    box-shadow: 0 10px 24px rgba(0,150,136,.22);
-  }
-
-  .btn-get:not(:disabled):active {
-    transform: translateY(1px);
-  }
-
-/* Suggestions (keep your existing styles; scoped to intro) */
 .intro-section.split .suggestion-box {
   position: absolute;
   top: calc(100% + 8px);
@@ -214,7 +186,6 @@
       background: #f1fbfa;
     }
 
-/* Clear (×) inside input */
 .input-wrap.clearable {
   position: relative;
 }
@@ -224,35 +195,31 @@
 }
 
 .clear-btn {
-  position: absolute;
   right: 12px;
-  top: 55%;
-  transform: translateY(-53%);
-  width: 2vw;
-  height: 2vw;
-  line-height: 0vw;
-  text-align: center;
-  border: 1px solid #cfe2e0;
-  border-radius: 45%;
-  background: #006780;
-  color: white;
-  cursor: pointer;
-  padding: 0;
+  top: 4px;
+  position: absolute;
+  background: #009688;
+  border: none;
+  width: 44px;
+  height: 44px;
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
   font-size: 2vw;
-  z-index: 30;
+  color: black;
+  cursor: pointer;
+  z-index: 2010;
+  box-shadow: 0 2px 8px rgba(93, 145, 195, 0.18);
+  transition: background 0.2s, color 0.2s;
 }
 
   .clear-btn:hover {
-    background: #f1fbfa;
-    color: #0e3e45;
-    border-color: #b9d6d3;
-  }
-
-  .clear-btn:active {
-    transform: translateY(-50%) scale(.98);
+    background: white;
+    color: black;
+    border: 3px solid #009688;
   }
 
-/* Responsive */
 @media (max-width: 980px) {
   .split-shell {
     grid-template-columns: 1fr;
@@ -264,12 +231,10 @@
   }
 }
 
-
 :root {
   --passage-font: 21px;
 }
 
-/* Header */
 .reading-head {
   display: grid;
   grid-template-columns: 44px 1fr auto;
@@ -292,63 +257,36 @@
   gap: 8px;
 }
 
-.icon-btn {
-  width: 45px;
-  height: 45px;
-  display: grid;
-  place-items: center;
-  /* color: #eaf1ff; */
-  background: rgb(32 171 107 / 42%);
-  border: 4px solid rgba(255, 255, 255, .15);
-  border-radius: 10px;
-  cursor: pointer;
-  transition: transform .05s ease, box-shadow .15s ease, background .15s ease;
-  font-size: x-large;
-  font-weight: 800;
-}
-
-  .icon-btn:hover {
-    box-shadow: 0 8px 18px rgba(0,0,0,.08);
+  .head-actions .icon-btn {
     background: #f7fcfb;
-  }
-
-  .icon-btn:active {
-    transform: translateY(1px);
-  }
-
-  .icon-btn.active {
-    border-color: #95d0c9;
-    background: #eefaf8;
-  }
-
-  .icon-btn.danger {
-    color: #b1241a;
-  }
-
-.icon-btn1 {
-  width: 8vw;
-  height: 5vh;
-  display: grid;
-  place-items: center;
-  background: rgb(0 150 136);
-  border: 2px solid rgba(255, 255, 255, .15);
-  border-radius: 22px;
-  cursor: pointer;
-  transition: transform .05s ease, box-shadow .15s ease, background .15s ease;
-  font-size: x-large;
-  font-weight: 800;
-  top: -4vw;
-  position: relative;
-  right: -4vw;
-}
+    border: 1px solid #cfe2e0;
+    border-radius: 8px;
+    padding: 0.4em 1.1em;
+    font-size: 1.2vw;
+    color: #009688;
+    font-weight: 700;
+    cursor: pointer;
+    transition: background 0.15s, border-color 0.15s, color 0.15s;
+    outline: none;
+    min-width: 2.5em;
+    min-height: 2.5em;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+    .head-actions .icon-btn:hover,
+    .head-actions .icon-btn.active {
+      background: #e0f7f4;
+      border-color: #009688;
+      color: #00695c;
+    }
 
-  .icon-btn1:hover {
-    box-shadow: 0 8px 18px rgba(0,0,0,.08);
-    background: white;
-    color: black;
-  }
+    .head-actions .icon-btn[aria-pressed="true"] {
+      background: #b2dfdb;
+      color: #004d40;
+    }
 
-/* Meta chips */
 .reading-meta {
   display: flex;
   flex-wrap: wrap;
@@ -387,7 +325,6 @@
   color: #b35a11;
 }
 
-/* Passage area */
 .passage-shell {
   position: relative;
   border: 1px solid #e7f1f0;
@@ -395,13 +332,12 @@
   background: #f3efef;
   padding: 14px 16px;
   box-shadow: inset 0 1px 0 rgba(255,255,255,.7);
-  max-height: 46vh;
+  max-height: 43vh;
   overflow: auto;
   font-size: 1.4vw;
   line-height: 1.8;
 }
 
-  /* Soft scrollbars */
   .passage-shell::-webkit-scrollbar {
     width: 12px;
   }
@@ -416,13 +352,11 @@
     background: #f7fcfb;
   }
 
-/* Typography (A−/A+) */
 .passage-text {
   font-family: Georgia, "Times New Roman", serif;
   font-size: var(--passage-font);
   line-height: 1.5;
   color: #1e3a3f;
-  /*letter-spacing: .2px;*/
   text-align: left;
   hyphens: auto;
   white-space: pre-wrap;
@@ -447,7 +381,6 @@
     font-weight: 700;
   }
 
-/* Footer buttons */
 .reading-actions {
   display: flex;
   gap: 10px;
@@ -455,77 +388,26 @@
   margin-top: 30px;
 }
 
-.btn-primary, .btn-danger {
-  min-width: 210px;
-  padding: 12px 18px;
-  border-radius: 12px;
-  font-weight: 700;
-  font-size: 1.3vw;
-  cursor: pointer;
-  border: 1px solid transparent;
-  transition: transform .06s, box-shadow .18s, opacity .18s;
-}
-
-.btn-primary {
-  color: #fff;
-  background: #006780;
-  border-color: #006780;
-}
-
-  .btn-primary:hover {
-    box-shadow: 0 12px 24px rgba(0,103,128,.25);
-  }
-
-  .btn-primary:disabled {
-    opacity: .6;
-    cursor: not-allowed;
-  }
-
-.btn-danger {
-  color: #fff;
-  background: #006780;
-  border-color: #006780;
-}
-
-  .btn-danger:hover {
-    box-shadow: 0 12px 24px rgba(0,103,128,.25);
-  }
-
-/* Back button (left) reuses .icon-btn */
 .back {
   grid-column: 1 / 2;
 }
 
-/* Responsive */
 @media (max-width: 720px) {
   .reading-title {
     font-size: 22px;
   }
-
-  .btn-primary, .btn-danger {
-    min-width: 160px;
-  }
 }
 
-/* Keep all MCQ UI inside the white card */
-.main-container {
-  background: #fff;
-  overflow: visible;
-}
-/* you already have this */
-
-/* ---- MCQ card ---- */
 .mcq-card {
   width: 100%;
-  margin: 0; /* no side gaps */
-  background: #fff; /* same white as container */
+  margin: 0;
+  background: #fff;
   border: 1px solid #d9ecea;
   border-radius: 16px;
   padding: 16px;
   box-shadow: 0 10px 24px rgba(0,0,0,.06);
 }
 
-/* Header inside the card */
 .mcq-card__header {
   display: grid;
   grid-template-columns: 44px 1fr 44px;
@@ -548,7 +430,6 @@
   justify-content: flex-end;
 }
 
-/* Question pill */
 .quiz-pill {
   display: flex;
   align-items: flex-start;
@@ -576,7 +457,6 @@
   line-height: 1.6;
 }
 
-/* Options list */
 .quiz-options {
   list-style: none;
   margin: 0;
@@ -592,7 +472,6 @@
   }
 }
 
-/* Option pill */
 .quiz-option-pill {
   display: flex;
   align-items: center;
@@ -620,7 +499,6 @@
     color: #0e3e45;
   }
 
-  /* States */
   .quiz-option-pill.is-selected {
     border-color: #a8d8d3;
     background: #eefaf8;
@@ -636,7 +514,6 @@
     background: #fff1ef;
   }
 
-/* Hide the native radio */
 .visually-hidden {
   position: absolute !important;
   inset: auto auto auto auto !important;
@@ -647,7 +524,6 @@
   white-space: nowrap;
 }
 
-/* Answer status */
 .answer-status {
   display: flex;
   flex-wrap: wrap;
@@ -682,68 +558,17 @@
   color: #3a5b60;
 }
 
-/* Footer buttons */
 .mcq-card__footer {
   display: flex;
   gap: 10px;
   justify-content: end;
   margin-top: 6vw;
+  align-items: flex-end;
+  justify-content: space-between;
 }
 
-.submit-btn, .next-btn, .reset-btn {
-  min-width: 160px;
-  padding: 12px 16px;
-  border-radius: 12px;
-  font-weight: 700;
-  cursor: pointer;
-  /*border: 1px solid transparent;*/
-  transition: transform .06s, box-shadow .18s, opacity .18s;
-  font-size: 1.5vw;
-}
-
-.submit-btn {
-  background: #006780;
-  color: #fff;
-  border-color: #006780;
-}
-
-  .submit-btn:hover {
-    box-shadow: 0 12px 24px rgba(0,103,128,.25);
-  }
-
-  .submit-btn:disabled {
-    box-shadow: none;
-    transform: none;
-    background-color: #cccccc;
-    color: #666666;
-    cursor: not-allowed;
-  }
-
-.next-btn {
-  background: #006780;
-  color: #fff;
-  border-color: #006780;
-}
-
-  .next-btn:hover {
-    box-shadow: 0 12px 24px rgba(0,103,128,.25);
-  }
-
-.reset-btn {
-  background: #e5483b;
-  color: #fff;
-  border-color: #e5483b;
-}
-
-  .reset-btn:hover {
-    box-shadow: 0 12px 24px rgba(229,72,59,.25);
-  }
-
-
-
-/* Loader Overlay */
 .loader-overlay {
-  position: fixed;
+  position: absolute;
   top: 0;
   left: 0;
   width: 100%;
@@ -799,8 +624,6 @@
   }
 }
 
-
-
 .popup-overlay {
   position: fixed;
   top: 0;
@@ -814,7 +637,6 @@
   z-index: 1000;
 }
 
-/* Card */
 .popup-content {
   background-color: #fff;
   padding: 2vw;
@@ -825,35 +647,12 @@
   width: 80%;
 }
 
-
-
   .popup-content p {
     font-size: 1.4vw;
     color: #dc3545;
     margin-bottom: 1vw;
   }
 
-/* Close button */
-.close-btn1 {
-  padding: 0.8vw 1.5vw;
-  font-size: 1.2vw;
-  background-color: #007bff;
-  color: #fff;
-  border: none;
-  border-radius: 0.5vw;
-  cursor: pointer;
-  transition: all 0.3s ease;
-}
-
-  .close-btn1:hover {
-    filter: brightness(0.98);
-  }
-
-  .close-btn1:active {
-    transform: translateY(1px);
-  }
-
-/* small scale-in animation */
 @keyframes popupScale {
   from {
     transform: scale(.96);
@@ -866,8 +665,6 @@
   }
 }
 
-
-/* Locked/disabled state for Topic input until a level is chosen */
 .input-wrap.locked input {
   background: #f7f9fb;
   border-color: #dfe9e7;
@@ -879,16 +676,14 @@
   opacity: .5;
 }
 
-/* optional: a subtle invisible scrim so nothing inside is clickable */
 .input-wrap.locked::after {
   content: "";
   position: absolute;
   inset: 0;
   border-radius: 12px;
-  pointer-events: auto; /* block clicks */
+  pointer-events: auto;
 }
 
-/* Helper note under the field */
 .field-hint {
   margin: 6px 2px 0;
   font-size: 12px;
@@ -904,93 +699,25 @@
   line-height: 1;
 }
 
-/* Keep space for the clear (×) button when enabled */
 .input-wrap .has-clear {
   padding-right: 44px;
 }
 
 
-/* === Larger Back Arrow Button === */
-.icon-btn.back {
-  width: 3vw; /* bigger button */
-  height: 3vw;
-  border-radius: 14px;
-  border: 1px solid #cfe2e0;
-  background: #fff;
-  display: grid;
-  place-items: center;
-  cursor: pointer;
-  box-shadow: 0 2px 8px rgba(0,0,0,.06);
-  transition: box-shadow .15s, transform .05s, border-color .15s, background .15s;
-}
-
-  .icon-btn.back:hover {
-    background: #f7fcfb;
-    border-color: #b9d6d3;
-    box-shadow: 0 8px 18px rgba(0,0,0,.08);
-  }
-
-  .icon-btn.back:active {
-    transform: translateY(1px);
-  }
-
-  /* visible keyboard focus */
-  .icon-btn.back:focus-visible {
-    outline: 3px solid rgba(0,150,136,.35);
-    outline-offset: 2px;
-  }
-
-  /* arrow image inside the button */
-  .icon-btn.back .icon-img {
-    width: 3vw; /* bigger arrow */
-    height: 3vw;
-    object-fit: contain;
-    display: block;
-    transition: transform .12s, opacity .12s;
-  }
-
-  /* subtle nudge on hover */
-  .icon-btn.back:hover .icon-img {
-    transform: translateX(-1px);
-  }
-
-/* mobile: slightly smaller to fit tight headers */
-@media (max-width: 720px) {
-  .icon-btn.back {
-    width: 44px;
-    height: 44px;
-    border-radius: 12px;
-  }
-
-    .icon-btn.back .icon-img {
-      width: 22px;
-      height: 22px;
-    }
-}
-
-/* optional: if the header has a teal background */
-.header-on-teal .icon-btn.back {
-  background: #007e74;
-  border-color: #00756c;
+.icon-img {
+  width: 4.5vw;
 }
 
-  .header-on-teal .icon-btn.back .icon-img {
-    filter: brightness(0) invert(1); /* make arrow white */
-  }
-
 
 .passage-text .highlight {
   background-color: yellow;
 }
 
-
-/* ===== Congratulations modal ===== */
 .congrats-overlay {
   position: fixed;
   inset: 0;
   display: grid;
   place-items: center;
-  /*background: rgba(0, 0, 0, 0.45);*/
 }
 
 .congrats-card {
@@ -1009,7 +736,7 @@
   position: relative;
   z-index: 1;
   box-shadow: 0 .4vw 1vw rgba(0, 0, 0, .1);
-  border: 9px solid #009688;
+  border: 9px solid var(--main-accent-color);
   top: 3vw;
 }
 
@@ -1029,7 +756,6 @@
   .congrats-card p {
     margin: 0 0 16px;
     color: #0e3e45;
-    /* color: #4ca1af; */
     margin-bottom: 15px;
     font-size: 2.5vw;
     white-space: nowrap;
@@ -1038,7 +764,6 @@
     text-align: center;
   }
 
-/* Score badge */
 .score-badge {
   display: inline-flex;
   align-items: baseline;
@@ -1049,7 +774,6 @@
   background: #eef7f6;
   color: #0e3e45;
   font-weight: 800;
-  /* color: #4ca1af; */
   margin-bottom: 15px;
   font-size: 2.5vw;
   white-space: nowrap;
@@ -1058,21 +782,7 @@
   text-align: center;
 }
 
-
-
-.start-over-btn {
-  min-width: 180px;
-  padding: 12px 16px;
-  border-radius: 12px;
-  background: #006780;
-  color: #fff;
-  border: 1px solid #006780;
-  font-weight: 800;
-  cursor: pointer;
-  transition: transform .06s, box-shadow .18s;
-  font-size: 2vw;
+.user-guide-close-icon {
+  right: -21px;
+  top: -21px;
 }
-
-  .start-over-btn:hover {
-    box-shadow: 0 12px 24px rgba(0,103,128,.25);
-  }

src/app/reading/reading.component.html

@@ -1,89 +1,39 @@
 <div class="reading-container">
   <app-header [title]="'Reading'"></app-header>
-
-
-  <!-- Background -->
   <img src="assets/images/grammar-bg.png" alt="Background" class="grammar-bg" />
 
-  <!-- Main -->
   <div class="main-container" *ngIf="!showCongrats">
-    <!-- INTRO (split left image / right form) -->
     <section class="intro-section split" *ngIf="!content && !hasStarted">
       <div class="split-shell">
-        <!-- Left -->
         <div class="split-left">
-          <img class="intro-illustration"
-               src="assets/images/reading/teacher.png"
-               alt="Reading and quiz illustration" />
+          <img class="intro-illustration" src="assets/images/reading/teacher.png" alt="Reading and quiz illustration" />
         </div>
-
-        <!-- Right -->
         <div class="split-right">
           <h1 class="hero-title">Welcome to the Reading Exercise</h1>
           <p class="hero-copy">
-            The Reading component is a simple tool that turns any meaningful topic into a short,
-            age-appropriate passage. It checks the topic first to avoid nonsense and unsafe inputs,
-            then creates clear content at the chosen level (Easy, Medium, or Hard). After reading,
-            it generates multiple-choice questions and gives instant feedback. Read-Aloud and A−/A+
-            controls support different learning needs. This helps students build comprehension and
-            vocabulary, and saves teachers and parents time during practice, homework, and revision.
+            The Reading component is a simple tool that turns any meaningful topic into a short, age-appropriate passage. It checks the topic first to avoid nonsense and unsafe inputs, then creates clear content at the chosen level (Easy, Medium, or Hard). After
+            reading, it generates multiple-choice questions and gives instant feedback. Read-Aloud and A−/A+ controls support different learning needs. This helps students build comprehension and vocabulary, and saves teachers and parents
+            time during practice, homework, and revision.
           </p>
-
-          <!-- Row: Topic -->
           <div class="form-row">
             <label class="row-label">Topic:</label>
-
             <div class="input-wrap clearable" [class.locked]="!difficulty">
               <span class="icon-search" aria-hidden="true"></span>
-
-              <input type="text"
-                     class="has-clear"
-                     [(ngModel)]="topic"
-                     [placeholder]="difficulty ? 'Enter or select a topic' : 'Select a level first'"
-                     [disabled]="!difficulty"
-                     (focus)="openSuggestions()"
-                     (input)="onTyping()"
-                     (keydown)="onKeydown($event)"
-                     (blur)="hideSuggestionsWithDelay()"
-                     autocomplete="off"
-                     aria-autocomplete="list"
-                     [attr.aria-expanded]="showSuggestions && !!difficulty"
-                     [attr.aria-disabled]="!difficulty" />
-
-              <!-- Clear (×) only when enabled and has text -->
-              <button class="clear-btn"
-                      *ngIf="difficulty && topic.trim().length"
-                      (mousedown)="$event.preventDefault()"
-                      (click)="onClearTopic()">
-                ×
-              </button>
-
-              <!-- Suggestions only after a level is chosen -->
+              <input type="text" class="has-clear" [(ngModel)]="topic" [placeholder]="difficulty ? 'Enter or select a topic' : 'Select a level first'" [disabled]="!difficulty" (focus)="openSuggestions()" (input)="onTyping()" (keydown)="onKeydown($event)" (blur)="hideSuggestionsWithDelay()"
+                     autocomplete="off" aria-autocomplete="list" [attr.aria-expanded]="showSuggestions && !!difficulty" [attr.aria-disabled]="!difficulty" />
+              <button class="clear-btn" *ngIf="difficulty && topic.trim().length" (mousedown)="$event.preventDefault()" (click)="onClearTopic()">×</button>
               <div class="suggestion-box" *ngIf="difficulty && showSuggestions">
                 <ng-container *ngIf="filteredSuggestions?.length">
-                  <span *ngFor="let s of filteredSuggestions; let i = index"
-                        (mousedown)="selectSuggestion(s)"
-                        [class.active]="i === activeIndex">{{ s }}</span>
+                  <span *ngFor="let s of filteredSuggestions; let i = index" (mousedown)="selectSuggestion(s)" [class.active]="i === activeIndex">{{ s }}</span>
                 </ng-container>
-                <!--
-                <ng-template #noMatches>
-                  <span (mousedown)="selectSuggestion(topic)">Use “{{ topic }}”</span>
-                </ng-template>
-                -->
               </div>
             </div>
-
-            <!-- Tiny helper note shown only when level not chosen -->
             <div class="field-hint" *ngIf="!difficulty">
-              <span class="lock-icon" aria-hidden="true"></span>
-              Please select a level to enable topic suggestions.
+              <span class="lock-icon" aria-hidden="true"></span> Please select a level to enable topic suggestions.
             </div>
           </div>
-
-          <!-- Row: Level + Generate -->
           <div class="form-row">
             <label class="row-label">Select Level:</label>
-
             <div class="select-wrap">
               <span class="icon-level" aria-hidden="true"></span>
               <select [(ngModel)]="difficulty" (ngModelChange)="onDifficultyChange($event)" required>
@@ -91,189 +41,96 @@
                 <option [ngValue]="'medium'">Medium</option>
                 <option [ngValue]="'hard'">Hard</option>
               </select>
-              <span class="badge" *ngIf="difficulty" [attr.data-level]="difficulty">
-                {{ difficulty | titlecase }}
-              </span>
+              <span class="badge" *ngIf="difficulty" [attr.data-level]="difficulty">{{ difficulty | titlecase }}</span>
             </div>
-
-            <button class="btn-get"
-                    (click)="generateContent()
-              "
-                    [disabled]="!topic.trim() || !difficulty.trim() || isGenerateDisabled">
-              Generate Passage
-            </button>
+            <app-button (click)="generateContent()" [disabled]="!topic.trim() || !difficulty.trim() || isGenerateDisabled">Generate Passage</app-button>
           </div>
         </div>
       </div>
-
-      <!-- Centered loader (uses your .loader-overlay/.loader CSS) -->
       <div class="loader-overlay" *ngIf="isGeneratingContent" role="status" aria-live="polite">
         <div class="loader">Loading</div>
       </div>
-
-      <!-- Error popup (uses existing CSS .popup-overlay/.popup-content) -->
       <div class="popup-overlay" *ngIf="showPopup">
         <div class="popup-content">
-
-          <p>
-            {{ errorMessage || 'We could not create the passage right now. Please try again.' }}
-          </p>
-          <button class="close-btn1" (click)="closeErrorPopup()">Close</button>
+          <p>{{ errorMessage || 'We could not create the passage right now. Please try again.' }}</p>
+          <app-button (click)="closeErrorPopup()">Close</app-button>
         </div>
       </div>
     </section>
 
-    <!-- READING CARD -->
     <div *ngIf="content && !hasStarted" class="reading-card">
-      <!-- Header -->
       <div class="reading-head">
-        <button class="icon-btn back" (click)="goToIntroSection()" aria-label="Back">
-          <img src="assets/images/reading/back.png" alt="" class="icon-img" />
-        </button>
-
+        <img src="assets/images/reading/back.png" (click)="goToIntroSection()" alt="" class="icon-img" />
         <h2 class="reading-title">Let’s Start Reading!</h2>
-
-        <!-- Actions: A− A+ Read/Pause Stop -->
         <div class="head-actions">
           <button class="icon-btn" (click)="decreaseFont()" aria-label="Decrease font">A−</button>
           <button class="icon-btn" (click)="increaseFont()" aria-label="Increase font">A+</button>
-
-          <button class="icon-btn"
-                  [class.active]="isReading || ttsPaused"
-                  (click)="toggleReadAloud()"
-                  [attr.aria-pressed]="isReading || ttsPaused"
-                  aria-label="Read aloud">
-            {{ isReading ? '⏸' : '🔊' }}
-          </button>
-
-          <!--
-          <button class="icon-btn danger" (click)="stopReadAloud()" aria-label="Stop reading">■</button>
-          -->
+          <button class="icon-btn" [class.active]="isReading || ttsPaused" (click)="toggleReadAloud()" [attr.aria-pressed]="isReading || ttsPaused" aria-label="Read aloud">{{ isReading ? '⏸' : '🔊' }}</button>
         </div>
       </div>
-
-      <!-- Meta -->
       <div class="reading-meta">
         <span class="chip chip-topic" *ngIf="normalizedTopic || topic">📚 {{ normalizedTopic || topic }}</span>
-        <span class="chip chip-level" [attr.data-level]="difficulty">
-          {{
-          difficulty | titlecase
-          }}
-        </span>
+        <span class="chip chip-level" [attr.data-level]="difficulty">{{ difficulty | titlecase }}</span>
       </div>
-
-      <!-- Passage -->
       <div class="passage-shell">
         <div class="passage-text" [innerHTML]="transformContent(content)"></div>
       </div>
-
-      <!-- Footer -->
       <div class="reading-actions">
-        <button class="btn-primary"
-                (click)="stopReadAloud(); generateQuestions()"
-                [disabled]="isGenerateQuestionDisabled">
-          Generate Questions
-        </button>
-
-        <!-- Centered loader while generating questions -->
+        <app-button (click)="stopReadAloud(); generateQuestions()" [disabled]="isGenerateQuestionDisabled">Generate Questions</app-button>
         <div class="loader-overlay" *ngIf="loadingQuestions" aria-live="polite" aria-busy="true">
           <span class="loader">Loading</span>
         </div>
-
-        <button class="btn-danger" (click)="stopReadAloud(); resetAll()">Reset</button>
+        <app-button (click)="stopReadAloud(); resetAll()">Reset</app-button>
       </div>
     </div>
 
-    <!-- QUESTIONS -->
-    <!-- MCQ CARD -->
     <div class="mcq-card" *ngIf="hasStarted && questions?.length">
-      <!-- Header inside the card -->
       <div class="mcq-card__header">
-        <button class="icon-btn back" (click)="goBack()" aria-label="Back">
-          <img src="assets/images/reading/back.png" alt="" class="icon-img" />
-        </button>
 
-        <h3 class="mcq-card__title">
-          Question {{ currentQuestionIndex + 1 }} of {{ questions.length }}
-        </h3>
+        <img src="assets/images/reading/back.png" alt="" class="icon-img" />
 
+        <h3 class="mcq-card__title">Question {{ currentQuestionIndex + 1 }} of {{ questions.length }}</h3>
         <div class="mcq-card__actions">
-          <button class="icon-btn1" (click)="startOver()" aria-label="Close">✖</button>
+          <button class="user-guide-close-icon" (click)="startOver()">×</button>
         </div>
       </div>
-
-      <!-- Body -->
       <div class="mcq-card__body">
-        <!-- Question pill -->
         <div class="quiz-pill quiz-question-pill">
           <span class="qq-label">Question:</span>
           <span class="qq-text">{{ questions[currentQuestionIndex].question }}</span>
         </div>
-
-        <!-- Options -->
         <ul class="quiz-options">
           <li *ngFor="let option of (questions[currentQuestionIndex]?.options | slice:0:4); let i = index">
-            <label class="quiz-pill quiz-option-pill"
-                   [ngClass]="{
+            <label class="quiz-pill quiz-option-pill" [ngClass]="{
                 'is-selected': !questions[currentQuestionIndex].isChecked && getSelectedAnswer() === option,
                 'is-correct':  questions[currentQuestionIndex].isChecked && questions[currentQuestionIndex].correct_answer === option,
                 'is-incorrect':questions[currentQuestionIndex].isChecked && getSelectedAnswer() === option && option !== questions[currentQuestionIndex].correct_answer
               }">
-              <input type="radio"
-                     class="visually-hidden"
-                     [name]="'q_'+currentQuestionIndex"
-                     [value]="option"
-                     [checked]="getSelectedAnswer() === option"
-                     (change)="setSelectedAnswer(option)"
-                     [disabled]="questions[currentQuestionIndex].isChecked" />
+              <input type="radio" class="visually-hidden" [name]="'q_'+currentQuestionIndex" [value]="option" [checked]="getSelectedAnswer() === option" (change)="setSelectedAnswer(option)" [disabled]="questions[currentQuestionIndex].isChecked" />
               <span class="slot">{{ ['A','B','C','D'][i] }}:</span>
               <span class="opt-text">{{ option }}</span>
             </label>
           </li>
         </ul>
       </div>
-
-      <!-- Footer inside the card -->
       <div class="mcq-card__footer">
-        <!-- Submit (visible until answered) -->
-
-        <button *ngIf="!questions[currentQuestionIndex].isChecked"
-                class="submit-btn"
-                (click)="validateAnswer(); scheduleCongratsIfLast()"
-                [disabled]="!selectedAnswers[questions[currentQuestionIndex].question]">
-          Validate
-        </button>
-
-
-        <!-- Next (for Q1 & Q2 after submit) -->
-        <button *ngIf="questions[currentQuestionIndex].isChecked && currentQuestionIndex < questions.length - 1"
-                class="next-btn"
-                (click)="nextQuestion()">
-          Next ▶
-        </button>
-
-
+        <app-button *ngIf="currentQuestionIndex > 0" (click)="previousQuestion()">◀ Previous</app-button>
+        <div style="display: flex; gap: 10px; justify-content: flex-end; flex: 1;">
+          <app-button *ngIf="!questions[currentQuestionIndex].isChecked" (click)="validateAnswer(); scheduleCongratsIfLast()" [disabled]="!selectedAnswers[questions[currentQuestionIndex].question]">Validate</app-button>
+          <app-button *ngIf="questions[currentQuestionIndex].isChecked && currentQuestionIndex < questions.length - 1" (click)="nextQuestion()">Next ▶</app-button>
+        </div>
       </div>
     </div>
-
-
-
   </div>
 
-
-
-
-  <!-- Congratulations overlay -->
   <div class="congrats-overlay" *ngIf="showCongrats" aria-live="polite" aria-modal="true" role="dialog">
     <div class="congrats-card">
       <div class="score-badge" aria-label="Your score">
         Your Score: <span class="score">{{ scoreCorrect }}</span> / <span class="total">{{ scoreTotal }}</span>
       </div>
-      <h2>{{ congratsTitle }}</h2>  <!-- Display the dynamic title -->
-      <p>{{ congratsMessage }}</p>  <!-- Display the dynamic message -->
-
-      <button class="start-over-btn" (click)="startOver()">Start Over</button>
+      <h2>{{ congratsTitle }}</h2>
+      <p>{{ congratsMessage }}</p>
+      <app-button (click)="startOver()">Start Over</app-button>
     </div>
   </div>
-
 </div>

src/app/reading/reading.component.ts

@@ -2,16 +2,19 @@ import { Component, ElementRef, ViewChild } from '@angular/core';
 import { ReadingService } from './reading.service';
 import { Router } from '@angular/router';
 import confetti from 'canvas-confetti';
-
+import { ButtonComponent } from '../shared/button/button.component';
+import { CommonModule } from '@angular/common';
+import { FormsModule } from '@angular/forms';
+import { HeaderComponent } from '../shared/header/header.component';
 
 @Component({
   selector: 'app-reading',
   templateUrl: './reading.component.html',
-  styleUrl: './reading.component.css'
+  styleUrl: './reading.component.css',
+  standalone: true,
+  imports: [ButtonComponent, CommonModule, FormsModule, HeaderComponent]
 })
-
 export class ReadingComponent {
-  // basic state
   loadingQuestions = false;
   isGeneratingContent = false;
   isGenerateDisabled = false;
@@ -19,31 +22,25 @@ export class ReadingComponent {
   showPopup = false;
   showSuggestions = false;
 
-
-  // quiz state
   hasStarted = false;
   currentQuestionIndex = 0;
   questions: { question: string; options: string[]; correct_answer: string; isChecked?: boolean }[] = [];
   selectedAnswers: { [key: string]: string } = {};
 
-  // content state
   topic: string = '';
   difficulty: 'easy' | 'medium' | 'hard' = 'easy';
   content: string = '';
   errorMessage: string = '';
   normalizedTopic: string = '';
 
-  // suggestions state
   filteredSuggestions: string[] = [];
   activeIndex = -1;
 
-  // read-aloud + font
   fontPx = parseInt(localStorage.getItem('passageFontPx') || '18', 10);
   isReading = false;
   ttsPaused = false;
   private ttsUtterance?: SpeechSynthesisUtterance;
 
-  // topic lists
   topicsByDifficulty: Record<'easy' | 'medium' | 'hard', string[]> = {
     easy: [
       'My Family', 'My School', 'My Neighborhood', 'Community Helpers',
@@ -84,41 +81,26 @@ export class ReadingComponent {
 
   goToIntroSection(): void {
     this.stopReadAloud?.();
-
-    // Show Intro by clearing passage, but DO NOT touch topic/difficulty
     this.content = '';
     this.hasStarted = false;
-
-    // On Intro, allow user to click "Generate Passage" again
     this.isGenerateDisabled = false;
-
-    // No passage now → disable "Generate Questions"
     this.refreshGenerateQuestionsState();
-
-    // Make sure any congrats overlay is closed
     this.showCongrats = false;
   }
 
-
-
   generateContent(): void {
     this.showPopup = false;
     this.errorMessage = '';
-
     if (!this.topic.trim() || !this.difficulty.trim()) {
       this.errorMessage = 'Please enter a topic and select a difficulty level.';
       this.showPopup = true;
       return;
     }
-
     this.isGenerateDisabled = true;
     this.isGeneratingContent = true;
-
     this.readingService.generateContent(this.topic, this.difficulty).subscribe(
       (response) => {
         const text = (response?.content || '').trim();
-
-        // ✅ Do not check for exact topic substring
         if (!text) {
           this.errorMessage = 'The server did not return any content.';
           this.showPopup = true;
@@ -128,21 +110,14 @@ export class ReadingComponent {
           this.normalizedTopic = '';
           return;
         }
-
         this.content = text;
-
-        // Support both shapes: { normalized_topic } or { topic } or fallback to input
         this.normalizedTopic = (response?.normalized_topic || response?.topic || this.topic || '').trim();
-
         this.isGeneratingContent = false;
-
-        // Show passage screen; enable "Generate Questions"
         this.hasStarted = false;
         this.refreshGenerateQuestionsState();
       },
       (error) => {
         console.error(error);
-        // ✅ Show backend message if present (your Flask returns {"error": "..."} on 400)
         const msg = error?.error?.error || 'Invalid topic. Please enter a meaningful topic.';
         this.errorMessage = msg;
         this.showPopup = true;
@@ -152,13 +127,10 @@ export class ReadingComponent {
     );
   }
 
-
-  /** Generate MCQs from current passage. */
   generateQuestions(): void {
     if (!this.content.trim()) return;
     this.loadingQuestions = true;
     this.isGenerateQuestionDisabled = true;
-
     this.readingService.generateQuestions(this.content, this.difficulty).subscribe(
       (response) => {
         this.questions = this.parseQuestions(response.questions);
@@ -171,17 +143,14 @@ export class ReadingComponent {
       (error) => {
         console.error(error);
         this.loadingQuestions = false;
-        // IMPORTANT: allow user to try again on failure
-        this.refreshGenerateQuestionsState(); // passage still exists → re-enable button
+        this.refreshGenerateQuestionsState();
       }
     );
   }
 
-  /** Parse questions from either JSON (preferred) or old plain-text format. */
   parseQuestions(
     raw: any
   ): { question: string; options: string[]; correct_answer: string; isChecked?: boolean }[] {
-    // 1) If backend returns an array of question objects (JSON)
     if (Array.isArray(raw)) {
       return raw
         .map((q: any) => ({
@@ -192,55 +161,47 @@ export class ReadingComponent {
         }))
         .filter(q => q.question && q.options.length === 4);
     }
-
-    // 2) Fallback: parse the old plain-text format
     const out: { question: string; options: string[]; correct_answer: string; isChecked?: boolean }[] = [];
     const text = String(raw || '');
     const blocks = text.split('\n\n');
-
     blocks.forEach(block => {
       const obj: any = {};
       const lines = block.split('\n');
-
       obj.question = (lines[0] || '').replace(/^(\d+\.\s*)?Question:\s*/i, '').trim();
-
       const optionsText = (lines[1] || '')
         .replace(/^Options:\s*\[/i, '')
         .replace(/\]\s*$/, '')
         .trim();
-
-      //obj.options = optionsText ? optionsText.split(', ').map(o => o.trim()) : [];
-
       obj.options = optionsText
         ? optionsText.split(', ').map(o => o.trim()).slice(0, 4)
         : [];
       obj.correct_answer = (lines[2] || '').replace(/^Correct Answer:\s*/i, '').trim();
       obj.isChecked = false;
-
       if (obj.question && obj.options?.length) out.push(obj);
     });
-
     return out;
   }
 
-  /** Record the selected answer for current question. */
   setSelectedAnswer(value: string): void {
     const curr = this.questions?.[this.currentQuestionIndex];
     if (curr) this.selectedAnswers[curr.question] = value;
   }
 
-  /** Get the selected answer for current question. */
   getSelectedAnswer(): string {
     const curr = this.questions?.[this.currentQuestionIndex];
     return (curr && this.selectedAnswers[curr.question]) || '';
   }
 
-  /** Move to next question. */
   nextQuestion(): void {
     if (this.currentQuestionIndex < this.questions.length - 1) this.currentQuestionIndex++;
   }
 
-  /** Instantly marks current question as checked if an answer is chosen. */
+  previousQuestion(): void {
+    if (this.currentQuestionIndex > 0) {
+      this.currentQuestionIndex--;
+    }
+  }
+
   private markCurrentAsChecked(): void {
     const curr = this.questions[this.currentQuestionIndex];
     if (curr && this.selectedAnswers[curr.question]) {
@@ -248,73 +209,55 @@ export class ReadingComponent {
     }
   }
 
-  /** Close the error popup. */
   closeErrorPopup(): void { this.showPopup = false; }
 
-  /** Navigate to home route. */
   goToHome(): void { this.router.navigate(['/home']); }
 
-  /** Return to content stage and re-enable input. */
   goToContentBlock(): void {
     this.hasStarted = false;
     this.content = '';
     this.isGenerateDisabled = false;
   }
 
-  /** Reset everything to initial state. */
   resetAll(): void {
     this.initState();
     this.stopReadAloud?.();
-
-    // Inputs / choices
     this.topic = '';
     this.difficulty = 'easy';
     this.normalizedTopic = '';
-
-    // Generated passage and questions
     this.content = '';
     this.questions = [];
     this.currentQuestionIndex = 0;
     this.selectedAnswers = {};
-
-    // View flags
     this.hasStarted = false;
     this.showCongrats = false;
-
-    // UX flags
-    this.isGenerateDisabled = false;          // allow new passage generation
-    this.isGenerateQuestionDisabled = true;   // disabled until a passage exists
+    this.isGenerateDisabled = false;
+    this.isGenerateQuestionDisabled = true;
     this.isGeneratingContent = false;
     this.loadingQuestions = false;
     this.showPopup = false;
     this.errorMessage = '';
-
-    // Score
     this.scoreCorrect = 0;
     this.scoreTotal = 0;
   }
 
-  /** Return from MCQ to passage view. */
   goBack(): void {
-    this.hasStarted = false;              // return to passage view
-    this.refreshGenerateQuestionsState(); // passage exists → enable button
+    this.hasStarted = false;
+    this.refreshGenerateQuestionsState();
   }
 
-  /** Open suggestions for current difficulty. */
   openSuggestions(): void {
     this.filterSuggestions();
     this.showSuggestions = true;
     this.activeIndex = -1;
   }
 
-  /** Update suggestions on typing. */
   onTyping(): void {
     this.filterSuggestions();
     this.showSuggestions = true;
     this.activeIndex = -1;
   }
 
-  /** Handle suggestion keyboard navigation. */
   onKeydown(event: KeyboardEvent): void {
     if (!this.showSuggestions || !this.filteredSuggestions.length) return;
     if (event.key === 'ArrowDown') {
@@ -332,17 +275,14 @@ export class ReadingComponent {
     }
   }
 
-  /** Choose a suggestion and close list. */
   selectSuggestion(val: string): void {
     this.topic = val || '';
     this.showSuggestions = false;
     this.isGenerateDisabled = false;
   }
 
-  /** Hide suggestions after blur. */
   hideSuggestionsWithDelay(): void { setTimeout(() => (this.showSuggestions = false), 120); }
 
-  /** Internal: filter topics based on query+level. */
   private filterSuggestions(): void {
     const q = (this.topic || '').toLowerCase().trim();
     const pool = this.topicsByDifficulty[this.difficulty || 'medium'] || [];
@@ -350,7 +290,6 @@ export class ReadingComponent {
       : pool.slice(0, 12);
   }
 
-  /** Clear topic and reopen suggestions. */
   onClearTopic(): void {
     this.topic = '';
     this.errorMessage = '';
@@ -359,7 +298,6 @@ export class ReadingComponent {
     this.isGenerateDisabled = false;
   }
 
-  /** Change difficulty and refresh suggestions. */
   onDifficultyChange(val: string): void {
     this.difficulty = (val || '') as any;
     if (!this.difficulty) {
@@ -373,19 +311,15 @@ export class ReadingComponent {
     this.activeIndex = -1;
   }
 
-  /** Apply font size CSS variable. */
   applyFont(): void {
     document.documentElement.style.setProperty('--passage-font', `${this.fontPx}px`);
     localStorage.setItem('passageFontPx', String(this.fontPx));
   }
 
-  /** Decrease font size (min 14px). */
   decreaseFont(): void { this.fontPx = Math.max(14, this.fontPx - 2); this.applyFont(); }
 
-  /** Increase font size (max 30px). */
   increaseFont(): void { this.fontPx = Math.min(30, this.fontPx + 2); this.applyFont(); }
 
-  /** Init defaults for the screen. */
   private initState(): void {
     this.hasStarted = false;
     this.isGeneratingContent = false;
@@ -407,10 +341,8 @@ export class ReadingComponent {
     this.applyFont();
   }
 
-  /** Lifecycle hook to set initial UI. */
   ngOnInit(): void { this.initState(); }
 
-  /** Build safe HTML for passage body. */
   transformContent(raw: string): string {
     try {
       const passage = this.extractPassage(raw);
@@ -421,7 +353,6 @@ export class ReadingComponent {
     }
   }
 
-  /** Extract text between "Passage:" and "Summary:". */
   private extractPassage(raw: string): string {
     if (!raw) return '';
     const p = raw.indexOf('Passage:');
@@ -431,12 +362,10 @@ export class ReadingComponent {
     return slice.trim();
   }
 
-  /** Minimal HTML escape. */
   private escapeHtml(s: string): string {
     return s.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;');
   }
 
-  /** Toggle speech synthesis for the passage. */
   toggleReadAloud(): void {
     if (!this.content || typeof window === 'undefined' || !('speechSynthesis' in window)) {
       this.errorMessage = 'Read Aloud is not supported in this browser.';
@@ -444,11 +373,9 @@ export class ReadingComponent {
       return;
     }
     const synth = window.speechSynthesis;
-
     if (this.isReading && !synth.paused) { synth.pause(); this.isReading = false; this.ttsPaused = true; return; }
     if (this.ttsPaused) { synth.resume(); this.isReading = true; this.ttsPaused = false; return; }
-
-    this.stopReadAloud(); // fresh start
+    this.stopReadAloud();
     const text = this.extractPassage(this.content) || this.content;
     const u = new SpeechSynthesisUtterance(text);
     u.rate = 1.0; u.pitch = 1.0; u.lang = 'en-US';
@@ -459,7 +386,6 @@ export class ReadingComponent {
     this.isReading = true;
   }
 
-  /** Stop speech and clear flags. */
   stopReadAloud(): void {
     if (typeof window !== 'undefined' && 'speechSynthesis' in window) {
       window.speechSynthesis.cancel();
@@ -469,58 +395,41 @@ export class ReadingComponent {
     this.ttsUtterance = undefined;
   }
 
-
-
-
-
-  // add inside the component class
   showCongrats = false;
   scoreCorrect = 0;
-  
   private confettiInterval: any = null;
-
-  // scoreCorrect: number = 0;  // Correct answers
-  scoreTotal: number = 3;    // Total number of questions
+  scoreTotal: number = 3;
   congratsTitle: string = '';
   congratsMessage: string = '';
 
   scheduleCongratsIfLast(): void {
-    // must be last question AND already marked as checked
     const isLast = this.currentQuestionIndex === this.questions.length - 1;
     const curr = this.questions[this.currentQuestionIndex];
     if (!isLast || !curr?.isChecked) return;
-
-    // small delay so learners can see the final green/red states first
     setTimeout(() => {
       const { correct, total } = this.computeScore();
       this.scoreCorrect = correct;
       this.scoreTotal = total;
-
-      // Determine message based on score
       if (this.scoreCorrect === this.scoreTotal) {
-        this.showCongratsMessage("🎉 Congratulations 🎉", "You have completed all questions with a perfect score!");
+        this.showCongratsMessage('🎉 Congratulations 🎉', 'You have completed all questions with a perfect score!');
       } else if (this.scoreCorrect > 0) {
-        this.showCongratsMessage("Good Job!", "You did well, but there is room for improvement.");
+        this.showCongratsMessage('Good Job!', 'You did well, but there is room for improvement.');
       } else {
-        this.showCongratsMessage("Keep Trying!", "Don't give up, try again!");
+        this.showCongratsMessage('Keep Trying!', "Don't give up, try again!");
       }
-
       this.showCongrats = true;
-      this.triggerConfetti(); // Assuming this is a method that triggers confetti animation.
+      this.triggerConfetti();
     }, 800);
   }
 
-  // Helper function to show the appropriate congratulatory message
   showCongratsMessage(title: string, message: string) {
     this.congratsTitle = title;
     this.congratsMessage = message;
   }
-  /** Compute score without altering validation code. */
+
   private computeScore(): { correct: number; total: number } {
     let correct = 0;
     const total = this.questions.length;
-
-    // Uses your existing structures: selectedAnswers[...] and question.correct_answer
     for (const q of this.questions) {
       const chosen = this.selectedAnswers[q.question];
       if (chosen && chosen === q.correct_answer) correct++;
@@ -528,10 +437,8 @@ export class ReadingComponent {
     return { correct, total };
   }
 
-
   private triggerConfetti(): void {
     if (this.confettiInterval) clearInterval(this.confettiInterval);
-
     this.confettiInterval = setInterval(() => {
       confetti({
         startVelocity: 30,
@@ -551,48 +458,28 @@ export class ReadingComponent {
     if (canvas) canvas.remove();
   }
 
-
-
   startOver(): void {
     this.stopConfetti();
     this.showCongrats = false;
-    this.resetAll();     // use your current reset method
+    this.resetAll();
   }
 
-
   ngOnDestroy(): void {
-
     this.stopConfetti();
   }
-  // optional: if you want a short “Validating…” state on the button
+
   isValidating = false;
-  /** Called by the template. Keeps existing validation, then schedules the final modal if last. */
   validateAnswer(): void {
-    // OPTIONAL: short “validating” hold on the button (remove if not needed)
     this.isValidating = true;
     setTimeout(() => (this.isValidating = false), 300);
-
-    // 👉 IMPORTANT:
-    // If you already have a function that validates/marks the current question, call it here.
-    // Example:
-    // this.checkAnswer();            // or
-    // this.markCurrentAsChecked();   // or your own method
-    // If you do not have one, the fallback below will simply mark the current question as checked.
-
     const curr = this.questions?.[this.currentQuestionIndex];
     if (curr && this.selectedAnswers?.[curr.question]) {
-      curr.isChecked = true; // fallback mark; harmless if your own method did it already
+      curr.isChecked = true;
     }
-
-    // After the question has been marked, if it is the last, open the modal
     this.scheduleCongratsIfLast();
   }
 
-
-  /** Enable/disable "Generate Questions" based on whether a passage exists */
   private refreshGenerateQuestionsState(): void {
     this.isGenerateQuestionDisabled = !(this.content && this.content.trim().length > 0);
   }
-
-
 }

src/app/vocabulary-builder/vocabulary-builder.component.css

@@ -1 +1 @@
-
  margin-top: 1rem;
  padding: 1rem;
  background-color: #f0f4f8;
  border-radius: 8px;
  border: 1px solid #cdd5df;
  background: rgba(255, 255, 255, 0.9);
  width: 80vw;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  height: 66vh;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: 4vw;
  gap: 2vw;
  background-color: #fff;
  border: 10px solid #009688;
  border-radius: 1vw;
  box-shadow: 0 0.4vw 0.8vw rgba(0, 0, 0, 0.6);
  margin: 2vw auto;
  max-width: 90%;
  display: flex;
  align-items: center;
  gap: 4vw;
  width: 50%;
  font-size: 2.5vw;
  font-weight: 800;
  color: #006780;
  margin-bottom: 20px;
  text-align: center;
  width: 100%;
  height: auto;
  border-radius: 10px;
  width: 66%;
  .description-container p {
    font-size: 1.4vw;
    margin-bottom: 30px;
    text-align: justify;
  }
  position: relative;
  border-radius: 0.5vw;
  font-size: 1.5vw;
  transition: background-color 0.3s;
  width: auto;
  font-weight: bold;
  background-color: #006780;
  border: none;
  color: white;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
  min-width: 5vw;
  height: 2.9vw;
  margin-top: 1.5vw;
  .validate-button:hover {
    background-color: #bdc3c7;
    box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24),0 17px 50px 0 rgba(0,0,0,0.19);
  }
  .validate-button:disabled {
    background-color: #ccc;
    cursor: not-allowed;
  }
  position: absolute;
  border-radius: 0.5vw;
  font-size: 1.5vw;
  transition: background-color 0.3s;
  font-weight: bold;
  background-color: #006780;
  border: none;
  color: white;
  left: 50%;
  text-decoration: none;
  transform: translateX(-50%);
  padding: 0.5vw;
  .submit-button:hover {
    background-color: #bdc3c7;
    box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24),0 17px 50px 0 rgba(0,0,0,0.19);
  }
  .submit-button:disabled {
    background-color: #ccc;
    cursor: not-allowed;
  }
  background: rgba(255, 255, 255, 0.9);
  padding: 2vw;
  border-radius: 1vw;
  box-shadow: 0 0.4vw 0.8vw rgba(0, 0, 0, 0.6);
  width: 80vw;
  position: absolute;
  top: 54%;
  left: 50%;
  transform: translate(-50%, -50%);
  height: 70vh;
  border: 10px solid #009688;
  background-color: #fff;
  .card2 .content-container {
    display: flex;
    justify-content: space-around;
    align-items: center;
    height: 100%;
  }
  max-width: 100%;
  height: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  width: 50%;
  .word-container h2 {
    font-size: 2.5rem;
    font-weight: bold;
    color: #333;
    margin-top: 2.7vw;
  }
  width: 45%;
  text-align: center;
  padding: 20px;
  background: rgba(255, 255, 255, 0.7);
  border-radius: 10px;
  box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.2);
  margin-right: 4vw;
  font-size: 1.2vw;
  margin-bottom: 20px;
  font-weight: 700;
  display: flex;
  flex-direction: column;
  align-items: center;
  background-color: #ccc;
  color: white;
  padding: 12px 24px;
  border-radius: 5px;
  cursor: pointer;
  font-size: 1.2rem;
  margin: 10px;
  width: 80%;
  transition: background-color 0.3s ease;
  background-color: #ffffff;
  color: #333;
  border: 2px solid #000000;
  font-size: 1.1vw;
  border-radius: 3vw;
  transition: all 0.3s ease;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: -1px 1vw 0.5vw rgb(0 0 0 / 13%);
  height: 100%;
  text-align: center;
  white-space: normal;
  word-break: break-word;
  width: 21vw;
  /* Make state classes override :hover */
  .option-btn.correct,
  .option-btn.incorrect,
  .option-btn.selected {
    position: relative; /* keeps layout stable */
  }
    /* Correct = green (state wins even on hover) */
    .option-btn.correct,
    .option-btn.correct:hover {
      background: #e8f7ed; /* soft green */
      border-color: #22c55e; /* green-500 */
      color: #14532d; /* dark green text */
    }
    /* Incorrect = red (state wins even on hover) */
    .option-btn.incorrect,
    .option-btn.incorrect:hover {
      background: #fee2e2; /* soft red */
      border-color: #ef4444; /* red-500 */
      color: #7f1d1d; /* dark red text */
    }
    /* Selected (pre-validation) = blue (state wins even on hover) */
    .option-btn.selected,
    .option-btn.selected:hover {
      background: #e0f2fe; /* soft blue */
      border-color: #3b82f6; /* blue-500 */
      color: #0c4a6e; /* dark blue text */
    }
  /* Default hover only when no state class is present */
  .option-btn:not(.selected):not(.correct):not(.incorrect):hover {
    background: #f3f4f6; /* light grey hover */
  }
  /* Optional: disabled look still visible */
  .option-btn.disabled,
  .option-btn:disabled {
    cursor: not-allowed;
    filter: grayscale(10%);
  }
  .option-btn.picked {
    outline: 2px dashed rgba(0,0,0,0.25);
    outline-offset: 2px;
  }
  margin-left: 8px;
  padding: 2px 8px;
  border-radius: 12px;
  font-size: 12px;
  background: rgba(0,0,0,0.06);
  background: rgba(255, 255, 255, 0.9);
  padding: 2vw;
  border-radius: 1vw;
  box-shadow: 0 0.4vw 0.8vw rgba(0, 0, 0, 0.6);
  width: 80vw;
  position: absolute;
  top: 54%;
  left: 50%;
  transform: translate(-50%, -50%);
  height: 70vh;
  border: 10px solid #009688;
  background-color: #fff;
  list-style-type: disc;
  padding: 0 5vw;
  color: #000000;
  overflow-y: auto;
  height: 18vw;
  font-size: 1.5vw;
  margin-bottom: 30px;
  text-align: justify;
  .feedback-list1 li {
    margin-bottom: 10px;
    line-height: 1.5;
    display: list-item;
  }
  list-style-type: none !important;
  text-align: justify;
  height: 20vw;
  overflow-y: auto;
  padding: 0 3vw;
  margin-bottom: 2vw;
  font-size: 1.5vw;
  .feedback-list li {
    margin-bottom: 1vw;
    font-weight: 500;
  }
  color: green;
  color: red;
  0% {
    transform: translate(-50%, -50%) rotate(0deg);
  }
  100% {
    transform: translate(-50%, -50%) rotate(360deg);
  }
  background: rgba(255, 255, 255, 0.9);
  padding: 2vw;
  border-radius: 1vw;
  box-shadow: 0 0.4vw 0.8vw rgba(0, 0, 0, 0.6);
  width: 80vw;
  position: absolute;
  top: 54%;
  left: 50%;
  transform: translate(-50%, -50%);
  height: 70vh;
  border: 10px solid #009688;
  background-color: #fff;
  resize: none
  font-size: 1.8vw;
  text-align: center;
  margin-bottom: 20px;
  color: #006780;
  font-weight: 600;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 80%;
  max-width: 600px;
  margin-bottom: 20px;
  .card4 .sentence-input-group label {
    font-weight: bold;
    text-align: left;
    width: 30%;
    font-size: 1.7vw;
  }
  .card4 .sentence-input-group .input-group {
    width: 60%;
  }
  .card4 .sentence-input-group textarea {
    width: 138%;
    height: 100%;
    font-size: 1.4rem;
    border: 2px solid #006780;
    font-family: Arial, sans-serif;
    border-radius: 8px;
    padding: 0.4vw;
  }
    .card4 .sentence-input-group textarea:focus {
      outline: none;
      border: 1px solid #007bff;
    }
  background: rgba(255, 255, 255, 0.9);
  padding: 2vw;
  border-radius: 1vw;
  box-shadow: 0 0.4vw 0.8vw rgba(0, 0, 0, 0.6);
  width: 80vw;
  position: absolute;
  top: 54%;
  left: 50%;
  transform: translate(-50%, -50%);
  height: 70vh;
  border: 10px solid #009688;
  background-color: #fff;
  .card5 .feedback-text {
    font-size: 1.8vw;
    font-weight: 600;
    color: #333;
    margin-top: 1vw;
    word-wrap: break-word;
    max-height: 400px;
    overflow-y: auto;
    padding-left: 20px;
    padding-right: 20px;
    text-align: justify;
    margin-bottom: 1vw;
  }
  position: absolute;
  top: 1vw;
  left: 2vw;
  color: #007bff;
  font-size: 24px;
  width: 5vw;
  cursor: pointer;
  transition: transform 0.2s ease-in-out;
  .back-icon:hover {
    transform: scale(1.1);
    color: #0056b3;
  }
  .back-icon img {
    width: 30px;
    height: auto;
    cursor: pointer;
  }
  position: absolute;
  top: -1vw;
  right: -1.4vw;
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #009688;
  color: #0f172a;
  border: 4px solid #009688;
  font-size: 18px;
  font-weight: 800;
  cursor: pointer;
  box-shadow: 0 4px 10px rgba(0, 0, 0, .15);
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
  z-index: 10;
  .icon-btn1:hover {
    transform: scale(1.06);
    box-shadow: 0 6px 14px rgba(0,0,0,.22);
    background: #f7fafc;
  }
  .icon-btn1:active {
    transform: scale(0.98);
  }
  .icon-btn1 {
    width: 50px;
    height: 50px;
    font-size: 20px;
  }
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
  font-size: 15px;
  width: 1.5em;
  height: 1.5em;
  border-radius: 50%;
  position: relative;
  text-indent: -9999em;
  animation: mulShdSpin 1.1s infinite ease;
  transform: translateZ(0);
  0%, 100% {
    box-shadow: 0em -3em 0em 0em #808080, 2.2em -2.2em 0 0em rgba(128, 128, 128, 0.2), 3em 0em 0 0em rgba(128, 128, 128, 0.2), 2.2em 2.2em 0 0em rgba(128, 128, 128, 0.2), 0em 3em 0 0em rgba(128, 128, 128, 0.2), -2.2em 2.2em 0 0em rgba(128, 128, 128, 0.2), -3em 0em 0 0em rgba(128, 128, 128, 0.5), -2.2em -2.2em 0 0em rgba(128, 128, 128, 0.7);
  }
  12.5% {
    box-shadow: 0em -3em 0em 0em rgba(128, 128, 128, 0.7), 2.2em -2.2em 0 0em #808080, 3em 0em 0 0em rgba(128, 128, 128, 0.2), 2.2em 2.2em 0 0em rgba(128, 128, 128, 0.2), 0em 3em 0 0em rgba(128, 128, 128, 0.2), -2.2em 2.2em 0 0em rgba(128, 128, 128, 0.2), -3em 0em 0 0em rgba(128, 128, 128, 0.2), -2.2em -2.2em 0 0em rgba(128, 128, 128, 0.5);
  }
  25% {
    box-shadow: 0em -3em 0em 0em rgba(128, 128, 128, 0.5), 2.2em -2.2em 0 0em rgba(128, 128, 128, 0.7), 3em 0em 0 0em #808080, 2.2em 2.2em 0 0em rgba(128, 128, 128, 0.2), 0em 3em 0 0em rgba(128, 128, 128, 0.2), -2.2em 2.2em 0 0em rgba(128, 128, 128, 0.2), -3em 0em 0 0em rgba(128, 128, 128, 0.2), -2.2em -2.2em 0 0em rgba(128, 128, 128, 0.2);
  }
  37.5% {
    box-shadow: 0em -3em 0em 0em rgba(128, 128, 128, 0.2), 2.2em -2.2em 0 0em rgba(128, 128, 128, 0.5), 3em 0em 0 0em rgba(128, 128, 128, 0.7), 2.2em 2.2em 0 0em #808080, 0em 3em 0 0em rgba(128, 128, 128, 0.2), -2.2em 2.2em 0 0em rgba(128, 128, 128, 0.2), -3em 0em 0 0em rgba(128, 128, 128, 0.2), -2.2em -2.2em 0 0em rgba(128, 128, 128, 0.2);
  }
  50% {
    box-shadow: 0em -3em 0em 0em rgba(128, 128, 128, 0.2), 2.2em -2.2em 0 0em rgba(128, 128, 128, 0.2), 3em 0em 0 0em rgba(128, 128, 128, 0.5), 2.2em 2.2em 0 0em rgba(128, 128, 128, 0.7), 0em 3em 0 0em #808080, -2.2em 2.2em 0 0em rgba(128, 128, 128, 0.2), -3em 0em 0 0em rgba(128, 128, 128, 0.2), -2.2em -2.2em 0 0em rgba(128, 128, 128, 0.2);
  }
  62.5% {
    box-shadow: 0em -3em 0em 0em rgba(128, 128, 128, 0.2), 2.2em -2.2em 0 0em rgba(128, 128, 128, 0.2), 3em 0em 0 0em rgba(128, 128, 128, 0.2), 2.2em 2.2em 0 0em rgba(128, 128, 128, 0.5), 0em 3em 0 0em rgba(128, 128, 128, 0.7), -2.2em 2.2em 0 0em #808080, -3em 0em 0 0em rgba(128, 128, 128, 0.2), -2.2em -2.2em 0 0em rgba(128, 128, 128, 0.2);
  }
  75% {
    box-shadow: 0em -3em 0em 0em rgba(128, 128, 128, 0.2), 2.2em -2.2em 0 0em rgba(128, 128, 128, 0.2), 3em 0em 0 0em rgba(128, 128, 128, 0.2), 2.2em 2.2em 0 0em rgba(128, 128, 128, 0.2), 0em 3em 0 0em rgba(128, 128, 128, 0.5), -2.2em 2.2em 0 0em rgba(128, 128, 128, 0.7), -3em 0em 0 0em #808080, -2.2em -2.2em 0 0em rgba(128, 128, 128, 0.2);
  }
  87.5% {
    box-shadow: 0em -3em 0em 0em rgba(128, 128, 128, 0.2), 2.2em -2.2em 0 0em rgba(128, 128, 128, 0.2), 3em 0em 0 0em rgba(128, 128, 128, 0.2), 2.2em 2.2em 0 0em rgba(128, 128, 128, 0.2), 0em 3em 0 0em rgba(128, 128, 128, 0.2), -2.2em 2.2em 0 0em rgba(128, 128, 128, 0.5), -3em 0em 0 0em rgba(128, 128, 128, 0.7), -2.2em -2.2em 0 0em #808080;
  }
+.card1 {
  background: rgba(255, 255, 255, 0.9);
  width: 80vw;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  height: 66vh;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: 4vw;
  gap: 2vw;
  background-color: #fff;
  border: 10px solid var(--main-accent-color);
  border-radius: 1vw;
  box-shadow: 0 0.4vw 0.8vw rgba(0, 0, 0, 0.6);
  margin: 2vw auto;
  max-width: 90%;
  display: flex;
  align-items: center;
  gap: 4vw;
  width: 50%;
  font-size: 2.5vw;
  font-weight: 800;
  color: #006780;
  margin-bottom: 20px;
  text-align: center;
  width: 100%;
  height: auto;
  border-radius: 10px;
  width: 66%;
  .description-container p {
    font-size: 1.4vw;
    margin-bottom: 30px;
    text-align: justify;
  }
  position: relative;
  border-radius: 0.5vw;
  font-size: 1.5vw;
  transition: background-color 0.3s;
  width: auto;
  font-weight: bold;
  background-color: #006780;
  border: none;
  color: white;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
  min-width: 5vw;
  height: 2.9vw;
  margin-top: 1.5vw;
  .validate-button:hover {
    background-color: #bdc3c7;
    box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24),0 17px 50px 0 rgba(0,0,0,0.19);
  }
  .validate-button:disabled {
    background-color: #ccc;
    cursor: not-allowed;
  }
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(255, 255, 255, 0.9);
  padding: 2vw;
  border-radius: 1vw;
  box-shadow: 0 0.4vw 0.8vw rgba(0, 0, 0, 0.6);
  width: 80vw;
  position: absolute;
  top: 54%;
  left: 50%;
  transform: translate(-50%, -50%);
  height: 70vh;
  border: 10px solid var(--main-accent-color);
  background-color: #fff;
  .card2 .content-container {
    display: flex;
    justify-content: space-around;
    align-items: center;
    height: 100%;
  }
  max-width: 100%;
  height: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  width: 50%;
  .word-container h2 {
    font-size: 2.5rem;
    font-weight: bold;
    color: #333;
    margin-top: 2.7vw;
  }
  width: 45%;
  text-align: center;
  padding: 20px;
  background: rgba(255, 255, 255, 0.7);
  border-radius: 10px;
  box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.2);
  margin-right: 4vw;
  font-size: 1.2vw;
  margin-bottom: 20px;
  font-weight: 700;
  display: flex;
  flex-direction: column;
  align-items: center;
  background-color: #ccc;
  color: white;
  padding: 12px 24px;
  border-radius: 5px;
  cursor: pointer;
  font-size: 1.2rem;
  margin: 10px;
  width: 80%;
  transition: background-color 0.3s ease;
  background-color: #ffffff;
  color: #333;
  border: 2px solid #000000;
  font-size: 1.1vw;
  border-radius: 3vw;
  transition: all 0.3s ease;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: -1px 1vw 0.5vw rgb(0 0 0 / 13%);
  height: 100%;
  text-align: center;
  white-space: normal;
  word-break: break-word;
  width: 21vw;
  .option-btn.correct,
  .option-btn.correct:hover {
    background: #e8f7ed;
    border-color: #22c55e;
    color: #14532d;
  }
  .option-btn.incorrect,
  .option-btn.incorrect:hover {
    background: #fee2e2;
    border-color: #ef4444;
    color: #7f1d1d;
  }
  .option-btn.selected,
  .option-btn.selected:hover {
    background: #e0f2fe;
    border-color: #3b82f6;
    color: #0c4a6e;
  }
  .option-btn:not(.selected):not(.correct):not(.incorrect):hover {
    background: #f3f4f6;
  }
  .option-btn.disabled,
  .option-btn:disabled {
    cursor: not-allowed;
    filter: grayscale(10%);
  }
  .option-btn.picked {
    outline: 2px dashed rgba(0,0,0,0.25);
    outline-offset: 2px;
  }
  margin-left: 8px;
  padding: 2px 8px;
  border-radius: 12px;
  font-size: 12px;
  background: rgba(0,0,0,0.06);
  background: rgba(255, 255, 255, 0.9);
  padding: 2vw;
  border-radius: 1vw;
  box-shadow: 0 0.4vw 0.8vw rgba(0, 0, 0, 0.6);
  width: 80vw;
  position: absolute;
  top: 54%;
  left: 50%;
  transform: translate(-50%, -50%);
  height: 70vh;
  border: 10px solid var(--main-accent-color);
  background-color: #fff;
  list-style-type: disc;
  padding: 0 5vw;
  color: #000000;
  overflow-y: auto;
  height: 18vw;
  font-size: 1.5vw;
  margin-bottom: 30px;
  text-align: justify;
  .feedback-list1 li {
    margin-bottom: 10px;
    line-height: 1.5;
    display: list-item;
  }
  list-style-type: none !important;
  text-align: justify;
  height: 20vw;
  overflow-y: auto;
  padding: 0 3vw;
  margin-bottom: 2vw;
  font-size: 1.5vw;
  .feedback-list li {
    margin-bottom: 1vw;
    font-weight: 500;
  }
  color: green;
  color: red;
  background: rgba(255, 255, 255, 0.9);
  padding: 2vw;
  border-radius: 1vw;
  box-shadow: 0 0.4vw 0.8vw rgba(0, 0, 0, 0.6);
  width: 80vw;
  position: absolute;
  top: 54%;
  left: 50%;
  transform: translate(-50%, -50%);
  height: 70vh;
  border: 10px solid var(--main-accent-color);
  background-color: #fff;
  resize: none
  font-size: 1.8vw;
  text-align: center;
  margin-bottom: 20px;
  color: #006780;
  font-weight: 600;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 80%;
  max-width: 600px;
  margin-bottom: 20px;
  .card4 .sentence-input-group label {
    font-weight: bold;
    text-align: left;
    width: 30%;
    font-size: 1.7vw;
  }
  .card4 .sentence-input-group .input-group {
    width: 60%;
  }
  .card4 .sentence-input-group textarea {
    width: 138%;
    height: 100%;
    font-size: 1.4rem;
    border: 2px solid #006780;
    font-family: Arial, sans-serif;
    border-radius: 8px;
    padding: 0.4vw;
  }
    .card4 .sentence-input-group textarea:focus {
      outline: none;
      border: 1px solid #007bff;
    }
  background: rgba(255, 255, 255, 0.9);
  padding: 2vw;
  border-radius: 1vw;
  box-shadow: 0 0.4vw 0.8vw rgba(0, 0, 0, 0.6);
  width: 80vw;
  position: absolute;
  top: 54%;
  left: 50%;
  transform: translate(-50%, -50%);
  height: 70vh;
  border: 10px solid var(--main-accent-color);
  background-color: #fff;
  .card5 .feedback-text {
    font-size: 1.8vw;
    font-weight: 600;
    color: #333;
    margin-top: 1vw;
    word-wrap: break-word;
    max-height: 400px;
    overflow-y: auto;
    padding-left: 20px;
    padding-right: 20px;
    text-align: justify;
    margin-bottom: 1vw;
  }
  position: absolute;
  top: 1vw;
  left: 2vw;
  color: #007bff;
  font-size: 24px;
  width: 5vw;
  cursor: pointer;
  transition: transform 0.2s ease-in-out;
  .back-icon:hover {
    transform: scale(1.1);
    color: #0056b3;
  }
  .back-icon img {
    width: 30px;
    height: auto;
    cursor: pointer;
  }
  top: -1vw;
  right: -1.4vw;
  .icon-btn1 {
    width: 50px;
    height: 50px;
    font-size: 20px;
  }
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
  font-size: 15px;
  width: 1.5em;
  height: 1.5em;
  border-radius: 50%;
  position: relative;
  text-indent: -9999em;
  animation: mulShdSpin 1.1s infinite ease;
  transform: translateZ(0);
  0%, 100% {
    box-shadow: 0em -3em 0em 0em #808080, 2.2em -2.2em 0 0em rgba(128, 128, 128, 0.2), 3em 0em 0 0em rgba(128, 128, 128, 0.2), 2.2em 2.2em 0 0em rgba(128, 128, 128, 0.2), 0em 3em 0 0em rgba(128, 128, 128, 0.2), -2.2em 2.2em 0 0em rgba(128, 128, 128, 0.2), -3em 0em 0 0em rgba(128, 128, 128, 0.5), -2.2em -2.2em 0 0em rgba(128, 128, 128, 0.7);
  }
  12.5% {
    box-shadow: 0em -3em 0em 0em rgba(128, 128, 128, 0.7), 2.2em -2.2em 0 0em #808080, 3em 0em 0 0em rgba(128, 128, 128, 0.2), 2.2em 2.2em 0 0em rgba(128, 128, 128, 0.2), 0em 3em 0 0em rgba(128, 128, 128, 0.2), -2.2em 2.2em 0 0em rgba(128, 128, 128, 0.2), -3em 0em 0 0em rgba(128, 128, 128, 0.2), -2.2em -2.2em 0 0em rgba(128, 128, 128, 0.5);
  }
  25% {
    box-shadow: 0em -3em 0em 0em rgba(128, 128, 128, 0.5), 2.2em -2.2em 0 0em rgba(128, 128, 128, 0.7), 3em 0em 0 0em #808080, 2.2em 2.2em 0 0em rgba(128, 128, 128, 0.2), 0em 3em 0 0em rgba(128, 128, 128, 0.2), -2.2em 2.2em 0 0em rgba(128, 128, 128, 0.2), -3em 0em 0 0em rgba(128, 128, 128, 0.2), -2.2em -2.2em 0 0em rgba(128, 128, 128, 0.2);
  }
  37.5% {
    box-shadow: 0em -3em 0em 0em rgba(128, 128, 128, 0.2), 2.2em -2.2em 0 0em rgba(128, 128, 128, 0.5), 3em 0em 0 0em rgba(128, 128, 128, 0.7), 2.2em 2.2em 0 0em #808080, 0em 3em 0 0em rgba(128, 128, 128, 0.2), -2.2em 2.2em 0 0em rgba(128, 128, 128, 0.2), -3em 0em 0 0em rgba(128, 128, 128, 0.2), -2.2em -2.2em 0 0em rgba(128, 128, 128, 0.2);
  }
  50% {
    box-shadow: 0em -3em 0em 0em rgba(128, 128, 128, 0.2), 2.2em -2.2em 0 0em rgba(128, 128, 128, 0.2), 3em 0em 0 0em rgba(128, 128, 128, 0.5), 2.2em 2.2em 0 0em rgba(128, 128, 128, 0.7), 0em 3em 0 0em #808080, -2.2em 2.2em 0 0em rgba(128, 128, 128, 0.2), -3em 0em 0 0em rgba(128, 128, 128, 0.2), -2.2em -2.2em 0 0em rgba(128, 128, 128, 0.2);
  }
  62.5% {
    box-shadow: 0em -3em 0em 0em rgba(128, 128, 128, 0.2), 2.2em -2.2em 0 0em rgba(128, 128, 128, 0.2), 3em 0em 0 0em rgba(128, 128, 128, 0.2), 2.2em 2.2em 0 0em rgba(128, 128, 128, 0.5), 0em 3em 0 0em rgba(128, 128, 128, 0.7), -2.2em 2.2em 0 0em #808080, -3em 0em 0 0em rgba(128, 128, 128, 0.2), -2.2em -2.2em 0 0em rgba(128, 128, 128, 0.2);
  }
  75% {
    box-shadow: 0em -3em 0em 0em rgba(128, 128, 128, 0.2), 2.2em -2.2em 0 0em rgba(128, 128, 128, 0.2), 3em 0em 0 0em rgba(128, 128, 128, 0.2), 2.2em 2.2em 0 0em rgba(128, 128, 128, 0.2), 0em 3em 0 0em rgba(128, 128, 128, 0.5), -2.2em 2.2em 0 0em rgba(128, 128, 128, 0.7), -3em 0em 0 0em #808080, -2.2em -2.2em 0 0em rgba(128, 128, 128, 0.2);
  }
  87.5% {
    box-shadow: 0em -3em 0em 0em rgba(128, 128, 128, 0.2), 2.2em -2.2em 0 0em rgba(128, 128, 128, 0.2), 3em 0em 0 0em rgba(128, 128, 128, 0.2), 2.2em 2.2em 0 0em rgba(128, 128, 128, 0.2), 0em 3em 0 0em rgba(128, 128, 128, 0.2), -2.2em 2.2em 0 0em rgba(128, 128, 128, 0.5), -3em 0em 0 0em rgba(128, 128, 128, 0.7), -2.2em -2.2em 0 0em #808080;
  }

src/app/vocabulary-builder/vocabulary-builder.component.html

@@ -3,7 +3,6 @@
 
     <app-header [title]="'Vocabulary Builder'"></app-header>
 
-
     <!-- Background Image -->
     <img src="assets/images/grammar-bg.png" alt="Chat Background" class="grammar-bg" />
 
@@ -19,12 +18,11 @@
             Vocabulary Builder is an interactive learning tool designed to help users strengthen their vocabulary in an engaging and structured manner.
             It presents a series of word-based exercises that allow users to learn the meaning and usage of words through intelligent suggestions, related word selections, and sentence formation tasks.
           </p>
-          <button class="submit-button"
-                  (click)="getWords()"
-                  [disabled]="isButtonDisabled || isLoaderVisible"
-                  [class.loading]="isLoaderVisible">
+          <app-button [disabled]="isButtonDisabled || isLoaderVisible"
+                      [ngClass]="{ loading: isLoaderVisible }"
+                      (click)="getWords()">
             <span>Let's Build</span>
-          </button>
+          </app-button>
           <div *ngIf="isLoaderVisible" class="loader-overlay">
             <div class="loader"></div>
           </div>
@@ -35,8 +33,9 @@
     <!-- Step 2: Word Options -->
     <div *ngIf="step === 2" class="card2">
       <img src="assets/images/vocabulary/back.png" alt="Go Back" class="back-icon" (click)="goBack()" />
-      <!-- Top-right close button (NOT on intro/page 1) -->
-      <button class="icon-btn1" (click)="closeToMain()" aria-label="Close">✖</button>
+
+      <button class="user-guide-close-icon" (click)="closeToMain()">×</button>
+
 
 
       <div class="content-container">
@@ -56,31 +55,27 @@
           'correct': optionStates[option] === 'correct',
           'incorrect': optionStates[option] === 'incorrect',
           'picked': isChecked && pickedAtCheck.has(option)
-
         }"
                     [disabled]="(selectedOptions.length === 3 && !selectedOptions.includes(option) && buttonState === 'validate') || buttonState !== 'validate'"
                     (click)="handleOptionClick(option)">
               <span class="label">{{ option }}</span>
               <span *ngIf="isChecked && pickedAtCheck?.has(option)" class="picked-chip"></span>
             </button>
-
-
           </div>
 
-          <button *ngIf="buttonState === 'validate'"
-                  class="validate-button"
-                  [disabled]="!isCheckButtonEnabled || isLoaderVisible"
-                  (click)="checkSelections()">
+          <app-button *ngIf="buttonState === 'validate'"
+                      [disabled]="!isCheckButtonEnabled || isLoaderVisible"
+                      (click)="checkSelections()">
             <span>Validate</span>
-          </button>
+          </app-button>
 
-          <button *ngIf="buttonState === 'next'" class="validate-button" (click)="goNext()">
+          <app-button *ngIf="buttonState === 'next'" (click)="goNext()">
             <span>Next</span>
-          </button>
+          </app-button>
 
-          <button *ngIf="buttonState === 'formSentence'" class="submit-button" (click)="startSentenceFormation()">
+          <app-button *ngIf="buttonState === 'formSentence'" (click)="startSentenceFormation()">
             <span>Form a Sentence</span>
-          </button>
+          </app-button>
 
           <div *ngIf="isLoaderVisible" class="loader-overlay">
             <div class="loader"></div>
@@ -93,7 +88,8 @@
     <div *ngIf="step === 3" class="card3">
       <img src="assets/images/vocabulary/back.png" alt="Go Back" class="back-icon" (click)="goBack()" />
       <!-- Top-right close button (NOT on intro/page 1) -->
-      <button class="icon-btn1" (click)="closeToMain()" aria-label="Close">✖</button>
+      <!--<button class="icon-btn1" (click)="closeToMain()" aria-label="Close">✖</button>-->
+      <button class="user-guide-close-icon" (click)="closeToMain()">×</button>
 
       <h2>Feedback</h2>
       <ul class="feedback-list">
@@ -101,14 +97,14 @@
           <li *ngIf="point.includes('❌')">{{ point }}</li>
         </ng-container>
       </ul>
-      <button class="submit-button" (click)="startSentenceFormation()">Form a Sentence</button>
+      <app-button class="submit-button" (click)="startSentenceFormation()">Form a Sentence</app-button>
     </div>
 
     <!-- Step 4: Sentence Formation -->
     <div *ngIf="step === 4" class="card4">
       <img src="assets/images/vocabulary/back.png" alt="Go Back" class="back-icon" (click)="goBack()" />
       <!-- Top-right close button (NOT on intro/page 1) -->
-      <button class="icon-btn1" (click)="closeToMain()" aria-label="Close">✖</button>
+      <button class="user-guide-close-icon" (click)="closeToMain()">×</button>
 
       <h2>Form a Sentence</h2>
       <p class="correct-answer">Using the words: <strong class="text-green-500">{{ correctOptions.join(', ') }}</strong></p>
@@ -124,11 +120,11 @@
           </div>
         </div>
       </div>
-      <button class="submit-button"
-              [disabled]="!allFieldsFilled() || isLoaderVisible"
-              (click)="checkSentence()">
+      <app-button class="submit-button"
+                  [disabled]="!allFieldsFilled() || isLoaderVisible"
+                  (click)="checkSentence()">
         <span>Check Sentence</span>
-      </button>
+      </app-button>
       <div *ngIf="isLoaderVisible" class="loader-overlay">
         <div class="loader"></div>
       </div>
@@ -138,7 +134,7 @@
     <div *ngIf="step === 5" class="card5">
       <img src="assets/images/vocabulary/back.png" alt="Go Back" class="back-icon" (click)="goBack()" />
       <!-- Top-right close button (NOT on intro/page 1) -->
-      <button class="icon-btn1" (click)="closeToMain()" aria-label="Close">✖</button>
+      <button class="user-guide-close-icon" (click)="closeToMain()">×</button>
 
       <h2 class="feedback-header">Sentence Feedback</h2>
       <ul class="feedback-list1">
@@ -149,7 +145,7 @@
           <span *ngIf="!point.includes('correct answer')">{{ point }}</span>
         </li>
       </ul>
-      <button class="submit-button" (click)="resetQuiz()"> Reset </button>
+      <app-button class="submit-button" (click)="resetQuiz()"> Reset </app-button>
     </div>
 
   </div>

src/app/vocabulary-builder/vocabulary-builder.component.ts

@@ -1,11 +1,17 @@
 import { Component, OnInit, AfterViewInit, ViewChild, ElementRef } from '@angular/core';
 import { VocabularyBuilderService } from './vocabulary-builder.service';
 import { Router } from '@angular/router';
+import { HeaderComponent } from '../shared/header/header.component';
+import { ButtonComponent } from '../shared/button/button.component';
+import { CommonModule } from '@angular/common';
+import { FormsModule } from '@angular/forms';
 
 @Component({
   selector: 'app-vocabulary-builder',
   templateUrl: './vocabulary-builder.component.html',
-  styleUrls: ['./vocabulary-builder.component.css']
+  styleUrls: ['./vocabulary-builder.component.css'],
+  standalone: true,
+  imports: [ButtonComponent, CommonModule, FormsModule, HeaderComponent]
 })
 export class VocabularyBuilderComponent implements OnInit, AfterViewInit {
   @ViewChild('step1', { static: false }) step1?: ElementRef;
@@ -87,19 +93,15 @@ export class VocabularyBuilderComponent implements OnInit, AfterViewInit {
 
     const i = this.selectedOptions.indexOf(option);
     if (i >= 0) {
-      // toggle OFF
       this.selectedOptions.splice(i, 1);
     } else {
-      // do NOT auto-deselect the first; just stop at 3
       if (this.selectedOptions.length >= 3) return;
       this.selectedOptions.push(option);
     }
 
-    // Enable Validate only when exactly 3 selected
     this.isCheckButtonEnabled = this.selectedOptions.length === 3;
   }
 
-
   checkSelections(): void {
     if (this.buttonState === 'next') {
       this.step = 3;
@@ -117,7 +119,6 @@ export class VocabularyBuilderComponent implements OnInit, AfterViewInit {
         this.processFeedback(response.feedback);
         this.isChecked = true;
         this.correctAnswers = response.correctAnswers || [];
-        // ⬇️ INSERT THIS LINE HERE
         this.pickedAtCheck = new Set(this.selectedOptions);
 
         this.optionStates = {};
@@ -305,14 +306,9 @@ export class VocabularyBuilderComponent implements OnInit, AfterViewInit {
     this.buttonState = 'validate';
     this.skipFeedback = false;
     this.pickedAtCheck.clear();
-    // or: this.pickedAtCheck = new Set<string>();
-
   }
 
-
   closeToMain(): void {
-    this.resetQuiz();            // your existing method that sets step = 1 and clears state
-    // If you also want to route away, you can add: this.router.navigate(['/home']);
+    this.resetQuiz();
   }
-
 }

src/app/voice/voice.component.ts

@@ -1,7 +1,10 @@
 import { Component } from '@angular/core';
+import { HeaderComponent } from '../shared/header/header.component';
 
 @Component({
   selector: 'app-voice',
+  standalone: true,
+  imports: [HeaderComponent],
   templateUrl: './voice.component.html',
   styleUrls: ['./voice.component.css']
 })

src/app/writing/writing.component.css

@@ -1,5 +1,3 @@
-
-
 body {
   margin: 0;
   font-family: 'Comic Sans MS', cursive, sans-serif;
@@ -7,12 +5,10 @@ body {
   overflow: hidden;
 }
 
-/*main container */
-
 .main-container {
   width: 85%;
   margin: 7vh auto;
-  border: 9px solid #009688;
+  border: 10px solid var(--main-accent-color);
   border-radius: 1.5vw;
   background: #ffffff;
   padding: 2vw;
@@ -20,9 +16,6 @@ body {
   height: 73vh;
 }
 
-/* Section Layouts */
-
-
 .writing-section {
   display: flex;
   flex-direction: row;
@@ -40,7 +33,7 @@ body {
 }
 
 .intro-left-image {
-  width: 35%; /* increase from default 25% */
+  width: 35%;
 }
 
   .intro-left-image img {
@@ -48,8 +41,6 @@ body {
     height: auto;
   }
 
-
-/* Left Image */
 .left-image {
   width: 25%;
 }
@@ -58,10 +49,8 @@ body {
     width: 100%;
   }
 
-/* Right Content */
 .right-content {
   width: 66%;
-  
 }
 
   .right-content h2 {
@@ -72,18 +61,14 @@ body {
   }
 
   .right-content p {
-    
     font-size: 1.4vw;
-    /*margin-bottom: 30px;*/
     text-align: justify;
   }
 
-/* Dropdown and Buttons */
 .center-controls {
   display: flex;
   flex-direction: row;
   align-items: center;
-  /*justify-content: center;*/
   margin-top: 1vw;
   gap: 1.5vw;
 }
@@ -96,41 +81,12 @@ body {
 
   .center-controls select {
     font-size: 1.4vw;
-    padding: 0.8vw;
+    padding: 0.6vw;
     border-radius: 0.5vw;
     border: 2px solid #009688;
     background-color: #ffffff;
   }
 
-
-
-select,
-button {
-  font-size: 1.2vw;
-  padding: 0.6vw 1.2vw;
-  border-radius: 0.5vw;
-  border: 2px solid #ccc;
-  margin-top: 1vw;
-  margin-right: 1vw;
-}
-
-button {
-  background-color: #006780;
-  color: white;
-  border: none;
-  cursor: pointer;
-  transition: background-color 0.3s;
-  margin-top: 1.5vw;
-  }
-
-  button:disabled {
-    background-color: #ccc !important;
-    color: #666 !important;
-    cursor: not-allowed !important;
-    opacity: 0.6;
-  }
-
-/* Textarea */
 textarea {
   width: 100%;
   height: 14vw;
@@ -145,10 +101,9 @@ textarea {
   background-attachment: local;
 }
 
-/* Submit Area */
 .submit-area {
   text-align: center;
-  
+  margin-top: 1vw;
 }
 
   .submit-area button {
@@ -157,9 +112,6 @@ textarea {
     border-radius: 1vw;
   }
 
-
-
-/* Loader Overlay */
 .loader-overlay {
   position: fixed;
   top: 0;
@@ -217,13 +169,9 @@ textarea {
   }
 }
 
-/*back arrow mark */
-
-
-
 .back-icon {
   position: absolute;
-  top: 10vw;
+  top: 12vw;
   left: 10vw;
   color: #007bff;
   font-size: 24px;
@@ -237,14 +185,12 @@ textarea {
     color: #0056b3;
   }
 
-
   .back-icon img {
     width: 30px;
     height: auto;
     cursor: pointer;
   }
 
-
 .topic-fieldset {
   border: 2px solid #ffc107;
   padding: 1vw;
@@ -271,9 +217,6 @@ textarea {
     font-weight: 900;
   }
 
- /* feedback section*/
-
-
 .feedback-section {
   display: flex;
   flex-direction: column;
@@ -307,8 +250,8 @@ textarea {
   border: 2px dashed #ffca28;
   border-radius: 1vw;
   padding: 2vw 2vw 2vw 2vw;
-  width: 94%;
-  max-height: 23vw;
+  width: 93%;
+  height: 19.5vw;
   overflow-y: scroll;
 }
 
@@ -326,12 +269,11 @@ textarea {
 
 .try-again-button {
   text-align: center;
+  margin-top: 3vw;
 }
 
   .try-again-button button {
     font-size: 1.3vw;
-    /*padding: 0.8vw 2vw;*/
-    
     border: none;
     color: white;
     border-radius: 1vw;
@@ -339,7 +281,6 @@ textarea {
     transition: background-color 0.3s ease;
   }
 
-
 .animated {
   animation: bounce 1s infinite;
 }
@@ -354,8 +295,6 @@ textarea {
   }
 }
 
-
-
 .with-blue-tooltip {
   position: relative;
   display: inline-block;
@@ -386,3 +325,8 @@ textarea {
     border-style: solid;
     border-color: transparent #2196f3 transparent transparent;
   }
+
+.user-guide-close-icon {
+  top: 9vw;
+  right: 7vw;
+}

src/app/writing/writing.component.html

@@ -1,7 +1,6 @@
 <!-- Header container -->
 <app-header [title]="'Writing Exercise'"></app-header>
 
-
 <!-- Background Image -->
 <img src="assets/images/grammar-bg.png" alt="Chat Background" class="grammar-bg" />
 
@@ -32,15 +31,13 @@
           <option value="middle">🧠 Middle</option>
           <option value="upper">🎓 Upper</option>
         </select>
-        <button class="submit-button"
-                (click)="fetchTopic()"
-                [disabled]="isTopicFetching"
-                [class.loading]="isTopicFetching">
+        <app-button [disabled]="isTopicFetching"
+                    [ngClass]="{ loading: isTopicFetching }"
+                    (click)="fetchTopic()">
           <span>Get Topic</span>
-        </button>
+        </app-button>
       </div>
 
-
       <div *ngIf="isLoaderVisible" class="loader-overlay">
         <div class="loader"></div>
       </div>
@@ -49,6 +46,7 @@
 
   <!-- Writing Section -->
   <div class="writing-section" *ngIf="showWriting">
+    <button class="user-guide-close-icon" (click)="goBack('writing')">×</button>
     <img src="assets/images/writing/back.png" alt="Go Back" class="back-icon" (click)="goBack('writing')" />
 
     <div class="left-image">
@@ -61,21 +59,13 @@
       </fieldset>
 
       <textarea [(ngModel)]="userAnswer" placeholder="Write your answer here..." (input)="checkWordCount()"></textarea>
-      <!--<div class="submit-area">
-        <button (click)="submitAnswer()" [disabled]="isSubmitDisabled || isSubmitInProgress">
-          {{ isSubmitInProgress ? 'Submitting...' : 'Submit Writing' }}
-        </button>
-        <div *ngIf="isLoaderVisible" class="loader-overlay">
-          <div class="loader"></div>
-        </div>
-      </div>-->
 
       <div class="submit-area with-blue-tooltip">
-        <button (click)="submitAnswer()"
-                [disabled]="isSubmitDisabled || isSubmitInProgress"
-                [ngClass]="{ 'disabled-btn': isSubmitDisabled }">
+        <app-button [disabled]="isSubmitDisabled || isSubmitInProgress"
+                    [ngClass]="{ 'disabled-btn': isSubmitDisabled }"
+                    (click)="submitAnswer()">
           {{ isSubmitInProgress ? 'Submitting...' : 'Submit Writing' }}
-        </button>
+        </app-button>
         <div *ngIf="isLoaderVisible" class="loader-overlay">
           <div class="loader"></div>
         </div>
@@ -85,11 +75,9 @@
         </div>
       </div>
 
-
     </div>
   </div>
 
-
   <!-- Feedback Section -->
   <div class="feedback-section" *ngIf="showFeedback">
     <img src="assets/images/writing/back.png" alt="Go Back" class="back-icon" (click)="goBack('feedback')" />
@@ -106,10 +94,8 @@
     </div>
 
     <div class="try-again-button">
-      <button (click)="resetForm()">🔄 Try Another</button>
+      <app-button (click)="resetForm()">🔄 Try Another</app-button>
     </div>
   </div>
 
-
-
 </div>

src/app/writing/writing.component.ts

@@ -1,11 +1,17 @@
 import { Component } from '@angular/core';
 import { WritingService } from './writing.service';
 import { Router } from '@angular/router';
+import { HeaderComponent } from '../shared/header/header.component';
+import { ButtonComponent } from '../shared/button/button.component';
+import { CommonModule } from '@angular/common';
+import { FormsModule } from '@angular/forms';
 
 @Component({
   selector: 'app-writing',
   templateUrl: './writing.component.html',
-  styleUrls: ['./writing.component.css']
+  styleUrls: ['./writing.component.css'],
+  standalone: true,
+  imports: [ButtonComponent, CommonModule, FormsModule, HeaderComponent]
 })
 export class WritingComponent {
   gradeLevel = 'lower';
@@ -15,9 +21,9 @@ export class WritingComponent {
   feedback: string | null = null;
   isFeedbackVisible: boolean = false;
   isSubmitDisabled: boolean = true;
-  isTopicFetching: boolean = false; 
-  isLoading: boolean = false; 
-  isSubmitInProgress: boolean = false; 
+  isTopicFetching: boolean = false;
+  isLoading: boolean = false;
+  isSubmitInProgress: boolean = false;
   feedbackList: string[] = [];
   showStarAnimation: boolean = false;
   isLoaderVisible: boolean = false;
@@ -27,7 +33,7 @@ export class WritingComponent {
   showFeedback: boolean = false;
 
   constructor(private writingService: WritingService, private router: Router) { }
-  
+
   fetchTopic(): void {
     this.isLoaderVisible = true;
     this.isTopicFetching = true;
@@ -37,7 +43,7 @@ export class WritingComponent {
     this.showWriting = false;
     this.showIntro = true;
     this.showFeedback = false;
-    this.userAnswer = ''; // ✅ Clear previous answer
+    this.userAnswer = '';
 
     this.writingService.getWritingTopic(this.gradeLevel).subscribe(
       (response) => {
@@ -63,7 +69,6 @@ export class WritingComponent {
     );
   }
 
-
   submitAnswer(): void {
     if (this.userAnswer.trim() === '') {
       this.errorMessage = 'Please write an answer before submitting.';
@@ -79,9 +84,8 @@ export class WritingComponent {
     this.isSubmitInProgress = true;
     this.isLoaderVisible = true;
 
-    // Don't show feedback screen immediately – wait for response
     this.showIntro = false;
-    this.showWriting = true;     // stay in writing section during loader
+    this.showWriting = true;
     this.showFeedback = false;
 
     this.writingService.validateResponse(this.topic, this.userAnswer).subscribe({
@@ -94,7 +98,6 @@ export class WritingComponent {
         this.isSubmitInProgress = false;
         this.isLoaderVisible = false;
 
-        // ✅ Now move to feedback after getting response
         this.showWriting = false;
         this.showFeedback = true;
       },
@@ -110,29 +113,23 @@ export class WritingComponent {
     });
   }
 
-
   checkWordCount(): void {
     setTimeout(() => {
       const wordCount = this.userAnswer.trim().split(/\s+/).length;
-      this.isSubmitDisabled = wordCount < 10; // Enable button if 10+ words
+      this.isSubmitDisabled = wordCount < 10;
     });
   }
 
-  
-
-
-
   resetForm(): void {
-    this.gradeLevel = 'lower';  // Reset grade level to default
-    this.topic = null;          // Clear the topic
-    this.userAnswer = '';       // Clear the answer
-    this.feedback = null;       // Clear feedback
-    this.errorMessage = null;   // Clear errors
-    this.isFeedbackVisible = false; // Hide feedback
-    this.isSubmitDisabled = true;   // Disable submit button
-    this.isTopicFetching = false;   // Re-enable topic selection
-    this.isSubmitInProgress = false; // Enable submit button
-    // UI flags
+    this.gradeLevel = 'lower';
+    this.topic = null;
+    this.userAnswer = '';
+    this.feedback = null;
+    this.errorMessage = null;
+    this.isFeedbackVisible = false;
+    this.isSubmitDisabled = true;
+    this.isTopicFetching = false;
+    this.isSubmitInProgress = false;
     this.showIntro = true;
     this.showWriting = false;
     this.showFeedback = false;
@@ -140,11 +137,9 @@ export class WritingComponent {
 
   goBack(from: string): void {
     if (from === 'writing') {
-      // Go back to Intro
       this.showWriting = false;
       this.showIntro = true;
     } else if (from === 'feedback') {
-      // Go back to Writing
       this.showFeedback = false;
       this.showWriting = true;
     }
@@ -157,7 +152,6 @@ export class WritingComponent {
   goToListening(): void {
     this.router.navigate(['/listening']);
   }
-
 }