| <!DOCTYPE html>
|
| <html lang="en">
|
| <head>
|
| <meta charset="UTF-8" />
|
| <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
|
| <title>Interconnected Subject Explorer</title>
|
| <script src="https://cdn.tailwindcss.com"></script>
|
| <script crossorigin src="https://unpkg.com/react@18/umd/react.development.js"></script>
|
| <script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
|
| <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
|
| <style>
|
| html.dark { background: #1a2233; }
|
| ::selection { background: #fbbf24; color: #1a2233; }
|
| .fade-in { animation: fadeIn .5s; }
|
| @keyframes fadeIn { from { opacity:0; transform: translateY(24px);} to {opacity:1; transform:none;} }
|
| .glass {
|
| background: rgba(255,255,255,0.82);
|
| backdrop-filter: blur(7px) saturate(1.2);
|
| }
|
| html.dark .glass {
|
| background: rgba(28,32,46,0.90);
|
| color: #f1f5f9;
|
| }
|
| .scenario-active {
|
| outline: 3px solid #6366f1;
|
| box-shadow: 0 2px 24px 0 #6366f140;
|
| z-index: 10;
|
| }
|
| </style>
|
| </head>
|
| <body class="bg-slate-100 dark:bg-slate-900">
|
| <div id="root"></div>
|
| <script type="text/babel">
|
| const { useState, useMemo, useEffect, useCallback } = React;
|
|
|
| const SUBJECTS = [
|
| { key: "math", name: "Mathematics", icon: "➗", color: "bg-indigo-500", accent: "from-indigo-400 to-fuchsia-500" },
|
| { key: "science", name: "Science", icon: "🔬", color: "bg-green-600", accent: "from-green-400 to-cyan-500" },
|
| { key: "history", name: "History", icon: "📜", color: "bg-yellow-600", accent: "from-yellow-400 to-orange-400" },
|
| { key: "art", name: "Art", icon: "🎨", color: "bg-pink-500", accent: "from-pink-400 to-rose-400" },
|
| { key: "geography", name: "Geography", icon: "🗺️", color: "bg-blue-500", accent: "from-blue-400 to-green-300" },
|
| { key: "cs", name: "Computer Science", icon: "💻", color: "bg-slate-700", accent: "from-slate-600 to-emerald-400" },
|
| { key: "economics", name: "Economics", icon: "💹", color: "bg-orange-600", accent: "from-orange-400 to-yellow-400" },
|
| { key: "literature", name: "Literature", icon: "📚", color: "bg-red-500", accent: "from-red-400 to-yellow-300" }
|
| ];
|
|
|
| function darkModeInit() {
|
| const mql = window.matchMedia("(prefers-color-scheme: dark)");
|
| if (mql.matches) document.documentElement.classList.add('dark');
|
| }
|
| darkModeInit();
|
|
|
| function App() {
|
| const [apiKey, setApiKey] = useState("");
|
| const [currentSubject, setCurrentSubject] = useState(SUBJECTS[0].key);
|
| const [aiLoading, setAiLoading] = useState(false);
|
| const [aiError, setAiError] = useState("");
|
| const [aiData, setAiData] = useState({});
|
| const [inputPrompt, setInputPrompt] = useState("");
|
| const [activeScenario, setActiveScenario] = useState(null);
|
| const [projectNotes, setProjectNotes] = useState("");
|
| const [pbLoading, setPbLoading] = useState(false);
|
| const [pbError, setPbError] = useState("");
|
| const [pbResult, setPbResult] = useState("");
|
| // Per-subject "What I'm studying this week"
|
| const [subjectNotes, setSubjectNotes] = useState({});
|
|
|
| const subjectMeta = useMemo(() => SUBJECTS.find(s=>s.key===currentSubject), [currentSubject]);
|
| const currentSubjectNote = subjectNotes[currentSubject] || "";
|
|
|
| // AI request handler (for ideas/scenarios)
|
| const fetchAIContent = useCallback(async () => {
|
| if (!apiKey || !apiKey.startsWith("sk-")) { setAiError("Please enter a valid OpenAI API key."); return; }
|
| setAiLoading(true); setAiError(""); setActiveScenario(null);
|
| const extraContext = [
|
| inputPrompt ? inputPrompt : null,
|
| currentSubjectNote ? `This week, the student is studying: "${currentSubjectNote}" in ${subjectMeta.name}.` : null
|
| ].filter(Boolean).join(" ");
|
| const prompt = `
|
| You are an educational AI agent. For the subject "${subjectMeta.name}", perform the following:
|
| 1. Generate five engaging, critical-thinking ideas or inquiry questions for students, encouraging them to explore and analyze complex concepts within this subject. Each should be a concise, thought-provoking prompt.
|
| 2. Propose nine creative real-life scenarios, each showing how "${subjectMeta.name}" connects with at least one other school subject (from: Mathematics, Science, History, Art, Geography, Computer Science, Economics, Literature), and describe a real-world application for each. Clearly specify which subjects are involved.
|
|
|
| ${extraContext ? "User context: " + extraContext : ""}
|
|
|
| Format the result as valid JSON with two top-level keys:
|
| - "ideas": array of strings (five items).
|
| - "scenarios": array of objects, each with:
|
| - "title": string,
|
| - "subjects": array of strings (subject names),
|
| - "application": string (practical real-life connection).
|
|
|
| Output ONLY the JSON, no commentary.
|
| `.trim();
|
| try {
|
| const res = await fetch("https://api.openai.com/v1/chat/completions", {
|
| method: "POST",
|
| headers: {
|
| "Content-Type": "application/json",
|
| Authorization: `Bearer ${apiKey}`
|
| },
|
| body: JSON.stringify({
|
| model: "gpt-4o-mini",
|
| messages: [
|
| { role: "system", content: "You are a helpful educational agent. Only return valid JSON, no markdown or commentary." },
|
| { role: "user", content: prompt }
|
| ],
|
| temperature: 0.74,
|
| max_tokens: 1200
|
| })
|
| });
|
| if (!res.ok) throw new Error(`API error (${res.status})`);
|
| const data = await res.json();
|
| const txt = data.choices[0].message.content;
|
| const start = txt.indexOf("{"), end = txt.lastIndexOf("}");
|
| const jsonString = (start !== -1 && end !== -1) ? txt.slice(start, end+1) : "";
|
| const result = JSON.parse(jsonString);
|
| setAiData(prev => ({...prev, [currentSubject]: result}));
|
| } catch (e) {
|
| setAiError("Failed to load AI ideas: " + (e.message || "Unknown error"));
|
| } finally { setAiLoading(false); }
|
| }, [apiKey, currentSubject, subjectMeta, inputPrompt, currentSubjectNote]);
|
|
|
| useEffect(() => {
|
| setAiError(""); setActiveScenario(null); setProjectNotes("");
|
| setPbError(""); setPbResult(""); setPbLoading(false);
|
| }, [currentSubject]);
|
|
|
| useEffect(()=>{
|
| function toggle(e){
|
| if(e.ctrlKey && e.key==="k"){
|
| document.documentElement.classList.toggle("dark");
|
| e.preventDefault();
|
| }
|
| }
|
| window.addEventListener("keydown", toggle);
|
| return ()=>window.removeEventListener("keydown",toggle);
|
| },[]);
|
|
|
| // Canvas content for each subject
|
| const canvasContent = useMemo(() => {
|
| const d = aiData[currentSubject];
|
| return (
|
| <div className="fade-in px-1 sm:px-8 pt-1 pb-4">
|
| {/* User custom input for the subject */}
|
| <div className="mb-6">
|
| <label className="block font-semibold text-indigo-800 dark:text-indigo-200 mb-1">
|
| What are you studying in {subjectMeta.name} this week?
|
| </label>
|
| <input
|
| type="text"
|
| className="w-full px-3 py-2 rounded-lg border bg-slate-50 dark:bg-slate-800 border-slate-300 dark:border-slate-600 shadow text-base focus:ring-2 focus:ring-indigo-400"
|
| placeholder={`E.g., Algebraic fractions, Newton's Laws, Ancient Egypt, Poetry, ...`}
|
| value={currentSubjectNote}
|
| onChange={e=>{
|
| setSubjectNotes(notes => ({
|
| ...notes,
|
| [currentSubject]: e.target.value
|
| }));
|
| }}
|
| aria-label={`What are you studying in ${subjectMeta.name} this week?`}
|
| />
|
| </div>
|
| {/* Ideas */}
|
| {d && (
|
| <div className="mb-7">
|
| <h3 className="text-2xl font-semibold mb-2 tracking-tight text-indigo-900 dark:text-indigo-200">
|
| Ideas to Explore (Critical Thinking)
|
| </h3>
|
| <ul className="grid gap-2">
|
| {d.ideas.map((idea, i) =>
|
| <li key={i}
|
| className="rounded-xl px-4 py-2 bg-gradient-to-br from-white via-indigo-50/60 to-indigo-100 dark:from-slate-800 dark:via-slate-700 dark:to-indigo-900/40 shadow-sm border-l-4 border-indigo-400 dark:border-indigo-500">
|
| {idea}
|
| </li>
|
| )}
|
| </ul>
|
| </div>
|
| )}
|
| {/* Scenarios */}
|
| {d && (
|
| <div>
|
| <h3 className="text-2xl font-semibold mb-2 tracking-tight text-emerald-900 dark:text-emerald-200">
|
| Interconnected Scenarios (Real-Life Applications)
|
| </h3>
|
| <ul className="grid gap-3">
|
| {d.scenarios.map((sc, i) =>
|
| <li key={i}
|
| className={
|
| "glass rounded-xl px-5 py-4 shadow transition hover:scale-[1.025] cursor-pointer " +
|
| (activeScenario === i ? "scenario-active" : "")
|
| }
|
| onClick={()=>{setActiveScenario(i); setProjectNotes(""); setPbResult(""); setPbError(""); setPbLoading(false);}}
|
| tabIndex={0}
|
| aria-label={`Activate scenario ${i+1}: ${sc.title}`}>
|
| <div className="flex items-center mb-1">
|
| <span className="font-bold text-lg">{sc.title}</span>
|
| <span className="ml-3 flex flex-wrap gap-1 text-xs">
|
| {sc.subjects.map((s,j) =>
|
| <span key={j}
|
| className={`inline-block rounded px-2 py-0.5 font-semibold ${{
|
| Mathematics:"bg-indigo-200 text-indigo-900 dark:bg-indigo-700 dark:text-indigo-100",
|
| Science:"bg-green-200 text-green-900 dark:bg-green-700 dark:text-green-100",
|
| History:"bg-yellow-200 text-yellow-900 dark:bg-yellow-700 dark:text-yellow-100",
|
| Art:"bg-pink-200 text-pink-900 dark:bg-pink-700 dark:text-pink-100",
|
| Geography:"bg-blue-200 text-blue-900 dark:bg-blue-700 dark:text-blue-100",
|
| "Computer Science":"bg-slate-300 text-slate-900 dark:bg-slate-700 dark:text-slate-100",
|
| Economics:"bg-orange-200 text-orange-900 dark:bg-orange-700 dark:text-orange-100",
|
| Literature:"bg-red-200 text-red-900 dark:bg-red-700 dark:text-red-100"
|
| }[s]||"bg-slate-200 text-slate-700 dark:bg-slate-600 dark:text-slate-200"}`}>{s}</span>
|
| )}
|
| </span>
|
| </div>
|
| <div className="pl-1 text-base leading-snug text-slate-800 dark:text-slate-200">{sc.application}</div>
|
| </li>
|
| )}
|
| </ul>
|
| </div>
|
| )}
|
| {!d && (
|
| <div className="text-lg text-center mt-12 text-slate-500 dark:text-slate-300">
|
| <div className="animate-pulse">Ask AI for critical thinking ideas and scenarios!</div>
|
| </div>
|
| )}
|
| </div>
|
| );
|
| }, [aiData, currentSubject, activeScenario, subjectMeta, subjectNotes, currentSubjectNote]);
|
|
|
| // Project-Based Learning section (shows when a scenario is active)
|
| function ProjectPanel() {
|
| const d = aiData[currentSubject];
|
| if (!d || activeScenario==null || !d.scenarios[activeScenario]) return null;
|
| const sc = d.scenarios[activeScenario];
|
|
|
| // Handler for project-based learning AI request
|
| async function askAIForProject() {
|
| if (!apiKey || !apiKey.startsWith("sk-")) { setPbError("Please enter a valid OpenAI API key."); return; }
|
| setPbLoading(true); setPbError(""); setPbResult("");
|
| const thisWeekNote = subjectNotes[currentSubject] ? `This week, the student is studying: "${subjectNotes[currentSubject]}" in ${subjectMeta.name}.` : "";
|
| const prompt = `
|
| A student has chosen the following scenario for a project-based learning activity:
|
| Title: ${sc.title}
|
| Subjects Involved: ${sc.subjects.join(", ")}
|
| Real-Life Application: ${sc.application}
|
| ${thisWeekNote}
|
|
|
| Create a detailed, multi-step project-based learning activity that:
|
| - Guides the student through a meaningful investigation or creation process related to this scenario.
|
| - Specifies a driving question, expected outcomes, and assessment ideas.
|
| - Incorporates collaboration, creativity, real-world research, and presentation or product.
|
| - Is practical for students in middle or high school.
|
|
|
| Format your answer as clear markdown with sections: **Driving Question**, **Project Steps**, **Expected Outcomes**, **Assessment Ideas**.
|
| `.trim();
|
| try {
|
| const res = await fetch("https://api.openai.com/v1/chat/completions", {
|
| method: "POST",
|
| headers: {
|
| "Content-Type": "application/json",
|
| Authorization: `Bearer ${apiKey}`
|
| },
|
| body: JSON.stringify({
|
| model: "gpt-4o-mini",
|
| messages: [
|
| { role: "system", content: "You are an expert in project-based learning. Return clear, structured markdown only." },
|
| { role: "user", content: prompt }
|
| ],
|
| temperature: 0.72,
|
| max_tokens: 650
|
| })
|
| });
|
| if (!res.ok) throw new Error(`API error (${res.status})`);
|
| const data = await res.json();
|
| let answer = data.choices[0].message.content.trim();
|
| if (answer.startsWith("```")) answer = answer.replace(/^```[a-z]*\s*/,'').replace(/```$/,'');
|
| setPbResult(answer);
|
| } catch (e) {
|
| setPbError("Failed to load project activity: " + (e.message || "Unknown error"));
|
| } finally { setPbLoading(false); }
|
| }
|
|
|
| return (
|
| <div className="fade-in mt-8 mb-6 max-w-2xl mx-auto glass p-6 rounded-3xl border border-indigo-300 dark:border-indigo-700 shadow-xl">
|
| <h3 className="text-2xl font-bold mb-2 text-fuchsia-700 dark:text-fuchsia-200">Project-Based Learning: <span className="text-indigo-900 dark:text-indigo-200">{sc.title}</span></h3>
|
| <div className="mb-2 text-base font-semibold text-emerald-700 dark:text-emerald-200">
|
| Subjects Involved:
|
| <span className="ml-2">{sc.subjects.join(", ")}</span>
|
| </div>
|
| <div className="mb-2 text-base">
|
| <span className="font-semibold text-indigo-700 dark:text-indigo-300">Real-Life Connection:</span> {sc.application}
|
| </div>
|
| <div className="mb-4 text-slate-700 dark:text-slate-300">
|
| <span className="font-semibold">Project Steps & Tips:</span>
|
| <ol className="list-decimal ml-6 mt-1 space-y-1">
|
| <li>Define the main question/problem you want to solve, inspired by the scenario.</li>
|
| <li>Research how the connected subjects apply to the scenario—collect data, examples, or cases.</li>
|
| <li>Design an experiment, model, creative product, or presentation that integrates concepts from each subject.</li>
|
| <li>Document your findings with evidence, analysis, and reflections.</li>
|
| <li>Share your project with peers or your teacher—get feedback and discuss real-world impacts.</li>
|
| </ol>
|
| </div>
|
| <textarea
|
| className="w-full min-h-[80px] rounded-lg border px-3 py-2 bg-white/90 dark:bg-slate-800 border-indigo-200 dark:border-indigo-500 shadow text-base mb-3"
|
| placeholder="Use this space to brainstorm ideas, outline your project, or write your project plan..."
|
| value={projectNotes}
|
| onChange={e=>setProjectNotes(e.target.value)}
|
| />
|
| <div className="flex flex-wrap gap-3 mt-1 mb-3">
|
| <button
|
| className="px-4 py-1 rounded-lg font-bold text-white bg-fuchsia-600 hover:bg-fuchsia-700 shadow transition"
|
| onClick={()=>setProjectNotes("")}
|
| >Clear Notes</button>
|
| <button
|
| className="px-4 py-1 rounded-lg font-bold bg-indigo-200 text-indigo-900 dark:bg-indigo-700 dark:text-indigo-100 shadow"
|
| onClick={()=>setActiveScenario(null)}
|
| >Close Project</button>
|
| <button
|
| className="px-4 py-1 rounded-lg font-bold bg-emerald-500 text-white hover:bg-emerald-600 shadow transition"
|
| onClick={askAIForProject}
|
| disabled={pbLoading}
|
| aria-label="Ask AI for a detailed project-based learning activity"
|
| >
|
| {pbLoading ? <span className="animate-pulse">Thinking...</span> : "Ask AI for a Project Plan"}
|
| </button>
|
| </div>
|
| {pbError && <div className="mb-2 px-3 py-2 rounded bg-red-100 dark:bg-red-900 text-red-700 dark:text-red-200 font-semibold text-center">{pbError}</div>}
|
| {pbResult && (
|
| <div className="prose prose-indigo dark:prose-invert max-w-full mt-4 border-t pt-4">
|
| <MarkdownRenderer markdown={pbResult}/>
|
| </div>
|
| )}
|
| </div>
|
| );
|
| }
|
|
|
| function MarkdownRenderer({markdown}) {
|
| let html = markdown
|
| .replace(/(^|\n)### (.*)/g, '$1<h3>$2</h3>')
|
| .replace(/(^|\n)## (.*)/g, '$1<h2>$2</h2>')
|
| .replace(/(^|\n)# (.*)/g, '$1<h1>$2</h1>')
|
| .replace(/\*\*(.*?)\*\*/g, '<b>$1</b>')
|
| .replace(/\*(.*?)\*/g, '<i>$1</i>')
|
| .replace(/^\s*-\s+(.*)$/gm, '<ul><li>$1</li></ul>')
|
| .replace(/^\s*\d+\.\s+(.*)$/gm, '<ol><li>$1</li></ol>')
|
| .replace(/\n{2,}/g, '<br/><br/>');
|
| html = html.replace(/<\/ul>\s*<ul>/g, '');
|
| html = html.replace(/<\/ol>\s*<ol>/g, '');
|
| return <div dangerouslySetInnerHTML={{__html: html}} />;
|
| }
|
|
|
| function SubjectTabs() {
|
| return (
|
| <div className="flex flex-wrap gap-2 mb-4 sm:mb-6">
|
| {SUBJECTS.map(s =>
|
| <button key={s.key}
|
| className={
|
| "group flex items-center px-4 py-2 rounded-2xl shadow-sm border-2 focus:outline-none text-lg font-semibold tracking-tight transition-all duration-150 " +
|
| (currentSubject===s.key
|
| ? `${s.color} bg-gradient-to-r ${s.accent} border-transparent text-white scale-105`
|
| : "bg-white dark:bg-slate-800 border-slate-300 dark:border-slate-700 text-slate-900 dark:text-slate-200 hover:scale-105 hover:border-indigo-400 dark:hover:border-indigo-300")
|
| }
|
| onClick={() => setCurrentSubject(s.key)}
|
| aria-label={`Switch to ${s.name}`}
|
| >
|
| <span className="mr-2 text-2xl">{s.icon}</span> {s.name}
|
| </button>
|
| )}
|
| </div>
|
| );
|
| }
|
|
|
| return (
|
| <div className="min-h-screen flex flex-col items-center pb-16 bg-gradient-to-br from-indigo-100 via-slate-100 to-pink-50 dark:from-slate-900 dark:via-slate-900 dark:to-indigo-950 transition-colors duration-300">
|
| <header className="w-full max-w-4xl mx-auto pt-10 pb-4">
|
| <h1 className="text-3xl sm:text-4xl md:text-5xl font-extrabold mb-2 text-slate-800 dark:text-white tracking-tight text-center">
|
| Interconnected Subject Explorer
|
| </h1>
|
| <p className="text-lg sm:text-xl text-center max-w-2xl mx-auto text-slate-600 dark:text-slate-300">
|
| Explore how your school subjects connect and find real-world meaning—with interactive canvases and instant AI-powered scenarios.
|
| </p>
|
| </header>
|
| <main className="w-full max-w-4xl flex-1 fade-in">
|
| <section className="rounded-3xl glass shadow-lg p-4 sm:p-8">
|
| <div className="flex flex-wrap items-center gap-3 mb-6">
|
| <input
|
| type="password"
|
| className="flex-1 px-4 py-2 rounded-lg border bg-slate-50 dark:bg-slate-800 border-slate-300 dark:border-slate-600 shadow text-base focus:ring-2 focus:ring-indigo-400"
|
| style={{minWidth:160, maxWidth:290}}
|
| placeholder="OpenAI API key (sk-...)" value={apiKey}
|
| onChange={e=>setApiKey(e.target.value)}
|
| aria-label="OpenAI API Key"
|
| />
|
| <input
|
| type="text"
|
| className="flex-1 px-4 py-2 rounded-lg border bg-slate-50 dark:bg-slate-800 border-slate-300 dark:border-slate-600 shadow text-base focus:ring-2 focus:ring-indigo-400"
|
| style={{minWidth:160, maxWidth:300}}
|
| placeholder="Add an extra prompt (optional)" value={inputPrompt}
|
| onChange={e=>setInputPrompt(e.target.value)}
|
| aria-label="Additional prompt for AI"
|
| />
|
| <button
|
| className={`px-6 py-2 rounded-xl font-bold text-lg shadow transition-all
|
| bg-indigo-600 hover:bg-indigo-700 text-white ${aiLoading ? "opacity-50" : ""}`}
|
| disabled={aiLoading || !apiKey}
|
| onClick={fetchAIContent}
|
| aria-label="Generate ideas and scenarios with AI"
|
| >
|
| {aiLoading
|
| ? <span className="animate-pulse flex items-center gap-2">
|
| <svg className="w-5 h-5 mr-1 animate-spin" fill="none" viewBox="0 0 24 24">
|
| <circle className="opacity-20" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4"/>
|
| <path className="opacity-90" fill="currentColor" d="M4 12a8 8 0 018-8v8z"/>
|
| </svg>
|
| Thinking...
|
| </span>
|
| : "Ask AI"
|
| }
|
| </button>
|
| </div>
|
| <SubjectTabs/>
|
| <div className="min-h-[320px]">{canvasContent}</div>
|
| {aiError && <div className="mt-6 px-3 py-2 rounded bg-red-100 dark:bg-red-900 text-red-700 dark:text-red-200 font-semibold text-center">{aiError}</div>}
|
| {ProjectPanel()}
|
| </section>
|
| </main>
|
| <footer className="w-full max-w-3xl text-center mt-10 mb-6 text-slate-500 dark:text-slate-400 text-xs">
|
| <div>
|
| <span className="font-bold">Tip:</span> Press <kbd>Ctrl</kbd>+<kbd>K</kbd> to toggle dark mode. <span className="ml-2">No API keys are stored.</span>
|
| </div>
|
| <div className="mt-1">
|
| Made for educational exploration. © {new Date().getFullYear()}
|
| </div>
|
| </footer>
|
| </div>
|
| );
|
| }
|
|
|
| ReactDOM.createRoot(document.getElementById("root")).render(<App />);
|
| </script>
|
| </body>
|
| </html>
|
|
|
