Reading and writing updates

src/app/home/home.component.css

@@ -268,3 +268,25 @@ h1 {
     background-color: #007bff;
     color: white;
   }
+
+
+.nav-link--disabled {
+  opacity: 0.6;
+  cursor: not-allowed;
+  
+}
+
+
+/* Apply the same look to <a> and the disabled <span class="nav-link"> */
+.nav-links li a,
+.nav-links li .nav-link {
+  text-decoration: none;
+  color: #333;
+  font-size: 1.5vw;
+  font-weight: 700;
+}
+
+  .nav-links li a:hover,
+  .nav-links li .nav-link:hover {
+    color: #007bff;
+  }

src/app/home/home.component.html

@@ -11,7 +11,23 @@
       <ul class="nav-links">
         <li><a routerLink="/chat" routerLinkActive="active-link">Chat</a></li>
         <li><a routerLink="/generate-questions" routerLinkActive="active-link">Grammar</a></li>
-        <li><a routerLink="/Voice" routerLinkActive="active-link">Voice</a></li>
+        <li>
+          <!-- when disabled -->
+          <span *ngIf="isVoiceDisabled; else voiceLink"
+                class="nav-link nav-link--disabled"
+                aria-disabled="true">
+            Voice
+          </span>
+
+          <!-- when enabled -->
+          <ng-template #voiceLink>
+            <a class="nav-link"
+               routerLink="/Voice"
+               routerLinkActive="active-link">
+              Voice
+            </a>
+          </ng-template>
+        </li>
         <li><a routerLink="/listen" routerLinkActive="active-link">Listening</a></li>
         <li><a routerLink="/reading" routerLinkActive="active-link">Reading</a></li>
         <li><a routerLink="/writing" routerLinkActive="active-link">Writing</a></li>
@@ -71,7 +87,7 @@
 
   <!-- Footer -->
   <div class="footer">
-    <p>&#64; 2025 Pykara Technologies. All Rights Reserved.</p>
+    <p>© 2025 Pykara Technologies Pvt. Ltd. All rights reserved.</p>
     <div class="social-media">
       <a href="https://www.youtube.com/@PykaraTechnologies/videos" target="_blank">
         <img src="assets/images/home/youtube-icon.png" alt="YouTube">

src/app/home/home.component.ts

@@ -14,6 +14,8 @@ import { Router } from '@angular/router';
 })
 export class HomeComponent implements AfterViewInit {
   @ViewChildren('wrapper') wrappers!: QueryList<ElementRef>;
+  // component.ts
+  isVoiceDisabled = true; // set true to disable, false to enable
 
   cards = [
     {

src/app/reading/reading.component.css

@@ -1,26 +1,24 @@
+/* === Container, header, background, main === */
 .reading-container {
-  font-family: 'Segoe UI', sans-serif;
-  /*background-image: url(/assets/images/grammar-bg.png);*/
+  font-family: 'Segoe UI',sans-serif;
   background-size: auto;
   background-position: center;
   background-attachment: fixed;
   width: 100%;
-  height: 100%;
-  height: 100%;
+  height: 100%
 }
 
-
 .header-container {
   display: flex;
   justify-content: space-between;
   align-items: center;
-  padding: 0vw 2vw;
+  padding: 0 2vw;
   background-color: #009688;
-  box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2); /* Soft shadow */
+  box-shadow: 0 4px 8px rgba(0,0,0,.2);
   width: 100%;
   position: sticky;
   top: 0;
-  z-index: 1;
+  z-index: 1
 }
 
 .logo img {
@@ -28,31 +26,29 @@
   height: auto;
   background: #fff;
   border-radius: 1vw;
-  margin: 0.5vw;
+  margin: .5vw
 }
 
 .header-title {
   text-align: center;
-  flex: 1;
+  flex: 1
 }
 
   .header-title h1 {
     font-size: 3vw;
     color: #fff;
-    margin: 0;
+    margin: 0
   }
 
 .home-btn img {
   width: 5vw;
+  cursor: pointer
 }
 
   .home-btn img:hover {
-    transform: scale(1.1);
+    transform: scale(1.1)
   }
 
-
-
-
 .grammar-bg {
   position: absolute;
   top: 10%;
@@ -62,7 +58,7 @@
   max-height: calc(100vh - 100px);
   object-fit: fill;
   z-index: -1;
-  opacity: 0.2;
+  opacity: .2
 }
 
 .main-container {
@@ -70,628 +66,783 @@
   margin: 7vh auto;
   border: 9px solid #009688;
   border-radius: 1.5vw;
-  background: #ffffff;
+  background: #fff;
   padding: 2vw;
-  box-shadow: 0 0.4vw 1vw rgba(0, 0, 0, 0.1);
-  height: 76vh;
+  box-shadow: 0 .4vw 1vw rgba(0,0,0,.1);
+  height: 76vh
 }
 
+/* ===== Outer card tighter on sides ===== */
+/*.main-container {
+  width: 94%;*/ /* was 85% */
+/*padding: 1.5vw;*/ /* slightly tighter */
+/*}*/
 
-/* Intro Section Layout */
-.intro-section {
-  display: flex;
-  flex-direction: row;
-  justify-content: center;
-  align-items: center;
-  gap: 3vw;
-  height: 100%;
+/* ===== Intro split (match reference, minimal side margins) ===== */
+.intro-section.split {
+  padding-inline: 1vw; /* very small left/right padding */
+  display: block;
 }
 
-/* Left Image */
-.intro-left-image {
-  width: 27%;
+.split-shell {
+  width: 100%;
+  max-width: none; /* use full inner width */
+  margin: 0 auto;
+  display: grid;
+  grid-template-columns: minmax(320px, 38%) 1fr; /* image left, content right */
+  align-items: center;
+  /*gap: 2.2vw;*/
 }
 
-  .intro-left-image img {
-    width: 100%;
-    height: auto;
-    border-radius: 1vw;
-  }
+/* Left image card */
+.split-left {
+  display: grid;
+  place-items: center;
+}
 
-/* Right Content */
-.right-content {
+.intro-illustration {
   width: 60%;
 }
 
-  .right-content h2 {
-    font-size: 2.5vw;
-    font-weight: 800;
-    color: #006780;
-    margin-bottom: 20px;
-  }
+/* Right content */
+.hero-title {
+  font-size: 2.5vw;
+  font-weight: 800;
+  color: #006780;
+  margin-bottom: 20px;
+  font-family: raleway;
+}
 
-  .right-content p {
-    font-size: 1.3vw;
-    text-align: justify;
-    color: #333;
-  }
+.hero-copy {
+  font-size: 1.4vw;
+  text-align: justify;
+  margin-bottom: 3vw;
+}
 
-/* Controls Row */
-.center-controls {
+/* Rows like the reference: label + control(s) */
+.form-row {
   display: flex;
-  flex-direction: row;
   align-items: center;
-  gap: 1vw;
-  margin-top: 1.5vw;
-}
-
-  .center-controls input {
-    flex: 1;
-    padding: 0.8vw;
-    font-size: 1.2vw;
-    border-radius: 0.5vw;
-    border: 2px solid #009688;
-  }
-
-  .center-controls select {
-    font-size: 1.2vw;
-    padding: 0.8vw;
-    border-radius: 0.5vw;
-    border: 2px solid #009688;
-    background-color: #fff;
-    width: 8vw;
-  }
-
-  .center-controls button {
-    font-size: 1.2vw;
-    padding: 0.8vw 1.6vw;
-    background-color: #006780;
-    color: white;
-    border: none;
-    border-radius: 0.5vw;
-    cursor: pointer;
-  }
+  gap: 12px;
+  margin-top: 12px;
+}
 
-    .center-controls button:disabled {
-      background-color: #cccccc;
-      cursor: not-allowed;
-      opacity: 0.6;
-    }
+.row-label {
+  min-width: 140px;
+  font-weight: 700;
+  color: #006780;
+  font-size: 1.3vw;
+}
 
-/* Suggestion Box */
-.suggestion-box {
-  margin-top: 1vw;
-  background: #ffffff;
-  border: 1px solid #ccc;
-  padding: 0.6vw;
-  width: 100%;
-  border-radius: 0.5vw;
-  box-shadow: 0 0.2vw 0.6vw rgba(0, 0, 0, 0.1);
+/* Inputs and selects (reuse your existing styles) */
+.input-wrap, .select-wrap {
+  position: relative;
+  flex: 1;
 }
 
-  .suggestion-box span {
-    display: block;
-    padding: 0.4vw 0.6vw;
-    cursor: pointer;
-    font-size: 1.2vw;
+  .input-wrap input, .select-wrap select {
+    width: 100%;
+    padding: 12px 40px 12px 36px;
+    border-radius: 12px;
+    border: 1px solid #cfe2e0;
+    background: #fff;
+    color: #0e3e45;
+    outline: 0;
+    transition: border-color .2s, box-shadow .2s;
   }
 
-    .suggestion-box span:hover {
-      background-color: #f0f0f0;
+    .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);
+    }
 
-.content-header {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  position: relative;
-  margin-bottom: 2vw;
-}
-
-  .content-header .back-arrow {
-    width: 3vw;
+/* Icons */
+.icon-search, .icon-level {
+  position: absolute;
+  left: 12px;
+  top: 50%;
+  transform: translateY(-50%);
+  width: 18px;
+  height: 18px;
+  opacity: .8;
+  pointer-events: none;
+}
+
+  .icon-search::before {
+    content: "🔎";
+    font-size: 16px;
   }
 
-  .content-header .arrow-icon {
-    width: 100%;
-    cursor: pointer;
+  .icon-level::before {
+    content: "🎯";
+    font-size: 16px;
   }
 
-  .content-header .centered-title {
-    position: absolute;
-    left: 50%;
-    transform: translateX(-50%);
-    font-size: 2vw;
-    color: #ff6f00;
-    text-shadow: 1px 1px #ffe0b2;
-    font-weight: bold;
-    margin: 0;
+/* Level badge */
+.badge {
+  position: absolute;
+  right: 10px;
+  top: 50%;
+  transform: translateY(-50%);
+  font-size: 12px;
+  padding: 4px 8px;
+  border-radius: 999px;
+  border: 1px solid #cfe2e0;
+  background: #f7fcfb;
+  color: #0e3e45;
+}
+
+  .badge[data-level="easy"] {
+    border-color: #bfe6d8;
+    color: #1b7f57;
+    background: #ecfbf4;
   }
 
-  .content-header .right-spacer {
-    width: 3vw; /* same as back-arrow width to balance layout */
+  .badge[data-level="medium"] {
+    border-color: #c7e3f4;
+    color: #0b74a6;
+    background: #eef8ff;
   }
 
+  .badge[data-level="hard"] {
+    border-color: #f9dfc8;
+    color: #b35a11;
+    background: #fff3e9;
+  }
 
-
-.question-header {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  position: relative;
-  margin-bottom: 2vw;
+/* 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;
 }
 
-  .question-header .back-arrow {
-    width: 3vw;
-  }
-
-  .question-header .arrow-icon {
-    width: 100%;
-    cursor: pointer;
+  .btn-get:disabled {
+    /*opacity: .6;*/
+    background-color: #bbbbbb;
+    cursor: not-allowed;
   }
 
-  .question-header .centered-title {
-    position: absolute;
-    left: 50%;
-    transform: translateX(-50%);
-    font-size: 2vw;
-    color: #006780;
-    font-weight: bold;
-    margin: 0;
+  .btn-get:not(:disabled):hover {
+    box-shadow: 0 10px 24px rgba(0,150,136,.22);
   }
 
-  .question-header .right-spacer {
-    width: 3vw;
-    display: flex;
-    justify-content: flex-end;
+  .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);
+  left: 0;
+  z-index: 20;
+  width: 100%;
+  max-height: 200px;
+  overflow: auto;
+  padding: 6px;
+  border-radius: 12px;
+  border: 1px solid #cfe2e0;
+  background: #fff;
+  box-shadow: 0 12px 28px rgba(0,0,0,.12);
+}
 
+  .intro-section.split .suggestion-box span {
+    display: block;
+    padding: 10px 12px;
+    border-radius: 10px;
+    cursor: pointer;
+    color: #0e3e45;
+  }
 
+    .intro-section.split .suggestion-box span:hover,
+    .intro-section.split .suggestion-box span.active {
+      background: #f1fbfa;
+    }
 
+/* Clear (×) inside input */
+.input-wrap.clearable {
+  position: relative;
+}
 
+.input-wrap .has-clear {
+  padding-right: 44px;
+}
 
+.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;
+  font-size: 2vw;
+  z-index: 30;
+}
 
+  .clear-btn:hover {
+    background: #f1fbfa;
+    color: #0e3e45;
+    border-color: #b9d6d3;
+  }
 
+  .clear-btn:active {
+    transform: translateY(-50%) scale(.98);
+  }
 
+/* Responsive */
+@media (max-width: 980px) {
+  .split-shell {
+    grid-template-columns: 1fr;
+    gap: 16px;
+  }
 
+  .row-label {
+    min-width: 110px;
+  }
+}
 
 
+: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 {
+  display: grid;
+  grid-template-columns: 44px 1fr auto;
+  align-items: center;
+  gap: 10px;
+  margin-bottom: 6px;
+}
 
+.reading-title {
+  margin: 0;
+  text-align: center;
+  color: #006780;
+  font-size: clamp(20px, 2.2vw, 39px);
+  letter-spacing: .3px;
+  font-weight: 800;
+}
 
+.head-actions {
+  display: flex;
+  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);
+    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;
+}
 
+  .icon-btn1:hover {
+    box-shadow: 0 8px 18px rgba(0,0,0,.08);
+    background: white;
+    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;
+  flex-wrap: wrap;
+  gap: 8px;
+  margin: 4px 4px 12px;
+}
 
+.chip {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  padding: 6px 10px;
+  border-radius: 999px;
+  font-weight: 600;
+  font-size: 13px;
+  border: 1px solid #d9ecea;
+  background: #f7fcfb;
+  color: #0e3e45;
+}
 
+.chip-level[data-level="easy"] {
+  border-color: #bfe6d8;
+  background: #ecfbf4;
+  color: #1b7f57;
+}
 
+.chip-level[data-level="medium"] {
+  border-color: #c7e3f4;
+  background: #eef8ff;
+  color: #0b74a6;
+}
 
+.chip-level[data-level="hard"] {
+  border-color: #f9dfc8;
+  background: #fff3e9;
+  color: #b35a11;
+}
 
+/* Passage area */
+.passage-shell {
+  position: relative;
+  border: 1px solid #e7f1f0;
+  border-radius: 14px;
+  background: #f3efef;
+  padding: 14px 16px;
+  box-shadow: inset 0 1px 0 rgba(255,255,255,.7);
+  max-height: 46vh;
+  overflow: auto;
+  font-size: 1.4vw;
+  line-height: 1.8;
+}
 
+  /* Soft scrollbars */
+  .passage-shell::-webkit-scrollbar {
+    width: 12px;
+  }
 
+  .passage-shell::-webkit-scrollbar-thumb {
+    background: #cfe2e0;
+    border-radius: 10px;
+    border: 3px solid #fff;
+  }
 
+  .passage-shell::-webkit-scrollbar-track {
+    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;
+  word-wrap: break-word;
+}
 
+  .passage-text span {
+    transition: background-color 0.3s ease;
+  }
 
+  .passage-text .highlight {
+    background-color: yellow;
+  }
 
+  .passage-text::first-letter {
+    float: left;
+    font-size: 2.6em;
+    line-height: .9;
+    padding-right: 6px;
+    padding-top: 2px;
+    color: #0f7f78;
+    font-weight: 700;
+  }
 
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-h2 {
-  margin-bottom: 1vw;
-  text-align: center;
-  font-size: 2vw;
-  color: #ff6f00;
-  text-shadow: 1px 1px #ffe0b2;
-}
-.generate-content-container {
-  background: #ffffff;
-  padding: 2vw;
-  border-radius: 1vw;
-  width: 81vw;
-  margin: 3vw auto;
-  text-align: center;
-  background-color: #fff;
-  border: 10px solid #009688;
-  border-radius: 1vw;
-  box-shadow: 0 0.4vw 0.8vw rgba(0, 0, 0, 0.6);
-}
-
-.input-row {
+/* Footer buttons */
+.reading-actions {
   display: flex;
-  gap: 1vw;
+  gap: 10px;
   justify-content: center;
-  flex-wrap: wrap;
+  margin-top: 30px;
 }
 
-.input-wrapper {
-  position: relative;
-}
-
-input[type="text"], select {
-  font-size: 1.2vw;
-  padding: 1vw;
-  width: 20vw;
-  border-radius: 0.5vw;
+.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;
 }
 
-button {
-  font-size: 1.2vw;
-  padding: 0.8vw 1.5vw;
-  border-radius: 0.5vw;
-  background-color: #4CAF50;
-  color: white;
-  border: none;
-  cursor: pointer;
+.btn-primary {
+  color: #fff;
+  background: #006780;
+  border-color: #006780;
 }
 
-  button:hover {
-    background-color: #45a049;
+  .btn-primary:hover {
+    box-shadow: 0 12px 24px rgba(0,103,128,.25);
   }
 
-  button:disabled {
-    background-color: #aaa;
+  .btn-primary:disabled {
+    opacity: .6;
     cursor: not-allowed;
   }
 
-.suggestion-box {
-  display: grid;
-  grid-template-columns: repeat(2, 1fr);
-  gap: 0.5vw;
-  background: #fff;
-  border: 1px solid #ccc;
-  position: absolute;
-  top: 110%;
-  width: 20vw;
-  padding: 1vw;
-  z-index: 10;
+.btn-danger {
+  color: #fff;
+  background: #006780;
+  border-color: #006780;
 }
 
-  .suggestion-box span {
-    background: #e0f7fa;
-    padding: 0.8vw;
-    border-radius: 0.5vw;
-    cursor: pointer;
-    font-size: 1.1vw;
-    text-align: center;
+  .btn-danger:hover {
+    box-shadow: 0 12px 24px rgba(0,103,128,.25);
   }
 
-    .suggestion-box span:hover {
-      background-color: #b2ebf2;
-    }
-
-.content-block {
-  /*margin-top: 1vw;*/
-}
-
-.content-scroll {
-  background-color: #fff8e1;
-  border: 2px dashed #ffca28;
-  border-radius: 1vw;
-  padding: 2vw 2vw 2vw 2vw;
-  width: 99%;
-  max-height: 24vw;
-  overflow-y: scroll;
+/* Back button (left) reuses .icon-btn */
+.back {
+  grid-column: 1 / 2;
 }
 
-  .content-scroll p {
-    font-size: 1.3vw;
-    color: #333;
-    line-height: 1.6;
-    text-align: justify;
+/* Responsive */
+@media (max-width: 720px) {
+  .reading-title {
+    font-size: 22px;
   }
 
-.content-block,
-.question-block {
-  position: relative;
+  .btn-primary, .btn-danger {
+    min-width: 160px;
+  }
 }
 
-.button-container {
-  display: flex;
-  justify-content: center;
-  gap: 1vw;
-  margin-top: 2vw;
-}
-/* Common Button Styling */
-button,
-.submit-button,
-.reset-button {
-  font-size: 1.2vw;
-  padding: 0.8vw 1.5vw;
-  border-radius: 0.5vw;
-  border: none;
-  color: white;
-  background-color: #006780;
-  cursor: pointer;
-  transition: all 0.3s ease;
+/* Keep all MCQ UI inside the white card */
+.main-container {
+  background: #fff;
+  overflow: visible;
 }
+/* you already have this */
 
-  button:hover:enabled,
-  .submit-button:hover:enabled,
-  .reset-button:hover:enabled {
-    background-color: #18788f;
-    transform: scale(1.05);
-  }
+/* ---- MCQ card ---- */
+.mcq-card {
+  width: 100%;
+  margin: 0; /* no side gaps */
+  background: #fff; /* same white as container */
+  border: 1px solid #d9ecea;
+  border-radius: 16px;
+  padding: 16px;
+  box-shadow: 0 10px 24px rgba(0,0,0,.06);
+}
 
-  button:disabled,
-  .submit-button:disabled,
-  .reset-button:disabled {
-    background-color: #aaa;
-    cursor: not-allowed;
-  }
+/* Header inside the card */
+.mcq-card__header {
+  display: grid;
+  grid-template-columns: 44px 1fr 44px;
+  align-items: center;
+  gap: 10px;
+  margin-bottom: 10px;
+  font-size: 2vw;
+}
 
+.mcq-card__title {
+  margin: 0;
+  text-align: center;
+  color: #0e3e45;
+  font-weight: 800;
+  letter-spacing: .2px;
+}
 
-/* Questions */
-.question-container {
-  margin-bottom: 2vw;
-  text-align: left;
+.mcq-card__actions {
   display: flex;
-  justify-content: center;
+  justify-content: flex-end;
 }
 
-.option-container {
+/* Question pill */
+.quiz-pill {
   display: flex;
-  align-items: center;
-  margin: 0.5vw 0;
+  align-items: flex-start;
+  gap: 10px;
+  padding: 12px 14px;
+  border-radius: 12px;
+  border: 1px solid #e6f0ef;
+  background: #f8fbfb;
+  color: #0e3e45;
+  font-size: 1.5vw;
 }
 
-  .option-container input[type="radio"] {
-    margin-right: 1vw;
-    transform: scale(1.5);
-  }
-
-  .option-container label {
-    font-size: 1.3vw;
-  }
+.quiz-question-pill {
+  margin-bottom: 3vw;
+}
 
-.correct-answer {
-  color: green;
-  font-weight: bold;
+.qq-label {
+  font-weight: 700;
+  color: #0b74a6;
+  white-space: nowrap;
 }
 
-.wrong-answer {
-  color: red;
-  font-weight: bold;
+.qq-text {
+  flex: 1;
+  line-height: 1.6;
 }
 
-.feedback-message {
-  font-size: 1.4vw;
-  margin-top: 2vw;
-  color: #00796B;
+/* Options list */
+.quiz-options {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 10px;
 }
 
-/* Fixed width and height for question box */
-.question-box {
-  width: 60vw;
-  height: 20vw;
-  background: #f9f9f9;
-  padding: 2vw;
-  border-radius: 1vw;
-  overflow-y: auto;
-  box-shadow: 0 0.5vw 1vw rgba(0, 0, 0, 0.1);
+@media (max-width: 720px) {
+  .quiz-options {
+    grid-template-columns: 1fr;
+  }
 }
 
-/* Popup Overlay */
-.popup-overlay {
-  position: fixed;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  background-color: rgba(0, 0, 0, 0.5); 
+/* Option pill */
+.quiz-option-pill {
   display: flex;
-  justify-content: center;
   align-items: center;
-  z-index: 2;
-}
-
-/* Popup Content */
-.popup-content {
-  background-color: #fff;
-  padding: 2vw;
-  border-radius: 1vw; 
-  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
-  text-align: center; 
-  width: 30vw; 
+  gap: 10px;
+  padding: 12px 14px;
+  border-radius: 12px;
+  border: 1px solid #dfe9e7;
+  background: #ffffff;
+  cursor: pointer;
+  transition: box-shadow .15s, transform .05s, border-color .15s, background .15s;
 }
 
-  .popup-content p {
-    font-size: 1.5vw;
-    color: #f44336;
-    margin: 0;
-    text-align: center;
+  .quiz-option-pill:hover {
+    box-shadow: 0 8px 18px rgba(0,0,0,.06);
+    background: #f7fbfb;
   }
 
-.close-btn {
-  background-color: #ff5722;
-  color: white;
-  border: none;
-  padding: 1vw 2vw;
-  border-radius: 0.5vw;
-  cursor: pointer;
-  margin-top: 2vw;
-  font-size: 1.3vw;
-}
-
-  .close-btn:hover {
-    background-color: #e64a19;
+  .quiz-option-pill .slot {
+    font-weight: 700;
+    color: #0b74a6;
+    min-width: 26px;
   }
 
+  .quiz-option-pill .opt-text {
+    color: #0e3e45;
+  }
 
-.button-container {
-  display: flex;
-  justify-content: space-between; 
-  gap: 1vw; 
-  margin-top: 2vw; 
-}
+  /* States */
+  .quiz-option-pill.is-selected {
+    border-color: #a8d8d3;
+    background: #eefaf8;
+  }
 
+  .quiz-option-pill.is-correct {
+    border-color: #6cc090;
+    background: #ecfbf4;
+  }
 
-/* Centered question header text */
-.questions-block h3 {
-  font-size: 2vw;
-  color: #000;
-  text-align: center;
-  margin-bottom: 2vw;
-}
+  .quiz-option-pill.is-incorrect {
+    border-color: #f2b0a9;
+    background: #fff1ef;
+  }
 
-/* Question text styling */
-.question-text {
-  font-size: 1.5vw;
-  font-weight: bold;
-  color: #333;
-  margin-bottom: 1vw;
-  word-break: break-word; /* Prevents overflow */
+/* Hide the native radio */
+.visually-hidden {
+  position: absolute !important;
+  inset: auto auto auto auto !important;
+  width: 1px;
+  height: 1px;
+  overflow: hidden;
+  clip: rect(1px,1px,1px,1px);
+  white-space: nowrap;
 }
 
-/* Button layout and styling */
-.button-container {
+/* Answer status */
+.answer-status {
   display: flex;
+  flex-wrap: wrap;
+  align-items: normal;
+  gap: 8px;
+  margin-top: 12px;
   justify-content: center;
-  gap: 1.5vw;
+  font-size: 1vw;
   margin-top: 2vw;
 }
 
+.status-chip {
+  padding: 6px 10px;
+  border-radius: 999px;
+  font-weight: 700;
+  font-size: 12px;
+}
 
-  
+  .status-chip.ok {
+    background: #ecfbf4;
+    color: #1b7f57;
+    border: 1px solid #bfe6d8;
+  }
 
+  .status-chip.nope {
+    background: #ffe9e7;
+    color: #b1241a;
+    border: 1px solid #f4b2ab;
+  }
 
+.status-help {
+  color: #3a5b60;
+}
 
-.question-header-with-arrow {
+/* Footer buttons */
+.mcq-card__footer {
   display: flex;
-  align-items: center;
-  justify-content: space-between;
-  margin-bottom: 2vw;
-  position: relative;
+  gap: 10px;
+  justify-content: end;
+  margin-top: 6vw;
 }
 
-.back-arrow .arrow-icon {
-  width: 3vw;
+.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;
 }
 
-.question-title {
-  font-size: 2vw;
-  color: #000;
-  font-weight: bold;
-  text-align: center;
-  position: absolute;
-  left: 50%;
-  transform: translateX(-50%);
-}
-
-.right-spacer {
-  width: 3vw;
+.submit-btn {
+  background: #006780;
+  color: #fff;
+  border-color: #006780;
 }
 
+  .submit-btn:hover {
+    box-shadow: 0 12px 24px rgba(0,103,128,.25);
+  }
 
-.center-completion {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  height: 50vh; 
-}
+  .submit-btn:disabled {
+    box-shadow: none;
+    transform: none;
+    background-color: #cccccc;
+    color: #666666;
+    cursor: not-allowed;
+  }
 
-.completion-message {
-  text-align: center;
+.next-btn {
+  background: #006780;
+  color: #fff;
+  border-color: #006780;
 }
 
-  .completion-message .feedback-message {
-    font-size: 1.8vw;
-    color: #009688;
-    margin-bottom: 2vw;
+  .next-btn:hover {
+    box-shadow: 0 12px 24px rgba(0,103,128,.25);
   }
 
-
-.input-section {
-  display: flex;
-  align-items: center;
-  gap: 1vw;
-  margin: 2vw;
-  position: relative;
+.reset-btn {
+  background: #e5483b;
+  color: #fff;
+  border-color: #e5483b;
 }
 
-.input-wrapper {
-  position: relative;
+  .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;
-  flex-direction: column;
-}
-
-input[type="text"] {
-  font-size: 1.2vw;
-  padding: 1vw;
-  width: 25vw;
-  border-radius: 0.5vw;
-  border: 1px solid #4CAF50;
-  outline: none;
-}
-
-.difficulty-select {
-  font-size: 1.2vw;
-  padding: 1vw;
-  width: 10vw; 
-  border-radius: 0.5vw;
-  border: 1px solid #4CAF50;
-  outline: none;
+  justify-content: center;
+  align-items: center
 }
 
-.suggestion-box {
-  display: flex;
-  position: absolute;
-  top: 110%;
-  left: 0;
-  background: #ffffff;
-  border: 1px solid #ccc;
-  border-radius: 0.5vw;
-  padding: 0.5vw;
-  gap: 1vw;
-  box-shadow: 0 0.3vw 0.8vw rgba(0, 0, 0, 0.1);
-  z-index: 10;
-  flex-wrap: wrap;
+.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
 }
+*/
 
-  .suggestion-box span {
-    background: #e0f7fa;
-    padding: 0.5vw 1vw;
-    border-radius: 0.5vw;
-    cursor: pointer;
-    white-space: nowrap;
-    font-size: 1.1vw;
-    transition: background-color 0.3s ease;
-  }
-
-    .suggestion-box span:hover {
-      background: #b2ebf2;
-    }
 
-input[type="radio"].radio-blue:checked {
-  accent-color: #2196F3; 
-}
 /* Loader Overlay */
 .loader-overlay {
   position: fixed;
@@ -699,7 +850,6 @@ input[type="radio"].radio-blue:checked {
   left: 0;
   width: 100%;
   height: 100%;
-  background-color: rgba(0, 0, 0, 0.6);
   display: flex;
   justify-content: center;
   align-items: center;
@@ -707,9 +857,9 @@ input[type="radio"].radio-blue:checked {
 }
 
 .loader {
-  font-size: 15px; 
-  width: 1.5em; 
-  height: 1.5em; 
+  font-size: 15px;
+  width: 1.5em;
+  height: 1.5em;
   border-radius: 50%;
   position: relative;
   text-indent: -9999em;
@@ -752,165 +902,341 @@ input[type="radio"].radio-blue:checked {
 }
 
 
+/* 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 row with title */
-.question-header-row {
+  .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;
+  left: 0;
+  width: 100vw;
+  height: 100vh;
+  background-color: rgba(0, 0, 0, 0.5);
   display: flex;
-  justify-content: space-between;
+  justify-content: center;
   align-items: center;
-  margin-bottom: 1vw;
+  z-index: 1000;
 }
 
-.question-heading {
-  font-size: 2vw;
-  color: #006780;
-  font-weight: bold;
-  flex: 1;
+/* Card */
+.popup-content {
+  background-color: #fff;
+  padding: 2vw;
+  border-radius: 0.5vw;
+  box-shadow: 0 0.4vw 0.8vw rgba(0, 0, 0, 0.3);
   text-align: center;
-  margin: 0;
+  max-width: 40vw;
+  width: 80%;
 }
 
 
 
-.close-btn {
-  background-color: #ffffff;
-  color: #0097a7;
+  .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;
-  padding: 0.4vw 0.9vw;
-  border-radius: 50%;
+  border-radius: 0.5vw;
   cursor: pointer;
-  border: 1px solid black;
-  width: 3vw;
-  top: -66px;
-  left: 98.5%;
-  position: absolute;
-  height: 3vw;
+  transition: all 0.3s ease;
 }
 
+  .close-btn1:hover {
+    filter: brightness(0.98);
+  }
 
-/* Question text */
-.question-text {
-  font-size: 1.6vw;
-  font-weight: 600;
-  color: #333;
-  margin-bottom: 1.5vw;
-  text-align: left;
+  .close-btn1:active {
+    transform: translateY(1px);
+  }
+
+/* small scale-in animation */
+@keyframes popupScale {
+  from {
+    transform: scale(.96);
+    opacity: .85;
+  }
+
+  to {
+    transform: scale(1);
+    opacity: 1;
+  }
 }
 
-/* Question layout */
-.question-content-row {
-  display: flex;
-  justify-content: space-between;
-  gap: 2vw;
-  margin-top: 1vw;
-  align-items: flex-start;
+
+/* Locked/disabled state for Topic input until a level is chosen */
+.input-wrap.locked input {
+  background: #f7f9fb;
+  border-color: #dfe9e7;
+  color: #93a3b8;
+  cursor: not-allowed;
 }
 
-/* Rabbit image */
-.question-side-image img {
-  width: 39vw;
-  height: auto;
-  max-height: 16vw;
-  object-fit: contain;
+.input-wrap.locked .icon-search {
+  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 */
+}
+
+/* Helper note under the field */
+.field-hint {
+  margin: 6px 2px 0;
+  font-size: 12px;
+  color: #738a95;
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+}
+
+.lock-icon::before {
+  content: "🔒";
+  font-size: 14px;
+  line-height: 1;
 }
 
-/* Radio options styled like buttons */
-.options-container {
+/* 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;
-  grid-template-columns: repeat(2, 1fr);
-  gap: 2vw;
-  width: 100%;
+  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;
 }
 
-  .options-container label {
-    background-color: #ffffff;
-    border: 2px solid #cccccc;
-    font-size: 1.3vw;
-    border-radius: 3vw;
-    padding: 1vw;
-    font-weight: 600;
-    box-shadow: 0 0.2vw 0.5vw rgba(0, 0, 0, 0.1);
-    display: flex;
-    align-items: center;
-    gap: 1vw;
-    cursor: pointer;
-    transition: 0.3s ease;
+  .icon-btn.back:hover {
+    background: #f7fcfb;
+    border-color: #b9d6d3;
+    box-shadow: 0 8px 18px rgba(0,0,0,.08);
   }
 
-  .options-container input[type="radio"] {
-    transform: scale(1.3);
+  .icon-btn.back:active {
+    transform: translateY(1px);
   }
 
-/* Blue highlight before submission */
-.selected-option {
-  background-color: #e1f5fe !important;
-  border-color: #0277bd !important;
-  color: #01579b !important;
-}
+  /* 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);
+  }
 
-/* Correct/incorrect styling */
-.correct {
-  background-color: #c8e6c9 !important;
-  border-color: #388e3c !important;
-  color: #2e7d32;
+/* 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;
+    }
 }
 
-.incorrect {
-  background-color: #ffcdd2 !important;
-  border-color: #c62828 !important;
-  color: #b71c1c;
+/* optional: if the header has a teal background */
+.header-on-teal .icon-btn.back {
+  background: #007e74;
+  border-color: #00756c;
 }
 
-/* Footer layout */
-.question-footer {
-  display: flex;
-  justify-content: space-between;
-  margin-top: 2vw;
-  align-items: center;
+  .header-on-teal .icon-btn.back .icon-img {
+    filter: brightness(0) invert(1); /* make arrow white */
+  }
+
+
+.passage-text .highlight {
+  background-color: yellow;
 }
 
-.right-buttons {
-  display: flex;
-  gap: 1vw;
+
+/* ===== Congratulations modal ===== */
+.congrats-overlay {
+  position: fixed;
+  inset: 0;
+  display: grid;
+  place-items: center;
+  /*background: rgba(0, 0, 0, 0.45);*/
 }
 
-/* Buttons */
-.prev-btn, .submit-btn, .next-btn, .reset-btn {
-  background-color: #006780;
-  color: white;
-  font-size: 1.3vw;
-  font-weight: bold;
-  padding: 0.8vw 2vw;
-  border: none;
-  border-radius: 0.5vw;
-  cursor: pointer;
-  transition: background-color 0.3s, transform 0.3s;
+.congrats-card {
+  text-align: center;
+  margin: 47px auto;
+  padding: 40px;
+  background: white;
+  border-radius: 15px;
+  width: 70vw;
+  height: 70vh;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  font-family: 'Pacifico', cursive;
+  position: relative;
+  z-index: 1;
+  box-shadow: 0 .4vw 1vw rgba(0, 0, 0, .1);
+  border: 9px solid #009688;
+  top: 3vw;
 }
 
-  .prev-btn:hover,
-  .submit-btn:hover,
-  .next-btn:hover,
-  .reset-btn:hover {
-    background-color: #18788f;
-    transform: scale(1.05);
+  .congrats-card h2 {
+    margin: 8px 0 6px;
+    color: #0e3e45;
+    font-weight: 800;
+    color: #4ca1af;
+    margin-bottom: 15px;
+    font-size: 2.5vw;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    text-align: center;
   }
 
-  .prev-btn:disabled,
-  .submit-btn:disabled,
-  .next-btn:disabled,
-  .reset-btn:disabled {
-    background-color: #aaa;
-    cursor: not-allowed;
+  .congrats-card p {
+    margin: 0 0 16px;
+    color: #0e3e45;
+    /* color: #4ca1af; */
+    margin-bottom: 15px;
+    font-size: 2.5vw;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    text-align: center;
   }
 
+/* Score badge */
+.score-badge {
+  display: inline-flex;
+  align-items: baseline;
+  gap: 6px;
+  margin-bottom: 10px;
+  padding: 10px 14px;
+  border-radius: 999px;
+  background: #eef7f6;
+  color: #0e3e45;
+  font-weight: 800;
+  /* color: #4ca1af; */
+  margin-bottom: 15px;
+  font-size: 2.5vw;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  text-align: center;
+}
+
 
-.selected-option {
-  background-color: #e1f5fe !important;
-  border: 2px solid #0277bd !important;
-  color: #01579b !important;
-  font-weight: 600;
-  padding: 0.8vw 1vw;
-  border-radius: 2vw;
+
+.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;
 }
+
+  .start-over-btn:hover {
+    box-shadow: 0 12px 24px rgba(0,103,128,.25);
+  }

src/app/reading/reading.component.html

@@ -1,191 +1,301 @@
 <div class="reading-container">
+  <!-- Header -->
   <div class="header-container">
     <div class="logo">
       <a (click)="goToHome()" routerLink="/home">
         <img src="assets/images/pykara-logo.png" alt="Pykara Logo" />
       </a>
     </div>
+
     <div class="header-title">
       <h1>Reading</h1>
     </div>
+
     <div class="home-btn">
       <a (click)="goToHome()" routerLink="/home">
         <img src="assets/images/home.png" alt="Home" class="home-icon" />
       </a>
     </div>
   </div>
-  <img src="assets/images/grammar-bg.png" alt="Chat Background" class="grammar-bg" />
 
+  <!-- Background -->
+  <img src="assets/images/grammar-bg.png" alt="Background" class="grammar-bg" />
 
-  <!-- Main Container -->
-  <div class="main-container">
+  <!-- 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" />
+        </div>
 
-    <!-- Intro Section -->
-    <div class="intro-section" *ngIf="!content && !hasStarted">
-      <div class="intro-left-image">
-        <img src="assets/images/reading/teacher.png" alt="Reading Illustration" />
-      </div>
-      <div class="right-content">
-        <h2>Welcome to the Reading Exercise</h2>
-        <p>
-          The reading component is designed to enhance comprehension skills through topic-based, auto-generated passages and interactive questions.
-          It begins with selecting a topic and difficulty level, after which a custom passage is generated.
-          After reading the passage, related questions appear to test understanding, strengthen vocabulary, and build critical thinking.
-          This structured method encourages active engagement with the content and supports independent learning.
-          With clear visuals and a simple interface, the activity becomes both effective and engaging.
-          Overall, it serves as a valuable tool for improving language proficiency, reasoning ability, and long-term retention in an enjoyable and guided manner.
-        </p>
-
-        <div class="center-controls">
-          <input type="text"
-                 [(ngModel)]="topic"
-                 placeholder="Enter or Select a Topic"
-                 (focus)="showSuggestions = true"
-                 (input)="onTyping()"
-                 (blur)="hideSuggestionsWithDelay()" />
-
-          <select [(ngModel)]="difficulty">
-            <option value="easy" selected>Easy</option>
-            <option value="medium">Medium</option>
-            <option value="hard">Hard</option>
-          </select>
-
-          <button class="submit-button"
-                  (click)="generateContent()"
-                  [disabled]="!topic.trim() || !difficulty.trim() || isGenerateDisabled">
-            <span>Generate</span>
-          </button>
+        <!-- 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.
+          </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 -->
+              <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>
+                </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.
+            </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>
+                <option [ngValue]="'easy'">Easy</option>
+                <option [ngValue]="'medium'">Medium</option>
+                <option [ngValue]="'hard'">Hard</option>
+              </select>
+              <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>
+          </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">
 
-        <!-- Suggestions -->
-        <div class="suggestion-box" *ngIf="showSuggestions">
-          <span (mousedown)="selectSuggestion('Water Cycle')">Water Cycle</span>
-          <span (mousedown)="selectSuggestion('Photosynthesis')">Photosynthesis</span>
-          <span (mousedown)="selectSuggestion('Global Warming')">Global Warming</span>
-          <span (mousedown)="selectSuggestion('My School')">My School</span>
-          <span (mousedown)="selectSuggestion('Solar System')">Solar System</span>
-          <span (mousedown)="selectSuggestion('Save Environment')">Save Environment</span>
+          <p>
+            {{ errorMessage || 'We could not create the passage right now. Please try again.' }}
+          </p>
+          <button class="close-btn1" (click)="closeErrorPopup()">Close</button>
         </div>
       </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>
 
-    <!-- Paragraph Section -->
+        <h2 class="reading-title">Let’s Start Reading!</h2>
 
-    <div *ngIf="content && !hasStarted" class="content-block">
-      <div class="content-header">
-        <div class="back-arrow" (click)="goToIntroSection()">
-          <img src="assets/images/reading/back.png" alt="Back to Intro" class="arrow-icon" />
+        <!-- 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>
+          -->
         </div>
-        <h2 class="centered-title">Let’s Start Reading!</h2>
-        <div class="right-spacer"></div>
       </div>
-      <div class="content-scroll">
-        <p>{{ content }}</p>
+
+      <!-- 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>
+      </div>
+
+      <!-- Passage -->
+      <div class="passage-shell">
+        <div class="passage-text" [innerHTML]="transformContent(content)"></div>
       </div>
 
-      <div class="button-container">
-        <button (click)="generateQuestions()"
-                class="submit-button"
-                 [disabled]="isGenerateQuestionDisabled">
+      <!-- Footer -->
+      <div class="reading-actions">
+        <button class="btn-primary"
+                (click)="stopReadAloud(); generateQuestions()"
+                [disabled]="isGenerateQuestionDisabled">
           Generate Questions
         </button>
-        <button (click)="resetAll()" class="reset-button">Reset</button>
-      </div>
-    </div>
 
-    <!-- Question Section -->
-    <div class="question-navigation" *ngIf="hasStarted && !hasCompleted && questions?.length">
-      <div class="question-header">
-        <div class="back-arrow" (click)="goToContentBlock()">
-          <img src="assets/images/reading/back.png" alt="Back to Content" class="arrow-icon" />
-        </div>
-        <h2 class="centered-title">Question {{ currentQuestionIndex + 1 }} of {{ questions.length }}</h2>
-        <div class="right-spacer">
-          <button class="close-btn" (click)="goBack()" aria-label="Close">✖</button>
+        <!-- Centered loader while generating questions -->
+        <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>
       </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>
 
-      <!-- Question Text -->
-      <p class="question-text">{{ questions[currentQuestionIndex].question }}</p>
-
-      <!-- Options and Image -->
-      <div class="question-content-row">
-        <div class="options-container">
-          <label *ngFor="let option of questions[currentQuestionIndex].options"
-                 [ngClass]="{
-                   'selected-option': !questions[currentQuestionIndex].isChecked && selectedAnswers[questions[currentQuestionIndex].question] === option,
-                   'correct': questions[currentQuestionIndex].isChecked && questions[currentQuestionIndex].correct_answer === option,
-                   'incorrect': questions[currentQuestionIndex].isChecked && selectedAnswers[questions[currentQuestionIndex].question] === option && option !== questions[currentQuestionIndex].correct_answer
-                 }"
-                 style="display: flex; align-items: center; gap: 0.8vw; cursor: pointer;">
-            <input type="radio"
-                   [name]="'question_' + currentQuestionIndex"
-                   [value]="option"
-                   [checked]="getSelectedAnswer() === option"
-                   (change)="setSelectedAnswer(option)"
-                   [disabled]="questions[currentQuestionIndex].isChecked"
-                   class="radio-blue" />
-            {{ option }}
-          </label>
+        <div class="mcq-card__actions">
+          <button class="icon-btn1" (click)="startOver()" aria-label="Close">✖</button>
         </div>
+      </div>
 
-        <div class="question-side-image">
-          <img [src]="getFeedbackImage()" alt="Rabbit Feedback Image" />
+      <!-- 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]="{
+                '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" />
+              <span class="slot">{{ ['A','B','C','D'][i] }}:</span>
+              <span class="opt-text">{{ option }}</span>
+            </label>
+          </li>
+        </ul>
       </div>
 
-      <!-- Navigation Buttons -->
-      <div class="question-footer">
-        <button class="prev-btn"
-                (click)="prevQuestion()"
-                [disabled]="currentQuestionIndex === 0">
-          ◀ Previous
+      <!-- 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>
 
-        <div class="right-buttons">
-          <button *ngIf="!questions[currentQuestionIndex].isChecked"
-                  class="submit-btn"
-                  (click)="validateAnswer()"
-                  [disabled]="!selectedAnswers[questions[currentQuestionIndex].question]">
-            Submit
-          </button>
 
-          <button *ngIf="questions[currentQuestionIndex].isChecked && currentQuestionIndex < questions.length - 1"
-                  class="next-btn"
-                  (click)="nextQuestion()">
-            Next ▶
-          </button>
+        <!-- Next (for Q1 & Q2 after submit) -->
+        <button *ngIf="questions[currentQuestionIndex].isChecked && currentQuestionIndex < questions.length - 1"
+                class="next-btn"
+                (click)="nextQuestion()">
+          Next ▶
+        </button>
 
-          <button *ngIf="questions[currentQuestionIndex].isChecked && currentQuestionIndex === questions.length - 1"
-                  class="reset-btn"
-                  (click)="regenerateQuestionsOnly()">
-            Regenerate Questions
-          </button>
-        </div>
-      </div>
-    </div>
-    </div>
 
-    <!-- Completion Message -->
-    <div *ngIf="hasCompleted" class="generate-content-container center-completion">
-      <div class="completion-message">
-        <p class="feedback-message">✅ You have completed all questions!</p>
-        <button (click)="resetAll()" class="reset-button">Reset</button>
       </div>
     </div>
 
-    <!-- Loader -->
-    <div *ngIf="loadingQuestions" class="loader-overlay">
-      <div class="loader"></div>
-    </div>
 
-    <!-- Error Popup -->
-    <div *ngIf="showPopup" class="popup-overlay">
-      <div class="popup-content">
-        <p>{{ errorMessage }}</p>
-        <button class="close-btn" (click)="showPopup = false">Close</button>
+
+  </div>
+
+
+
+  <!-- Congratulations overlay must be OUTSIDE the main-container -->
+  <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>
       </div>
+
+      <h2>🎉 Congratulations 🎉</h2>
+      <p>You have completed all questions.</p>
+
+      <button class="start-over-btn" (click)="startOver()">Start Over</button>
     </div>
 
   </div>

src/app/reading/reading.component.ts

@@ -1,6 +1,8 @@
-import { Component } from '@angular/core';
+import { Component, ElementRef, ViewChild } from '@angular/core';
 import { ReadingService } from './reading.service';
 import { Router } from '@angular/router';
+import confetti from 'canvas-confetti';
+
 
 @Component({
   selector: 'app-reading',
@@ -9,70 +11,140 @@ import { Router } from '@angular/router';
 })
 
 export class ReadingComponent {
-  loadingQuestions: boolean = false;
+  // basic state
+  loadingQuestions = false;
+  isGeneratingContent = false;
+  isGenerateDisabled = false;
+  isGenerateQuestionDisabled = false;
+  showPopup = false;
+  showSuggestions = false;
+
+
+  // quiz state
   hasStarted = false;
-  hasCompleted = false; 
+  currentQuestionIndex = 0;
+  questions: { question: string; options: string[]; correct_answer: string; isChecked?: boolean }[] = [];
+  selectedAnswers: { [key: string]: string } = {};
+
+  // content state
   topic: string = '';
-  difficulty: string = 'easy';  
+  difficulty: 'easy' | 'medium' | 'hard' = 'easy';
   content: string = '';
-  questions: { question: string; options: string[]; correct_answer: string; isChecked?: boolean }[] = [];
-  selectedAnswers: { [key: string]: string } = {}; 
   errorMessage: string = '';
-  feedback: string = '';
-  allAnswered: boolean = false;  
-  isSubmitted: boolean = false; 
-  isGeneratingContent: boolean = false; 
-  isGenerateDisabled: boolean = false; 
-  isGenerateQuestionDisabled: boolean = false;  
-  showPopup: boolean = false;  
-  showSuggestions = false;
-  isValidateDisabled: boolean = false;
-  waiting: boolean = false;
-  currentQuestionIndex: number = 0;
-  isLoaderVisible: boolean = false;
+  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',
+      'Good Manners', 'Healthy Eating', 'Personal Hygiene', 'Seasons of the Year',
+      'Weather Today', 'Animals on the Farm', 'Wild Animals', 'Pets and Care',
+      'Parts of a Plant', 'Uses of Water', 'Saving Water', 'The Sun and the Moon',
+      'Our Five Senses', 'Road Safety', 'Recycling Basics', 'Teamwork in Class'
+    ],
+    medium: [
+      'Water Cycle', 'Photosynthesis', 'Solar System', 'States of Matter',
+      'Simple Machines', 'Electricity Basics', 'Magnetism Basics',
+      'Human Digestive System', 'Circulatory System Basics',
+      'Food Chain and Web', 'Ecosystems', 'Renewable Energy',
+      'Weather and Climate', 'Volcanoes and Earthquakes',
+      'Map Skills and Symbols', 'Ancient Egypt', 'Indus Valley Civilization',
+      'Indian Constitution (Basics)', 'Cyber Safety for Kids',
+      'Time Management for Students'
+    ],
+    hard: [
+      'Global Warming and Climate Change', 'Greenhouse Effect', 'Plate Tectonics',
+      'Genetic Inheritance (Basics)', 'Natural Selection (Basics)',
+      'Nervous System Overview', 'Robotics in Daily Life',
+      'Artificial Intelligence (Basics)', 'Computer Networks (Basics)',
+      'Data Privacy and Security', 'Internet and Web Architecture (Basics)',
+      'World War II (Overview)', 'Industrial Revolution',
+      'Democracy and Rights (India)', 'Financial Literacy: Budgeting',
+      'Statistics in Daily Life (Mean, Median)',
+      'Renewable vs Non-renewable Energy', 'Entrepreneurship Basics',
+      'Ethics in Technology', 'Career Planning and Growth Mindset'
+    ]
+  };
+
+  constructor(
+    private readingService: ReadingService,
+    private router: Router,
+    private el: ElementRef
+  ) { }
 
+  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();
 
-  constructor(private readingService: ReadingService, private router: Router) { }
+    // Make sure any congrats overlay is closed
+    this.showCongrats = false;
+  }
 
 
 
   generateContent(): void {
-    this.errorMessage = '';
     this.showPopup = false;
+    this.errorMessage = '';
 
-    // Validation: Topic and level must be chosen
     if (!this.topic.trim() || !this.difficulty.trim()) {
       this.errorMessage = 'Please enter a topic and select a difficulty level.';
       this.showPopup = true;
       return;
     }
 
-    // Disable the button and show loader
     this.isGenerateDisabled = true;
     this.isGeneratingContent = true;
 
     this.readingService.generateContent(this.topic, this.difficulty).subscribe(
       (response) => {
-        const generated = response.content?.toLowerCase();
+        const text = (response?.content || '').trim();
 
-        // Check if the content contains the topic (basic validity filter)
-        if (!generated.includes(this.topic.toLowerCase())) {
-          this.errorMessage = 'Please enter a valid or meaningful topic.';
+        // ✅ Do not check for exact topic substring
+        if (!text) {
+          this.errorMessage = 'The server did not return any content.';
           this.showPopup = true;
           this.isGeneratingContent = false;
           this.isGenerateDisabled = false;
           this.content = '';
+          this.normalizedTopic = '';
           return;
         }
 
-        this.content = response.content;
+        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);
-        this.errorMessage = 'An error occurred while generating content.';
+        // ✅ 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;
         this.isGeneratingContent = false;
         this.isGenerateDisabled = false;
@@ -81,241 +153,427 @@ export class ReadingComponent {
   }
 
 
-  getSelectedAnswer(): string {
-    const current = this.questions?.[this.currentQuestionIndex];
-    return current && this.selectedAnswers[current.question] || '';
-  }
-
-  setSelectedAnswer(value: string): void {
-    const current = this.questions?.[this.currentQuestionIndex];
-    if (current) {
-      this.selectedAnswers[current.question] = value;
-    }
-  }
-
-
-  getFeedbackImage(): string {
-    const current = this.questions[this.currentQuestionIndex];
-    const selected = this.selectedAnswers[current?.question];
-
-    if (!current?.isChecked) {
-      return 'assets/images/listen/thinking.png'; // default before validation
-    }
-
-    return selected === current.correct_answer
-      ? 'assets/images/listen/happy.png'
-      : 'assets/images/listen/sad.png';
-  }
-
-
-
+  /** 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);
-
-        // ✅ Reset UI state
         this.selectedAnswers = {};
         this.currentQuestionIndex = 0;
-        this.hasCompleted = false;
-        this.questions.forEach(q => q.isChecked = false);
+        this.questions.forEach(q => (q.isChecked = false));
         this.hasStarted = true;
         this.loadingQuestions = false;
       },
       (error) => {
         console.error(error);
         this.loadingQuestions = false;
+        // IMPORTANT: allow user to try again on failure
+        this.refreshGenerateQuestionsState(); // passage still exists → re-enable button
       }
     );
   }
 
-  
-  parseQuestions(rawQuestions: string) {
-    const questions: any[] = [];
-    const questionBlocks = rawQuestions.split("\n\n");
-    questionBlocks.forEach(block => {
-      const questionObj: any = {};
-      const lines = block.split("\n");
-      questionObj.question = lines[0].replace("Question: ", "").trim();      
-      let optionsText = lines[1].replace("Options: [", "").replace("]", "").trim();
-      questionObj.options = optionsText.split(", ").map(option => option.trim());    
-      questionObj.correct_answer = lines[2].replace("Correct Answer: ", "").trim();
-      questionObj.isChecked = false; 
-      questions.push(questionObj);
-    });
-    return questions;
-  }
-
+  /** 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) => ({
+          question: String(q?.question || '').trim(),
+          options: Array.isArray(q?.options) ? q.options.map((o: any) => String(o)) : [],
+          correct_answer: String(q?.correct_answer || '').trim(),
+          isChecked: false
+        }))
+        .filter(q => q.question && q.options.length === 4);
+    }
 
-  
-  checkIfAllAnswered() {
-    this.allAnswered = this.questions.every(question => this.selectedAnswers[question.question] !== undefined);
-  }
+    // 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();
 
-  validateAllAnswers() {
-    this.questions.forEach(question => {
-      question.isChecked = true; 
-    });
+      const optionsText = (lines[1] || '')
+        .replace(/^Options:\s*\[/i, '')
+        .replace(/\]\s*$/, '')
+        .trim();
 
-    this.isSubmitted = true; 
-  }
+      //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);
+    });
 
-  isOptionSelected(option: string): boolean {
-    const currentQuestion = this.questions[this.currentQuestionIndex];
-    return currentQuestion &&
-      this.selectedAnswers[currentQuestion.question] === option;
+    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;
+  }
 
-  closePopup() {
-    this.showPopup = false; 
+  /** 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++;
+  }
 
-  handleNext() {
+  /** Instantly marks current question as checked if an answer is chosen. */
+  private markCurrentAsChecked(): void {
+    const curr = this.questions[this.currentQuestionIndex];
+    if (curr && this.selectedAnswers[curr.question]) {
+      curr.isChecked = true;
+    }
+  }
 
-    const current = this.questions[this.currentQuestionIndex];
-    current.isChecked = true; 
-    this.waiting = true;
+  /** Close the error popup. */
+  closeErrorPopup(): void { this.showPopup = false; }
 
-    setTimeout(() => {
-      this.waiting = false;
+  /** Navigate to home route. */
+  goToHome(): void { this.router.navigate(['/home']); }
 
-      if (this.currentQuestionIndex < this.questions.length - 1) {
-        this.currentQuestionIndex++;
-      } else {        
-        this.hasCompleted = true;
-      }
-    }, 3000);
+  /** 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?.();
 
-  goBack(): void {
-    this.hasStarted = false;
-    this.hasCompleted = false;
+    // Inputs / choices
+    this.topic = '';
+    this.difficulty = 'easy';
+    this.normalizedTopic = '';
+
+    // Generated passage and questions
+    this.content = '';
+    this.questions = [];
     this.currentQuestionIndex = 0;
     this.selectedAnswers = {};
-    this.questions = [];
-    this.content = '';
-    this.topic = '';
-    this.isGenerateDisabled = false;
-    this.isGenerateQuestionDisabled = false;
+
+    // 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.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
+  }
 
-  hideSuggestionsWithDelay(): void {
-    setTimeout(() => {
-      this.showSuggestions = false;
-    }, 200);
+  /** 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') {
+      event.preventDefault();
+      this.activeIndex = Math.min(this.activeIndex + 1, this.filteredSuggestions.length - 1);
+    } else if (event.key === 'ArrowUp') {
+      event.preventDefault();
+      this.activeIndex = Math.max(this.activeIndex - 1, 0);
+    } else if (event.key === 'Enter') {
+      event.preventDefault();
+      const pick = this.filteredSuggestions[this.activeIndex] || this.topic;
+      this.selectSuggestion(pick);
+    } else if (event.key === 'Escape') {
+      this.showSuggestions = false;
+    }
+  }
 
-  selectSuggestion(topic: string): void {
-    this.topic = topic;
+  /** Choose a suggestion and close list. */
+  selectSuggestion(val: string): void {
+    this.topic = val || '';
     this.showSuggestions = false;
-   /* this.generateContent();*/
+    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'] || [];
+    this.filteredSuggestions = q ? pool.filter(t => t.toLowerCase().includes(q)).slice(0, 12)
+      : pool.slice(0, 12);
+  }
 
-  isLastQuestion(): boolean {
-    return this.currentQuestionIndex === this.questions.length - 1;
+  /** Clear topic and reopen suggestions. */
+  onClearTopic(): void {
+    this.topic = '';
+    this.errorMessage = '';
+    this.activeIndex = -1;
+    this.showSuggestions = true;
+    this.isGenerateDisabled = false;
   }
-  
 
+  /** Change difficulty and refresh suggestions. */
+  onDifficultyChange(val: string): void {
+    this.difficulty = (val || '') as any;
+    if (!this.difficulty) {
+      this.filteredSuggestions = [];
+      this.showSuggestions = false;
+      this.activeIndex = -1;
+      return;
+    }
+    this.filterSuggestions();
+    this.showSuggestions = true;
+    this.activeIndex = -1;
+  }
 
-  validateAnswer(): void {
-    if (!this.questions[this.currentQuestionIndex]) return;
-    const current = this.questions[this.currentQuestionIndex];
+  /** Apply font size CSS variable. */
+  applyFont(): void {
+    document.documentElement.style.setProperty('--passage-font', `${this.fontPx}px`);
+    localStorage.setItem('passageFontPx', String(this.fontPx));
+  }
 
-    if (this.selectedAnswers[current.question]) {
-      current.isChecked = true;
-      this.isValidateDisabled = true;
+  /** Decrease font size (min 14px). */
+  decreaseFont(): void { this.fontPx = Math.max(14, this.fontPx - 2); this.applyFont(); }
 
-      setTimeout(() => {
-        this.isValidateDisabled = false;
+  /** Increase font size (max 30px). */
+  increaseFont(): void { this.fontPx = Math.min(30, this.fontPx + 2); this.applyFont(); }
 
-        // ✅ Removed this line to prevent auto-move
-        // this.currentQuestionIndex++;
-      }, 1000);
+  /** Init defaults for the screen. */
+  private initState(): void {
+    this.hasStarted = false;
+    this.isGeneratingContent = false;
+    this.isGenerateDisabled = false;
+    this.isGenerateQuestionDisabled = false;
+    this.showPopup = false;
+    this.errorMessage = '';
+    this.topic = '';
+    this.normalizedTopic = '';
+    this.difficulty = 'easy';
+    this.showSuggestions = false;
+    this.activeIndex = -1;
+    this.filteredSuggestions = [];
+    this.content = '';
+    this.questions = [];
+    this.currentQuestionIndex = 0;
+    this.selectedAnswers = {};
+    this.fontPx = parseInt(localStorage.getItem('passageFontPx') || '18', 10);
+    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);
+      const safe = this.escapeHtml(passage).replace(/\n+/g, ' ').trim();
+      return `<p>${safe}</p>`;
+    } catch {
+      return this.escapeHtml(raw || '');
     }
   }
 
+  /** Extract text between "Passage:" and "Summary:". */
+  private extractPassage(raw: string): string {
+    if (!raw) return '';
+    const p = raw.indexOf('Passage:');
+    if (p === -1) return raw;
+    const s = raw.indexOf('Summary:', p + 8);
+    const slice = s === -1 ? raw.slice(p + 8) : raw.slice(p + 8, s);
+    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.';
+      this.showPopup = true;
+      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
+    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';
+    u.onend = () => { this.isReading = false; this.ttsPaused = false; this.ttsUtterance = undefined; };
+    u.onerror = () => { this.isReading = false; this.ttsPaused = false; this.ttsUtterance = undefined; };
+    this.ttsUtterance = u;
+    synth.speak(u);
+    this.isReading = true;
+  }
 
-  goToHome(): void {
-    this.router.navigate(['/home']);
+  /** Stop speech and clear flags. */
+  stopReadAloud(): void {
+    if (typeof window !== 'undefined' && 'speechSynthesis' in window) {
+      window.speechSynthesis.cancel();
+    }
+    this.isReading = false;
+    this.ttsPaused = false;
+    this.ttsUtterance = undefined;
   }
 
 
 
-  prevQuestion() {
-    if (this.currentQuestionIndex > 0) {
-      this.currentQuestionIndex--;
-    }
+
+
+  // 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. */
+  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;
+      this.showCongrats = true;
+      this.triggerConfetti();
+    }, 800);
   }
-  nextQuestion(): void {
-    if (this.currentQuestionIndex < this.questions.length - 1) {
-      this.currentQuestionIndex++;
+
+  /** 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++;
     }
+    return { correct, total };
   }
 
 
-  resetAll(): void {
-    this.topic = '';
-    this.difficulty = 'easy'; // or your default
-    this.content = '';
-    this.hasStarted = false;
-    this.hasCompleted = false;
-    this.questions = [];
-    this.currentQuestionIndex = 0;
-    this.selectedAnswers = {};
-    this.errorMessage = '';
-    this.showPopup = false;
-    this.isGenerateDisabled = false;
-    this.isGenerateQuestionDisabled = false;
-  }
+  private triggerConfetti(): void {
+    if (this.confettiInterval) clearInterval(this.confettiInterval);
 
+    this.confettiInterval = setInterval(() => {
+      confetti({
+        startVelocity: 30,
+        spread: 360,
+        ticks: 60,
+        origin: { x: Math.random(), y: Math.random() - 0.2 },
+      });
+    }, 250);
+  }
 
-  regenerateQuestionsOnly() {
-    // Just regenerate questions from content
-    this.hasStarted = false;
-    this.hasCompleted = false;
-    this.selectedAnswers = {};
-    this.currentQuestionIndex = 0;
-    this.questions = [];
-    this.generateQuestions();  // Assuming this will create a fresh set
+  private stopConfetti(): void {
+    if (this.confettiInterval) {
+      clearInterval(this.confettiInterval);
+      this.confettiInterval = null;
+    }
+    const canvas = document.querySelector('canvas.confetti-canvas');
+    if (canvas) canvas.remove();
   }
 
-  isFormValid(): boolean {
-    return this.topic.trim().length > 0 && this.difficulty.trim().length > 0;
+
+
+  startOver(): void {
+    this.stopConfetti();
+    this.showCongrats = false;
+    this.resetAll();     // use your current reset method
   }
 
-  onTyping(): void {
-    this.showSuggestions = true;
+
+  ngOnDestroy(): void {
+
+    this.stopConfetti();
   }
-  goToIntroSection(): void {
-    this.content = '';
-    this.hasStarted = false;
-    this.isGenerateDisabled = false; // Enable Generate button
+  // 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
+    }
+
+    // After the question has been marked, if it is the last, open the modal
+    this.scheduleCongratsIfLast();
   }
 
-  goToContentBlock(): void {
-    this.hasStarted = false;
-    this.isGenerateQuestionDisabled = false; // Enable Generate Questions button
+
+  /** Enable/disable "Generate Questions" based on whether a passage exists */
+  private refreshGenerateQuestionsState(): void {
+    this.isGenerateQuestionDisabled = !(this.content && this.content.trim().length > 0);
   }
 
+
 }

src/app/writing/writing.component.html

@@ -114,7 +114,7 @@
 
   <div class="feedback-box">
     <ul>
-      <li *ngFor="let suggestion of feedbackList">✅ {{ suggestion }}</li>
+      <li *ngFor="let suggestion of feedbackList"> {{ suggestion }}</li>
     </ul>
   </div>