Refactor the question card

package-lock.json

@@ -8,9 +8,13 @@
       "name": "quizflash",
       "version": "0.1.0",
       "dependencies": {
+        "@ai-sdk/openai": "^2.0.0",
+        "@ai-sdk/react": "^2.0.1",
+        "ai": "^5.0.1",
         "next": "15.4.5",
         "react": "19.1.0",
-        "react-dom": "19.1.0"
+        "react-dom": "19.1.0",
+        "zod": "^3.25.76"
       },
       "devDependencies": {
         "@eslint/eslintrc": "^3",
@@ -24,6 +28,109 @@
         "typescript": "^5"
       }
     },
+    "node_modules/@ai-sdk/openai": {
+      "version": "2.0.0",
+      "resolved": "http://artifactory-build.taboolasyndication.com:80/artifactory/api/npm/npm-public/@ai-sdk/openai/-/openai-2.0.0.tgz",
+      "integrity": "sha512-G0WY5K81JwGpuX9HEmP2VTdt3N9m43qPnGT4fWkXcpu6Y2B05nnjs8k1r/csCJd8+TkYC6esjBABQYHxdMOejQ==",
+      "dependencies": {
+        "@ai-sdk/provider": "2.0.0",
+        "@ai-sdk/provider-utils": "3.0.0"
+      },
+      "engines": {
+        "node": ">=18"
+      },
+      "peerDependencies": {
+        "zod": "^3.25.76 || ^4"
+      }
+    },
+    "node_modules/@ai-sdk/openai/node_modules/@ai-sdk/provider-utils": {
+      "version": "3.0.0",
+      "resolved": "http://artifactory-build.taboolasyndication.com:80/artifactory/api/npm/npm-public/@ai-sdk/provider-utils/-/provider-utils-3.0.0.tgz",
+      "integrity": "sha512-BoQZtGcBxkeSH1zK+SRYNDtJPIPpacTeiMZqnG4Rv6xXjEwM0FH4MGs9c+PlhyEWmQCzjRM2HAotEydFhD4dYw==",
+      "dependencies": {
+        "@ai-sdk/provider": "2.0.0",
+        "@standard-schema/spec": "^1.0.0",
+        "eventsource-parser": "^3.0.3",
+        "zod-to-json-schema": "^3.24.1"
+      },
+      "engines": {
+        "node": ">=18"
+      },
+      "peerDependencies": {
+        "zod": "^3.25.76 || ^4"
+      }
+    },
+    "node_modules/@ai-sdk/provider": {
+      "version": "2.0.0",
+      "resolved": "http://artifactory-build.taboolasyndication.com:80/artifactory/api/npm/npm-public/@ai-sdk/provider/-/provider-2.0.0.tgz",
+      "integrity": "sha512-6o7Y2SeO9vFKB8lArHXehNuusnpddKPk7xqL7T2/b+OvXMRIXUO1rR4wcv1hAFUAT9avGZshty3Wlua/XA7TvA==",
+      "dependencies": {
+        "json-schema": "^0.4.0"
+      },
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@ai-sdk/react": {
+      "version": "2.0.1",
+      "resolved": "http://artifactory-build.taboolasyndication.com:80/artifactory/api/npm/npm-public/@ai-sdk/react/-/react-2.0.1.tgz",
+      "integrity": "sha512-eq2ABukavfeD2mK0ovGrg8hBVynVJ7P42KnfGBScooef0264TLicM6Hv8yahOzwl/kUTBJlot8jYe3t3rWs8lg==",
+      "dependencies": {
+        "@ai-sdk/provider-utils": "3.0.0",
+        "ai": "5.0.1",
+        "swr": "^2.2.5",
+        "throttleit": "2.1.0"
+      },
+      "engines": {
+        "node": ">=18"
+      },
+      "peerDependencies": {
+        "react": "^18 || ^19 || ^19.0.0-rc",
+        "zod": "^3.25.76 || ^4"
+      },
+      "peerDependenciesMeta": {
+        "zod": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@ai-sdk/react/node_modules/@ai-sdk/provider-utils": {
+      "version": "3.0.0",
+      "resolved": "http://artifactory-build.taboolasyndication.com:80/artifactory/api/npm/npm-public/@ai-sdk/provider-utils/-/provider-utils-3.0.0.tgz",
+      "integrity": "sha512-BoQZtGcBxkeSH1zK+SRYNDtJPIPpacTeiMZqnG4Rv6xXjEwM0FH4MGs9c+PlhyEWmQCzjRM2HAotEydFhD4dYw==",
+      "dependencies": {
+        "@ai-sdk/provider": "2.0.0",
+        "@standard-schema/spec": "^1.0.0",
+        "eventsource-parser": "^3.0.3",
+        "zod-to-json-schema": "^3.24.1"
+      },
+      "engines": {
+        "node": ">=18"
+      },
+      "peerDependencies": {
+        "zod": "^3.25.76 || ^4"
+      }
+    },
+    "node_modules/@ai-sdk/react/node_modules/swr": {
+      "version": "2.3.4",
+      "resolved": "http://artifactory-build.taboolasyndication.com:80/artifactory/api/npm/npm-public/swr/-/swr-2.3.4.tgz",
+      "integrity": "sha512-bYd2lrhc+VarcpkgWclcUi92wYCpOgMws9Sd1hG1ntAu0NEy+14CbotuFjshBU2kt9rYj9TSmDcybpxpeTU1fg==",
+      "dependencies": {
+        "dequal": "^2.0.3",
+        "use-sync-external-store": "^1.4.0"
+      },
+      "peerDependencies": {
+        "react": "^16.11.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"
+      }
+    },
+    "node_modules/@ai-sdk/react/node_modules/swr/node_modules/use-sync-external-store": {
+      "version": "1.5.0",
+      "resolved": "http://artifactory-build.taboolasyndication.com:80/artifactory/api/npm/npm-public/use-sync-external-store/-/use-sync-external-store-1.5.0.tgz",
+      "integrity": "sha512-Rb46I4cGGVBmjamjphe8L/UnvJD+uPPtTkNvX5mZgqdbavhI4EbgIWJiIHXJ8bc/i9EQGPRh4DwEURJ552Do0A==",
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"
+      }
+    },
     "node_modules/@alloc/quick-lru": {
       "version": "5.2.0",
       "resolved": "http://artifactory-build.taboolasyndication.com:80/artifactory/api/npm/npm-public/@alloc/quick-lru/-/quick-lru-5.2.0.tgz",
@@ -634,6 +741,14 @@
         "node": ">=12.4.0"
       }
     },
+    "node_modules/@opentelemetry/api": {
+      "version": "1.9.0",
+      "resolved": "http://artifactory-build.taboolasyndication.com:80/artifactory/api/npm/npm-public/@opentelemetry/api/-/api-1.9.0.tgz",
+      "integrity": "sha512-3giAOQvZiH5F9bMlMiv8+GSPMeqg0dbaeo58/0SlA9sxSqZhnUtxzX9/2FzyhS9sWQf5S0GJE0AKBrFqjpeYcg==",
+      "engines": {
+        "node": ">=8.0.0"
+      }
+    },
     "node_modules/@rtsao/scc": {
       "version": "1.1.0",
       "resolved": "http://artifactory-build.taboolasyndication.com:80/artifactory/api/npm/npm-public/@rtsao/scc/-/scc-1.1.0.tgz",
@@ -646,6 +761,11 @@
       "integrity": "sha512-5EwMtOqvJMMa3HbmxLlF74e+3/HhwBTMcvt3nqVJgGCozO6hzIPOBlwm8mGVNR9SN2IJpxSnlxczyDjcn7qIyw==",
       "dev": true
     },
+    "node_modules/@standard-schema/spec": {
+      "version": "1.0.0",
+      "resolved": "http://artifactory-build.taboolasyndication.com:80/artifactory/api/npm/npm-public/@standard-schema/spec/-/spec-1.0.0.tgz",
+      "integrity": "sha512-m2bOd0f2RT9k8QJx1JN85cZYyH1RqFBdlwtkSlf4tBDYLCiiZnv1fIIwacK6cqwXavOydf0NPToMQgpKq+dVlA=="
+    },
     "node_modules/@swc/helpers": {
       "version": "0.5.15",
       "resolved": "http://artifactory-build.taboolasyndication.com:80/artifactory/api/npm/npm-public/@swc/helpers/-/helpers-0.5.15.tgz",
@@ -1351,6 +1471,55 @@
         "acorn": "^6.0.0 || ^7.0.0 || ^8.0.0"
       }
     },
+    "node_modules/ai": {
+      "version": "5.0.1",
+      "resolved": "http://artifactory-build.taboolasyndication.com:80/artifactory/api/npm/npm-public/ai/-/ai-5.0.1.tgz",
+      "integrity": "sha512-h3bGaysgeD0N/jFnCwvtKP8oyhv0Put8KtouYl8k03oq822rlsNxz58/LWF1FZt+0DUU77vdq47B6P94+ETwzw==",
+      "dependencies": {
+        "@ai-sdk/gateway": "1.0.0",
+        "@ai-sdk/provider": "2.0.0",
+        "@ai-sdk/provider-utils": "3.0.0",
+        "@opentelemetry/api": "1.9.0"
+      },
+      "engines": {
+        "node": ">=18"
+      },
+      "peerDependencies": {
+        "zod": "^3.25.76 || ^4"
+      }
+    },
+    "node_modules/ai/node_modules/@ai-sdk/gateway": {
+      "version": "1.0.0",
+      "resolved": "http://artifactory-build.taboolasyndication.com:80/artifactory/api/npm/npm-public/@ai-sdk/gateway/-/gateway-1.0.0.tgz",
+      "integrity": "sha512-VEm87DyRx1yIPywbTy8ntoyh4jEDv1rJ88m+2I7zOm08jJI5BhFtAWh0OF6YzZu1Vu4NxhOWO4ssGdsqydDQ3A==",
+      "dependencies": {
+        "@ai-sdk/provider": "2.0.0",
+        "@ai-sdk/provider-utils": "3.0.0"
+      },
+      "engines": {
+        "node": ">=18"
+      },
+      "peerDependencies": {
+        "zod": "^3.25.76 || ^4"
+      }
+    },
+    "node_modules/ai/node_modules/@ai-sdk/provider-utils": {
+      "version": "3.0.0",
+      "resolved": "http://artifactory-build.taboolasyndication.com:80/artifactory/api/npm/npm-public/@ai-sdk/provider-utils/-/provider-utils-3.0.0.tgz",
+      "integrity": "sha512-BoQZtGcBxkeSH1zK+SRYNDtJPIPpacTeiMZqnG4Rv6xXjEwM0FH4MGs9c+PlhyEWmQCzjRM2HAotEydFhD4dYw==",
+      "dependencies": {
+        "@ai-sdk/provider": "2.0.0",
+        "@standard-schema/spec": "^1.0.0",
+        "eventsource-parser": "^3.0.3",
+        "zod-to-json-schema": "^3.24.1"
+      },
+      "engines": {
+        "node": ">=18"
+      },
+      "peerDependencies": {
+        "zod": "^3.25.76 || ^4"
+      }
+    },
     "node_modules/ajv": {
       "version": "6.12.6",
       "resolved": "http://artifactory-build.taboolasyndication.com:80/artifactory/api/npm/npm-public/ajv/-/ajv-6.12.6.tgz",
@@ -1842,6 +2011,14 @@
         "node": ">= 0.4"
       }
     },
+    "node_modules/dequal": {
+      "version": "2.0.3",
+      "resolved": "http://artifactory-build.taboolasyndication.com:80/artifactory/api/npm/npm-public/dequal/-/dequal-2.0.3.tgz",
+      "integrity": "sha512-0je+qPKHEMohvfRTCEo3CrPG6cAzAYgmzKyxRiYSSDkS6eGJdyVJm7WaYA5ECaAD9wLB2T4EEeymA5aFVcYXCA==",
+      "engines": {
+        "node": ">=6"
+      }
+    },
     "node_modules/detect-libc": {
       "version": "2.0.4",
       "resolved": "http://artifactory-build.taboolasyndication.com:80/artifactory/api/npm/npm-public/detect-libc/-/detect-libc-2.0.4.tgz",
@@ -2454,6 +2631,14 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/eventsource-parser": {
+      "version": "3.0.3",
+      "resolved": "http://artifactory-build.taboolasyndication.com:80/artifactory/api/npm/npm-public/eventsource-parser/-/eventsource-parser-3.0.3.tgz",
+      "integrity": "sha512-nVpZkTMM9rF6AQ9gPJpFsNAMt48wIzB5TQgiTLdHiuO8XEDhUgZEhqKlZWXbIzo9VmJ/HvysHqEaVeD5v9TPvA==",
+      "engines": {
+        "node": ">=20.0.0"
+      }
+    },
     "node_modules/fast-deep-equal": {
       "version": "3.1.3",
       "resolved": "http://artifactory-build.taboolasyndication.com:80/artifactory/api/npm/npm-public/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz",
@@ -3212,6 +3397,11 @@
       "integrity": "sha512-4bV5BfR2mqfQTJm+V5tPPdf+ZpuhiIvTuAB5g8kcrXOZpTT/QwwVRWBywX1ozr6lEuPdbHxwaJlm9G6mI2sfSQ==",
       "dev": true
     },
+    "node_modules/json-schema": {
+      "version": "0.4.0",
+      "resolved": "http://artifactory-build.taboolasyndication.com:80/artifactory/api/npm/npm-public/json-schema/-/json-schema-0.4.0.tgz",
+      "integrity": "sha512-es94M3nTIfsEPisRafak+HDLfHXnKBhV3vU5eqPcS3flIWqcxJWgXHXiey3YrpaNsanY5ei1VoYEbOzijuq9BA=="
+    },
     "node_modules/json-schema-traverse": {
       "version": "0.4.1",
       "resolved": "http://artifactory-build.taboolasyndication.com:80/artifactory/api/npm/npm-public/json-schema-traverse/-/json-schema-traverse-0.4.1.tgz",
@@ -4463,6 +4653,14 @@
         "node": ">=18"
       }
     },
+    "node_modules/throttleit": {
+      "version": "2.1.0",
+      "resolved": "http://artifactory-build.taboolasyndication.com:80/artifactory/api/npm/npm-public/throttleit/-/throttleit-2.1.0.tgz",
+      "integrity": "sha512-nt6AMGKW1p/70DF/hGBdJB57B8Tspmbp5gfJ8ilhLnt7kkr2ye7hzD6NVG8GGErk2HWF34igrL2CXmNIkzKqKw==",
+      "engines": {
+        "node": ">=18"
+      }
+    },
     "node_modules/tinyglobby": {
       "version": "0.2.14",
       "resolved": "http://artifactory-build.taboolasyndication.com:80/artifactory/api/npm/npm-public/tinyglobby/-/tinyglobby-0.2.14.tgz",
@@ -4805,9 +5003,93 @@
       "engines": {
         "node": ">=10"
       }
+    },
+    "node_modules/zod": {
+      "version": "3.25.76",
+      "resolved": "http://artifactory-build.taboolasyndication.com:80/artifactory/api/npm/npm-public/zod/-/zod-3.25.76.tgz",
+      "integrity": "sha512-gzUt/qt81nXsFGKIFcC3YnfEAx5NkunCfnDlvuBSSFS02bcXu4Lmea0AFIUwbLWxWPx3d9p8S5QoaujKcNQxcQ=="
+    },
+    "node_modules/zod-to-json-schema": {
+      "version": "3.24.6",
+      "resolved": "http://artifactory-build.taboolasyndication.com:80/artifactory/api/npm/npm-public/zod-to-json-schema/-/zod-to-json-schema-3.24.6.tgz",
+      "integrity": "sha512-h/z3PKvcTcTetyjl1fkj79MHNEjm+HpD6NXheWjzOekY7kV+lwDYnHw+ivHkijnCSMz1yJaWBD9vu/Fcmk+vEg==",
+      "peerDependencies": {
+        "zod": "^3.24.1"
+      }
     }
   },
   "dependencies": {
+    "@ai-sdk/openai": {
+      "version": "2.0.0",
+      "resolved": "http://artifactory-build.taboolasyndication.com:80/artifactory/api/npm/npm-public/@ai-sdk/openai/-/openai-2.0.0.tgz",
+      "integrity": "sha512-G0WY5K81JwGpuX9HEmP2VTdt3N9m43qPnGT4fWkXcpu6Y2B05nnjs8k1r/csCJd8+TkYC6esjBABQYHxdMOejQ==",
+      "requires": {
+        "@ai-sdk/provider": "2.0.0",
+        "@ai-sdk/provider-utils": "3.0.0"
+      },
+      "dependencies": {
+        "@ai-sdk/provider-utils": {
+          "version": "3.0.0",
+          "resolved": "http://artifactory-build.taboolasyndication.com:80/artifactory/api/npm/npm-public/@ai-sdk/provider-utils/-/provider-utils-3.0.0.tgz",
+          "integrity": "sha512-BoQZtGcBxkeSH1zK+SRYNDtJPIPpacTeiMZqnG4Rv6xXjEwM0FH4MGs9c+PlhyEWmQCzjRM2HAotEydFhD4dYw==",
+          "requires": {
+            "@ai-sdk/provider": "2.0.0",
+            "@standard-schema/spec": "^1.0.0",
+            "eventsource-parser": "^3.0.3",
+            "zod-to-json-schema": "^3.24.1"
+          }
+        }
+      }
+    },
+    "@ai-sdk/provider": {
+      "version": "2.0.0",
+      "resolved": "http://artifactory-build.taboolasyndication.com:80/artifactory/api/npm/npm-public/@ai-sdk/provider/-/provider-2.0.0.tgz",
+      "integrity": "sha512-6o7Y2SeO9vFKB8lArHXehNuusnpddKPk7xqL7T2/b+OvXMRIXUO1rR4wcv1hAFUAT9avGZshty3Wlua/XA7TvA==",
+      "requires": {
+        "json-schema": "^0.4.0"
+      }
+    },
+    "@ai-sdk/react": {
+      "version": "2.0.1",
+      "resolved": "http://artifactory-build.taboolasyndication.com:80/artifactory/api/npm/npm-public/@ai-sdk/react/-/react-2.0.1.tgz",
+      "integrity": "sha512-eq2ABukavfeD2mK0ovGrg8hBVynVJ7P42KnfGBScooef0264TLicM6Hv8yahOzwl/kUTBJlot8jYe3t3rWs8lg==",
+      "requires": {
+        "@ai-sdk/provider-utils": "3.0.0",
+        "ai": "5.0.1",
+        "swr": "^2.2.5",
+        "throttleit": "2.1.0"
+      },
+      "dependencies": {
+        "@ai-sdk/provider-utils": {
+          "version": "3.0.0",
+          "resolved": "http://artifactory-build.taboolasyndication.com:80/artifactory/api/npm/npm-public/@ai-sdk/provider-utils/-/provider-utils-3.0.0.tgz",
+          "integrity": "sha512-BoQZtGcBxkeSH1zK+SRYNDtJPIPpacTeiMZqnG4Rv6xXjEwM0FH4MGs9c+PlhyEWmQCzjRM2HAotEydFhD4dYw==",
+          "requires": {
+            "@ai-sdk/provider": "2.0.0",
+            "@standard-schema/spec": "^1.0.0",
+            "eventsource-parser": "^3.0.3",
+            "zod-to-json-schema": "^3.24.1"
+          }
+        },
+        "swr": {
+          "version": "2.3.4",
+          "resolved": "http://artifactory-build.taboolasyndication.com:80/artifactory/api/npm/npm-public/swr/-/swr-2.3.4.tgz",
+          "integrity": "sha512-bYd2lrhc+VarcpkgWclcUi92wYCpOgMws9Sd1hG1ntAu0NEy+14CbotuFjshBU2kt9rYj9TSmDcybpxpeTU1fg==",
+          "requires": {
+            "dequal": "^2.0.3",
+            "use-sync-external-store": "^1.4.0"
+          },
+          "dependencies": {
+            "use-sync-external-store": {
+              "version": "1.5.0",
+              "resolved": "http://artifactory-build.taboolasyndication.com:80/artifactory/api/npm/npm-public/use-sync-external-store/-/use-sync-external-store-1.5.0.tgz",
+              "integrity": "sha512-Rb46I4cGGVBmjamjphe8L/UnvJD+uPPtTkNvX5mZgqdbavhI4EbgIWJiIHXJ8bc/i9EQGPRh4DwEURJ552Do0A==",
+              "requires": {}
+            }
+          }
+        }
+      }
+    },
     "@alloc/quick-lru": {
       "version": "5.2.0",
       "resolved": "http://artifactory-build.taboolasyndication.com:80/artifactory/api/npm/npm-public/@alloc/quick-lru/-/quick-lru-5.2.0.tgz",
@@ -5287,6 +5569,11 @@
       "integrity": "sha512-nn5ozdjYQpUCZlWGuxcJY/KpxkWQs4DcbMCmKojjyrYDEAGy4Ce19NN4v5MduafTwJlbKc99UA8YhSVqq9yPZA==",
       "dev": true
     },
+    "@opentelemetry/api": {
+      "version": "1.9.0",
+      "resolved": "http://artifactory-build.taboolasyndication.com:80/artifactory/api/npm/npm-public/@opentelemetry/api/-/api-1.9.0.tgz",
+      "integrity": "sha512-3giAOQvZiH5F9bMlMiv8+GSPMeqg0dbaeo58/0SlA9sxSqZhnUtxzX9/2FzyhS9sWQf5S0GJE0AKBrFqjpeYcg=="
+    },
     "@rtsao/scc": {
       "version": "1.1.0",
       "resolved": "http://artifactory-build.taboolasyndication.com:80/artifactory/api/npm/npm-public/@rtsao/scc/-/scc-1.1.0.tgz",
@@ -5299,6 +5586,11 @@
       "integrity": "sha512-5EwMtOqvJMMa3HbmxLlF74e+3/HhwBTMcvt3nqVJgGCozO6hzIPOBlwm8mGVNR9SN2IJpxSnlxczyDjcn7qIyw==",
       "dev": true
     },
+    "@standard-schema/spec": {
+      "version": "1.0.0",
+      "resolved": "http://artifactory-build.taboolasyndication.com:80/artifactory/api/npm/npm-public/@standard-schema/spec/-/spec-1.0.0.tgz",
+      "integrity": "sha512-m2bOd0f2RT9k8QJx1JN85cZYyH1RqFBdlwtkSlf4tBDYLCiiZnv1fIIwacK6cqwXavOydf0NPToMQgpKq+dVlA=="
+    },
     "@swc/helpers": {
       "version": "0.5.15",
       "resolved": "http://artifactory-build.taboolasyndication.com:80/artifactory/api/npm/npm-public/@swc/helpers/-/helpers-0.5.15.tgz",
@@ -5874,6 +6166,39 @@
       "dev": true,
       "requires": {}
     },
+    "ai": {
+      "version": "5.0.1",
+      "resolved": "http://artifactory-build.taboolasyndication.com:80/artifactory/api/npm/npm-public/ai/-/ai-5.0.1.tgz",
+      "integrity": "sha512-h3bGaysgeD0N/jFnCwvtKP8oyhv0Put8KtouYl8k03oq822rlsNxz58/LWF1FZt+0DUU77vdq47B6P94+ETwzw==",
+      "requires": {
+        "@ai-sdk/gateway": "1.0.0",
+        "@ai-sdk/provider": "2.0.0",
+        "@ai-sdk/provider-utils": "3.0.0",
+        "@opentelemetry/api": "1.9.0"
+      },
+      "dependencies": {
+        "@ai-sdk/gateway": {
+          "version": "1.0.0",
+          "resolved": "http://artifactory-build.taboolasyndication.com:80/artifactory/api/npm/npm-public/@ai-sdk/gateway/-/gateway-1.0.0.tgz",
+          "integrity": "sha512-VEm87DyRx1yIPywbTy8ntoyh4jEDv1rJ88m+2I7zOm08jJI5BhFtAWh0OF6YzZu1Vu4NxhOWO4ssGdsqydDQ3A==",
+          "requires": {
+            "@ai-sdk/provider": "2.0.0",
+            "@ai-sdk/provider-utils": "3.0.0"
+          }
+        },
+        "@ai-sdk/provider-utils": {
+          "version": "3.0.0",
+          "resolved": "http://artifactory-build.taboolasyndication.com:80/artifactory/api/npm/npm-public/@ai-sdk/provider-utils/-/provider-utils-3.0.0.tgz",
+          "integrity": "sha512-BoQZtGcBxkeSH1zK+SRYNDtJPIPpacTeiMZqnG4Rv6xXjEwM0FH4MGs9c+PlhyEWmQCzjRM2HAotEydFhD4dYw==",
+          "requires": {
+            "@ai-sdk/provider": "2.0.0",
+            "@standard-schema/spec": "^1.0.0",
+            "eventsource-parser": "^3.0.3",
+            "zod-to-json-schema": "^3.24.1"
+          }
+        }
+      }
+    },
     "ajv": {
       "version": "6.12.6",
       "resolved": "http://artifactory-build.taboolasyndication.com:80/artifactory/api/npm/npm-public/ajv/-/ajv-6.12.6.tgz",
@@ -6270,6 +6595,11 @@
         "object-keys": "^1.1.1"
       }
     },
+    "dequal": {
+      "version": "2.0.3",
+      "resolved": "http://artifactory-build.taboolasyndication.com:80/artifactory/api/npm/npm-public/dequal/-/dequal-2.0.3.tgz",
+      "integrity": "sha512-0je+qPKHEMohvfRTCEo3CrPG6cAzAYgmzKyxRiYSSDkS6eGJdyVJm7WaYA5ECaAD9wLB2T4EEeymA5aFVcYXCA=="
+    },
     "detect-libc": {
       "version": "2.0.4",
       "resolved": "http://artifactory-build.taboolasyndication.com:80/artifactory/api/npm/npm-public/detect-libc/-/detect-libc-2.0.4.tgz",
@@ -6751,6 +7081,11 @@
       "integrity": "sha512-kVscqXk4OCp68SZ0dkgEKVi6/8ij300KBWTJq32P/dYeWTSwK41WyTxalN1eRmA5Z9UU/LX9D7FWSmV9SAYx6g==",
       "dev": true
     },
+    "eventsource-parser": {
+      "version": "3.0.3",
+      "resolved": "http://artifactory-build.taboolasyndication.com:80/artifactory/api/npm/npm-public/eventsource-parser/-/eventsource-parser-3.0.3.tgz",
+      "integrity": "sha512-nVpZkTMM9rF6AQ9gPJpFsNAMt48wIzB5TQgiTLdHiuO8XEDhUgZEhqKlZWXbIzo9VmJ/HvysHqEaVeD5v9TPvA=="
+    },
     "fast-deep-equal": {
       "version": "3.1.3",
       "resolved": "http://artifactory-build.taboolasyndication.com:80/artifactory/api/npm/npm-public/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz",
@@ -7352,6 +7687,11 @@
       "integrity": "sha512-4bV5BfR2mqfQTJm+V5tPPdf+ZpuhiIvTuAB5g8kcrXOZpTT/QwwVRWBywX1ozr6lEuPdbHxwaJlm9G6mI2sfSQ==",
       "dev": true
     },
+    "json-schema": {
+      "version": "0.4.0",
+      "resolved": "http://artifactory-build.taboolasyndication.com:80/artifactory/api/npm/npm-public/json-schema/-/json-schema-0.4.0.tgz",
+      "integrity": "sha512-es94M3nTIfsEPisRafak+HDLfHXnKBhV3vU5eqPcS3flIWqcxJWgXHXiey3YrpaNsanY5ei1VoYEbOzijuq9BA=="
+    },
     "json-schema-traverse": {
       "version": "0.4.1",
       "resolved": "http://artifactory-build.taboolasyndication.com:80/artifactory/api/npm/npm-public/json-schema-traverse/-/json-schema-traverse-0.4.1.tgz",
@@ -8297,6 +8637,11 @@
         "yallist": "^5.0.0"
       }
     },
+    "throttleit": {
+      "version": "2.1.0",
+      "resolved": "http://artifactory-build.taboolasyndication.com:80/artifactory/api/npm/npm-public/throttleit/-/throttleit-2.1.0.tgz",
+      "integrity": "sha512-nt6AMGKW1p/70DF/hGBdJB57B8Tspmbp5gfJ8ilhLnt7kkr2ye7hzD6NVG8GGErk2HWF34igrL2CXmNIkzKqKw=="
+    },
     "tinyglobby": {
       "version": "0.2.14",
       "resolved": "http://artifactory-build.taboolasyndication.com:80/artifactory/api/npm/npm-public/tinyglobby/-/tinyglobby-0.2.14.tgz",
@@ -8565,6 +8910,17 @@
       "resolved": "http://artifactory-build.taboolasyndication.com:80/artifactory/api/npm/npm-public/yocto-queue/-/yocto-queue-0.1.0.tgz",
       "integrity": "sha512-rVksvsnNCdJ/ohGc6xgPwyN8eheCxsiLM8mxuE/t/mOVqJewPuO1miLpTHQiRgTKCLexL4MeAFVagts7HmNZ2Q==",
       "dev": true
+    },
+    "zod": {
+      "version": "3.25.76",
+      "resolved": "http://artifactory-build.taboolasyndication.com:80/artifactory/api/npm/npm-public/zod/-/zod-3.25.76.tgz",
+      "integrity": "sha512-gzUt/qt81nXsFGKIFcC3YnfEAx5NkunCfnDlvuBSSFS02bcXu4Lmea0AFIUwbLWxWPx3d9p8S5QoaujKcNQxcQ=="
+    },
+    "zod-to-json-schema": {
+      "version": "3.24.6",
+      "resolved": "http://artifactory-build.taboolasyndication.com:80/artifactory/api/npm/npm-public/zod-to-json-schema/-/zod-to-json-schema-3.24.6.tgz",
+      "integrity": "sha512-h/z3PKvcTcTetyjl1fkj79MHNEjm+HpD6NXheWjzOekY7kV+lwDYnHw+ivHkijnCSMz1yJaWBD9vu/Fcmk+vEg==",
+      "requires": {}
     }
   }
 }

package.json

@@ -9,19 +9,23 @@
     "lint": "next lint"
   },
   "dependencies": {
+    "@ai-sdk/openai": "^2.0.0",
+    "@ai-sdk/react": "^2.0.1",
+    "ai": "^5.0.1",
+    "next": "15.4.5",
     "react": "19.1.0",
     "react-dom": "19.1.0",
-    "next": "15.4.5"
+    "zod": "^3.25.76"
   },
   "devDependencies": {
-    "typescript": "^5",
+    "@eslint/eslintrc": "^3",
+    "@tailwindcss/postcss": "^4",
     "@types/node": "^20",
     "@types/react": "^19",
     "@types/react-dom": "^19",
-    "@tailwindcss/postcss": "^4",
-    "tailwindcss": "^4",
     "eslint": "^9",
     "eslint-config-next": "15.4.5",
-    "@eslint/eslintrc": "^3"
+    "tailwindcss": "^4",
+    "typescript": "^5"
   }
 }

src/app/api/chat/route.ts

@@ -0,0 +1,16 @@
+import { openai } from '@ai-sdk/openai';
+import { streamText } from 'ai';
+
+// Allow streaming responses up to 30 seconds
+export const maxDuration = 30;
+
+export async function POST(req: Request) {
+  const { messages } = await req.json();
+
+  const result = await streamText({
+    model: openai('gpt-4o-mini'),
+    messages,
+  });
+
+  return result.toDataStreamResponse();
+}

src/app/api/generate-question/route.ts

@@ -0,0 +1,124 @@
+import { openai } from '@ai-sdk/openai';
+import { generateObject } from 'ai';
+import { z } from 'zod';
+
+// Schemas for different question types
+const MultipleChoiceSchema = z.object({
+  stem: z.string(),
+  options: z.array(z.string()),
+  correctAnswer: z.number(),
+  explanation: z.string(),
+  points: z.number().default(1),
+});
+
+const ClozeSchema = z.object({
+  stem: z.string(),
+  blanks: z.array(z.object({
+    position: z.number(),
+    answer: z.string(),
+    alternatives: z.array(z.string()).optional(),
+  })),
+  explanation: z.string(),
+  points: z.number().default(1),
+});
+
+const GrammarSchema = z.object({
+  stem: z.string(),
+  incorrectSentence: z.string(),
+  correctSentence: z.string(),
+  errors: z.array(z.object({
+    type: z.string(),
+    position: z.number(),
+    correction: z.string(),
+  })),
+  explanation: z.string(),
+  points: z.number().default(1),
+});
+
+const EssaySchema = z.object({
+  stem: z.string(),
+  prompt: z.string(),
+  rubric: z.array(z.object({
+    criterion: z.string(),
+    description: z.string(),
+    points: z.number(),
+  })),
+  sampleAnswer: z.string().optional(),
+  points: z.number().default(5),
+});
+
+export async function POST(req: Request) {
+  try {
+    const { type, parameters, sourceMaterial } = await req.json();
+
+    let schema;
+    let prompt = '';
+
+    switch (type) {
+      case 'multiple-choice':
+        schema = MultipleChoiceSchema;
+        prompt = `Create a ${parameters.difficulty || 'intermediate'} level multiple choice question with ${parameters.numOptions || 4} options.
+          ${sourceMaterial ? `Base the question on this source material: "${sourceMaterial}"` : 'Create an educational question on any relevant topic.'}
+          Make sure one answer is clearly correct and the others are plausible distractors.
+          Provide a clear explanation for why the correct answer is right.`;
+        break;
+
+      case 'cloze':
+        schema = ClozeSchema;
+        prompt = `Create a cloze (fill-in-the-blank) question with ${parameters.numBlanks || 1} blank(s).
+          ${parameters.partOfSpeech !== 'any' ? `Focus on ${parameters.partOfSpeech} words.` : ''}
+          ${sourceMaterial ? `Use this source material: "${sourceMaterial}"` : 'Create an educational text.'}
+          Mark blanks with their position and provide the correct answers.
+          Include alternative acceptable answers where appropriate.`;
+        break;
+
+      case 'grammar':
+        schema = GrammarSchema;
+        prompt = `Create a grammar correction question at ${parameters.difficulty || 'intermediate'} level.
+          Present a sentence with grammatical errors for students to identify and correct.
+          ${sourceMaterial ? `Base it on this text style: "${sourceMaterial}"` : 'Use common grammatical concepts.'}
+          Specify the type of error, its position, and the correction needed.`;
+        break;
+
+      case 'essay':
+        schema = EssaySchema;
+        prompt = `Create an essay question at ${parameters.difficulty || 'intermediate'} level.
+          ${sourceMaterial ? `Base the essay prompt on this source material: "${sourceMaterial}"` : 'Create a thought-provoking prompt.'}
+          Include a detailed rubric with specific criteria and point values.
+          Optionally provide a sample answer outline.`;
+        break;
+
+      case 'reading-comp':
+        schema = MultipleChoiceSchema;
+        prompt = `Create a reading comprehension question based on the provided text.
+          ${sourceMaterial || 'Please provide source material for reading comprehension questions.'}
+          Create a question that tests understanding, inference, or analysis of the text.
+          Include ${parameters.numOptions || 4} options with clear explanations.`;
+        break;
+
+      default:
+        return Response.json(
+          { error: 'Unsupported question type' },
+          { status: 400 }
+        );
+    }
+
+    const result = await generateObject({
+      model: openai('gpt-4o-mini'),
+      schema,
+      prompt,
+    });
+
+    return Response.json({
+      type,
+      ...result.object,
+    });
+
+  } catch (error) {
+    console.error('Error generating question:', error);
+    return Response.json(
+      { error: 'Failed to generate question' },
+      { status: 500 }
+    );
+  }
+}

src/app/api/generate-quiz/route.ts

@@ -0,0 +1,36 @@
+import { openai } from '@ai-sdk/openai';
+import { generateObject } from 'ai';
+import { z } from 'zod';
+import { generateQuizPrompt } from '@/prompts/quiz-generation';
+
+// Schema for quiz questions
+const QuizSchema = z.object({
+  questions: z.array(
+    z.object({
+      question: z.string(),
+      options: z.array(z.string()).length(4),
+      correctAnswer: z.number().min(0).max(3),
+      explanation: z.string(),
+    })
+  ),
+});
+
+export async function POST(req: Request) {
+  try {
+    const { topic, difficulty, numQuestions } = await req.json();
+
+    const result = await generateObject({
+      model: openai('gpt-4o-mini'),
+      schema: QuizSchema,
+      prompt: generateQuizPrompt({ topic, difficulty, numQuestions }, 'basic'),
+    });
+
+    return Response.json(result.object);
+  } catch (error) {
+    console.error('Error generating quiz:', error);
+    return Response.json(
+      { error: 'Failed to generate quiz' },
+      { status: 500 }
+    );
+  }
+}

src/app/layout.tsx

@@ -13,8 +13,8 @@ const geistMono = Geist_Mono({
 });
 
 export const metadata: Metadata = {
-  title: "Create Next App",
-  description: "Generated by create next app",
+  title: "QuizFlash - AI-Powered Quiz Generation",
+  description: "Generate interactive quizzes on any topic using AI. Test your knowledge with QuizFlash!",
 };
 
 export default function RootLayout({

src/app/page.tsx

@@ -1,103 +1,319 @@
-import Image from "next/image";
+'use client';
+
+import { useState } from 'react';
+import { useChat } from '@ai-sdk/react';
+import QuestionParameterForm from '@/components/QuestionParameterForm';
+import { QuestionType, QuestionParameters, GeneratedQuestion } from '@/types/quiz';
+
+const QUESTION_TYPES: QuestionType[] = [
+  { id: 'multiple-choice', name: 'Multiple Choice', icon: '☑️', description: 'Traditional A, B, C, D questions' },
+  { id: 'cloze', name: 'Cloze (Fill-in-the-blank)', icon: '🔤', description: 'Fill in missing words or phrases' },
+  { id: 'grammar', name: 'Grammar Check', icon: '📝', description: 'Identify and correct grammatical errors' },
+  { id: 'reading-comp', name: 'Reading Comprehension', icon: '📖', description: 'Questions based on text passages' },
+  { id: 'essay', name: 'Essay Question', icon: '✍️', description: 'Open-ended written responses' },
+];
+
+export default function QuestionBuilder() {
+  // Chat builder state
+  const [currentStep, setCurrentStep] = useState<'type-selection' | 'parameters' | 'generation' | 'editing'>('type-selection');
+  const [selectedQuestionType, setSelectedQuestionType] = useState<QuestionType | null>(null);
+  const [questionParameters, setQuestionParameters] = useState<QuestionParameters>({});
+  const [isGenerating, setIsGenerating] = useState(false);
+  
+  // Source material state
+  const [sourceMaterial, setSourceMaterial] = useState('');
+  const [isSourceLocked, setIsSourceLocked] = useState(false);
+  const [wordCount, setWordCount] = useState(0);
+  
+  // Question bank state
+  const [questions, setQuestions] = useState<GeneratedQuestion[]>([]);
+  const [selectedQuestions, setSelectedQuestions] = useState<Set<string>>(new Set());
+  
+  // Chat functionality
+  const { messages, input, handleInputChange, handleSubmit, isLoading } = useChat();
+
+  const updateWordCount = (text: string) => {
+    const words = text.trim().split(/\s+/).length;
+    setWordCount(text.trim() === '' ? 0 : words);
+  };
+
+  const handleSourceMaterialChange = (text: string) => {
+    if (!isSourceLocked) {
+      setSourceMaterial(text);
+      updateWordCount(text);
+    }
+  };
+
+  const handleQuestionTypeSelect = (questionType: QuestionType) => {
+    setSelectedQuestionType(questionType);
+    setCurrentStep('parameters');
+  };
+
+  const generateQuestion = async () => {
+    if (!selectedQuestionType) return;
+    
+    setIsGenerating(true);
+    try {
+      const response = await fetch('/api/generate-question', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({
+          type: selectedQuestionType.id,
+          parameters: questionParameters,
+          sourceMaterial,
+        }),
+      });
+      
+      if (response.ok) {
+        const newQuestion = await response.json();
+        setQuestions(prev => [...prev, {
+          ...newQuestion,
+          id: Date.now().toString(),
+          createdAt: new Date(),
+        }]);
+        setCurrentStep('type-selection');
+        setSelectedQuestionType(null);
+        setQuestionParameters({});
+      }
+    } catch (error) {
+      console.error('Error generating question:', error);
+    } finally {
+      setIsGenerating(false);
+    }
+  };
+
+  const removeQuestion = (id: string) => {
+    setQuestions(prev => prev.filter(q => q.id !== id));
+    setSelectedQuestions(prev => {
+      const newSet = new Set(prev);
+      newSet.delete(id);
+      return newSet;
+    });
+  };
+
+
 
-export default function Home() {
   return (
-    <div className="font-sans grid grid-rows-[20px_1fr_20px] items-center justify-items-center min-h-screen p-8 pb-20 gap-16 sm:p-20">
-      <main className="flex flex-col gap-[32px] row-start-2 items-center sm:items-start">
-        <Image
-          className="dark:invert"
-          src="/next.svg"
-          alt="Next.js logo"
-          width={180}
-          height={38}
-          priority
-        />
-        <ol className="font-mono list-inside list-decimal text-sm/6 text-center sm:text-left">
-          <li className="mb-2 tracking-[-.01em]">
-            Get started by editing{" "}
-            <code className="bg-black/[.05] dark:bg-white/[.06] font-mono font-semibold px-1 py-0.5 rounded">
-              src/app/page.tsx
-            </code>
-            .
-          </li>
-          <li className="tracking-[-.01em]">
-            Save and see your changes instantly.
-          </li>
-        </ol>
-
-        <div className="flex gap-4 items-center flex-col sm:flex-row">
-          <a
-            className="rounded-full border border-solid border-transparent transition-colors flex items-center justify-center bg-foreground text-background gap-2 hover:bg-[#383838] dark:hover:bg-[#ccc] font-medium text-sm sm:text-base h-10 sm:h-12 px-4 sm:px-5 sm:w-auto"
-            href="https://vercel.com/new?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
-            target="_blank"
-            rel="noopener noreferrer"
-          >
-            <Image
-              className="dark:invert"
-              src="/vercel.svg"
-              alt="Vercel logomark"
-              width={20}
-              height={20}
-            />
-            Deploy now
-          </a>
-          <a
-            className="rounded-full border border-solid border-black/[.08] dark:border-white/[.145] transition-colors flex items-center justify-center hover:bg-[#f2f2f2] dark:hover:bg-[#1a1a1a] hover:border-transparent font-medium text-sm sm:text-base h-10 sm:h-12 px-4 sm:px-5 w-full sm:w-auto md:w-[158px]"
-            href="https://nextjs.org/docs?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
-            target="_blank"
-            rel="noopener noreferrer"
-          >
-            Read our docs
-          </a>
+    <div className="min-h-screen bg-gray-50 dark:bg-gray-900">
+      {/* Header */}
+      <div className="bg-white dark:bg-gray-800 border-b border-gray-200 dark:border-gray-700">
+        <div className="px-6 py-4">
+          <h1 className="text-2xl font-bold text-gray-900 dark:text-white">
+            🎓 QuizFlash - Question Builder
+          </h1>
+          <p className="text-gray-600 dark:text-gray-300">
+            AI-powered assessment creation tool for educators
+          </p>
+        </div>
+      </div>
+
+      {/* Three-panel layout */}
+      <div className="flex h-[calc(100vh-120px)]">
+        {/* Left Panel: Chat-Driven Question Builder */}
+        <div className="w-1/3 bg-white dark:bg-gray-800 border-r border-gray-200 dark:border-gray-700 flex flex-col">
+          <div className="p-4 border-b border-gray-200 dark:border-gray-700">
+            <h2 className="text-lg font-semibold text-gray-900 dark:text-white mb-2">
+              💬 Question Builder
+            </h2>
+          </div>
+          
+          <div className="flex-1 overflow-y-auto p-4">
+            {currentStep === 'type-selection' && (
+              <div className="space-y-4">
+                <div className="bg-blue-50 dark:bg-blue-900/20 border border-blue-200 dark:border-blue-800 rounded-lg p-4">
+                  <p className="text-blue-800 dark:text-blue-200">
+                    🤖 Hi! What type of question would you like to create?
+                  </p>
+                </div>
+                
+                <div className="space-y-2">
+                  {QUESTION_TYPES.map((type) => (
+                    <button
+                      key={type.id}
+                      onClick={() => handleQuestionTypeSelect(type)}
+                      className="w-full p-3 text-left border border-gray-200 dark:border-gray-600 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors"
+                    >
+                      <div className="flex items-center space-x-3">
+                        <span className="text-lg">{type.icon}</span>
+                        <div>
+                          <div className="font-medium text-gray-900 dark:text-white">{type.name}</div>
+                          <div className="text-sm text-gray-500 dark:text-gray-400">{type.description}</div>
+                        </div>
+                      </div>
+                    </button>
+                  ))}
+                </div>
+              </div>
+            )}
+
+            {currentStep === 'parameters' && selectedQuestionType && (
+              <div className="space-y-4">
+                <div className="bg-blue-50 dark:bg-blue-900/20 border border-blue-200 dark:border-blue-800 rounded-lg p-4">
+                  <p className="text-blue-800 dark:text-blue-200">
+                    Great choice! Let's configure your {selectedQuestionType.name} question.
+                  </p>
+                </div>
+                
+                <QuestionParameterForm
+                  questionType={selectedQuestionType}
+                  parameters={questionParameters}
+                  onParametersChange={setQuestionParameters}
+                />
+                
+                <div className="flex space-x-2">
+                  <button
+                    onClick={() => setCurrentStep('type-selection')}
+                    className="px-4 py-2 text-gray-600 dark:text-gray-300 border border-gray-300 dark:border-gray-600 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-700"
+                  >
+                    Back
+                  </button>
+                  <button
+                    onClick={generateQuestion}
+                    disabled={isGenerating}
+                    className="flex-1 px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 disabled:bg-gray-400"
+                  >
+                    {isGenerating ? 'Generating...' : 'Generate Question'}
+                  </button>
+                </div>
+              </div>
+            )}
+
+            {/* Chat History */}
+            <div className="mt-6 space-y-4">
+              {messages.map((message, index) => (
+                <div
+                  key={index}
+                  className={`p-3 rounded-lg ${
+                    message.role === 'user'
+                      ? 'bg-blue-100 dark:bg-blue-900 ml-4'
+                      : 'bg-gray-100 dark:bg-gray-700 mr-4'
+                  }`}
+                >
+                  <div className="text-sm font-medium mb-1">
+                    {message.role === 'user' ? 'You' : 'AI Assistant'}
+                  </div>
+                  <div>{message.content}</div>
+                </div>
+              ))}
+            </div>
+          </div>
+
+          {/* Chat Input */}
+          <div className="p-4 border-t border-gray-200 dark:border-gray-700">
+            <form onSubmit={handleSubmit} className="flex space-x-2">
+              <input
+                value={input}
+                onChange={handleInputChange}
+                placeholder="Ask for modifications or help..."
+                className="flex-1 px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg focus:ring-2 focus:ring-blue-500 dark:bg-gray-700 dark:text-white"
+              />
+              <button
+                type="submit"
+                disabled={isLoading}
+                className="px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 disabled:bg-gray-400"
+              >
+                Send
+              </button>
+            </form>
+          </div>
+        </div>
+
+        {/* Right side: Two-panel stack */}
+        <div className="flex-1 flex flex-col">
+          {/* Upper Right Panel: Source Material Editor */}
+          <div className="h-1/2 bg-white dark:bg-gray-800 border-b border-gray-200 dark:border-gray-700">
+            <div className="p-4 border-b border-gray-200 dark:border-gray-700 flex justify-between items-center">
+              <h2 className="text-lg font-semibold text-gray-900 dark:text-white">
+                📄 Source Material
+              </h2>
+              <div className="flex items-center space-x-4">
+                <span className="text-sm text-gray-500 dark:text-gray-400">
+                  {wordCount} words
+                </span>
+                <label className="flex items-center space-x-2">
+                  <input
+                    type="checkbox"
+                    checked={isSourceLocked}
+                    onChange={(e) => setIsSourceLocked(e.target.checked)}
+                    className="rounded"
+                  />
+                  <span className="text-sm">🔒 Lock</span>
+                </label>
+              </div>
+            </div>
+            
+            <div className="h-[calc(100%-80px)] p-4">
+              <textarea
+                value={sourceMaterial}
+                onChange={(e) => handleSourceMaterialChange(e.target.value)}
+                placeholder="Paste or type your source material here (articles, passages, etc.)..."
+                disabled={isSourceLocked}
+                className="w-full h-full resize-none border border-gray-300 dark:border-gray-600 rounded-lg p-4 focus:ring-2 focus:ring-blue-500 dark:bg-gray-700 dark:text-white disabled:bg-gray-100 dark:disabled:bg-gray-600"
+              />
+            </div>
+          </div>
+
+          {/* Lower Right Panel: Question Bank */}
+          <div className="h-1/2 bg-white dark:bg-gray-800">
+            <div className="p-4 border-b border-gray-200 dark:border-gray-700">
+              <h2 className="text-lg font-semibold text-gray-900 dark:text-white">
+                🗂️ Question Bank ({questions.length})
+              </h2>
+            </div>
+            
+            <div className="h-[calc(100%-80px)] overflow-y-auto p-4">
+              {questions.length === 0 ? (
+                <div className="text-center text-gray-500 dark:text-gray-400 mt-8">
+                  <div className="text-4xl mb-4">📝</div>
+                  <p>No questions yet. Start by creating your first question!</p>
+                </div>
+              ) : (
+                <div className="space-y-3">
+                  {questions.map((question) => (
+                    <div
+                      key={question.id}
+                      className="border border-gray-200 dark:border-gray-600 rounded-lg p-4 hover:bg-gray-50 dark:hover:bg-gray-700 group"
+                    >
+                      <div className="flex items-start justify-between">
+                        <div className="flex-1">
+                          <div className="flex items-center space-x-2 mb-2">
+                            <span className="text-sm font-medium text-blue-600 dark:text-blue-400">
+                              {QUESTION_TYPES.find(t => t.id === question.type)?.name}
+                            </span>
+                            <span className="text-xs text-gray-500 dark:text-gray-400">
+                              {question.points} pts
+                            </span>
+                          </div>
+                          <p className="text-gray-900 dark:text-white line-clamp-2">
+                            {question.stem}
+                          </p>
+                        </div>
+                        <div className="flex items-center space-x-2 opacity-0 group-hover:opacity-100 transition-opacity">
+                          <button className="p-1 text-gray-400 hover:text-blue-600">
+                            ✏️
+                          </button>
+                          <button className="p-1 text-gray-400 hover:text-green-600">
+                            📄
+                          </button>
+                          <button className="p-1 text-gray-400 hover:text-blue-600">
+                            👁️
+                          </button>
+                          <button 
+                            onClick={() => removeQuestion(question.id)}
+                            className="p-1 text-gray-400 hover:text-red-600"
+                          >
+                            ✕
+                          </button>
+                        </div>
+                      </div>
+                    </div>
+                  ))}
+                </div>
+              )}
+            </div>
+          </div>
         </div>
-      </main>
-      <footer className="row-start-3 flex gap-[24px] flex-wrap items-center justify-center">
-        <a
-          className="flex items-center gap-2 hover:underline hover:underline-offset-4"
-          href="https://nextjs.org/learn?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          <Image
-            aria-hidden
-            src="/file.svg"
-            alt="File icon"
-            width={16}
-            height={16}
-          />
-          Learn
-        </a>
-        <a
-          className="flex items-center gap-2 hover:underline hover:underline-offset-4"
-          href="https://vercel.com/templates?framework=next.js&utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          <Image
-            aria-hidden
-            src="/window.svg"
-            alt="Window icon"
-            width={16}
-            height={16}
-          />
-          Examples
-        </a>
-        <a
-          className="flex items-center gap-2 hover:underline hover:underline-offset-4"
-          href="https://nextjs.org?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          <Image
-            aria-hidden
-            src="/globe.svg"
-            alt="Globe icon"
-            width={16}
-            height={16}
-          />
-          Go to nextjs.org →
-        </a>
-      </footer>
+      </div>
     </div>
   );
 }

src/components/QuestionParameterForm.tsx

@@ -0,0 +1,210 @@
+'use client';
+
+import { QuestionType, QuestionParameters } from '@/types/quiz';
+
+interface QuestionParameterFormProps {
+  questionType: QuestionType;
+  parameters: QuestionParameters;
+  onParametersChange: (parameters: QuestionParameters) => void;
+}
+
+export default function QuestionParameterForm({
+  questionType,
+  parameters,
+  onParametersChange,
+}: QuestionParameterFormProps) {
+  const updateParameter = (key: string, value: any) => {
+    onParametersChange({ ...parameters, [key]: value });
+  };
+
+  switch (questionType.id) {
+    case 'multiple-choice':
+      return (
+        <div className="space-y-4">
+          <div>
+            <label className="block text-sm font-medium mb-2">Difficulty Level</label>
+            <select 
+              value={parameters.difficulty || 'intermediate'}
+              onChange={(e) => updateParameter('difficulty', e.target.value)}
+              className="w-full p-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500"
+            >
+              <option value="beginner">Beginner</option>
+              <option value="intermediate">Intermediate</option>
+              <option value="advanced">Advanced</option>
+            </select>
+          </div>
+          <div>
+            <label className="block text-sm font-medium mb-2">Number of Options</label>
+            <select 
+              value={parameters.numOptions || 4}
+              onChange={(e) => updateParameter('numOptions', parseInt(e.target.value))}
+              className="w-full p-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500"
+            >
+              <option value={3}>3 Options</option>
+              <option value={4}>4 Options</option>
+              <option value={5}>5 Options</option>
+            </select>
+          </div>
+        </div>
+      );
+    
+    case 'cloze':
+      return (
+        <div className="space-y-4">
+          <div>
+            <label className="block text-sm font-medium mb-2">Target Part of Speech</label>
+            <select 
+              value={parameters.partOfSpeech || 'any'}
+              onChange={(e) => updateParameter('partOfSpeech', e.target.value)}
+              className="w-full p-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500"
+            >
+              <option value="any">Any</option>
+              <option value="noun">Nouns</option>
+              <option value="verb">Verbs</option>
+              <option value="adjective">Adjectives</option>
+              <option value="adverb">Adverbs</option>
+            </select>
+          </div>
+          <div>
+            <label className="block text-sm font-medium mb-2">Number of Blanks</label>
+            <input 
+              type="range" 
+              min="1" 
+              max="5" 
+              value={parameters.numBlanks || 1}
+              onChange={(e) => updateParameter('numBlanks', parseInt(e.target.value))}
+              className="w-full"
+            />
+            <div className="text-center text-sm text-gray-600">{parameters.numBlanks || 1} blank(s)</div>
+          </div>
+        </div>
+      );
+    
+    case 'grammar':
+      return (
+        <div className="space-y-4">
+          <div>
+            <label className="block text-sm font-medium mb-2">Difficulty Level</label>
+            <select 
+              value={parameters.difficulty || 'intermediate'}
+              onChange={(e) => updateParameter('difficulty', e.target.value)}
+              className="w-full p-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500"
+            >
+              <option value="beginner">Beginner</option>
+              <option value="intermediate">Intermediate</option>
+              <option value="advanced">Advanced</option>
+            </select>
+          </div>
+          <div>
+            <label className="block text-sm font-medium mb-2">Grammar Focus</label>
+            <select 
+              value={parameters.grammarFocus || 'any'}
+              onChange={(e) => updateParameter('grammarFocus', e.target.value)}
+              className="w-full p-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500"
+            >
+              <option value="any">Any Grammar Rule</option>
+              <option value="verb-tenses">Verb Tenses</option>
+              <option value="subject-verb">Subject-Verb Agreement</option>
+              <option value="punctuation">Punctuation</option>
+              <option value="sentence-structure">Sentence Structure</option>
+            </select>
+          </div>
+        </div>
+      );
+
+    case 'reading-comp':
+      return (
+        <div className="space-y-4">
+          <div>
+            <label className="block text-sm font-medium mb-2">Difficulty Level</label>
+            <select 
+              value={parameters.difficulty || 'intermediate'}
+              onChange={(e) => updateParameter('difficulty', e.target.value)}
+              className="w-full p-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500"
+            >
+              <option value="beginner">Beginner</option>
+              <option value="intermediate">Intermediate</option>
+              <option value="advanced">Advanced</option>
+            </select>
+          </div>
+          <div>
+            <label className="block text-sm font-medium mb-2">Question Focus</label>
+            <select 
+              value={parameters.focus || 'comprehension'}
+              onChange={(e) => updateParameter('focus', e.target.value)}
+              className="w-full p-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500"
+            >
+              <option value="comprehension">General Comprehension</option>
+              <option value="inference">Making Inferences</option>
+              <option value="main-idea">Main Ideas</option>
+              <option value="details">Supporting Details</option>
+              <option value="vocabulary">Vocabulary in Context</option>
+            </select>
+          </div>
+        </div>
+      );
+
+    case 'essay':
+      return (
+        <div className="space-y-4">
+          <div>
+            <label className="block text-sm font-medium mb-2">Difficulty Level</label>
+            <select 
+              value={parameters.difficulty || 'intermediate'}
+              onChange={(e) => updateParameter('difficulty', e.target.value)}
+              className="w-full p-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500"
+            >
+              <option value="beginner">Beginner</option>
+              <option value="intermediate">Intermediate</option>
+              <option value="advanced">Advanced</option>
+            </select>
+          </div>
+          <div>
+            <label className="block text-sm font-medium mb-2">Essay Type</label>
+            <select 
+              value={parameters.essayType || 'argumentative'}
+              onChange={(e) => updateParameter('essayType', e.target.value)}
+              className="w-full p-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500"
+            >
+              <option value="argumentative">Argumentative</option>
+              <option value="descriptive">Descriptive</option>
+              <option value="narrative">Narrative</option>
+              <option value="expository">Expository</option>
+              <option value="compare-contrast">Compare & Contrast</option>
+            </select>
+          </div>
+          <div>
+            <label className="block text-sm font-medium mb-2">Word Count Range</label>
+            <select 
+              value={parameters.wordCount || '300-500'}
+              onChange={(e) => updateParameter('wordCount', e.target.value)}
+              className="w-full p-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500"
+            >
+              <option value="150-250">150-250 words</option>
+              <option value="300-500">300-500 words</option>
+              <option value="500-750">500-750 words</option>
+              <option value="750-1000">750-1000 words</option>
+            </select>
+          </div>
+        </div>
+      );
+    
+    default:
+      return (
+        <div className="space-y-4">
+          <div>
+            <label className="block text-sm font-medium mb-2">Difficulty Level</label>
+            <select 
+              value={parameters.difficulty || 'intermediate'}
+              onChange={(e) => updateParameter('difficulty', e.target.value)}
+              className="w-full p-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500"
+            >
+              <option value="beginner">Beginner</option>
+              <option value="intermediate">Intermediate</option>
+              <option value="advanced">Advanced</option>
+            </select>
+          </div>
+        </div>
+      );
+  }
+}

src/prompts/quiz-generation.ts

@@ -0,0 +1,372 @@
+export interface QuizPromptParams {
+  topic: string;
+  difficulty: string;
+  numQuestions: number;
+  questionType?: 'multiple-choice' | 'true-false' | 'fill-blank' | 'short-answer';
+  focus?: 'conceptual' | 'practical' | 'analytical' | 'memorization';
+}
+
+export interface PromptTemplate {
+  template: string;
+  description: string;
+}
+
+export const QUIZ_PROMPTS = {
+  'multiple-choice': {
+    basic: {
+      template: `Generate {{numQuestions}} {{difficulty}} level multiple-choice quiz questions about {{topic}}. 
+
+        For each question, provide:
+        - A clear, well-written question
+        - Exactly 4 answer options (labeled A, B, C, D)
+        - The correct answer should be indicated by its index (0 for A, 1 for B, 2 for C, 3 for D)
+        - A detailed explanation of why the correct answer is right and why the others are wrong
+        
+        Make the questions educational and engaging. Ensure incorrect options are plausible but clearly wrong.
+        
+        Return the data in this exact structure:
+        {
+          "questions": [
+            {
+              "question": "Your question here?",
+              "options": ["Option A", "Option B", "Option C", "Option D"],
+              "correctAnswer": 0,
+              "explanation": "Detailed explanation here..."
+            }
+          ]
+        }`,
+      description: 'Standard multiple choice questions'
+    },
+    conceptual: {
+      template: `Create {{numQuestions}} {{difficulty}} level conceptual multiple-choice questions about {{topic}}.
+        
+        Focus on understanding core principles and concepts rather than memorization.
+        
+        For each question, provide:
+        - A thought-provoking question that tests deep understanding
+        - Exactly 4 answer options that require conceptual reasoning
+        - The correct answer index (0-3)
+        - A detailed explanation that reinforces the underlying concepts
+        
+        Make incorrect options represent common misconceptions.
+        
+        Return the data in this exact structure:
+        {
+          "questions": [
+            {
+              "question": "Your conceptual question here?",
+              "options": ["Option A", "Option B", "Option C", "Option D"],
+              "correctAnswer": 0,
+              "explanation": "Detailed conceptual explanation here..."
+            }
+          ]
+        }`,
+      description: 'Conceptual understanding focused questions'
+    },
+    practical: {
+      template: `Generate {{numQuestions}} {{difficulty}} level practical multiple-choice questions about {{topic}}.
+        
+        Focus on real-world applications and problem-solving scenarios.
+        
+        For each question, provide:
+        - A scenario-based question from real-world contexts
+        - Exactly 4 realistic solution options
+        - The correct answer index (0-3)
+        - An explanation with practical examples and applications
+        
+        Make options represent realistic choices someone might face in practice.
+        
+        Return the data in this exact structure:
+        {
+          "questions": [
+            {
+              "question": "Your practical scenario question here?",
+              "options": ["Option A", "Option B", "Option C", "Option D"],
+              "correctAnswer": 0,
+              "explanation": "Practical explanation with real-world examples..."
+            }
+          ]
+        }`,
+      description: 'Practical application focused questions'
+    }
+  },
+  'true-false': {
+    basic: {
+      template: `Create {{numQuestions}} {{difficulty}} level true/false questions about {{topic}}.
+        
+        For each question, provide:
+        - A clear statement that can be evaluated as true or false
+        - Exactly 4 answer options: "True", "False", and 2 additional options like "Partially True" or "Cannot be determined"
+        - The correct answer index (0-3)
+        - A detailed explanation of why the statement is true or false
+        
+        Make statements clear and unambiguous.
+        
+        Return the data in this exact structure:
+        {
+          "questions": [
+            {
+              "question": "Your true/false statement here",
+              "options": ["True", "False", "Partially True", "Cannot be determined"],
+              "correctAnswer": 0,
+              "explanation": "Detailed explanation here..."
+            }
+          ]
+        }`,
+      description: 'Standard true/false questions'
+    },
+    conceptual: {
+      template: `Create {{numQuestions}} {{difficulty}} level conceptual true/false questions about {{topic}}.
+        
+        Focus on testing understanding of core principles and concepts.
+        
+        For each question, provide:
+        - A nuanced statement requiring deep conceptual thinking
+        - Exactly 4 answer options: "True", "False", "Depends on context", "Partially True"
+        - The correct answer index (0-3)
+        - A detailed explanation reinforcing the underlying concepts
+        
+        Ensure statements require deep thinking to evaluate correctly.
+        
+        Return the data in this exact structure:
+        {
+          "questions": [
+            {
+              "question": "Your conceptual statement here",
+              "options": ["True", "False", "Depends on context", "Partially True"],
+              "correctAnswer": 0,
+              "explanation": "Detailed conceptual explanation here..."
+            }
+          ]
+        }`,
+      description: 'Conceptual true/false questions'
+    },
+    practical: {
+      template: `Generate {{numQuestions}} {{difficulty}} level practical true/false questions about {{topic}}.
+        
+        Focus on real-world scenarios and applications.
+        
+        For each question, provide:
+        - A statement about practical applications or real-world scenarios
+        - Exactly 4 answer options: "True", "False", "Sometimes True", "Rarely True"
+        - The correct answer index (0-3)
+        - An explanation with practical examples
+        
+        Include statements that test practical knowledge and experience.
+        
+        Return the data in this exact structure:
+        {
+          "questions": [
+            {
+              "question": "Your practical statement here",
+              "options": ["True", "False", "Sometimes True", "Rarely True"],
+              "correctAnswer": 0,
+              "explanation": "Practical explanation with examples..."
+            }
+          ]
+        }`,
+      description: 'Practical true/false questions'
+    }
+  },
+  'fill-blank': {
+    basic: {
+      template: `Create {{numQuestions}} {{difficulty}} level fill-in-the-blank questions about {{topic}}.
+        
+        For each question, provide:
+        - A sentence with one important term or phrase replaced with a blank (use _____ for the blank)
+        - Exactly 4 answer options: the correct term and 3 plausible distractors
+        - The correct answer index (0-3)
+        - An explanation of why the correct term fits and why others don't
+        
+        Make sure the sentence context gives enough clues for the correct answer.
+        
+        Return the data in this exact structure:
+        {
+          "questions": [
+            {
+              "question": "The _____ is responsible for...",
+              "options": ["correct term", "distractor 1", "distractor 2", "distractor 3"],
+              "correctAnswer": 0,
+              "explanation": "Detailed explanation here..."
+            }
+          ]
+        }`,
+      description: 'Fill-in-the-blank questions'
+    },
+    conceptual: {
+      template: `Create {{numQuestions}} {{difficulty}} level conceptual fill-in-the-blank questions about {{topic}}.
+        
+        Focus on key concepts and principles.
+        
+        For each question, provide:
+        - A sentence testing understanding of important terminology (use _____ for the blank)
+        - Exactly 4 answer options: the correct concept and 3 related but incorrect terms
+        - The correct answer index (0-3)
+        - A detailed explanation demonstrating conceptual knowledge
+        
+        Create sentences that test deep understanding of terminology.
+        
+        Return the data in this exact structure:
+        {
+          "questions": [
+            {
+              "question": "The fundamental concept of _____ explains...",
+              "options": ["correct concept", "related concept 1", "related concept 2", "related concept 3"],
+              "correctAnswer": 0,
+              "explanation": "Detailed conceptual explanation here..."
+            }
+          ]
+        }`,
+      description: 'Conceptual fill-in-the-blank questions'
+    },
+    practical: {
+      template: `Generate {{numQuestions}} {{difficulty}} level practical fill-in-the-blank questions about {{topic}}.
+        
+        Focus on real-world applications and scenarios.
+        
+        For each question, provide:
+        - A practical sentence from real-world contexts (use _____ for the blank)
+        - Exactly 4 answer options: the correct practical term and 3 realistic alternatives
+        - The correct answer index (0-3)
+        - An explanation showing how the term applies in practice
+        
+        Create sentences from practical examples and applications.
+        
+        Return the data in this exact structure:
+        {
+          "questions": [
+            {
+              "question": "In practice, you would use _____ to...",
+              "options": ["correct tool/method", "alternative 1", "alternative 2", "alternative 3"],
+              "correctAnswer": 0,
+              "explanation": "Practical explanation with examples..."
+            }
+          ]
+        }`,
+      description: 'Practical fill-in-the-blank questions'
+    }
+  },
+  'short-answer': {
+    basic: {
+      template: `Generate {{numQuestions}} {{difficulty}} level short-answer questions about {{topic}}.
+        
+        For each question, provide:
+        - A question that normally requires a 2-3 sentence response
+        - Exactly 4 answer options: one comprehensive correct answer and 3 incomplete/incorrect responses
+        - The correct answer index (0-3)
+        - An explanation of why the correct answer is complete and accurate
+        
+        Make the correct option a well-structured short answer covering key points.
+        
+        Return the data in this exact structure:
+        {
+          "questions": [
+            {
+              "question": "Explain why/how/what...",
+              "options": [
+                "Complete correct answer covering all key points...",
+                "Incomplete answer missing key points...",
+                "Incorrect answer with misconceptions...",
+                "Partially correct but lacking depth..."
+              ],
+              "correctAnswer": 0,
+              "explanation": "Detailed explanation here..."
+            }
+          ]
+        }`,
+      description: 'Short answer questions requiring brief explanations'
+    },
+    conceptual: {
+      template: `Create {{numQuestions}} {{difficulty}} level conceptual short-answer questions about {{topic}}.
+        
+        Focus on testing deep understanding of principles and concepts.
+        
+        For each question, provide:
+        - A question requiring explanation of 'why' and 'how' rather than just 'what'
+        - Exactly 4 answer options: one that demonstrates deep conceptual understanding and 3 superficial responses
+        - The correct answer index (0-3)
+        - An explanation reinforcing the underlying concepts
+        
+        Questions should test deep understanding, not memorization.
+        
+        Return the data in this exact structure:
+        {
+          "questions": [
+            {
+              "question": "Explain the underlying principle of...",
+              "options": [
+                "Deep conceptual answer explaining principles...",
+                "Surface-level answer without depth...",
+                "Answer with conceptual errors...",
+                "Answer missing key concepts..."
+              ],
+              "correctAnswer": 0,
+              "explanation": "Detailed conceptual explanation here..."
+            }
+          ]
+        }`,
+      description: 'Conceptual short answer questions'
+    },
+    practical: {
+      template: `Generate {{numQuestions}} {{difficulty}} level practical short-answer questions about {{topic}}.
+        
+        Focus on real-world applications and problem-solving scenarios.
+        
+        For each question, provide:
+        - A question asking students to apply knowledge to practical situations
+        - Exactly 4 answer options: one practical, actionable solution and 3 less effective approaches
+        - The correct answer index (0-3)
+        - An explanation with real-world examples and applications
+        
+        Questions should test practical application, not theoretical knowledge.
+        
+        Return the data in this exact structure:
+        {
+          "questions": [
+            {
+              "question": "How would you solve/approach/handle...",
+              "options": [
+                "Practical, actionable solution with clear steps...",
+                "Theoretical approach lacking practicality...",
+                "Incomplete solution missing key steps...",
+                "Impractical approach with flaws..."
+              ],
+              "correctAnswer": 0,
+              "explanation": "Practical explanation with examples..."
+            }
+          ]
+        }`,
+      description: 'Practical short answer questions'
+    }
+  }
+} as const;
+
+// Template rendering function
+export const renderTemplate = (template: string, params: Record<string, any>): string => {
+  return template.replace(/\{\{(\w+)\}\}/g, (match, key) => {
+    return params[key]?.toString() || match;
+  });
+};
+
+// Main prompt generation function
+export const generateQuizPrompt = (params: QuizPromptParams, promptType: 'basic' | 'conceptual' | 'practical' = 'basic'): string => {
+  const questionType = params.questionType || 'multiple-choice';
+  const promptTemplate = QUIZ_PROMPTS[questionType]?.[promptType];
+  
+  if (!promptTemplate) {
+    throw new Error(`Prompt not found for question type: ${questionType}, prompt type: ${promptType}`);
+  }
+
+  return renderTemplate(promptTemplate.template, params);
+};
+
+// Helper function to get available prompts
+export const getAvailablePrompts = () => {
+  return Object.entries(QUIZ_PROMPTS).map(([questionType, prompts]) => ({
+    questionType,
+    prompts: Object.entries(prompts).map(([type, config]) => ({
+      type,
+      description: config.description
+    }))
+  }));
+};

src/types/quiz.ts

@@ -0,0 +1,19 @@
+export interface QuestionType {
+  id: string;
+  name: string;
+  icon: string;
+  description: string;
+}
+
+export interface QuestionParameters {
+  [key: string]: any;
+}
+
+export interface GeneratedQuestion {
+  id: string;
+  type: string;
+  stem: string;
+  content: any;
+  points: number;
+  createdAt: Date;
+}