create an erp website with this code a full project without lag creating import { useState, useEffect, useCallback } from "react"; const SUBJECTS = [ { id: "discrete_math", name: "Discrete Mathematics", code: "23P1CAC1", semester: "I", icon: "∑", color: "#f59e0b", topics: ["Relations & Functions", "Mathematical Logic", "Recurrence Relations", "Matrices", "Graph Theory"], description: "Relations, Logic, Graphs & Matrices" }, { id: "python", name: "Python Programming", code: "23P1CAC3", semester: "I", icon: "🐍", color: "#10b981", topics: ["OOP Concepts", "Data Structures", "NumPy & Pandas", "Django", "Functions & Recursion"], description: "Core Python, OOP, Django & Packages" }, { id: "dsa", name: "Data Structures & Algorithms", code: "23P2CAC4", semester: "II", icon: "⚡", color: "#6366f1", topics: ["ADT & Arrays", "Sorting Algorithms", "Trees & Graphs", "Hash Tables", "Algorithm Analysis"], description: "ADT, Sorting, Trees & Graph Algorithms" }, { id: "big_data", name: "Big Data Analytics", code: "23P2CAC5", semester: "II", icon: "📊", color: "#ec4899", topics: ["Hadoop & HDFS", "MapReduce", "MongoDB", "Hive", "Pig Latin"], description: "Hadoop, NoSQL, MapReduce & Big Data Tools" }, { id: "machine_learning", name: "Advanced Machine Learning", code: "23P3CAC8", semester: "III", icon: "🤖", color: "#14b8a6", topics: ["Classification", "Regression", "Deep Learning", "CNN & RNN", "Clustering"], description: "ML Algorithms, Deep Learning & Neural Networks" } ]; const DIFFICULTY_LEVELS = [ { id: "hard", label: "TOUGH", desc: "Advanced reasoning required", marks: 5 }, { id: "expert", label: "EXPERT", desc: "Tricky edge cases & analysis", marks: 10 } ]; const systemPrompt = (subject, difficulty, numQ) => `You are a strict MCA examiner at AVVM Sri Pushpam College (Autonomous), Poondi. Generate ${numQ} extremely TOUGH multiple choice questions for the subject "${subject.name}" (Course Code: ${subject.code}, Semester: ${subject.semester}). Topics to cover: ${subject.topics.join(", ")}. Difficulty: ${difficulty === "expert" ? "EXPERT - Very tricky questions with close options, edge cases, complex analysis, and deep conceptual understanding required. Include questions that test application and evaluation (K4-K6 Bloom's levels)" : "TOUGH - Advanced questions requiring analysis and application (K3-K5 Bloom's levels)"}. Rules: - Questions must be genuinely HARD and test deep understanding - Include tricky distractors that look plausible - Cover different topics from the syllabus - Some questions should involve calculations, logic, or code analysis - Test edge cases and exceptions - NO easy recall questions Return ONLY valid JSON (no markdown, no explanation): { "questions": [ { "id": 1, "question": "Question text here with technical details", "options": ["A) option1", "B) option2", "C) option3", "D) option4"], "correct": 0, "explanation": "Detailed explanation of why this is correct and why others are wrong", "topic": "specific topic", "bloomLevel": "K4" } ] }`; export default function MCATestCreator() { const [screen, setScreen] = useState("home"); // home | config | loading | test | results const [selectedSubject, setSelectedSubject] = useState(null); const [difficulty, setDifficulty] = useState("hard"); const [numQuestions, setNumQuestions] = useState(10); const [questions, setQuestions] = useState([]); const [currentQ, setCurrentQ] = useState(0); const [answers, setAnswers] = useState({}); const [timeLeft, setTimeLeft] = useState(0); const [totalTime, setTotalTime] = useState(0); const [loadingMsg, setLoadingMsg] = useState(""); const [error, setError] = useState(""); const [showExplanation, setShowExplanation] = useState(false); const [testSubmitted, setTestSubmitted] = useState(false); const [markedForReview, setMarkedForReview] = useState({}); const [animateIn, setAnimateIn] = useState(false); useEffect(() => { setAnimateIn(true); }, [screen]); useEffect(() => { if (screen === "test" && timeLeft > 0 && !testSubmitted) { const timer = setTimeout(() => setTimeLeft(t => t - 1), 1000); return () => clearTimeout(timer); } else if (screen === "test" && timeLeft === 0 && questions.length > 0 && !testSubmitted) { handleSubmitTest(); } }, [screen, timeLeft, testSubmitted]); const fetchQuestions = async () => { setScreen("loading"); setError(""); const msgs = [ "🔍 Scanning MCA syllabus...", "⚙️ Calibrating difficulty level...", "🧠 Generating tough questions...", "✅ Finalizing your test paper..." ]; let idx = 0; setLoadingMsg(msgs[0]); const interval = setInterval(() => { idx = (idx + 1) % msgs.length; setLoadingMsg(msgs[idx]); }, 1500); try { const res = await fetch("https://api.anthropic.com/v1/messages", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ model: "claude-sonnet-4-20250514", max_tokens: 4000, messages: [{ role: "user", content: systemPrompt(selectedSubject, difficulty, numQuestions) }] }) }); const data = await res.json(); clearInterval(interval); const raw = data.content?.map(b => b.text || "").join("") || ""; const clean = raw.replace(/```json|```/g, "").trim(); const parsed = JSON.parse(clean); if (!parsed.questions || parsed.questions.length === 0) throw new Error("No questions generated"); setQuestions(parsed.questions); const timePerQ = difficulty === "expert" ? 120 : 90; const total = numQuestions * timePerQ; setTimeLeft(total); setTotalTime(total); setAnswers({}); setMarkedForReview({}); setCurrentQ(0); setTestSubmitted(false); setShowExplanation(false); setScreen("test"); } catch (e) { clearInterval(interval); setError("Failed to generate questions. Please try again."); setScreen("config"); } }; const handleSubmitTest = useCallback(() => { setTestSubmitted(true); setScreen("results"); }, []); const getScore = () => { let correct = 0; questions.forEach((q, i) => { if (answers[i] === q.correct) correct++; }); return correct; }; const formatTime = (s) => { const m = Math.floor(s / 60); const sec = s % 60; return `${String(m).padStart(2, "0")}:${String(sec).padStart(2, "0")}`; }; const getTimerColor = () => { const pct = timeLeft / totalTime; if (pct > 0.5) return "#10b981"; if (pct > 0.25) return "#f59e0b"; return "#ef4444"; }; const getGrade = (score, total) => { const pct = (score / total) * 100; if (pct >= 90) return { grade: "S", label: "Outstanding", color: "#f59e0b" }; if (pct >= 75) return { grade: "A+", label: "Excellent", color: "#10b981" }; if (pct >= 60) return { grade: "A", label: "Good", color: "#6366f1" }; if (pct >= 50) return { grade: "B", label: "Average", color: "#14b8a6" }; if (pct >= 40) return { grade: "C", label: "Below Average", color: "#f97316" }; return { grade: "F", label: "Fail", color: "#ef4444" }; }; const styles = { app: { minHeight: "100vh", background: "linear-gradient(135deg, #0a0a1a 0%, #0d1b2a 50%, #0a0a1a 100%)", fontFamily: "'Georgia', 'Times New Roman', serif", color: "#e2e8f0", padding: "0", position: "relative", overflow: "hidden" }, bg: { position: "fixed", inset: 0, zIndex: 0, pointerEvents: "none", background: `radial-gradient(ellipse at 20% 20%, rgba(99,102,241,0.07) 0%, transparent 50%), radial-gradient(ellipse at 80% 80%, rgba(20,184,166,0.07) 0%, transparent 50%)` }, container: { maxWidth: 960, margin: "0 auto", padding: "2rem 1.5rem", position: "relative", zIndex: 1 }, header: { textAlign: "center", marginBottom: "3rem", paddingTop: "1rem" }, badge: { display: "inline-block", background: "rgba(99,102,241,0.15)", border: "1px solid rgba(99,102,241,0.4)", color: "#a5b4fc", padding: "0.3rem 1rem", borderRadius: 4, fontSize: "0.7rem", letterSpacing: "0.2em", textTransform: "uppercase", marginBottom: "1rem" }, title: { fontSize: "clamp(1.8rem, 4vw, 2.8rem)", fontWeight: 700, letterSpacing: "-0.02em", color: "#f8fafc", margin: "0.5rem 0", lineHeight: 1.2 }, subtitle: { fontSize: "0.9rem", color: "#64748b", letterSpacing: "0.05em" }, gold: { color: "#f59e0b" }, grid: { display: "grid", gridTemplateColumns: "repeat(auto-fill, minmax(280px, 1fr))", gap: "1.25rem" }, subjectCard: (s, selected) => ({ background: selected ? `linear-gradient(135deg, ${s.color}22, ${s.color}11)` : "rgba(15,23,42,0.8)", border: selected ? `2px solid ${s.color}` : "1px solid rgba(255,255,255,0.07)", borderRadius: 12, padding: "1.5rem", cursor: "pointer", transition: "all 0.2s ease", position: "relative", overflow: "hidden", backdropFilter: "blur(10px)", transform: selected ? "scale(1.02)" : "scale(1)" }), cardIcon: (color) => ({ width: 48, height: 48, borderRadius: 10, background: `${color}22`, border: `1px solid ${color}44`, display: "flex", alignItems: "center", justifyContent: "center", fontSize: "1.5rem", marginBottom: "1rem" }), cardTitle: { fontSize: "1rem", fontWeight: 700, color: "#f8fafc", marginBottom: "0.25rem" }, cardCode: (color) => ({ fontSize: "0.7rem", color, letterSpacing: "0.1em", marginBottom: "0.5rem" }), cardDesc: { fontSize: "0.8rem", color: "#64748b", lineHeight: 1.5 }, sectionTitle: { fontSize: "0.75rem", letterSpacing: "0.2em", textTransform: "uppercase", color: "#475569", marginBottom: "1.25rem", marginTop: "2.5rem" }, btn: (variant = "primary") => ({ padding: variant === "sm" ? "0.5rem 1.2rem" : "0.85rem 2rem", borderRadius: 8, border: "none", cursor: "pointer", fontSize: variant === "sm" ? "0.8rem" : "0.9rem", fontWeight: 600, letterSpacing: "0.05em", transition: "all 0.2s", ...(variant === "primary" ? { background: "linear-gradient(135deg, #6366f1, #8b5cf6)", color: "#fff", boxShadow: "0 4px 20px rgba(99,102,241,0.3)" } : variant === "danger" ? { background: "linear-gradient(135deg, #ef4444, #dc2626)", color: "#fff", boxShadow: "0 4px 20px rgba(239,68,68,0.3)" } : variant === "ghost" ? { background: "rgba(255,255,255,0.05)", color: "#94a3b8", border: "1px solid rgba(255,255,255,0.1)" } : { background: "linear-gradient(135deg, #10b981, #059669)", color: "#fff" }) }), diffCard: (d, selected) => ({ border: selected ? "2px solid #f59e0b" : "1px solid rgba(255,255,255,0.07)", borderRadius: 10, padding: "1rem 1.5rem", cursor: "pointer", background: selected ? "rgba(245,158,11,0.1)" : "rgba(15,23,42,0.6)", transition: "all 0.2s" }), qCard: { background: "rgba(15,23,42,0.9)", border: "1px solid rgba(255,255,255,0.08)", borderRadius: 16, padding: "2rem", backdropFilter: "blur(20px)" }, optionBtn: (state) => ({ width: "100%", padding: "1rem 1.25rem", borderRadius: 10, border: state === "selected" ? "2px solid #6366f1" : state === "correct" ? "2px solid #10b981" : state === "wrong" ? "2px solid #ef4444" : "1px solid rgba(255,255,255,0.08)", background: state === "selected" ? "rgba(99,102,241,0.15)" : state === "correct" ? "rgba(16,185,129,0.15)" : state === "wrong" ? "rgba(239,68,68,0.15)" : "rgba(15,23,42,0.5)", color: state === "correct" ? "#34d399" : state === "wrong" ? "#f87171" : "#cbd5e1", textAlign: "left", cursor: testSubmitted ? "default" : "pointer", fontSize: "0.9rem", lineHeight: 1.5, transition: "all 0.2s", marginBottom: "0.75rem", display: "block" }), timerBar: { width: "100%", height: 4, background: "rgba(255,255,255,0.1)", borderRadius: 2, overflow: "hidden", marginBottom: "1.5rem" }, navDot: (state) => ({ width: 32, height: 32, borderRadius: 6, border: "none", cursor: "pointer", fontSize: "0.75rem", fontWeight: 700, background: state === "answered" ? "#6366f1" : state === "review" ? "#f59e0b" : state === "current" ? "rgba(99,102,241,0.3)" : "rgba(255,255,255,0.05)", color: state === "answered" || state === "review" ? "#fff" : "#64748b", border: state === "current" ? "2px solid #6366f1" : "1px solid rgba(255,255,255,0.1)", transition: "all 0.15s" }), statBox: (color) => ({ background: `${color}11`, border: `1px solid ${color}33`, borderRadius: 12, padding: "1.25rem", textAlign: "center" }) }; // ─── HOME ─────────────────────────────────────────────── if (screen === "home") return (

AVVM Sri Pushpam College (Autonomous) · Poondi

MCA Assessment Portal

PG & Research Department of Computer Applications

AI-Powered Tough Test Generator · 2023–2024 Batch

⚠️

Challenging Assessment Mode

Questions are AI-generated at expert level targeting K3–K6 Bloom's taxonomy. Designed to challenge even well-prepared students.

Select Your Subject

{SUBJECTS.map(s => (

{ setSelectedSubject(s); setScreen("config"); }} >

{s.icon}

Sem {s.semester} · {s.code}

{s.name}

{s.description}

{s.topics.slice(0, 3).map(t => ( {t} ))}

))}

Outcome Based Education · CBCS Scheme · MCA Programme 2023–24

); // ─── CONFIG ───────────────────────────────────────────── if (screen === "config" && selectedSubject) return (

{selectedSubject.icon}

Sem {selectedSubject.semester} · {selectedSubject.code}

{selectedSubject.name}

{error && (

{error}

)}

Difficulty Level

{DIFFICULTY_LEVELS.map(d => (

setDifficulty(d.id)}>

{d.label}

{d.desc}

{d.marks} marks/question

))}

Number of Questions

{[5, 10, 15, 20].map(n => ( ))}

{numQuestions}

Questions

{formatTime(numQuestions * (difficulty === "expert" ? 120 : 90))}

Time Limit

{numQuestions * DIFFICULTY_LEVELS.find(d => d.id === difficulty).marks}

Total Marks

Topics Covered

{selectedSubject.topics.map(t => ( {t} ))}

); // ─── LOADING ───────────────────────────────────────────── if (screen === "loading") return (

Preparing Your Test

{loadingMsg}

{selectedSubject?.name} · {difficulty === "expert" ? "Expert" : "Tough"} Level · {numQuestions} Questions

); // ─── TEST ───────────────────────────────────────────────── if (screen === "test" && questions.length > 0) { const q = questions[currentQ]; const answered = answers[currentQ]; const pctTime = timeLeft / totalTime; return (

{/* Header */}

{selectedSubject.icon} {selectedSubject.name}

Q {currentQ + 1} of {questions.length} {markedForReview[currentQ] && 🔖 Marked}

⏱ {formatTime(timeLeft)}

{/* Timer Bar */}

{/* Nav Dots */}

{questions.map((_, i) => { const state = i === currentQ ? "current" : markedForReview[i] ? "review" : answers[i] !== undefined ? "answered" : "unanswered"; return ( ); })}

{/* Question */}

{q.bloomLevel || "K4"} · {q.topic || selectedSubject.name}

{DIFFICULTY_LEVELS.find(d => d.id === difficulty).marks} marks

Q{currentQ + 1}. {q.question}

{q.options.map((opt, oi) => { let state = "default"; if (testSubmitted) { if (oi === q.correct) state = "correct"; else if (answered === oi) state = "wrong"; } else if (answered === oi) state = "selected"; return ( ); })} {testSubmitted && showExplanation && (

📝 Explanation: {q.explanation}

)}

{/* Controls */}

{testSubmitted && ( )} {currentQ < questions.length - 1 ? ( ) : !testSubmitted ? ( ) : ( )}

); } // ─── RESULTS ───────────────────────────────────────────── if (screen === "results") { const score = getScore(); const total = questions.length; const marks = score * DIFFICULTY_LEVELS.find(d => d.id === difficulty).marks; const totalMarks = total * DIFFICULTY_LEVELS.find(d => d.id === difficulty).marks; const { grade, label, color: gradeColor } = getGrade(score, total); const pct = Math.round((score / total) * 100); const timeTaken = totalTime - timeLeft; const wrongQs = questions.filter((q, i) => answers[i] !== q.correct); const correctQs = questions.filter((q, i) => answers[i] === q.correct); return (

Test Completed

{grade}

{label}

{selectedSubject.name} · {difficulty === "expert" ? "Expert" : "Tough"} Level

{/* Stats */}

{[ { label: "Score", val: `${score}/${total}`, color: gradeColor }, { label: "Marks", val: `${marks}/${totalMarks}`, color: "#6366f1" }, { label: "Accuracy", val: `${pct}%`, color: "#10b981" }, { label: "Time", val: formatTime(timeTaken), color: "#f59e0b" } ].map(s => (

{s.val}

{s.label}

))}

{/* Progress */}

Performance{pct}%

{/* Question Review */}

Question Review

{questions.map((q, i) => { const isCorrect = answers[i] === q.correct; return (

Q{i + 1} · {q.topic} {isCorrect ? "✓ Correct" : "✗ Wrong"}

{q.question.length > 100 ? q.question.slice(0, 100) + "..." : q.question}

{!isCorrect && (

Your: {q.options[answers[i]] || "Not answered"} ✓ {q.options[q.correct]}

)}

💡 {q.explanation?.slice(0, 120)}...

); })}

{/* Actions */}

AVVM Sri Pushpam College · MCA Department · Outcome Based Education

); } return null; }