Added Logo text and CSS

src/app/chat/chat.component.css

@@ -33,6 +33,10 @@ h1 {
   font-size: 3vw;
   color: white;
   font-family: Super Cartoon;
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
 }
 
 @font-face {
@@ -85,156 +89,6 @@ h1 {
   flex-shrink: 0; /* Prevent shrinking */
 }
 
-/* Wrapper for Message and Profile Picture */
-/*.message-wrapper {
-  display: flex;
-  align-items: flex-start;
-  gap: 1vw;*/ /* Space between profile picture and message */
-  /*margin-bottom: 1.5vw;
-}
-
-.message-wrapper.user {
-  flex-direction: row-reverse;*/ /* User messages on the right */
-  /*text-align: right;
-}*/
-
-/* Profile Picture Styling */
-/*.profile-pic {
-  flex-shrink: 0;
-  width: 4vw;*/ /* Responsive profile picture size */
-  /*height: 4vw;
-  border-radius: 50%;
-  overflow: hidden;
-  background-color: #ddd;*/ /* Fallback color */
-/*}
-
-.profile-pic img {
-  width: 100%;
-  height: 100%;
-  object-fit: cover;*/ /* Ensure image fits nicely */
-/*}*/
-
-/* Message Styles */
-/*.message {
-  max-width: 50vw;*/ /* Adjust message width for smaller screens */
-  /*padding: 1vw 2vw;
-  border-radius: 2vw;
-  font-size: 1.2vw;
-  line-height: 1.5;
-  box-shadow: 0 0.3vw 0.8vw rgba(0, 0, 0, 0.1);
-  animation: fadeIn 0.5s ease;
-}
-
-.message-content {
-  text-align: justify;
-}*/
-
-/* User and AI Message Colors */
-/*.user .message {
-  align-self: flex-end;
-  background: #2b6296;
-  color: white;
-}
-
-.ai .message {
-  align-self: flex-start;*/
-  /* background: #a855f7;*/
-  /* background: #404d95f7;*/
-  /*background: #2b6296;
-  color: white;
-}*/
-
-/* Timestamp Styling */
-/*.message-timestamp {
-  font-size: 1vw;
-  color: rgba(255, 255, 255, 0.8);
-  margin-top: 0.5vw;
-  display: block;
-  text-align: right;
-}*/
-
-/*.typing-indicator {
-  font-style: italic;
-  color: #888;
-  font-size: 1.2vw;
-  text-align: left;
-  margin: 1vw 0;
-  display: flex;
-  align-items: center;
-}*/
-
-  /*.typing-indicator::after {
-    content: "⠿";
-    display: inline-block;
-    font-size: 1.5vw;
-    color: #888;
-    animation: typing-animation 1s infinite;
-  }
-
-@keyframes typing-animation {
-  0% {
-    opacity: 0.2;
-  }
-
-  50% {
-    opacity: 1;
-  }
-
-  100% {
-    opacity: 0.2;
-  }
-}*/
-
-
-
-/* General Flexbox Adjustments */
-/*.chat-box {
-  padding: 2vw;
-  display: flex;
-  flex: 1;
-  flex-direction: column;
-  gap: 1vw;*/ /* Adjust spacing between messages */
-  /*background-color: #f9fafb;*/ /* Light background */
-  /*overflow-y: auto;
-  height: 80vh;*/ /* Maintain height of the chat box */
-/*}*/
-
-
-/*.chat-box {
-  display: flex;
-  flex-direction: column;
-  gap: 1vw;
-  overflow-y: auto;
-  height: calc(100vh - 120px);
-  padding: 2vw;*/
-  /*background-color: rgb(35 34 32 / 45%);*/
- /* background-color: rgb(35 34 32 / 23%);*/
-  /*background-color: rgb(35 34 32 / 43%);
-}*/
-
-/*.chat-box {
-  display: flex;
-  flex-direction: column;
-  gap: 1vw;
-  overflow-y: auto;*/ /* ✅ Enables scrolling */
-  /*height: calc(100vh - 120px);
-  padding: 2vw;
-  background-color: rgba(35, 34, 32, 0.43);
-  scroll-behavior: smooth;*/ /* ✅ Smooth scrolling */
-/*}*/
-
-
-
-/*.chat-box {
-  display: flex;
-  flex-direction: column;
-  overflow-y: auto;*/ /* ✅ Enables scrolling */
-  /*height: calc(100vh - 120px);
-  padding: 2vw;
-  background-color: rgba(35, 34, 32, 0.43);
-  scroll-behavior: smooth;*/ /* ✅ Smooth scrolling */
-/*}*/
-
 
 .chat-box {
   display: flex;
@@ -250,28 +104,6 @@ h1 {
 
 
 
-/*.chat-box {
-  display: flex;
-  flex-direction: column;
-  overflow-y: auto;
-  height: calc(100vh - 180px);*/ /* Adjust height to create space */
-  /*padding: 2vw;
-  background-color: rgba(35, 34, 32, 0.43);
-  scroll-behavior: smooth;
-  flex-grow: 1;
-  overflow-y: auto;
-  padding-bottom: 90px;*/ /* ✅ Creates gap between chat and input field */
-/*}*/
-
-
-
-/*
-.message-wrapper {
-  display: flex;
-  align-items: flex-start;
-  margin-bottom: 1.5vw;
-}
-*/
 
 
 
@@ -293,25 +125,6 @@ h1 {
 
 
 
-  /*.input-box textarea {
-    flex: 1;
-    height: auto;*/ /* Automatically adjust height */
-    /*max-height: 80px;*/ /* Limit the maximum height */
-    /*overflow-y: auto;*/ /* Allow scrolling if needed */
-    /*resize: none;*/ /* Disable manual resizing */
-    /*padding: 8px;*/ /* Adjust padding for proper alignment */
-    /*font-size: 1rem;*/ /* Font size for input text */
-    /*line-height: 1.2;*/ /* Adjust line height for vertical centering */
-   /* border: 1px solid rgba(255, 255, 255, 0.13);*/
-    /*border: 1px solid rgb(93 145 195);
-    border-radius: 8px;*/ /* Smaller border radius */
-    /*background: rgba(255, 255, 255, 0.04);
-    color: white;
-    outline: none;
-    transition: border-color 0.3s ease, box-shadow 0.3s ease;
-    width: 100%;
-    box-sizing: border-box;
-  }*/
 
   .input-box textarea {
     flex: 1;
@@ -355,15 +168,7 @@ h1 {
 
 
 
-  /*.input-box button {
-    font-size: 1rem;*/ /* Smaller font size */
-    /*padding: 6px 12px;*/ /* Smaller button padding */
-    /*border-radius: 8px;*/ /* Match text area border radius */
-    /*background: #a855f7;
-    color: white;
-    cursor: pointer;
-    transition: all 0.3s ease;
-  }*/
+  
 
   .input-box button {
     width: 55px; /* Fixed button size */
@@ -574,21 +379,7 @@ h1 {
   }
 }
 
-/* Centered Error Message */
-/*.error-box {
-  position: fixed;
-  top: 60%;
-  left: 50%;
-  transform: translate(-50%, -50%);
-  background: rgba(255, 0, 0, 0.8);
-  color: white;
-  padding: 12px 20px;
-  border-radius: 8px;
-  font-size: 14px;
-  text-align: center;
-  z-index: 1000;
-  animation: fadeIn 0.3s ease-in-out;
-}*/
+
 
 .error-text {
   color: black;
@@ -732,37 +523,6 @@ h1 {
 
 
 
-/*
-Oviya -  Hardcoded*/
-/*.hardcoded-questions {
-  position: absolute;
-  background: white;
-  border: 1px solid #ccc;
-  border-radius: 5px;
-  padding: 10px;
-  width: 90%;
-  max-width: 400px;
-  box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
-  margin-top: 5px;
-  z-index: 1000;
-}
-
-  .hardcoded-questions ul {
-    list-style: none;
-    padding: 0;
-    margin: 0;
-  }
-
-  .hardcoded-questions li {
-    padding: 8px;
-    cursor: pointer;
-    transition: background 0.3s;
-  }
-
-    .hardcoded-questions li:hover {
-      background: #f0f0f0;
-    }*/
-
 
 /* Container for hardcoded questions - Aligned left above the text field */
 .hardcoded-questions-container {
@@ -814,17 +574,6 @@ Oviya -  Hardcoded*/
 }
 
 
-/*.paragraph-block {
-  background: #2b6296;
-  color: white;
-  padding: 1vw;
-  border-radius: 1vw;
-  margin-bottom: 0.3vw;*/ /* Reduce space between paragraphs */
-  /*box-shadow: 0 0.3vw 0.8vw rgba(0, 0, 0, 0.1);
-  line-height: 1.5;
-  max-width: 48vw;
-}*/
-
 
 
 /* Message wrapper for each chat bubble */
@@ -861,17 +610,6 @@ Oviya -  Hardcoded*/
     object-fit: cover;
   }
 
-/* Individual Message Styling */
-/*.message {
-  max-width: 50vw;
-  padding: 1vw 2vw;
-  border-radius: 2vw;
-  font-size: 1.2vw;
-  line-height: 1.5;
-  box-shadow: 0 0.3vw 0.8vw rgba(0, 0, 0, 0.1);
-  background: #2b6296;
-  color: white;
-}*/
 
 /* Separate paragraph blocks */
 .ai .message {

src/app/chat/chat.component.html

@@ -4,9 +4,10 @@
 <div class="chat-container">
   <div class="header-container">
     <div class="logo">
-      <a (click)="goToHome()" routerLink="/home">
+      <a (click)="goToHome()" routerLink="/home" class="brand-link">
         <img src="assets/images/pykara-logo.png" alt="Pykara Logo" />
       </a>
+      <span class="product-name">Py-Learn</span>
     </div>
     <div class="header-title">
       <h1>Grammar Chat</h1>

src/app/findword/findword.component.css

@@ -30,15 +30,17 @@ body {
 }
 
 
-.header-title {
-  font-size: 2.6vw;
-  font-family: Super Cartoon;
-  color: #009688;
+.header-title h1 {
   font-size: 3vw;
   color: #fff;
   margin: 0;
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
 }
 
+
 .home-btn img {
   width: 5vw;
 }
@@ -1053,8 +1055,8 @@ h2 {
 
 
 .close-btn1 {
-  background-color: #ffffff;
-  color: #0097a7;
+  background-color: #009688;
+  color: black;
   border: none;
   padding: 0.4vw 0.9vw;
   border-radius: 50%;
@@ -1065,10 +1067,19 @@ h2 {
   right: -3.5vw;
   position: absolute;
   height: 3vw;
-  font-size: 1vw;
+  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 {

src/app/findword/findword.component.html

@@ -1,9 +1,10 @@
 <div class="full-container">
   <div class="header-container">
     <div class="logo">
-      <a (click)="goToHome()" routerLink="/home">
+      <a (click)="goToHome()" routerLink="/home" class="brand-link">
         <img src="assets/images/pykara-logo.png" alt="Pykara Logo" />
       </a>
+      <span class="product-name">Py-Learn</span>
     </div>
     <div class="header-title">
       <h1>Find the Word</h1>

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

@@ -45,6 +45,10 @@ body {
     font-size: 3vw;
     color: #fff;
     margin: 0;
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
   }
 
 .home-btn img {

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

@@ -8,9 +8,10 @@
   <div class="header-container">
     <!-- Logo Section -->
     <div class="logo">
-      <a (click)="goToHome()" routerLink="/home">
+      <a (click)="goToHome()" routerLink="/home" class="brand-link">
         <img src="assets/images/pykara-logo.png" alt="Pykara Logo" />
       </a>
+      <span class="product-name">Py-Learn</span>
     </div>
 
     <!-- Title Section -->

src/app/listen/listen.component.css

@@ -41,6 +41,10 @@ body, html {
     font-size: 3vw;
     color: #fff;
     margin: 0;
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
   }
 
 .home-btn img {
@@ -71,77 +75,6 @@ img {
 
 
 
-/* Main Container Layout */
-/*.main-container {
-  display: flex;
-  justify-content: space-between;
-  align-items: flex-start;
-  padding: 4vw;
-  gap: 2vw;
-  background-color: #fff;
-  border: 10px solid #009688;*/ /* ✅ Add this line for border */
-  /*border-radius: 1vw;
-  box-shadow: 0 0.4vw 0.8vw rgba(0, 0, 0, 0.5);
-  margin: 2vw auto;
-  max-width: 90%;*/
-  /* ✅ 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 */
-/*}
-
-.left-content {
-  flex: 1;
-  max-width: 40%;
-  text-align: left;
-}
-
-  .left-content h2 {
-    font-size: 2.5vw;
-    font-weight: bold;
-    color: #006780;
-    margin-bottom: 20px;
-  }
-
-  .left-content p {
-    font-size: 1.4vw;
-    margin-bottom: 2vw;
-    text-align: justify;
-  }
-
-
-.video-upload-container {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  max-width: 50%;
-}
-
-.video-preview-container {
-  margin-bottom: 1.5vw;
-}
-
-
-
-  .video-preview-container video {
-    width: 50vw;
-    max-height: 40vh;
-    border-radius: 0.5vw;
-    box-shadow: 0 0.4vw 0.8vw rgba(0, 0, 0, 0.2);
-    transition: all 0.5s ease-in-out;
-    margin-top: 2vw;
-  }
-
-.video-upload-input {
-  display: none;
-}
-
-.video-placeholder {
-  width: 92%;
-  max-width: 36vw;
-  border-radius: 1vw;
-  box-shadow: 0 0.4vw 0.8vw rgba(0, 0, 0, 0.2);
-  object-fit: contain;
-}*/
 
 /* Listen Card Style */
 .listen-card1 {

src/app/listen/listen.component.html

@@ -6,9 +6,10 @@
 <!-- Header Section -->
 <div class="header-container">
   <div class="logo">
-    <a (click)="goToHome()" routerLink="/home">
+    <a (click)="goToHome()" routerLink="/home" class="brand-link">
       <img src="assets/images/pykara-logo.png" alt="Pykara Logo" />
     </a>
+    <span class="product-name">Py-Learn</span>
   </div>
   <div class="header-title">
     <h1>Listen</h1>
@@ -23,73 +24,6 @@
 <!-- Background image (optional) -->
 <img src="assets/images/listen.png" alt="Chat Background" class="grammar-bg" />
 
-<!-- Main Container Layout -->
-<!--<div class="main-container " *ngIf="questions.length === 0">-->
-<!-- Left Section: Exercise Description -->
-<!--<div class="left-content">
-  <h2>Welcome to the Listening Exercise</h2>
-  <p>
-    This listening exercise helps students improve their English listening skills.
-    Please upload your video and watch it fully. After the video is completed, the <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()">
-    Generate Questions
-  </button>
-</div>-->
-<!-- Right Section: Video or Image + 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>-->
-<!-- Show video player 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)" />
-    Your browser does not support the video tag.
-  </video>
-</div>-->
-<!-- Upload Button below image/video -->
-<!--<input #uploadInput
-           type="file"
-           accept="video/mp4"
-           (change)="onFileSelected($event)"
-           class="video-upload-input" />
-
-    <div class="button-group">
-      <button *ngIf="videoUrl"
-              class="upload-btn"
-              (click)="toggleVideoPlayPause()">
-        {{ isVideoPlaying ? 'Pause' : 'Play' }}
-      </button>
-
-      <button class="replace-btn"
-              (click)="stopVideoIfPlaying(); uploadInput.click()"
-              [disabled]="isReplaceDisabled">
-        {{ uploadSuccess ? 'Replace Video' : 'Upload Video' }}
-      </button>
-
-      <button *ngIf="videoUrl && isReplaceDisabled"
-              class="reset-btn"
-              (click)="goToListen()">
-        Reset
-      </button>
-
-    </div>
-
-
-  </div>
-</div>-->
 <!-- Card Layout for Listen Exercise -->
 <div class="listen-card1" *ngIf="questions.length === 0">
   <!-- Left Section: Description -->
@@ -163,13 +97,6 @@
 
 
 
-
-
-
-
-
-
-
 <div *ngIf="questions.length > 0" class="question-navigation">
 
   <div class="question-block">
@@ -214,10 +141,6 @@
         ◀ Previous
       </button>
 
-      <!--<div *ngIf="validated">
-        <span *ngIf="selectedAnswers[currentQuestionIndex] === 'correct'" class="correct-label">✅ Correct!</span>
-        <span *ngIf="selectedAnswers[currentQuestionIndex] === 'incorrect'" class="incorrect-label">❌ Incorrect!</span>
-      </div>-->
       <!-- Right Side Buttons -->
       <div class="right-buttons">
         <!-- Submit (before validation) -->

src/app/reading/reading.component.css

@@ -37,7 +37,11 @@
   .header-title h1 {
     font-size: 3vw;
     color: #fff;
-    margin: 0
+    margin: 0;
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
   }
 
 .home-btn img {
@@ -63,7 +67,7 @@
 
 .main-container {
   width: 85%;
-  margin: 7vh auto;
+  margin: 5vh auto;
   border: 9px solid #009688;
   border-radius: 1.5vw;
   background: #fff;
@@ -72,11 +76,7 @@
   height: 76vh
 }
 
-/* ===== Outer card tighter on sides ===== */
-/*.main-container {
-  width: 94%;*/ /* was 85% */
-/*padding: 1.5vw;*/ /* slightly tighter */
-/*}*/
+
 
 /* ===== Intro split (match reference, minimal side margins) ===== */
 .intro-section.split {
@@ -325,17 +325,6 @@
 :root {
   --passage-font: 21px;
 }
-/* used by A−/A+ */
-
-/* ---- Reading card ---- */
-/*.reading-card {
-  width: 100%;
-  border-radius: 18px;
-  padding: 16px 16px 14px;
-  background: linear-gradient(#ffffff, #ffffff) padding-box, linear-gradient(135deg, #0aa19a, #6fd0cd) border-box;*/ /* teal gradient stroke */
-/*border: 1px solid transparent;
-  box-shadow: 0 14px 32px rgba(0,0,0,.08);
-}*/
 
 /* Header */
 .reading-head {
@@ -416,19 +405,6 @@
     color: black;
   }
 
-/* .icon-btn1:active {
-    transform: translateY(1px);
-  }
-
-  .icon-btn1.active {
-    border-color: #95d0c9;
-    background: #eefaf8;
-  }
-
-  .icon-btn1.danger {
-    color: #b1241a;
-  }
-*/
 /* Meta chips */
 .reading-meta {
   display: flex;
@@ -819,28 +795,7 @@
   .reset-btn:hover {
     box-shadow: 0 12px 24px rgba(229,72,59,.25);
   }
-/*
-.popup-overlay {
-  position: fixed;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  background: rgba(0,0,0,.5);
-  display: flex;
-  justify-content: center;
-  align-items: center
-}
 
-.popup-content {
-  background: #fff;
-  padding: 2vw;
-  border-radius: 1vw;
-  box-shadow: 0 .5vw 1.5vw rgba(0,0,0,.1);
-  width: 40%;
-  text-align: center
-}
-*/
 
 
 /* Loader Overlay */
@@ -902,69 +857,7 @@
 }
 
 
-/* reusable icon button base */
-/*.icon-btn {
-  width: var(--icon-btn, 36px);
-  height: var(--icon-btn, 36px);
-  display: grid;
-  place-items: center;
-  border-radius: 10px;
-  border: 1px solid #cfe2e0;
-  background: #fff;
-  color: #006780;*/ /* text color if any */
-/*cursor: pointer;
-  transition: box-shadow .15s, transform .05s, background .15s, border-color .15s;
-}*/
-
-/* back button specifics */
-/*.icon-btn.back .icon-img {
-    width: var(--icon-size, 18px);
-    height: var(--icon-size, 18px);
-    object-fit: contain;
-    display: block;
-    transition: transform .12s, opacity .12s;
-  }*/
-
-/* states */
-/*.icon-btn.back:hover {
-    background: #f7fcfb;
-    box-shadow: 0 8px 18px rgba(0,0,0,.08);
-    border-color: #b9d6d3;
-  }
-
-    .icon-btn.back:hover .icon-img {
-      transform: translateX(-1px);*/ /* subtle nudge left */
-/*}
 
-  .icon-btn.back:active {
-    transform: translateY(1px);
-  }
-
-  .icon-btn.back:disabled {
-    opacity: .5;
-    pointer-events: none;
-  }*/
-
-/* optional: bigger/smaller controls via CSS variables */
-/*:root {
-  --icon-btn: 36px;*/ /* button size */
-/*--icon-size: 18px;*/ /* arrow size */
-/*}*/
-
-/* If you need a dark-on-teal variant inside colored headers: */
-/*.header-on-teal .icon-btn.back {
-  background: #007e74;
-  border-color: #00756c;
-}
-
-  .header-on-teal .icon-btn.back:hover {
-    background: #0a8a80;
-  }
-
-  .header-on-teal .icon-btn.back .icon-img {
-    filter: brightness(0) invert(1);*/ /* make white */
-/*}*/
-/* Overlay */
 .popup-overlay {
   position: fixed;
   top: 0;

src/app/reading/reading.component.html

@@ -2,9 +2,10 @@
   <!-- Header -->
   <div class="header-container">
     <div class="logo">
-      <a (click)="goToHome()" routerLink="/home">
+      <a (click)="goToHome()" routerLink="/home" class="brand-link">
         <img src="assets/images/pykara-logo.png" alt="Pykara Logo" />
       </a>
+      <span class="product-name">Py-Learn</span>
     </div>
 
     <div class="header-title">
@@ -278,24 +279,18 @@
 
 
 
-  <!-- Congratulations overlay must be OUTSIDE the main-container -->
-  <div class="congrats-overlay"
-       *ngIf="showCongrats"
-       aria-live="polite"
-       aria-modal="true"
-       role="dialog">
+
+  <!-- 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="sep">/</span>
-        <span class="total">{{ scoreTotal }}</span>
+        Your Score: <span class="score">{{ scoreCorrect }}</span> / <span class="total">{{ scoreTotal }}</span>
       </div>
-
-      <h2>🎉 Congratulations 🎉</h2>
-      <p>You have completed all questions.</p>
+      <h2>{{ congratsTitle }}</h2>  <!-- Display the dynamic title -->
+      <p>{{ congratsMessage }}</p>  <!-- Display the dynamic message -->
 
       <button class="start-over-btn" (click)="startOver()">Start Over</button>
     </div>
-
   </div>
+
+</div>

src/app/reading/reading.component.ts

@@ -476,10 +476,14 @@ export class ReadingComponent {
   // add inside the component class
   showCongrats = false;
   scoreCorrect = 0;
-  scoreTotal = 0;
+  
   private confettiInterval: any = null;
 
-  /** After validate is clicked, if this was the last question, show score + confetti after a short hold. */
+  // scoreCorrect: number = 0;  // Correct answers
+  scoreTotal: number = 3;    // Total number of questions
+  congratsTitle: string = '';
+  congratsMessage: string = '';
+
   scheduleCongratsIfLast(): void {
     // must be last question AND already marked as checked
     const isLast = this.currentQuestionIndex === this.questions.length - 1;
@@ -491,11 +495,26 @@ export class ReadingComponent {
       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!");
+      } else if (this.scoreCorrect > 0) {
+        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.showCongrats = true;
-      this.triggerConfetti();
+      this.triggerConfetti(); // Assuming this is a method that triggers confetti animation.
     }, 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;

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;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0vw 2vw;
  background-color: #009688;
  box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2); /* Soft shadow */
  width: 100%;
  position: sticky;
  top: 0;
  max-width: 5vw;
  height: auto;
  background: #fff;
  border-radius: 1vw;
  margin: 0.5vw;
  text-align: center;
  flex: 1;
  .header-title h1 {
    font-size: 3vw;
    color: #fff;
    margin: 0;
  }
  width: 5vw;
  .home-btn img:hover {
    transform: scale(1.1);
  }
  background-image: url(/assets/images/grammar-bg.png);
  background-size: auto;
  background-position: center;
  background-attachment: fixed;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 10%;
  left: 0;
  width: 100%;
  height: auto;
  max-height: calc(100vh - 100px);
  object-fit: fill;
  z-index: -1;
  opacity: 0.2;
  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;
  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;
  .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;
  .option-btn.selected {
    background-color: #e1f5fe !important;
    border-color: #0277bd !important;
    color: #01579b !important;
    font-weight: 600;
  }
  .option-btn:hover {
    background-color: #e1f5fe !important;
    border-color: #0277bd !important;
    color: #01579b !important;
    font-weight: 600;
  }
  .option-btn.disabled {    
    cursor: not-allowed !important;   
    pointer-events: none !important;
  }
  .option-btn.correct {
    background-color: #4caf506e !important;
    border-color: #388E3C !important;
    color: black;
    font-weight: bold;
  }
  .option-btn.incorrect {
    background-color: #f443367d !important;
    border-color: #C62828 !important;
    color: black;
    font-weight: bold;
  }
  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: 55%;
  left: 50%;
  transform: translate(-50%, -50%);
  height: 70vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  overflow-y: auto;
  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: white;
  padding: 1vw;
  border-radius: 1vw;
  box-shadow: 0 0.4vw 0.8vw rgba(0, 0, 0, 0.6);
  width: 80vw;
  position: absolute;
  top: 55%;
  left: 50%;
  transform: translate(-50%, -50%);
  height: 73vh;
  max-height: 80vh;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  text-align: center;
  overflow-y: auto;
  border: 10px solid #009688;
  
  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);
  width: 80vw;
  position: absolute;
  top: 55%;
  left: 50%;
  transform: translate(-50%, -50%);
  height: 73vh;
  max-height: 80vh;
  padding: 20px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  text-align: center;
  overflow-y: auto;
  box-shadow: 0 0.4vw 0.8vw rgba(0, 0, 0, 0.6);
  background-color: #fff;
  border: 10px solid #009688;
  border-radius: 1vw;
  .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: 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;
  }
+
  margin-top: 1rem;
  padding: 1rem;
  background-color: #f0f4f8;
  border-radius: 8px;
  border: 1px solid #cdd5df;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0vw 2vw;
  background-color: #009688;
  box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2); /* Soft shadow */
  width: 100%;
  position: sticky;
  top: 0;
  max-width: 5vw;
  height: auto;
  background: #fff;
  border-radius: 1vw;
  margin: 0.5vw;
  text-align: center;
  flex: 1;
  .header-title h1 {
    font-size: 3vw;
    color: #fff;
    margin: 0;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
  width: 5vw;
  .home-btn img:hover {
    transform: scale(1.1);
  }
  background-image: url(/assets/images/grammar-bg.png);
  background-size: auto;
  background-position: center;
  background-attachment: fixed;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 10%;
  left: 0;
  width: 100%;
  height: auto;
  max-height: calc(100vh - 100px);
  object-fit: fill;
  z-index: -1;
  opacity: 0.2;
  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;
  }

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

@@ -4,9 +4,10 @@
     <!-- Header -->
     <div class="header-container">
       <div class="logo">
-        <a (click)="goToHome()" routerLink="/home">
+        <a (click)="goToHome()" routerLink="/home" class="brand-link">
           <img src="assets/images/pykara-logo.png" alt="Pykara Logo" />
         </a>
+        <span class="product-name">Py-Learn</span>
       </div>
       <div class="header-title">
         <h1>Vocabulary Builder</h1>
@@ -49,6 +50,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>
+
 
       <div class="content-container">
         <div class="word-container">
@@ -63,25 +67,29 @@
             <button *ngFor="let option of vocabulary.options"
                     class="option-btn"
                     [ngClass]="{
-                      'selected': selectedOptions.includes(option) && !optionStates[option],
-                      'correct': optionStates[option] === 'correct',
-                      'incorrect': optionStates[option] === 'incorrect',
-                      'disabled': buttonState !== 'validate'
-                    }"
-                    [disabled]="buttonState !== 'validate'"
+          'selected': selectedOptions.includes(option) && !optionStates[option],
+          '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)">
-              {{ option }}
+              <span class="label">{{ option }}</span>
+              <span *ngIf="isChecked && pickedAtCheck?.has(option)" class="picked-chip"></span>
             </button>
+
+
           </div>
 
           <button *ngIf="buttonState === 'validate'"
-                  class="submit-button"
+                  class="validate-button"
                   [disabled]="!isCheckButtonEnabled || isLoaderVisible"
                   (click)="checkSelections()">
             <span>Validate</span>
           </button>
 
-          <button *ngIf="buttonState === 'next'" class="submit-button" (click)="goNext()">
+          <button *ngIf="buttonState === 'next'" class="validate-button" (click)="goNext()">
             <span>Next</span>
           </button>
 
@@ -99,6 +107,9 @@
     <!-- Step 3: Feedback -->
     <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>
+
       <h2>Feedback</h2>
       <ul class="feedback-list">
         <ng-container *ngFor="let point of formattedFeedback">
@@ -111,6 +122,9 @@
     <!-- 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>
+
       <h2>Form a Sentence</h2>
       <p class="correct-answer">Using the words: <strong class="text-green-500">{{ correctOptions.join(', ') }}</strong></p>
       <div class="sentence-formation">
@@ -138,6 +152,9 @@
     <!-- Step 5: Sentence Feedback -->
     <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>
+
       <h2 class="feedback-header">Sentence Feedback</h2>
       <ul class="feedback-list1">
         <li *ngFor="let point of formattedSentenceFeedback">
@@ -147,7 +164,7 @@
           <span *ngIf="!point.includes('correct answer')">{{ point }}</span>
         </li>
       </ul>
-      <button class="submit-button" (click)="resetQuiz()">Reset</button>
+      <button class="submit-button" (click)="resetQuiz()"> Reset </button>
     </div>
 
   </div>

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

@@ -40,7 +40,7 @@ export class VocabularyBuilderComponent implements OnInit, AfterViewInit {
   buttonState: 'validate' | 'next' | 'formSentence' = 'validate';
   optionStates: { [key: string]: 'default' | 'selected' | 'correct' | 'incorrect' } = {};
   skipFeedback: boolean = false;
-
+  pickedAtCheck = new Set<string>();
   constructor(private vocabularyService: VocabularyBuilderService, private router: Router) { }
 
   ngOnInit(): void {
@@ -83,18 +83,23 @@ export class VocabularyBuilderComponent implements OnInit, AfterViewInit {
   }
 
   handleOptionClick(option: string): void {
-    const index = this.selectedOptions.indexOf(option);
-    if (index > -1) {
-      this.selectedOptions.splice(index, 1);
+    if (this.buttonState !== 'validate') return;
+
+    const i = this.selectedOptions.indexOf(option);
+    if (i >= 0) {
+      // toggle OFF
+      this.selectedOptions.splice(i, 1);
     } else {
-      if (this.selectedOptions.length === 3) {
-        this.selectedOptions.shift();
-      }
+      // 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;
@@ -112,14 +117,13 @@ 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.vocabulary.options.forEach((option: string) => {
-          if (this.correctAnswers.includes(option)) {
-            this.optionStates[option] = 'correct';
-          } else if (this.selectedOptions.includes(option)) {
-            this.optionStates[option] = 'incorrect';
-          }
-        });
+        this.optionStates = {};
+        for (const option of this.vocabulary.options) {
+          this.optionStates[option] = this.correctAnswers.includes(option) ? 'correct' : 'incorrect';
+        }
 
         const allCorrectSelected = this.selectedOptions.length === 3 &&
           this.selectedOptions.every(option => this.correctAnswers.includes(option));
@@ -300,5 +304,15 @@ export class VocabularyBuilderComponent implements OnInit, AfterViewInit {
     this.isLoaderVisible = false;
     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']);
+  }
+
 }

src/app/writing/writing.component.css

@@ -32,6 +32,10 @@
     font-size: 3vw;
     color: #fff;
     margin: 0;
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
   }
 
 .home-btn img {

src/app/writing/writing.component.html

@@ -1,9 +1,10 @@
 <!-- Header container -->
 <div class="header-container">
   <div class="logo">
-    <a (click)="goToHome()" routerLink="/home">
+    <a (click)="goToHome()" routerLink="/home" class="brand-link">
       <img src="assets/images/pykara-logo.png" alt="Pykara Logo" />
     </a>
+    <span class="product-name">Py-Learn</span>
   </div>
   <div class="header-title">
     <h1>Writing Exercise</h1>

src/styles.css

@@ -62,3 +62,36 @@ body, html {
 
 
 
+/*Py-Learn text near Logo css*/
+
+/*Py-learn text*/
+/* Keep logo and text in one row */
+.logo {
+  display: flex;
+  align-items: center;
+  gap: 1vw;
+}
+
+/* Make the anchor wrap both image and name */
+.brand-link {
+  display: flex;
+  align-items: center;
+  gap: 0.6vw; /* space between logo and text */
+  text-decoration: none;
+}
+
+/* “PY-Learn” text next to the logo */
+.product-name {
+  color: #fff;
+  font-size: 2vw; /* slightly smaller than the 3vw title */
+  /*font-weight: 700;*/
+  letter-spacing: 0.5px;
+  /*font-family: 'Super Cartoon', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;*/
+  font-family: Amonk_Outline;
+  line-height: 1;
+}
+
+.brand-link:hover .product-name {
+  opacity: 0.9; /* subtle hover */
+}
+