chore: update grammar chat endpoint + config

src/app/chat/api.service.ts

@@ -1,36 +1,3 @@
-/*import { Injectable } from '@angular/core';
-import { HttpClient } from '@angular/common/http';
-import { Observable } from 'rxjs';
-
-@Injectable({
-  providedIn: 'root'
-})
-export class ApiService {
-
-  //private apiUrl = 'http://127.0.0.1:5000';  // Flask backend URL
-
-  private apiUrl = 'http://localhost:5000/explain-grammar';
-
-  constructor(private http: HttpClient) { }
-
-  // Method to send the grammar question and receive the explanation from Flask backend
-  //askQuestion(question: string): Observable<any> {
-  //  const body = { topic: question };  // Prepare the request body
-  //  return this.http.post<any>(`${this.apiUrl}/explain-grammar`, body);  // Call the Flask API and return the observable
-  //}
-
-  // Method to send the user's question to the Flask backend
-  askQuestion(userInput: string): Observable<any> {
-    const data = { topic: userInput };  // Assuming you're sending the user input as a topic
-
-    return this.http.post<any>(this.apiUrl, data);  // POST request to Flask backend
-  }
-
-}
-*/
-
-
-
 
 import { Injectable } from '@angular/core';
 import { HttpClient, HttpHeaders } from '@angular/common/http';
@@ -40,32 +7,16 @@ import { Observable } from 'rxjs';
   providedIn: 'root'
 })
 export class ApiService {
-  private baseUrl = 'http://localhost:5012';
+  //private baseUrl = 'http://localhost:5012';
   //private apiUrl = 'http://localhost:5012/explain-grammar';
-  constructor(private http: HttpClient) { }
-
-
-  //askQuestion(userInput: string, sessionId: string | null): Observable<any> {
-  //  const headers = { 'Content-Type': 'application/json' };
-
-  //  // Include `session_id` in request only if available
-  //  const data = sessionId
-  //    ? { topic: userInput, session_id: sessionId }
-  //    : { topic: userInput };
-
-  //  console.log("Sending request to Flask:", this.apiUrl, data);
-
-  //  return this.http.post<any>(this.apiUrl, data, { headers });
-  //}
-
-  // Fetch grammar question suggestions
+  private baseUrl = location.hostname.endsWith('hf.space')
+    ? 'https://pykara-py-learn-backend.hf.space/media'
+    : 'http://localhost:5000/media';
 
+  constructor(private http: HttpClient) { }
 
-  //getGrammarSuggestions(input: string): Observable<any> {
-  //  const headers = new HttpHeaders({ 'Content-Type': 'application/json' });
 
-  //  return this.http.post<any>(this.apiUrl, { topic: input }, { headers });  // ✅ Fix: Send input as "topic"
-  //}
+  
 
   askQuestion(userInput: string, sessionId: string | null): Observable<any> {
     const headers = { 'Content-Type': 'application/json' };

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

@@ -1021,158 +1021,157 @@ h3 {
 
 
 /*hint button css start here */
+/* Anchor the i button on the right side of the screen (adjust as you like) */
+.hint-anchor {
+  position: fixed; /* or absolute relative to a container */
+  top: 30vh; /* vertical position */
+  right: 33px; /* distance from right edge */
+  z-index: 1101;
+}
 
-
-/* Tooltip Container */
-.tooltip-container {
-  position: absolute;
-  top: 10vw; /* Adjust position relative to the viewport */
-  right: 6vw; /* Position the tooltip relative to the right */
-  background-color: #f8f9fa; /* Light background color */
-  color: black; /* Dark text color for contrast */
-  border-radius: 1vw; /* Rounded corners for responsiveness */
-  padding: 1.5vw; /* Padding for content */
-  width: 50vw; /* Tooltip width for responsiveness */
-  box-shadow: 0 0.4vw 0.8vw rgba(0, 0, 0, 0.2); /* Subtle shadow for visibility */
-  transition: opacity 0.3s ease-in-out; /* Smooth fade-in/out effect */
-  opacity: 0; /* Hidden by default */
-  z-index: 999; /* Ensure it appears above other elements */
-  font-size: 1vw; /* Font size relative to viewport width */
-  text-align: left; /* Align the text to the left */
-  word-wrap: break-word; /* Ensure long words wrap */
-  white-space: normal; /* Allow wrapping of long text */
-}
-
-  /* Tooltip when visible */
-  .tooltip-container.active {
-    opacity: 1; /* Make the tooltip visible */
-  }
-
-  /* Tooltip Arrow (Triangle) */
-  .tooltip-container::after {
-    content: "";
-    position: absolute;
-    top: 14vw; /* Adjust arrow position in vw */
-    left: 49vw; /* Position the arrow relative to the tooltip */
-    border-width: 1vw; /* Adjust arrow size for responsiveness */
-    border-style: solid;
-    border-color: #f8f9fa transparent transparent transparent; /* Match arrow color with the tooltip */
-  }
-
-/* Close Button */
-.tooltip-close-btn {
-  position: absolute;
-  top: 0.5vw; /* Vertical alignment for responsiveness */
-  right: 1vw; /* Horizontal alignment */
-  background: none;
-  border: none;
-  font-size: 1.2vw; /* Font size for responsiveness */
-  color: #333; /* Default color */
+/* i button design (compact circular) */
+.hint-toggle-btn {
+  width: 56px;
+  height: 56px;
+  border-radius: 50%;
+  border: 0;
+  background: radial-gradient(120% 120% at 30% 20%, #18788f 0%, #006780 70%);
+  color: #fff;
+  font-weight: 800;
+  font-size: 22px;
+  line-height: 1;
   cursor: pointer;
-  font-weight: bold;
-  transition: color 0.2s ease; /* Hover effect transition */
+  box-shadow: 0 8px 24px rgba(0,0,0,.18);
+  display: grid;
+  place-items: center;
+  transition: transform .18s ease, box-shadow .18s ease;
 }
 
-  .tooltip-close-btn:hover {
-    color: #dc3545; /* Change color on hover */
+  .hint-toggle-btn:hover {
+    transform: translateY(-1px) scale(1.04);
+    box-shadow: 0 12px 28px rgba(0,0,0,.22);
   }
 
-/* Responsive Design for 1366px */
-@media (max-width: 1366px) {
-  .tooltip-container {
-    width: 40vw; /* Slightly increase width for 1366px screens */
-    padding: 1.2vw; /* Adjust padding */
-    font-size: 0.9vw; /* Reduce font size */
+  .hint-toggle-btn:focus-visible {
+    outline: 3px solid rgba(0,103,128,.35);
+    outline-offset: 3px;
   }
 
-    .tooltip-container::after {
-      left: 38vw; /* Adjust arrow position */
-    }
-
-  .tooltip-close-btn {
-    font-size: 1vw; /* Adjust close button size */
-  }
+/* Popover: opens to the LEFT of the i button */
+.hint-popover {
+  position: absolute;
+  top: 11vw;
+  right: calc(100% + 35px);
+  transform: translateY(-46%);
+  width: min(51vw, 96vw);
+  max-height: 67vh;
+  background: #fff;
+  border-radius: 12px;
+  padding: 16px 20px;
+  box-shadow: 0 12px 32px rgba(0, 0, 0, .25);
+  animation: _ngcontent-ng-c2774789824_hint-slide-in .18s ease;
+  border: 4px solid #009688;
 }
 
-/* Responsive Design for Smaller Screens (768px and below) */
-@media (max-width: 768px) {
-  .tooltip-container {
-    width: 50vw; /* Adjust tooltip width */
-    padding: 2vw; /* Increase padding for smaller screens */
-    font-size: 1.2vw; /* Adjust font size for readability */
+  /* Arrow pointing at the button */
+  .hint-popover::before {
+    content: "";
+    position: absolute;
+    top: 50%;
+    right: -8px;
+    width: 14px;
+    height: 14px;
+    background: #fff;
+    transform: translateY(-50%) rotate(45deg);
+    box-shadow: 2px -2px 8px rgba(0,0,0,.08);
   }
 
-    .tooltip-container::after {
-      left: 47vw; /* Adjust arrow position */
-    }
+/* Round close (X) inside the popover */
+.hint-close {
+  position: absolute;
+  top: 8px;
+  right: 10px;
+  width: 40px;
+  height: 40px;
+  border: 0;
+  border-radius: 50%;
+  background: #eeeeee;
+  color: red;
+  font-size: 2vw;
+  line-height: 0.9;
+  display: grid;
+  place-items: center;
+  cursor: pointer;
+  transition: background .15s ease, transform .15s ease;
+  font-weight: 900;
+}
 
-  .tooltip-close-btn {
-    font-size: 1.5vw; /* Adjust close button size */
+  .hint-close:hover {
+    background: #e0e0e0;
+    transform: scale(1.04);
   }
-}
 
-/* Responsive Design for Very Small Screens (480px and below) */
-@media (max-width: 480px) {
-  .tooltip-container {
-    width: 60vw; /* Increase width for smaller screens */
-    padding: 3vw; /* Add more padding */
-    font-size: 1.5vw; /* Larger font for readability */
+  .hint-close:focus-visible {
+    outline: 3px solid rgba(0,103,128,.35);
+    outline-offset: 2px;
   }
 
-    .tooltip-container::after {
-      left: 57vw; /* Adjust arrow position */
-    }
+/* List spacing */
+.hint-title {
+  margin: 0 0 8px;
+  font-size: 18px;
+}
 
-  .tooltip-close-btn {
-    font-size: 2vw; /* Adjust close button size */
-  }
+.hint-list {
+  margin: 0;
+  padding-left: 1rem;
 }
 
+.hint-item {
+  margin-bottom: .5rem;
+}
 
+/* Transparent backdrop that closes on click */
+.hint-backdrop {
+  position: fixed;
+  inset: 0;
+  background: transparent; /* no dim; only captures outside clicks */
+  z-index: 1100;
+}
 
-/* Zoom-in and zoom-out animation for hint button */
-@keyframes hint-zoom {
-  0% {
-    transform: scale(1);
+/* Entrance animation */
+@keyframes hint-slide-in {
+  from {
+    transform: translateY(-50%) translateX(8px);
+    opacity: .0;
   }
 
-  50% {
-    transform: scale(1.2);
-  }
-  /* Slightly zoom in */
-  100% {
-    transform: scale(1);
+  to {
+    transform: translateY(-50%) translateX(0);
+    opacity: 1;
   }
 }
 
-.hint-toggle-btn {
-  background-color: #5c67f2;
-  color: white;
-  padding: 12px 18px;
-  font-size: 1.5rem;
-  border: none;
-  border-radius: 50%;
-  cursor: pointer;
-  transition: all 0.3s ease;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  width: 50px;
-  height: 50px;
-}
-
-  /* Apply zoom-in effect when hints are available */
-  .hint-toggle-btn.blink {
-    animation: hint-zoom 1s infinite alternate;
+/* Mobile: show popover above the button for better fit */
+@media (max-width: 640px) {
+  .hint-anchor {
+    right: 12px;
+    bottom: 80px;
+    top: auto;
   }
 
-/*.hint-item {
-  margin-bottom: 10px;*/ /* ✅ Adds spacing between each hint */
-/*}*/
-
+  .hint-popover {
+    right: 0;
+    bottom: calc(100% + 10px);
+    top: auto;
+    transform: none;
+    width: min(94vw, 380px);
+  }
 
-.hint-item {
-  margin-bottom: 1rem; /* ✅ One-line spacing between hints */
-  font-size: 1rem;
+    .hint-popover::before {
+      right: 12px;
+      top: auto;
+      bottom: -7px;
+      transform: rotate(45deg);
+    }
 }
-

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

@@ -99,14 +99,14 @@
     <div class="questions-container" *ngIf="questions.length > 0 && !isAllLevelsCompleted">
       <div class="quesHintbtn">
         <h2 class="section-title">📝 Questions</h2>
-        <button *ngIf="isFirstAttemptDone && hints.length > 0"
-                class="hint-toggle-btn"
-                [class.blink]="hasNewHints"
-                (click)="toggleHintMenu()">
-        </button>
+        <!--<button *ngIf="isFirstAttemptDone && hints.length > 0"
+            class="hint-toggle-btn"
+            [class.blink]="hasNewHints"
+            (click)="toggleHintMenu()">
+    </button>-->
       </div>
 
-      
+
 
 
 
@@ -139,21 +139,54 @@
           </div>
         </li>
       </ul>
+      <!-- Show the i button ONLY after first validation and when there are hints -->
+      <ng-container *ngIf="isFirstAttemptDone && hints?.length">
+        <div class="hint-anchor" (click)="$event.stopPropagation()">
+          <!-- i button -->
+          <button type="button"
+                  class="hint-toggle-btn"
+                  aria-haspopup="dialog"
+                  [attr.aria-expanded]="isHintMenuVisible ? 'true' : 'false'"
+                  aria-controls="hintsPanel"
+                  (click)="toggleHintMenu()">
+            
+          </button>
+
+          <!-- Popover opening to the LEFT -->
+          <section *ngIf="isHintMenuVisible"
+                   id="hintsPanel"
+                   class="hint-popover"
+                   role="dialog"
+                   aria-modal="true"
+                   aria-label="Hints"
+                   (click)="$event.stopPropagation()">
+            <button type="button"
+                    class="hint-close"
+                    aria-label="Close hints"
+                    (click)="closeHints()">
+              ×
+            </button>
+
+            <h3 class="hint-title">Hints</h3>
+            <ul class="hint-list" role="list">
+              <ng-container *ngFor="let hint of hints; let i = index">
+                <li *ngIf="hint && hint.trim() !== '' && userAnswers[i] !== questionsWithAnswers[i]?.correctAnswer"
+                    class="hint-item">
+                  <strong>Hint for Question {{ i + 1 }}:</strong> {{ hint }}
+                </li>
+              </ng-container>
+            </ul>
+          </section>
+        </div>
 
+        <!-- Outside click closes it -->
+        <div *ngIf="isHintMenuVisible"
+             class="hint-backdrop"
+             (click)="closeHints()"></div>
+      </ng-container>
 
 
-      <!-- Tooltip for Hints (Only Show Incorrect Answers) -->
-      <div *ngIf="isHintMenuVisible && hints.length > 0" class="tooltip-container active">
-        <button class="tooltip-close-btn" (click)="toggleHintMenu()">×</button>
-        <ul>
-          <ng-container *ngFor="let hint of hints; let i = index">
-            <li *ngIf="hint && hint.trim() !== '' && userAnswers[i] !== questionsWithAnswers[i]?.correctAnswer" class="hint-item">
-              <strong>Hint for Question {{ i + 1 }}:</strong> {{ hint }}
-            </li>
-          </ng-container>
-        </ul>
 
-      </div>
     </div>
   </div>
 

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

@@ -240,7 +240,7 @@ export class GenerateQuestionsComponent {
     this.isQuestionsGenerated = false;
     this.isTopicLocked = false;
     this.validated = false;
-    this.currentDifficulty = 'easy';
+    this.currentDifficulty = 'basic';
     this.error = '';
     this.isGenerateDisabled = false;
     this.isResetDisabled = true;
@@ -319,7 +319,8 @@ export class GenerateQuestionsComponent {
               console.log(`✅ Correct answer for question ${index + 1}: ${this.userAnswers[index]}`);
               this.readonlyAnswers[index] = true;
               this.hints[index] = '';
-              this.userAnswers[index] = correctAnswer;
+              //this.userAnswers[index] = correctAnswer;
+              this.userAnswers[index] = this.questionsWithAnswers[index].correctAnswer;
             } else {
               console.log(`❌ Incorrect answer for question ${index + 1}: ${this.userAnswers[index]}`);
 
@@ -408,7 +409,11 @@ export class GenerateQuestionsComponent {
   }
 
   areAllCorrectAnswersDisplayed(): boolean {
-    return this.userAnswers.every((answer, index) => answer === this.questionsWithAnswers[index].correctAnswer);
+    return this.userAnswers.every((answer, index) =>
+      (answer ?? '').trim().toLowerCase() ===
+      (this.questionsWithAnswers[index]?.correctAnswer ?? '').trim().toLowerCase()
+    );
+
   }
 
   transitionDifficulty() {
@@ -537,12 +542,12 @@ export class GenerateQuestionsComponent {
 
 
 
-  toggleHintMenu() {
-    if (this.hints.length > 0) {
-      this.isHintMenuVisible = !this.isHintMenuVisible; // Toggle only if hints exist
-      console.log("Hint Menu Toggled:", this.isHintMenuVisible); // Debugging
-    }
-  }
+  //toggleHintMenu() {
+  //  if (this.hints.length > 0) {
+  //    this.isHintMenuVisible = !this.isHintMenuVisible; // Toggle only if hints exist
+  //    console.log("Hint Menu Toggled:", this.isHintMenuVisible); // Debugging
+  //  }
+  //}
 
   
 
@@ -592,8 +597,30 @@ export class GenerateQuestionsComponent {
 
 
 
+  closeHints(): void {
+    this.isHintMenuVisible = false;
+    this.hasNewHints = false; // optional: mark hints as seen
+  }
+
+  openHints(): void {
+    if (this.hints?.length) {
+      this.isHintMenuVisible = true;
+      this.hasNewHints = false;
+    }
+  }
+
+  /* Keep your existing toggle if you’re calling it from the i button */
+  toggleHintMenu(): void {
+    this.isHintMenuVisible ? this.closeHints() : this.openHints();
+  }
 
+  ///* Close on Esc key */
+  //@HostListener('document:keydown.escape')
+  //onEscClose(): void {
+  //  if (this.isHintMenuVisible) this.closeHints();
+  //}
 
+  
 
 }