fix

package-lock.json

@@ -271,6 +271,7 @@
           "url": "https://github.com/sponsors/ai"
         }
       ],
+      "peer": true,
       "dependencies": {
         "nanoid": "^3.3.7",
         "picocolors": "^1.0.0",
@@ -354,6 +355,7 @@
       "version": "17.3.12",
       "resolved": "https://registry.npmjs.org/@angular/animations/-/animations-17.3.12.tgz",
       "integrity": "sha512-9hsdWF4gRRcVJtPcCcYLaX1CIyM9wUu6r+xRl6zU5hq8qhl35hig6ounz7CXFAzLf0WDBdM16bPHouVGaG76lg==",
+      "peer": true,
       "dependencies": {
         "tslib": "^2.3.0"
       },
@@ -420,6 +422,7 @@
       "version": "17.3.12",
       "resolved": "https://registry.npmjs.org/@angular/common/-/common-17.3.12.tgz",
       "integrity": "sha512-vabJzvrx76XXFrm1RJZ6o/CyG32piTB/1sfFfKHdlH1QrmArb8It4gyk9oEjZ1IkAD0HvBWlfWmn+T6Vx3pdUw==",
+      "peer": true,
       "dependencies": {
         "tslib": "^2.3.0"
       },
@@ -435,6 +438,7 @@
       "version": "17.3.12",
       "resolved": "https://registry.npmjs.org/@angular/compiler/-/compiler-17.3.12.tgz",
       "integrity": "sha512-vwI8oOL/gM+wPnptOVeBbMfZYwzRxQsovojZf+Zol9szl0k3SZ3FycWlxxXZGFu3VIEfrP6pXplTmyODS/Lt1w==",
+      "peer": true,
       "dependencies": {
         "tslib": "^2.3.0"
       },
@@ -455,6 +459,7 @@
       "resolved": "https://registry.npmjs.org/@angular/compiler-cli/-/compiler-cli-17.3.12.tgz",
       "integrity": "sha512-1F8M7nWfChzurb7obbvuE7mJXlHtY1UG58pcwcomVtpPb+kPavgAO8OEvJHYBMV+bzSxkXt5UIwL9lt9jHUxZA==",
       "dev": true,
+      "peer": true,
       "dependencies": {
         "@babel/core": "7.23.9",
         "@jridgewell/sourcemap-codec": "^1.4.14",
@@ -527,6 +532,7 @@
       "version": "17.3.12",
       "resolved": "https://registry.npmjs.org/@angular/core/-/core-17.3.12.tgz",
       "integrity": "sha512-MuFt5yKi161JmauUta4Dh0m8ofwoq6Ino+KoOtkYMBGsSx+A7dSm+DUxxNwdj7+DNyg3LjVGCFgBFnq4g8z06A==",
+      "peer": true,
       "dependencies": {
         "tslib": "^2.3.0"
       },
@@ -542,6 +548,7 @@
       "version": "17.3.12",
       "resolved": "https://registry.npmjs.org/@angular/forms/-/forms-17.3.12.tgz",
       "integrity": "sha512-tV6r12Q3yEUlXwpVko4E+XscunTIpPkLbaiDn/MTL3Vxi2LZnsLgHyd/i38HaHN+e/H3B0a1ToSOhV5wf3ay4Q==",
+      "peer": true,
       "dependencies": {
         "tslib": "^2.3.0"
       },
@@ -624,6 +631,7 @@
       "version": "17.3.12",
       "resolved": "https://registry.npmjs.org/@angular/platform-browser/-/platform-browser-17.3.12.tgz",
       "integrity": "sha512-DYY04ptWh/ulMHzd+y52WCE8QnEYGeIiW3hEIFjCN8z0kbIdFdUtEB0IK5vjNL3ejyhUmphcpeT5PYf3YXtqWQ==",
+      "peer": true,
       "dependencies": {
         "tslib": "^2.3.0"
       },
@@ -700,6 +708,7 @@
       "version": "7.24.0",
       "resolved": "https://registry.npmjs.org/@babel/core/-/core-7.24.0.tgz",
       "integrity": "sha512-fQfkg0Gjkza3nf0c7/w6Xf34BW4YvzNfACRLmmb7XRLa6XHdR+K9AlJlxneFfWYf6uhOzuzZVTjF/8KfndZANw==",
+      "peer": true,
       "dependencies": {
         "@ampproject/remapping": "^2.2.0",
         "@babel/code-frame": "^7.23.5",
@@ -5334,6 +5343,7 @@
       "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.14.0.tgz",
       "integrity": "sha512-cl669nCJTZBsL97OF4kUQm5g5hC2uihk0NxY3WENAC0TYdILVkAyHymAntgxGkl7K+t0cXIrH5siy5S4XkFycA==",
       "dev": true,
+      "peer": true,
       "bin": {
         "acorn": "bin/acorn"
       },
@@ -5404,6 +5414,7 @@
       "resolved": "https://registry.npmjs.org/ajv/-/ajv-8.12.0.tgz",
       "integrity": "sha512-sRu1kpcO9yLtYxBKvqfTeh9KzZEwO3STyX1HT+4CaDzC6HpTGYhIhPIzj9XuKU7KYDwnaeh5hcOwjy1QuJzBPA==",
       "dev": true,
+      "peer": true,
       "dependencies": {
         "fast-deep-equal": "^3.1.1",
         "json-schema-traverse": "^1.0.0",
@@ -5887,6 +5898,7 @@
           "url": "https://github.com/sponsors/ai"
         }
       ],
+      "peer": true,
       "dependencies": {
         "caniuse-lite": "^1.0.30001688",
         "electron-to-chromium": "^1.5.73",
@@ -8884,7 +8896,8 @@
       "version": "5.1.2",
       "resolved": "https://registry.npmjs.org/jasmine-core/-/jasmine-core-5.1.2.tgz",
       "integrity": "sha512-2oIUMGn00FdUiqz6epiiJr7xcFyNYj3rDcfmnzfkBnHyBQ3cBQUs4mmyGsOb7TTLb9kxk7dBcmEmqhDKkBoDyA==",
-      "dev": true
+      "dev": true,
+      "peer": true
     },
     "node_modules/jest-diff": {
       "version": "30.0.0-alpha.6",
@@ -9594,6 +9607,7 @@
       "resolved": "https://registry.npmjs.org/karma/-/karma-6.4.4.tgz",
       "integrity": "sha512-LrtUxbdvt1gOpo3gxG+VAJlJAEMhbWlM4YrFQgql98FwF7+K8K12LYO4hnDdUkNjeztYrOXEMqgTajSWgmtI/w==",
       "dev": true,
+      "peer": true,
       "dependencies": {
         "@colors/colors": "1.5.0",
         "body-parser": "^1.19.0",
@@ -9800,6 +9814,7 @@
       "resolved": "https://registry.npmjs.org/less/-/less-4.2.0.tgz",
       "integrity": "sha512-P3b3HJDBtSzsXUl0im2L7gTO5Ubg8mEN6G8qoTS77iXxXX4Hvu4Qj540PZDvQ8V6DmX6iXo98k7Md0Cm1PrLaA==",
       "dev": true,
+      "peer": true,
       "dependencies": {
         "copy-anything": "^2.0.1",
         "parse-node-version": "^1.0.1",
@@ -11414,6 +11429,7 @@
           "url": "https://github.com/sponsors/ai"
         }
       ],
+      "peer": true,
       "dependencies": {
         "nanoid": "^3.3.7",
         "picocolors": "^1.1.1",
@@ -12245,6 +12261,7 @@
       "version": "7.8.1",
       "resolved": "https://registry.npmjs.org/rxjs/-/rxjs-7.8.1.tgz",
       "integrity": "sha512-AA3TVj+0A2iuIoQkWEK/tqFjBq2j+6PO6Y0zJcvzLAFhEFIO3HL0vls9hWLncZbAAbK0mar7oZ4V079I/qPMxg==",
+      "peer": true,
       "dependencies": {
         "tslib": "^2.1.0"
       }
@@ -12303,6 +12320,7 @@
       "resolved": "https://registry.npmjs.org/sass/-/sass-1.71.1.tgz",
       "integrity": "sha512-wovtnV2PxzteLlfNzbgm1tFXPLoZILYAMJtvoXXkD7/+1uP41eKkIt1ypWq5/q2uT94qHjXehEYfmjKOvjL9sg==",
       "dev": true,
+      "peer": true,
       "dependencies": {
         "chokidar": ">=3.0.0 <4.0.0",
         "immutable": "^4.0.0",
@@ -13420,6 +13438,7 @@
       "resolved": "https://registry.npmjs.org/terser/-/terser-5.29.1.tgz",
       "integrity": "sha512-lZQ/fyaIGxsbGxApKmoPTODIzELy3++mXhS5hOqaAWZjQtpq/hFHAc+rm29NND1rYRxRWKcjuARNwULNXa5RtQ==",
       "dev": true,
+      "peer": true,
       "dependencies": {
         "@jridgewell/source-map": "^0.3.3",
         "acorn": "^8.8.2",
@@ -13658,6 +13677,7 @@
       "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.3.3.tgz",
       "integrity": "sha512-pXWcraxM0uxAS+tN0AG/BF2TyqmHO014Z070UsJ+pFvYuRSq8KH8DmWpnbXe0pEPDHXZV3FcAbJkijJ5oNEnWw==",
       "dev": true,
+      "peer": true,
       "bin": {
         "tsc": "bin/tsc",
         "tsserver": "bin/tsserver"
@@ -13891,6 +13911,7 @@
       "resolved": "https://registry.npmjs.org/vite/-/vite-5.1.8.tgz",
       "integrity": "sha512-mB8ToUuSmzODSpENgvpFk2fTiU/YQ1tmcVJJ4WZbq4fPdGJkFNVcmVL5k7iDug6xzWjjuGDKAuSievIsD6H7Xw==",
       "dev": true,
+      "peer": true,
       "dependencies": {
         "esbuild": "^0.19.3",
         "postcss": "^8.4.35",
@@ -14406,6 +14427,7 @@
       "resolved": "https://registry.npmjs.org/webpack/-/webpack-5.94.0.tgz",
       "integrity": "sha512-KcsGn50VT+06JH/iunZJedYGUJS5FGjow8wb9c0v5n1Om8O1g4L6LjtfxwlXIATopoQu+vOXXa7gYisWxCoPyg==",
       "dev": true,
+      "peer": true,
       "dependencies": {
         "@types/estree": "^1.0.5",
         "@webassemblyjs/ast": "^1.12.1",
@@ -14480,6 +14502,7 @@
       "resolved": "https://registry.npmjs.org/webpack-dev-server/-/webpack-dev-server-4.15.1.tgz",
       "integrity": "sha512-5hbAst3h3C3L8w6W4P96L5vaV0PxSmJhxZvWKYIdgxOQm8pNZ5dEOmmSLBVpP85ReeyRt6AS1QJNyo/oFFPeVA==",
       "dev": true,
+      "peer": true,
       "dependencies": {
         "@types/bonjour": "^3.5.9",
         "@types/connect-history-api-fallback": "^1.3.5",
@@ -14606,6 +14629,7 @@
       "resolved": "https://registry.npmjs.org/ajv/-/ajv-6.12.6.tgz",
       "integrity": "sha512-j3fVLgvTo527anyYyJOGTYJbG+vnnQYvE0m5mmkc1TK+nxAppkCLMIL0aZ4dblVCNoGShhm+kzE4ZUykBoMg4g==",
       "dev": true,
+      "peer": true,
       "dependencies": {
         "fast-deep-equal": "^3.1.1",
         "fast-json-stable-stringify": "^2.0.0",
@@ -14857,7 +14881,8 @@
     "node_modules/zone.js": {
       "version": "0.14.10",
       "resolved": "https://registry.npmjs.org/zone.js/-/zone.js-0.14.10.tgz",
-      "integrity": "sha512-YGAhaO7J5ywOXW6InXNlLmfU194F8lVgu7bRntUF3TiG8Y3nBK0x1UJJuHUP/e8IyihkjCYqhCScpSwnlaSRkQ=="
+      "integrity": "sha512-YGAhaO7J5ywOXW6InXNlLmfU194F8lVgu7bRntUF3TiG8Y3nBK0x1UJJuHUP/e8IyihkjCYqhCScpSwnlaSRkQ==",
+      "peer": true
     }
   },
   "dependencies": {
@@ -14976,6 +15001,7 @@
           "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.35.tgz",
           "integrity": "sha512-u5U8qYpBCpN13BsiEB0CbR1Hhh4Gc0zLFuedrHJKMctHCHAGrMdG0PRM/KErzAL3CU6/eckEtmHNB3x6e3c0vA==",
           "dev": true,
+          "peer": true,
           "requires": {
             "nanoid": "^3.3.7",
             "picocolors": "^1.0.0",
@@ -15031,6 +15057,7 @@
       "version": "17.3.12",
       "resolved": "https://registry.npmjs.org/@angular/animations/-/animations-17.3.12.tgz",
       "integrity": "sha512-9hsdWF4gRRcVJtPcCcYLaX1CIyM9wUu6r+xRl6zU5hq8qhl35hig6ounz7CXFAzLf0WDBdM16bPHouVGaG76lg==",
+      "peer": true,
       "requires": {
         "tslib": "^2.3.0"
       }
@@ -15075,6 +15102,7 @@
       "version": "17.3.12",
       "resolved": "https://registry.npmjs.org/@angular/common/-/common-17.3.12.tgz",
       "integrity": "sha512-vabJzvrx76XXFrm1RJZ6o/CyG32piTB/1sfFfKHdlH1QrmArb8It4gyk9oEjZ1IkAD0HvBWlfWmn+T6Vx3pdUw==",
+      "peer": true,
       "requires": {
         "tslib": "^2.3.0"
       }
@@ -15083,6 +15111,7 @@
       "version": "17.3.12",
       "resolved": "https://registry.npmjs.org/@angular/compiler/-/compiler-17.3.12.tgz",
       "integrity": "sha512-vwI8oOL/gM+wPnptOVeBbMfZYwzRxQsovojZf+Zol9szl0k3SZ3FycWlxxXZGFu3VIEfrP6pXplTmyODS/Lt1w==",
+      "peer": true,
       "requires": {
         "tslib": "^2.3.0"
       }
@@ -15092,6 +15121,7 @@
       "resolved": "https://registry.npmjs.org/@angular/compiler-cli/-/compiler-cli-17.3.12.tgz",
       "integrity": "sha512-1F8M7nWfChzurb7obbvuE7mJXlHtY1UG58pcwcomVtpPb+kPavgAO8OEvJHYBMV+bzSxkXt5UIwL9lt9jHUxZA==",
       "dev": true,
+      "peer": true,
       "requires": {
         "@babel/core": "7.23.9",
         "@jridgewell/sourcemap-codec": "^1.4.14",
@@ -15146,6 +15176,7 @@
       "version": "17.3.12",
       "resolved": "https://registry.npmjs.org/@angular/core/-/core-17.3.12.tgz",
       "integrity": "sha512-MuFt5yKi161JmauUta4Dh0m8ofwoq6Ino+KoOtkYMBGsSx+A7dSm+DUxxNwdj7+DNyg3LjVGCFgBFnq4g8z06A==",
+      "peer": true,
       "requires": {
         "tslib": "^2.3.0"
       }
@@ -15154,6 +15185,7 @@
       "version": "17.3.12",
       "resolved": "https://registry.npmjs.org/@angular/forms/-/forms-17.3.12.tgz",
       "integrity": "sha512-tV6r12Q3yEUlXwpVko4E+XscunTIpPkLbaiDn/MTL3Vxi2LZnsLgHyd/i38HaHN+e/H3B0a1ToSOhV5wf3ay4Q==",
+      "peer": true,
       "requires": {
         "tslib": "^2.3.0"
       }
@@ -15217,6 +15249,7 @@
       "version": "17.3.12",
       "resolved": "https://registry.npmjs.org/@angular/platform-browser/-/platform-browser-17.3.12.tgz",
       "integrity": "sha512-DYY04ptWh/ulMHzd+y52WCE8QnEYGeIiW3hEIFjCN8z0kbIdFdUtEB0IK5vjNL3ejyhUmphcpeT5PYf3YXtqWQ==",
+      "peer": true,
       "requires": {
         "tslib": "^2.3.0"
       }
@@ -15256,6 +15289,7 @@
       "version": "7.24.0",
       "resolved": "https://registry.npmjs.org/@babel/core/-/core-7.24.0.tgz",
       "integrity": "sha512-fQfkg0Gjkza3nf0c7/w6Xf34BW4YvzNfACRLmmb7XRLa6XHdR+K9AlJlxneFfWYf6uhOzuzZVTjF/8KfndZANw==",
+      "peer": true,
       "requires": {
         "@ampproject/remapping": "^2.2.0",
         "@babel/code-frame": "^7.23.5",
@@ -18715,7 +18749,8 @@
       "version": "8.14.0",
       "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.14.0.tgz",
       "integrity": "sha512-cl669nCJTZBsL97OF4kUQm5g5hC2uihk0NxY3WENAC0TYdILVkAyHymAntgxGkl7K+t0cXIrH5siy5S4XkFycA==",
-      "dev": true
+      "dev": true,
+      "peer": true
     },
     "acorn-import-attributes": {
       "version": "1.9.5",
@@ -18768,6 +18803,7 @@
       "resolved": "https://registry.npmjs.org/ajv/-/ajv-8.12.0.tgz",
       "integrity": "sha512-sRu1kpcO9yLtYxBKvqfTeh9KzZEwO3STyX1HT+4CaDzC6HpTGYhIhPIzj9XuKU7KYDwnaeh5hcOwjy1QuJzBPA==",
       "dev": true,
+      "peer": true,
       "requires": {
         "fast-deep-equal": "^3.1.1",
         "json-schema-traverse": "^1.0.0",
@@ -19112,6 +19148,7 @@
       "version": "4.24.3",
       "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.24.3.tgz",
       "integrity": "sha512-1CPmv8iobE2fyRMV97dAcMVegvvWKxmq94hkLiAkUGwKVTyDLw33K+ZxiFrREKmmps4rIw6grcCFCnTMSZ/YiA==",
+      "peer": true,
       "requires": {
         "caniuse-lite": "^1.0.30001688",
         "electron-to-chromium": "^1.5.73",
@@ -21309,7 +21346,8 @@
       "version": "5.1.2",
       "resolved": "https://registry.npmjs.org/jasmine-core/-/jasmine-core-5.1.2.tgz",
       "integrity": "sha512-2oIUMGn00FdUiqz6epiiJr7xcFyNYj3rDcfmnzfkBnHyBQ3cBQUs4mmyGsOb7TTLb9kxk7dBcmEmqhDKkBoDyA==",
-      "dev": true
+      "dev": true,
+      "peer": true
     },
     "jest-diff": {
       "version": "30.0.0-alpha.6",
@@ -21852,6 +21890,7 @@
       "resolved": "https://registry.npmjs.org/karma/-/karma-6.4.4.tgz",
       "integrity": "sha512-LrtUxbdvt1gOpo3gxG+VAJlJAEMhbWlM4YrFQgql98FwF7+K8K12LYO4hnDdUkNjeztYrOXEMqgTajSWgmtI/w==",
       "dev": true,
+      "peer": true,
       "requires": {
         "@colors/colors": "1.5.0",
         "body-parser": "^1.19.0",
@@ -22019,6 +22058,7 @@
       "resolved": "https://registry.npmjs.org/less/-/less-4.2.0.tgz",
       "integrity": "sha512-P3b3HJDBtSzsXUl0im2L7gTO5Ubg8mEN6G8qoTS77iXxXX4Hvu4Qj540PZDvQ8V6DmX6iXo98k7Md0Cm1PrLaA==",
       "dev": true,
+      "peer": true,
       "requires": {
         "copy-anything": "^2.0.1",
         "errno": "^0.1.1",
@@ -23193,6 +23233,7 @@
       "version": "8.4.49",
       "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.49.tgz",
       "integrity": "sha512-OCVPnIObs4N29kxTjzLfUryOkvZEq+pf8jTF0lg8E7uETuWHA+v7j3c/xJmiqpX450191LlmZfUKkXxkTry7nA==",
+      "peer": true,
       "requires": {
         "nanoid": "^3.3.7",
         "picocolors": "^1.1.1",
@@ -23765,6 +23806,7 @@
       "version": "7.8.1",
       "resolved": "https://registry.npmjs.org/rxjs/-/rxjs-7.8.1.tgz",
       "integrity": "sha512-AA3TVj+0A2iuIoQkWEK/tqFjBq2j+6PO6Y0zJcvzLAFhEFIO3HL0vls9hWLncZbAAbK0mar7oZ4V079I/qPMxg==",
+      "peer": true,
       "requires": {
         "tslib": "^2.1.0"
       }
@@ -23802,6 +23844,7 @@
       "resolved": "https://registry.npmjs.org/sass/-/sass-1.71.1.tgz",
       "integrity": "sha512-wovtnV2PxzteLlfNzbgm1tFXPLoZILYAMJtvoXXkD7/+1uP41eKkIt1ypWq5/q2uT94qHjXehEYfmjKOvjL9sg==",
       "dev": true,
+      "peer": true,
       "requires": {
         "chokidar": ">=3.0.0 <4.0.0",
         "immutable": "^4.0.0",
@@ -24643,6 +24686,7 @@
       "resolved": "https://registry.npmjs.org/terser/-/terser-5.29.1.tgz",
       "integrity": "sha512-lZQ/fyaIGxsbGxApKmoPTODIzELy3++mXhS5hOqaAWZjQtpq/hFHAc+rm29NND1rYRxRWKcjuARNwULNXa5RtQ==",
       "dev": true,
+      "peer": true,
       "requires": {
         "@jridgewell/source-map": "^0.3.3",
         "acorn": "^8.8.2",
@@ -24810,7 +24854,8 @@
       "version": "5.3.3",
       "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.3.3.tgz",
       "integrity": "sha512-pXWcraxM0uxAS+tN0AG/BF2TyqmHO014Z070UsJ+pFvYuRSq8KH8DmWpnbXe0pEPDHXZV3FcAbJkijJ5oNEnWw==",
-      "dev": true
+      "dev": true,
+      "peer": true
     },
     "ua-parser-js": {
       "version": "0.7.40",
@@ -24957,6 +25002,7 @@
       "resolved": "https://registry.npmjs.org/vite/-/vite-5.1.8.tgz",
       "integrity": "sha512-mB8ToUuSmzODSpENgvpFk2fTiU/YQ1tmcVJJ4WZbq4fPdGJkFNVcmVL5k7iDug6xzWjjuGDKAuSievIsD6H7Xw==",
       "dev": true,
+      "peer": true,
       "requires": {
         "esbuild": "^0.19.3",
         "fsevents": "~2.3.3",
@@ -25210,6 +25256,7 @@
       "resolved": "https://registry.npmjs.org/webpack/-/webpack-5.94.0.tgz",
       "integrity": "sha512-KcsGn50VT+06JH/iunZJedYGUJS5FGjow8wb9c0v5n1Om8O1g4L6LjtfxwlXIATopoQu+vOXXa7gYisWxCoPyg==",
       "dev": true,
+      "peer": true,
       "requires": {
         "@types/estree": "^1.0.5",
         "@webassemblyjs/ast": "^1.12.1",
@@ -25241,6 +25288,7 @@
           "resolved": "https://registry.npmjs.org/ajv/-/ajv-6.12.6.tgz",
           "integrity": "sha512-j3fVLgvTo527anyYyJOGTYJbG+vnnQYvE0m5mmkc1TK+nxAppkCLMIL0aZ4dblVCNoGShhm+kzE4ZUykBoMg4g==",
           "dev": true,
+          "peer": true,
           "requires": {
             "fast-deep-equal": "^3.1.1",
             "fast-json-stable-stringify": "^2.0.0",
@@ -25308,6 +25356,7 @@
       "resolved": "https://registry.npmjs.org/webpack-dev-server/-/webpack-dev-server-4.15.1.tgz",
       "integrity": "sha512-5hbAst3h3C3L8w6W4P96L5vaV0PxSmJhxZvWKYIdgxOQm8pNZ5dEOmmSLBVpP85ReeyRt6AS1QJNyo/oFFPeVA==",
       "dev": true,
+      "peer": true,
       "requires": {
         "@types/bonjour": "^3.5.9",
         "@types/connect-history-api-fallback": "^1.3.5",
@@ -25509,7 +25558,8 @@
     "zone.js": {
       "version": "0.14.10",
       "resolved": "https://registry.npmjs.org/zone.js/-/zone.js-0.14.10.tgz",
-      "integrity": "sha512-YGAhaO7J5ywOXW6InXNlLmfU194F8lVgu7bRntUF3TiG8Y3nBK0x1UJJuHUP/e8IyihkjCYqhCScpSwnlaSRkQ=="
+      "integrity": "sha512-YGAhaO7J5ywOXW6InXNlLmfU194F8lVgu7bRntUF3TiG8Y3nBK0x1UJJuHUP/e8IyihkjCYqhCScpSwnlaSRkQ==",
+      "peer": true
     }
   }
 }

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

@@ -83,8 +83,8 @@
                          pattern="[A-Za-z]*"
                          (input)="onInput($event, question.index); onAnswerChange(question.index)"
                          [ngClass]="{
-                      'correct-answer': !isLoading && isChecked && userAnswers[question.index] === questionsWithAnswers[question.index].correctAnswer,
-                      'wrong-answer': !isLoading && isChecked && userAnswers[question.index] !== questionsWithAnswers[question.index].correctAnswer
+                      'correct-answer': answerStatuses[question.index] === 'correct',
+                      'wrong-answer': answerStatuses[question.index] === 'incorrect'
                     }" />
                 </span>
 
@@ -124,7 +124,7 @@
 
             <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"
+                <li *ngIf="hint && hint.trim() !== ''"
                     class="hint-item">
                   <strong>Hint for Question {{ i + 1 }}:</strong> {{ hint }}
                 </li>

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

@@ -1,13 +1,11 @@
-import { Component } from '@angular/core';
+import { Component, OnDestroy } from '@angular/core';
 import { FormsModule } from '@angular/forms';
 import { CommonModule } from '@angular/common';
 import { GenerateQuestionsService } from './generate-questions.service';
 import { Router } from '@angular/router';
 import confetti from 'canvas-confetti';
-import { ChangeDetectorRef } from '@angular/core';
 import { HeaderComponent } from '../shared/header/header.component';
-import { ButtonComponent } from '../shared/button/button.component'; 
-
+import { ButtonComponent } from '../shared/button/button.component';
 
 interface QuestionWithAnswer {
   question: string;
@@ -19,530 +17,450 @@ interface Question {
   index: number;
 }
 
+const COUNTDOWN_SECONDS = 10;
+const HINT_AUTO_HIDE_MS = 5000;
+const NEXT_LEVEL_DELAY_MS = 2000;
+const COMPLETION_DELAY_MS = 3000;
+const CONFETTI_INTERVAL_MS = 250;
+const RING_RADIUS = 90;
+
+const INCORRECT_INDICATORS = [
+  'incorrect', 'not correct', 'wrong', 'not right',
+  'is not', 'are not', 'isn\'t correct', 'aren\'t correct'
+];
+
+const CORRECT_INDICATORS = [
+  'correct', 'right', 'yes', 'accurate',
+  'well done', 'good job', 'perfect'
+];
+
 @Component({
   selector: 'app-generate-questions',
   standalone: true,
-  imports: [FormsModule, CommonModule, HeaderComponent, ButtonComponent], 
+  imports: [FormsModule, CommonModule, HeaderComponent, ButtonComponent],
   templateUrl: './generate-questions.component.html',
   styleUrls: ['./generate-questions.component.css']
 })
-export class GenerateQuestionsComponent {
-  topic: string = "";
-  hardcodedTopics: string[] = [
-    "Noun",
-    "Verb",
-    "Past Tense",
-    "Adjective",
-    "Present Continuous",
-  ];
-
-  showSuggestions: boolean = false;
+export class GenerateQuestionsComponent implements OnDestroy {
+  topic = '';
+  readonly hardcodedTopics = ['Noun', 'Verb', 'Past Tense', 'Adjective', 'Present Continuous'];
+  questions: Question[] = [];
+  questionsWithAnswers: QuestionWithAnswer[] = [];
 
   userAnswers: string[] = [];
+  answerStatuses: ('correct' | 'incorrect' | 'pending')[] = [];
   feedback: string[] = [];
-  error: string = "";
-  isChecked: boolean = false;
-  isAnswerModified: boolean = false;
-  questions: { parts: string[]; index: number }[] = [];
-  attemptCounts: { [key: number]: number } = {};
-  correctAnswers: string[] = [];
-  questionsWithAnswers: QuestionWithAnswer[] = [];
-  currentDifficulty: string = "basic";
-  // difficultyLevels: string[] = ['basic', 'elementary', 'pre-intermediate', 'intermediate', 'upper-intermediate', 'advanced', 'hard'];
-  difficultyLevels: string[] = ["basic", "intermediate", "expert"];
-  isDropdownDisabled: boolean = false;
-  isValidationInProgress: boolean = false;
-  isTopicLocked: boolean = false;
-  isAllLevelsCompleted: boolean = false;
-  readonlyAnswers: boolean[] = [];
   hints: string[] = [];
-  attempts: number[] = [];
-  isQuestionsGenerated: boolean = false;
-  isGenerateDisabled: boolean = true;
-  isResetDisabled: boolean = true;
-  isFirstAttemptDone: boolean = false;
-  hasNewHints: boolean = false;
-  isLoading: boolean = false;
-  isValidationCompleted = false;
-
-  showLevelTooltip: boolean = false;
-  activateLevelDot: boolean = false;
+  readonlyAnswers: boolean[] = [];
+  attemptCounts: Record<number, number> = {};
+
+  currentDifficulty = 'basic';
+  readonly difficultyLevels = ['basic', 'intermediate', 'expert'];
+
+  showSuggestions = false;
+  isQuestionsGenerated = false;
+  isValidationInProgress = false;
+  isFirstAttemptDone = false;
+  isAllLevelsCompleted = false;
+  isHintMenuVisible = false;
+  isLoading = false;
+  isChecked = false;
+  error = '';
+
+  get isGenerateDisabled() { return !this.topic.trim() || this.isQuestionsGenerated; }
+  get isResetDisabled() { return !this.topic && !this.isQuestionsGenerated; }
+  get isTopicLocked() { return this.isQuestionsGenerated; }
+  get isDropdownDisabled() { return this.isQuestionsGenerated; }
+  get showLevelTooltip() { return this.isQuestionsGenerated; }
+  get activateLevelDot() { return this.isQuestionsGenerated; }
+
+  private hasShownHintIcon = false;
+  showHintIcon = false;
+  hasNewHints = false;
+
+  showGlobalCountdown = false;
+  globalCountdown = 0;
+  overlayCaption = '';
+  ringCircumference = 2 * Math.PI * RING_RADIUS;
+  ringDashoffset = this.ringCircumference;
 
-  isTyping: boolean = false;
-  validated: boolean = false;
+  private globalTimer: any;
+  private overlayTicker: any;
+  private overlayEndTs = 0;
+  private globalCountdownActive = false;
+  private confettiInterval: any;
 
   constructor(
-    private generateQuestionsService: GenerateQuestionsService,
-    private router: Router,
-    private cdr: ChangeDetectorRef,
-  ) { }
-
-  onTopicChange() {
-    if (this.topic.trim().length > 0) {
-      this.isGenerateDisabled = false;
-    } else {
-      this.isGenerateDisabled = true;
-    }
-    if (this.topic.trim().length === 0) {
-      this.showSuggestions = true;
-    } else {
-      this.showSuggestions = false;
-    }
+    private service: GenerateQuestionsService,
+    private router: Router
+  ) {}
+
+  ngOnDestroy(): void {
+    this.clearTimers();
+    this.stopConfettiAnimation();
+  }
+
+  private clearTimers(): void {
+    if (this.globalTimer) clearInterval(this.globalTimer);
+    if (this.overlayTicker) clearInterval(this.overlayTicker);
+    this.globalTimer = null;
+    this.overlayTicker = null;
+    this.showGlobalCountdown = false;
+    this.globalCountdownActive = false;
+  }
+
+  onTopicChange(): void {
+    this.showSuggestions = !this.topic.trim();
   }
 
   getProgressWidth(): string {
     const index = this.difficultyLevels.indexOf(this.currentDifficulty);
-    if (index === -1 || this.difficultyLevels.length <= 1) return "0%";
-    const percent = (index / (this.difficultyLevels.length - 1)) * 100;
-    return `${percent}%`;
+    if (index === -1 || this.difficultyLevels.length <= 1) return '0%';
+    return `${(index / (this.difficultyLevels.length - 1)) * 100}%`;
   }
 
-  generateQuestions() {
-    this.hints = [];
-    this.isQuestionsGenerated = false;
-    this.showLevelTooltip = true;
-    this.activateLevelDot = true;
-
+  generateQuestions(): void {
     if (this.isAllLevelsCompleted) {
-      this.error = "Please reset to start over.";
+      this.error = 'Please reset to start over.';
+      return;
+    }
+
+    this.resetQuestionState();
+
+    this.service.generateQuestions(this.topic, this.currentDifficulty)
+      .subscribe({
+        next: (response) => this.handleQuestionsResponse(response),
+        error: (error) => this.handleQuestionsError(error)
+      });
+  }
+
+  private handleQuestionsResponse(response: any): void {
+    const rawQuestions = (response?.text ?? response?.generations?.[0]?.text ?? '').trim();
+
+    if (!rawQuestions) {
+      this.error = 'No questions generated. Please try again.';
       return;
     }
 
-    this.isTopicLocked = true;
+    this.isQuestionsGenerated = true;
+    this.parseAndInitializeQuestions(rawQuestions);
+  }
+
+  private handleQuestionsError(error: any): void {
+    this.error = error.status === 400 && error.error.message
+      ? error.error.message
+      : 'Failed to fetch questions. Please try again later.';
+  }
+
+  private parseAndInitializeQuestions(rawQuestions: string): void {
+    this.questionsWithAnswers = this.parseQuestions(rawQuestions);
+    this.questions = this.splitQuestionsIntoParts(this.questionsWithAnswers);
+    this.initializeAnswerArrays(this.questions.length);
+  }
+
+  private parseQuestions(text: string): QuestionWithAnswer[] {
+    const regex = /(\d+\.\s*.+?_______)\s*(.*?)\s*\(([^)]+)\)\s*$/gm;
+    const questions: QuestionWithAnswer[] = [];
+    let match;
+
+    while ((match = regex.exec(text)) !== null) {
+      const questionText = match[1]?.trim();
+      const afterBlank = match[2]?.replace(/^[_-]+/, '').replace(/^\s+/, ' ').replace(/\s{2,}/g, ' ');
+      const correctAnswer = match[3]?.trim();
+
+      if (questionText && correctAnswer) {
+        questions.push({
+          question: `${questionText}${afterBlank}`,
+          correctAnswer
+        });
+      }
+    }
+    return questions;
+  }
+
+  private splitQuestionsIntoParts(questions: QuestionWithAnswer[]): Question[] {
+    return questions.map((q, index) => {
+      const normalized = q.question.replace(/\s*_{3,}\s*/g, '_______');
+      const parts = normalized.split('_______').map(p => p.replace(/[_]+/g, '').trim());
+      return { parts, index };
+    });
+  }
+
+  private initializeAnswerArrays(length: number): void {
+    this.userAnswers = Array(length).fill('');
+    this.answerStatuses = Array(length).fill('pending');
+    this.feedback = Array(length).fill('');
+    this.readonlyAnswers = Array(length).fill(false);
+    this.hints = [];
+    this.attemptCounts = {};
+    for (let i = 0; i < length; i++) {
+      this.attemptCounts[i] = 0;
+    }
+  }
+
+  private resetQuestionState(): void {
+    this.hints = [];
     this.showSuggestions = false;
     this.readonlyAnswers = [];
-    this.isDropdownDisabled = true;
-
-    console.log(`Generating questions for difficulty level: ${this.currentDifficulty}`);
-
-    this.generateQuestionsService
-      .generateQuestions(this.topic, this.currentDifficulty)
-      .subscribe(
-        (response) => {
-          console.log("Response from backend:", response);
-
-          // --- Minimal change: accept new shape { text } and fall back to old generations[0].text ---
-          const rawQuestions = (response?.text ?? response?.generations?.[0]?.text ?? '').trim();
-
-          if (rawQuestions) {
-            console.log("Raw Questions:", rawQuestions);
-            this.isQuestionsGenerated = true;
-
-            this.isGenerateDisabled = true;
-            this.isResetDisabled = false;
-
-            this.questionsWithAnswers = [];
-
-            // same regex you already use
-            const regex = /(\d+\.\s*.+?_______)\s*(.*?)\s*\(([^)]+)\)\s*$/gm;
-            let match;
-
-            while ((match = regex.exec(rawQuestions)) !== null) {
-              console.log("Match:", match);
-
-              const questionText = (match[1] ?? "").trim(); // up to _______
-              const afterBlankRaw = (match[2] ?? "");         // text after the blank
-              const correctAnswer = (match[3] ?? "").trim(); // answer in parentheses
-
-              // clean any stray "_" or "-" right after the blank
-              const afterBlankClean = afterBlankRaw
-                .replace(/^[_-]+/, "")
-                .replace(/^\s+/, " ")
-                .replace(/\s{2,}/g, " ");
-
-              if (questionText && correctAnswer) {
-                this.questionsWithAnswers.push({
-                  question: `${questionText}${afterBlankClean}`,
-                  correctAnswer,
-                });
-              }
-            }
-
-            console.log("Extracted Questions with Answers:", this.questionsWithAnswers);
-
-            // Build renderable questions (parts before/after the blank)
-            this.questions = this.questionsWithAnswers.map((q, index) => {
-              const normalized = q.question.replace(/\s*_{3,}\s*/g, "_______");
-              const parts = normalized.split("_______");
-
-              if (parts.length === 2) {
-                parts[0] = parts[0].replace(/_+$/, "").trim();
-                parts[1] = parts[1].replace(/^_+/, "").trim();
-              }
-
-              return { parts, index };
-            });
-
-            this.userAnswers = new Array(this.questions.length).fill("");
-            this.feedback = new Array(this.questions.length).fill("");
-            this.readonlyAnswers = new Array(this.questions.length).fill(false);
-            this.isChecked = false;
-
-            this.attemptCounts = this.questions.reduce((acc, _q, i) => {
-              acc[i] = 0;
-              return acc;
-            }, {} as { [key: number]: number });
-
-            console.log("Questions without answers:", this.questions);
-          } else {
-            this.error = "No questions generated. Please try again.";
-          }
-        },
-        (error) => {
-          if (error.status === 400 && error.error.message) {
-            this.error = error.error.message;
-          } else {
-            this.error = "Failed to fetch questions. Please try again later.";
-          }
-          console.error("Error fetching questions:", error);
-        },
-      );
-  }
-
-  resetTopic() {
-    this.topic = "";
+  }
+
+  resetTopic(): void {
+    this.topic = '';
     this.questions = [];
     this.questionsWithAnswers = [];
     this.userAnswers = [];
+    this.answerStatuses = [];
     this.readonlyAnswers = [];
     this.feedback = [];
     this.hints = [];
-    this.attemptCounts = [];
-    this.isChecked = false;
+    this.attemptCounts = {};
+
+    this.isQuestionsGenerated = false;
     this.isValidationInProgress = false;
     this.isFirstAttemptDone = false;
     this.isAllLevelsCompleted = false;
     this.hasNewHints = false;
-    this.isQuestionsGenerated = false;
-    this.isTopicLocked = false;
-    this.validated = false;
-    this.currentDifficulty = "basic";
-    this.error = "";
-    this.isGenerateDisabled = true;
-    this.isResetDisabled = true;
-    this.showSuggestions = false;
-    this.showLevelTooltip = false;
-    this.activateLevelDot = false;
     this.showSuggestions = false;
-    this.isDropdownDisabled = false;
-    this.isTopicLocked = false;
+    this.isChecked = false;
+    this.currentDifficulty = 'basic';
+    this.error = '';
+
+    this.clearTimers();
     this.stopConfetti();
-    // Stop any active countdowns
-    Object.keys(this.countdownTimers).forEach(k => clearInterval(this.countdownTimers[+k]));
-    this.countdownTimers = {};
-    this.countdowns = [];
-    this.showCountdown = [];
-    this.stopGlobalCountdown();
-    this.stopOverlay()
   }
 
   areAllAnswersFilled(): boolean {
-    return this.userAnswers.every((answer) => answer?.trim() !== "");
+    return this.userAnswers.every(answer => answer?.trim());
   }
 
-  closeErrorPopup() {
-    this.error = "";
-    this.isGenerateDisabled = true;
-    this.isResetDisabled = false;
+  closeErrorPopup(): void {
+    this.error = '';
   }
 
-  // Hint icon one-time flags
-  showHintIcon: boolean = false;      // controls rendering of the “i” button
-  hasShownHintIcon: boolean = false;  // remembers if it was shown once
-  isHintMenuVisible: boolean = false; // remove if you already have it
+  private parseAIValidation(response: string): boolean {
+    if (!response) return false;
+
+    const lower = response.toLowerCase();
+
+    if (INCORRECT_INDICATORS.some(ind => lower.includes(ind))) return false;
+    if (CORRECT_INDICATORS.some(ind => lower.includes(ind))) return true;
 
-  checkAllAnswers() {
-    this.isChecked = true;
+    return false;
+  }
+
+  checkAllAnswers(): void {
     this.isValidationInProgress = true;
     this.isLoading = true;
-    this.isValidationCompleted = true;
-    this.validated = true;
     this.isFirstAttemptDone = true;
 
-    const requestPayload = this.questions.map((questionObj, index) => ({
+    const payload = this.questions.map((q, i) => ({
       topic: this.topic,
-      question: questionObj.parts.join("_______"),
-      user_answer: this.userAnswers[index],
+      question: q.parts.join('_______'),
+      user_answer: this.userAnswers[i]
     }));
 
-    console.log("Checking answers...");
-    console.log("User Answers:", this.userAnswers);
-    console.log(
-      "Correct Answers:",
-      this.questionsWithAnswers.map((q) => q.correctAnswer),
-    );
-
-    this.generateQuestionsService.validateAllAnswers(requestPayload).subscribe(
-      (response) => {
-        console.log("Response from backend for all answers validation:", response);
-
-        if (response.results && response.results.length > 0) {
-          let allAttemptsCompleted = true;
-
-          // Track what happened this validation cycle
-          let hadFirstAttemptWrong = false;   // someone is on first wrong attempt
-          let hadSecondAttemptWrong = false;  // someone is on second wrong attempt (autofill path)
-
-          response.results.forEach((result: any, index: number) => {
-            this.attemptCounts[index]++;
-            const validationResponse = result.validation_response;
-            const hint = result.hint ? result.hint.trim() : "";
-
-            const userAnswerRaw = this.userAnswers[index] ?? '';
-            const userAnswer = userAnswerRaw.trim().toLowerCase();
-
-            const correctAnswerRaw = this.questionsWithAnswers[index].correctAnswer ?? '';
-            const correctAnswer = correctAnswerRaw.trim().toLowerCase();
-
-            console.log(`Validation Response for Question ${index + 1}: ${validationResponse}`);
-            console.log(`User Answer: ${userAnswer}, Correct Answer: ${correctAnswer}`);
-
-            if (userAnswer === correctAnswer) {
-              console.log(`✅ Correct answer for question ${index + 1}: ${this.userAnswers[index]}`);
-              this.readonlyAnswers[index] = true;
-              this.hints[index] = "";
-              this.userAnswers[index] = this.questionsWithAnswers[index].correctAnswer;
-            } else {
-              console.log(`❌ Incorrect answer for question ${index + 1}: ${this.userAnswers[index]}`);
-
-              // ====== 1) FIRST WRONG ATTEMPT: show "Try again" countdown, then clear input ======
-              if (this.attemptCounts[index] === 1) {
-                hadFirstAttemptWrong = true;
-                if (!this.globalCountdownActive) {
-                  this.startOverlay("Try again in");
-                }
-
-                setTimeout(() => {
-                  console.log(`🔄 Resetting incorrect answer for Question ${index + 1}`);
-                  this.userAnswers[index] = "";      // give user a clean slate
-                  this.stopOverlay();                // ensure the HUD disappears
-                }, this.COUNTDOWN_SECS * 1000);
-              }
-              // ====== 2) SECOND WRONG ATTEMPT: show "Showing correct answer" countdown, then autofill ======
-              else if (this.attemptCounts[index] >= 2) {
-                hadSecondAttemptWrong = true;
-                if (!this.globalCountdownActive) {
-                  this.startOverlay("Showing correct answer in");
-                }
-
-                setTimeout(() => {
-                  // after countdown, force the correct answer
-                  if (!this.userAnswers[index] || this.userAnswers[index].trim() === "" || userAnswer !== correctAnswer) {
-                    this.userAnswers[index] = this.questionsWithAnswers[index].correctAnswer;
-                    console.log(`✔️ Auto-filled correct answer for Question ${index + 1}: ${this.userAnswers[index]}`);
-                  }
-                  this.stopOverlay();   // hide the first overlay (showing correct answer)
-
-                  // ====== 3) LAST LEVEL: show a second countdown before congratulations ======
-                  if (this.isLastLevel() && index === this.questions.length - 1) {
-                    // Give time to read the just-filled correct answer
-                    this.startOverlay("Finishing in");
-                    setTimeout(() => {
-                      this.stopOverlay();
-                      this.isAllLevelsCompleted = true;
-                      console.log("🎉 You have completed all difficulty levels.");
-                      this.triggerConfetti();
-                    }, this.COUNTDOWN_SECS * 1000);
-                  }
-
-                }, this.COUNTDOWN_SECS * 1000);
-              }
-
-              this.hints[index] = hint.length > 0 ? hint : null;
-            }
-
-            this.feedback[index] = validationResponse || "No feedback provided.";
-
-            // minor 2s reflection (kept as-is)
-            setTimeout(() => {
-              if (userAnswer === correctAnswer) {
-                this.userAnswers[index] = this.userAnswers[index];
-              } else {
-                this.userAnswers[index] = this.userAnswers[index];
-              }
-            }, 2000);
-
-            if (this.attemptCounts[index] < 2) {
-              allAttemptsCompleted = false;
-            }
-          });
-
-          // Hints auto-hide (unchanged)
-          this.hasNewHints = this.hints.some((h) => h && h.trim() !== "");
-          if (this.hasNewHints) {
-            setTimeout(() => { this.hasNewHints = false; }, 5000);
-          }
-
-          // --- ONE-TIME “i” icon reveal right after the first validation ---
-          const hasAnyHint = Array.isArray(this.hints) && this.hints.some(h => !!h && h.trim() !== "");
-          const shouldRevealIconOnce = hasAnyHint || hadFirstAttemptWrong || hadSecondAttemptWrong;
-
-          if (!this.hasShownHintIcon && shouldRevealIconOnce) {
-            this.showHintIcon = true;          // reveal once
-            this.hasShownHintIcon = true;      // lock it
-          } else {
-            this.showHintIcon = false;         // never show again in later validations
-          }
-          // --- END ONE-TIME “i” icon reveal ---
-
-          if (this.isLastLevel() && this.areAllCorrectAnswersDisplayed()) {
-            // Last level, all correct: show finish counter, then congratulations
-            this.stopOverlay();                          // ensure no old timer remains
-            this.startOverlay("Finishing in");
-            setTimeout(() => {
-              this.stopOverlay();
-              this.isAllLevelsCompleted = true;
-              this.triggerConfetti();
-            }, this.COUNTDOWN_SECS * 1000);
-
-          } else if (!this.isLastLevel() && (this.areAllCorrectAnswersDisplayed() || allAttemptsCompleted)) {
-            // Not last level: even if all answers were correct on first try,
-            // show the counter before moving to the next level
-            this.stopOverlay();                          // ensure fresh HUD
-            this.startOverlay("Moving to next level in");
-            setTimeout(() => {
-              this.stopOverlay();
-              this.triggerNextLevelWithDelay();
-            }, this.COUNTDOWN_SECS * 1000);
-          }
+    this.service.validateAllAnswers(payload).subscribe({
+      next: (response) => this.handleValidationResponse(response),
+      error: (error) => this.handleValidationError(error)
+    });
+  }
+
+  private handleValidationResponse(response: any): void {
+    if (!response.results?.length) {
+      this.error = 'Failed to validate answers. Please try again.';
+      this.resetValidationState();
+      return;
+    }
+
+    let hadFirstWrong = false;
+    let hadSecondWrong = false;
+
+    response.results.forEach((result: any, index: number) => {
+      this.attemptCounts[index]++;
+      const isCorrect = this.parseAIValidation(result.validation_response);
+
+      this.feedback[index] = result.validation_response || 'No feedback provided.';
+
+      if (isCorrect) {
+        this.markAsCorrect(index);
+      } else {
+        const attemptResult = this.handleIncorrectAttempt(index, result.hint);
+        hadFirstWrong = hadFirstWrong || attemptResult.first;
+        hadSecondWrong = hadSecondWrong || attemptResult.second;
+      }
+    });
+
+    this.handleHintsDisplay(hadFirstWrong || hadSecondWrong);
+    
+    if (!hadSecondWrong) {
+      this.checkLevelCompletion();
+    }
+    
+    this.resetValidationState();
+  }
+
+  private markAsCorrect(index: number): void {
+    this.readonlyAnswers[index] = true;
+    this.hints[index] = '';
+    this.answerStatuses[index] = 'correct';
+    this.userAnswers[index] = this.userAnswers[index].trim();
+  }
+
+  private handleIncorrectAttempt(index: number, hint: string): { first: boolean; second: boolean } {
+    this.answerStatuses[index] = 'incorrect';
+    this.hints[index] = hint?.trim() || '';
+
+    if (this.attemptCounts[index] === 1) {
+      this.scheduleAnswerClear(index);
+      return { first: true, second: false };
+    } else if (this.attemptCounts[index] >= 2) {
+      this.scheduleAnswerReveal(index);
+      return { first: false, second: true };
+    }
+
+    return { first: false, second: false };
+  }
+
+  private scheduleAnswerClear(index: number): void {
+    if (!this.globalCountdownActive) this.startOverlay('Try again in');
+
+    setTimeout(() => {
+      this.userAnswers[index] = '';
+      this.answerStatuses[index] = 'pending';
+      this.clearTimers();
+    }, COUNTDOWN_SECONDS * 1000);
+  }
+
+  private scheduleAnswerReveal(index: number): void {
+    if (!this.globalCountdownActive) this.startOverlay('Showing correct answer in');
 
+    setTimeout(() => {
+      this.userAnswers[index] = this.questionsWithAnswers[index].correctAnswer;
+      this.answerStatuses[index] = 'correct';
+      this.readonlyAnswers[index] = true;
+      this.clearTimers();
+
+      if (this.areAllCorrectAnswersDisplayed()) {
+        if (this.isLastLevel()) {
+          this.scheduleCompletion();
         } else {
-          this.error = "Failed to validate answers. Please try again.";
+          this.scheduleNextLevel();
         }
+      }
+    }, COUNTDOWN_SECONDS * 1000);
+  }
 
-        this.isValidationInProgress = false;
-        this.isLoading = false;
-      },
-      (error) => {
-        console.error("Error validating answers:", error);
-        this.error = "Error validating answers. Please try again later.";
-        this.isValidationInProgress = false;
-        this.isLoading = false;
-      },
-    );
+  private scheduleCompletion(): void {
+    this.startOverlay('Finishing in');
+    setTimeout(() => {
+      this.clearTimers();
+      this.isAllLevelsCompleted = true;
+      this.triggerConfetti();
+    }, COUNTDOWN_SECONDS * 1000);
   }
 
-  isLastLevel(): boolean {
-    return (
-      this.currentDifficulty ===
-      this.difficultyLevels[this.difficultyLevels.length - 1]
-    );
+  private handleHintsDisplay(hasWrongAnswers: boolean): void {
+    this.hasNewHints = this.hints.some(h => h?.trim());
+
+    if (this.hasNewHints) {
+      setTimeout(() => { this.hasNewHints = false; }, HINT_AUTO_HIDE_MS);
+    }
+
+    if (!this.hasShownHintIcon && (this.hasNewHints || hasWrongAnswers)) {
+      this.showHintIcon = true;
+      this.hasShownHintIcon = true;
+    }
   }
 
-  triggerNextLevelWithDelay() {
+  private checkLevelCompletion(): void {
+    if (this.areAllCorrectAnswersDisplayed()) {
+      if (this.isLastLevel()) {
+        this.scheduleCompletion();
+      } else {
+        this.scheduleNextLevel();
+      }
+    }
+  }
+
+  private scheduleNextLevel(): void {
+    this.clearTimers();
+    this.startOverlay('Moving to next level in');
     setTimeout(() => {
-      this.transitionDifficulty();
-    }, 2000);
+      this.clearTimers();
+      setTimeout(() => this.transitionDifficulty(), NEXT_LEVEL_DELAY_MS);
+    }, COUNTDOWN_SECONDS * 1000);
+  }
+
+  private handleValidationError(error: any): void {
+    this.error = 'Error validating answers. Please try again later.';
+    this.resetValidationState();
+  }
+
+  private resetValidationState(): void {
+    this.isValidationInProgress = false;
+    this.isLoading = false;
+  }
+
+  isLastLevel(): boolean {
+    return this.currentDifficulty === this.difficultyLevels[this.difficultyLevels.length - 1];
   }
 
   areAllCorrectAnswersDisplayed(): boolean {
-    return this.userAnswers.every(
-      (answer, index) =>
-        (answer ?? "").trim().toLowerCase() ===
-        (this.questionsWithAnswers[index]?.correctAnswer ?? "")
-          .trim()
-          .toLowerCase(),
-    );
+    return this.readonlyAnswers.every(readonly => readonly);
   }
 
-  transitionDifficulty() {
+  transitionDifficulty(): void {
     const currentIndex = this.difficultyLevels.indexOf(this.currentDifficulty);
+
     if (currentIndex < this.difficultyLevels.length - 1) {
       this.currentDifficulty = this.difficultyLevels[currentIndex + 1];
-      console.log(`Switching to ${this.currentDifficulty} difficulty level.`);
       this.generateQuestions();
     } else {
       setTimeout(() => {
         this.questions = [];
         this.isAllLevelsCompleted = true;
-        this.isChecked = false;
-        this.isValidationInProgress = false;
-        this.isLoading = false;
-        console.log("🎉 You have completed all difficulty levels.");
         this.triggerConfetti();
-      }, 3000);
+      }, COMPLETION_DELAY_MS);
     }
   }
 
-  shouldShowHint(index: number): boolean {
-    return this.attemptCounts[index] < 1;
-  }
-
-  resetAllLevels() {
-    this.isAllLevelsCompleted = false;
-    this.currentDifficulty = "basic";
-    this.questions = [];
-    this.userAnswers = [];
-    this.feedback = [];
-    this.isChecked = false;
-    this.isQuestionsGenerated = false;
-    this.isValidationInProgress = false;
-    this.isTopicLocked = false;
-    this.hints = [];
-    this.error = "";
-    this.isGenerateDisabled = true;
-    this.isResetDisabled = false;
-    console.log("All levels reset. Starting from basic level.");
-  }
-
-  onAnswerChange(index: number) {
-    if (!this.isValidationInProgress) {
-      this.isChecked = false;
-      this.validated = false;
-    }
-    const userAnswer = this.userAnswers[index]?.trim();
-    console.log("User Answers:", this.userAnswers);
-    console.log("Are All Answers Filled:", this.areAllAnswersFilled());
-    if (userAnswer) {
-      this.userAnswers[index] = userAnswer;
-    } else {
-      this.userAnswers[index] = "";
-    }
+  onAnswerChange(index: number): void {
+    this.userAnswers[index] = this.userAnswers[index]?.trim() || '';
     this.userAnswers = [...this.userAnswers];
   }
 
-  goToHome() {
-    this.router.navigate(["/home"]);
+  goToHome(): void {
+    this.router.navigate(['/home']);
   }
 
-  private confettiInterval: any;
-
-  triggerConfetti() {
-    if (this.confettiInterval) {
-      clearInterval(this.confettiInterval);
-    }
+  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,
-        },
+        origin: { x: Math.random(), y: Math.random() - 0.2 }
       });
-    }, 250);
+    }, CONFETTI_INTERVAL_MS);
   }
 
-  stopConfetti() {
+  stopConfetti(): void {
     this.isAllLevelsCompleted = false;
+    this.stopConfettiAnimation();
+  }
 
+  private stopConfettiAnimation(): void {
     if (this.confettiInterval) {
       clearInterval(this.confettiInterval);
       this.confettiInterval = null;
     }
-
-    const canvas = document.querySelector("canvas.confetti-canvas");
-    if (canvas) {
-      canvas.remove();
-    }
-
-    const confettiDivs = document.querySelectorAll(".confetti, .ts-confetti");
-    confettiDivs.forEach((el) => el.remove());
+    document.querySelector('canvas.confetti-canvas')?.remove();
+    document.querySelectorAll('.confetti, .ts-confetti').forEach(el => el.remove());
   }
 
-  stopConfettiAndReset() {
+  stopConfettiAndReset(): void {
     this.stopConfetti();
     this.resetTopic();
   }
@@ -550,27 +468,10 @@ export class GenerateQuestionsComponent {
   selectTopic(suggestion: string): void {
     this.topic = suggestion;
     this.showSuggestions = false;
-    this.isGenerateDisabled = false;
-    this.isResetDisabled = true;
-    this.isDropdownDisabled = true;
   }
 
   hideSuggestions(): void {
-    setTimeout(() => {
-      this.showSuggestions = false;
-    }, 150);
-  }
-
-  processHints(hints: string[]) {
-    this.hints = hints;
-
-    this.hasNewHints = hints.length > 0;
-
-    if (this.hasNewHints) {
-      setTimeout(() => {
-        this.hasNewHints = false;
-      }, 5000);
-    }
+    setTimeout(() => { this.showSuggestions = false; }, 150);
   }
 
   closeHints(): void {
@@ -578,110 +479,23 @@ export class GenerateQuestionsComponent {
     this.hasNewHints = false;
   }
 
-  openHints(): void {
-    if (this.hints?.length) {
-      this.isHintMenuVisible = true;
-      this.hasNewHints = false;
-    }
-  }
-
-  toggleHintMenu() {
+  toggleHintMenu(): void {
     this.isHintMenuVisible = !this.isHintMenuVisible;
-    if (this.isHintMenuVisible) this.showHintIcon = false; // hide after first use
-  }
-
-  onInput(event: any, index: number) {
-    const value = event.target.value;
-    const filteredValue = value.replace(/[^a-zA-Z]/g, "");
-    this.userAnswers[index] = filteredValue;
-    event.target.value = filteredValue;
-  }
-
-  //timer implemetation
-
-  // --- Countdown state (per question) ---
-  countdowns: number[] = [];          // current number (5..0) for each question
-  showCountdown: boolean[] = [];      // whether to show the badge
-  private countdownTimers: { [idx: number]: any } = {};  // interval handles
-  private readonly COUNTDOWN_SECS = 10;
-  // === Global countdown overlay state ===
-  showGlobalCountdown = false;     // controls the centered overlay
-  globalCountdown = 0;             // 5..1
-  private globalCountdownActive = false;
-  private globalTimer: any = null;
-
-  overlayCaption = '';
-
-  private beginResetCountdown(index: number, seconds: number = this.COUNTDOWN_SECS): void {
-    // avoid duplicate timers for the same question
-    if (this.countdownTimers[index]) { return; }
-
-    this.countdowns[index] = seconds;
-    this.showCountdown[index] = true;
-
-    this.countdownTimers[index] = setInterval(() => {
-      this.countdowns[index] = this.countdowns[index] - 1;
-
-      if (this.countdowns[index] <= 0) {
-        this.finishCountdown(index);
-      }
-    }, 1000);
-  }
-
-  /** Stop timer, hide badge, clear the wrong input, and allow retry. */
- /** Stop timer, hide badge, clear the wrong input, and allow retry. */
-private finishCountdown(index: number): void {
-  const t = this.countdownTimers[index]; // FIX: use `this`, not `self`
-  if (t) {
-    clearInterval(t);
-    delete this.countdownTimers[index];
-  }
-
-  this.showCountdown[index] = false;
-  this.countdowns[index] = 0;
-
-  // Clear only the wrong answer and allow the learner to try again.
-  this.userAnswers[index] = '';
-
-  // Turn off the global "checked" flag so inputs are not stuck red.
-  this.isChecked = false;
-}
-
-  private startGlobalCountdown(): void {
-    if (this.globalCountdownActive) return; // prevent duplicates
-    this.globalCountdownActive = true;
-    this.showGlobalCountdown = true;
-    this.globalCountdown = this.COUNTDOWN_SECS;
-
-    this.globalTimer = setInterval(() => {
-      this.globalCountdown--;
-      if (this.globalCountdown <= 0) {
-        this.stopGlobalCountdown();
-      }
-    }, 1000);
+    if (this.isHintMenuVisible) this.showHintIcon = false;
   }
 
-  private stopGlobalCountdown(): void {
-    if (this.globalTimer) {
-      clearInterval(this.globalTimer);
-      this.globalTimer = null;
-    }
-    this.showGlobalCountdown = false;
-    this.globalCountdownActive = false;
-    this.globalCountdown = 0;
+  onInput(event: any, index: number): void {
+    const filtered = event.target.value.replace(/[^a-zA-Z]/g, '');
+    this.userAnswers[index] = filtered;
+    event.target.value = filtered;
   }
 
-  ngOnDestroy(): void {
-    this.stopGlobalCountdown();
-  }
-  private startOverlay(baseText: string, seconds: number = this.COUNTDOWN_SECS): void {
-    if (this.globalTimer) { clearTimeout(this.globalTimer as any); this.globalTimer = null; }
-    if (this.overlayTicker) { clearInterval(this.overlayTicker); this.overlayTicker = null; }
+  private startOverlay(caption: string, seconds = COUNTDOWN_SECONDS): void {
+    this.clearTimers();
 
     this.globalCountdownActive = true;
     this.showGlobalCountdown = true;
-    this.overlayCaption = baseText;
-
+    this.overlayCaption = caption;
     this.globalCountdown = seconds;
     this.overlayEndTs = Date.now() + seconds * 1000;
     this.ringDashoffset = this.ringCircumference;
@@ -692,31 +506,11 @@ private finishCountdown(index: number): void {
       const elapsedMs = seconds * 1000 - remainingMs;
 
       this.globalCountdown = Math.ceil(remainingMs / 1000);
+      this.ringDashoffset = this.ringCircumference * (1 - Math.min(1, elapsedMs / (seconds * 1000)));
 
-      const progress = Math.min(1, elapsedMs / (seconds * 1000));
-      this.ringDashoffset = this.ringCircumference * (1 - progress);
-
-      if (remainingMs <= 0) this.stopOverlay();
-    }, 50) as any;
-
-    this.globalTimer = setTimeout(() => this.stopOverlay(), seconds * 1000) as any;
-  }
-
-  private stopOverlay(): void {
-    if (this.overlayTicker) { clearInterval(this.overlayTicker); this.overlayTicker = null; }
-    if (this.globalTimer) { clearTimeout(this.globalTimer as any); this.globalTimer = null; }
+      if (remainingMs <= 0) this.clearTimers();
+    }, 50);
 
-    this.showGlobalCountdown = false;
-    this.globalCountdownActive = false;
-    this.overlayCaption = '';
-    this.globalCountdown = 0;
-    this.ringDashoffset = this.ringCircumference;
+    this.globalTimer = setTimeout(() => this.clearTimers(), seconds * 1000);
   }
-
-  ringRadius = 90;
-  ringCircumference = 2 * Math.PI * this.ringRadius;
-  ringDashoffset = this.ringCircumference;
-
-  private overlayTicker: any = null;
-  private overlayEndTs = 0;
 }

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

@@ -1,38 +1,34 @@
 import { Injectable } from '@angular/core';
 import { HttpClient } from '@angular/common/http';
 import { Observable } from 'rxjs';
+import { environment } from '../../environments/environment';
 
 @Injectable({
   providedIn: 'root'
 })
 export class GenerateQuestionsService {
+  private readonly baseUrl = environment.apiBaseUrl;
 
- 
-  private baseUrl = location.hostname.endsWith('hf.space')
-    ? 'https://pykara-py-learn-backend.hf.space/media'
-    : 'http://localhost:5000/media';
+  constructor(private http: HttpClient) {}
 
-  constructor(private http: HttpClient) { }
-
-  // Method to get questions from the backend
+  /**
+   * Generate grammar questions for a given topic and difficulty level.
+   *
+   * @param topic - The grammar topic
+   * @param difficulty - The difficulty level: 'basic', 'intermediate', or 'expert'
+   * @returns Observable with generated questions
+   */
   generateQuestions(topic: string, difficulty: string): Observable<any> {
     return this.http.post<any>(`${this.baseUrl}/generate-questions`, { topic, difficulty });
-    }
-
-
-
-  // Method to validate the user's answer for a specific question
-  validateAnswer(question: string, userAnswer: string, topic: string): Observable<any> {
-    return this.http.post<any>(`${this.baseUrl}/validate-answer`, {
-      question,
-      user_answer: userAnswer,
-      topic
-    });
   }
 
+  /**
+   * Validate multiple user answers in a single batch request.
+   *
+   * @param questions - Array of questions with user answers
+   * @returns Observable with validation results and hints
+   */
   validateAllAnswers(questions: { topic: string; question: string; user_answer: string }[]): Observable<any> {
     return this.http.post<any>(`${this.baseUrl}/validate-all-answers`, { questions });
   }
-
-
 }

src/environments/environment.prod.ts

@@ -0,0 +1,4 @@
+export const environment = {
+  production: true,
+  apiBaseUrl: 'https://pykara-py-learn-backend.hf.space/media'
+};

src/environments/environment.ts

@@ -0,0 +1,4 @@
+export const environment = {
+  production: false,
+  apiBaseUrl: 'http://localhost:5000/media'
+};