0
Uses
0
Forks
Prompt Template
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 (
<div style={styles.app}>
<div style={styles.bg} />
<div style={styles.container}>
<div style={styles.header}>
<div style={styles.badge}>AVVM Sri Pushpam College (Autonomous) · Poondi</div>
<h1 style={styles.title}>
<span style={styles.gold}>MCA</span> Assessment Portal
</h1>
<p style= ...styles.subtitle, fontSize: "0.95rem", marginTop: "0.5rem" >
PG & Research Department of Computer Applications
</p>
<p style= ...styles.subtitle, marginTop: "0.4rem" >
AI-Powered Tough Test Generator · 2023–2024 Batch
</p>
</div>
<div style=
background: "rgba(245,158,11,0.08)",
border: "1px solid rgba(245,158,11,0.2)",
borderRadius: 12,
padding: "1.25rem 1.5rem",
marginBottom: "2.5rem",
display: "flex",
alignItems: "center",
gap: "1rem"
>
<span style= fontSize: "1.5rem" >⚠️</span>
<div>
<p style= color: "#fbbf24", fontWeight: 700, margin: 0, fontSize: "0.9rem" >Challenging Assessment Mode</p>
<p style= color: "#92400e", margin: 0, fontSize: "0.8rem", marginTop: "0.2rem" >
Questions are AI-generated at expert level targeting K3–K6 Bloom's taxonomy. Designed to challenge even well-prepared students.
</p>
</div>
</div>
<p style={styles.sectionTitle}>Select Your Subject</p>
<div style={styles.grid}>
{SUBJECTS.map(s => (
<div key={s.id}
style= ...styles.subjectCard(s, false), cursor: "default"
onClick={() => { setSelectedSubject(s); setScreen("config"); }}
>
<div style={styles.cardIcon(s.color)}>{s.icon}</div>
<div style={styles.cardCode(s.color)}>Sem {s.semester} · {s.code}</div>
<div style={styles.cardTitle}>{s.name}</div>
<div style={styles.cardDesc}>{s.description}</div>
<div style=
marginTop: "1rem",
display: "flex", flexWrap: "wrap", gap: "0.4rem"
>
{s.topics.slice(0, 3).map(t => (
<span key={t} style={{
background: `${s.color}15`,
border: `1px solid ${s.color}30`,
color: s.color,
padding: "0.15rem 0.6rem",
borderRadius: 20,
fontSize: "0.65rem"
}}>{t}</span>
))}
</div>
</div>
))}
</div>
<div style= textAlign: "center", marginTop: "3rem", color: "#334155", fontSize: "0.75rem" >
Outcome Based Education · CBCS Scheme · MCA Programme 2023–24
</div>
</div>
</div>
);
// ─── CONFIG ─────────────────────────────────────────────
if (screen === "config" && selectedSubject) return (
<div style={styles.app}>
<div style={styles.bg} />
<div style={styles.container}>
<button onClick={() => setScreen("home")} style= ...styles.btn("ghost"), marginBottom: "2rem" >
← Back
</button>
<div style= display: "flex", alignItems: "center", gap: "1rem", marginBottom: "2rem" >
<div style= ...styles.cardIcon(selectedSubject.color), marginBottom: 0, width: 56, height: 56, fontSize: "1.8rem" >
{selectedSubject.icon}
</div>
<div>
<div style={styles.cardCode(selectedSubject.color)}>Sem {selectedSubject.semester} · {selectedSubject.code}</div>
<h2 style= ...styles.title, fontSize: "1.6rem", margin: 0 >{selectedSubject.name}</h2>
</div>
</div>
{error && (
<div style= background: "rgba(239,68,68,0.1)", border: "1px solid rgba(239,68,68,0.3)", borderRadius: 8, padding: "0.75rem 1rem", marginBottom: "1.5rem", color: "#f87171", fontSize: "0.85rem" >
{error}
</div>
)}
<p style={styles.sectionTitle}>Difficulty Level</p>
<div style= display: "grid", gridTemplateColumns: "1fr 1fr", gap: "1rem", marginBottom: "0.5rem" >
{DIFFICULTY_LEVELS.map(d => (
<div key={d.id} style={styles.diffCard(d, difficulty === d.id)} onClick={() => setDifficulty(d.id)}>
<div style= fontWeight: 800, fontSize: "1.1rem", color: difficulty === d.id ? "#f59e0b" : "#94a3b8" >{d.label}</div>
<div style= fontSize: "0.75rem", color: "#64748b", marginTop: "0.25rem" >{d.desc}</div>
<div style= fontSize: "0.7rem", color: "#475569", marginTop: "0.5rem" >{d.marks} marks/question</div>
</div>
))}
</div>
<p style={styles.sectionTitle}>Number of Questions</p>
<div style= display: "flex", gap: "0.75rem", flexWrap: "wrap" >
{[5, 10, 15, 20].map(n => (
<button key={n} onClick={() => setNumQuestions(n)} style=
padding: "0.6rem 1.4rem", borderRadius: 8, border: "none",
background: numQuestions === n ? "linear-gradient(135deg, #6366f1, #8b5cf6)" : "rgba(255,255,255,0.05)",
color: numQuestions === n ? "#fff" : "#64748b",
fontWeight: 600, cursor: "pointer", fontSize: "0.9rem",
border: numQuestions === n ? "none" : "1px solid rgba(255,255,255,0.1)"
>{n} Qs</button>
))}
</div>
<div style=
background: "rgba(99,102,241,0.08)",
border: "1px solid rgba(99,102,241,0.2)",
borderRadius: 10,
padding: "1rem 1.25rem",
marginTop: "2rem",
marginBottom: "2rem",
fontSize: "0.8rem",
color: "#a5b4fc",
display: "grid",
gridTemplateColumns: "1fr 1fr 1fr",
gap: "0.5rem",
textAlign: "center"
>
<div>
<div style= fontWeight: 700, fontSize: "1.1rem", color: "#c7d2fe" >{numQuestions}</div>
<div>Questions</div>
</div>
<div>
<div style= fontWeight: 700, fontSize: "1.1rem", color: "#c7d2fe" >
{formatTime(numQuestions * (difficulty === "expert" ? 120 : 90))}
</div>
<div>Time Limit</div>
</div>
<div>
<div style= fontWeight: 700, fontSize: "1.1rem", color: "#c7d2fe" >
{numQuestions * DIFFICULTY_LEVELS.find(d => d.id === difficulty).marks}
</div>
<div>Total Marks</div>
</div>
</div>
<p style= ...styles.sectionTitle, marginTop: 0 >Topics Covered</p>
<div style= display: "flex", flexWrap: "wrap", gap: "0.5rem", marginBottom: "2rem" >
{selectedSubject.topics.map(t => (
<span key={t} style={{
background: `${selectedSubject.color}15`,
border: `1px solid ${selectedSubject.color}30`,
color: selectedSubject.color,
padding: "0.3rem 0.8rem",
borderRadius: 20,
fontSize: "0.75rem"
}}>{t}</span>
))}
</div>
<button onClick={fetchQuestions} style= ...styles.btn("primary"), width: "100%", padding: "1rem" >
🚀 Generate Test Paper
</button>
</div>
</div>
);
// ─── LOADING ─────────────────────────────────────────────
if (screen === "loading") return (
<div style= ...styles.app, display: "flex", alignItems: "center", justifyContent: "center" >
<div style={styles.bg} />
<div style= textAlign: "center", zIndex: 1 >
<div style={{
width: 80, height: 80, borderRadius: "50%",
border: `3px solid ${selectedSubject?.color || "#6366f1"}`,
borderTopColor: "transparent",
animation: "spin 0.8s linear infinite",
margin: "0 auto 2rem"
}} />
<style>{`@keyframes spin { to { transform: rotate(360deg); } }`}</style>
<h2 style= ...styles.title, fontSize: "1.4rem" >Preparing Your Test</h2>
<p style= color: "#64748b", marginTop: "1rem", fontSize: "0.95rem" >{loadingMsg}</p>
<div style= marginTop: "2rem", color: "#334155", fontSize: "0.8rem" >
{selectedSubject?.name} · {difficulty === "expert" ? "Expert" : "Tough"} Level · {numQuestions} Questions
</div>
</div>
</div>
);
// ─── TEST ─────────────────────────────────────────────────
if (screen === "test" && questions.length > 0) {
const q = questions[currentQ];
const answered = answers[currentQ];
const pctTime = timeLeft / totalTime;
return (
<div style={styles.app}>
<div style={styles.bg} />
<div style={styles.container}>
{/* Header */}
<div style= display: "flex", justifyContent: "space-between", alignItems: "center", marginBottom: "1.5rem", flexWrap: "wrap", gap: "1rem" >
<div>
<div style= ...styles.cardCode(selectedSubject.color), marginBottom: "0.2rem" >
{selectedSubject.icon} {selectedSubject.name}
</div>
<div style= color: "#94a3b8", fontSize: "0.8rem" >
Q {currentQ + 1} of {questions.length}
{markedForReview[currentQ] && <span style= color: "#f59e0b", marginLeft: "0.5rem" >🔖 Marked</span>}
</div>
</div>
<div style={{
background: "rgba(15,23,42,0.8)",
border: `1px solid ${getTimerColor()}44`,
borderRadius: 10,
padding: "0.6rem 1.2rem",
color: getTimerColor(),
fontFamily: "monospace",
fontSize: "1.3rem",
fontWeight: 700
}}>
⏱ {formatTime(timeLeft)}
</div>
</div>
{/* Timer Bar */}
<div style={styles.timerBar}>
<div style={{
height: "100%",
width: `${pctTime * 100}%`,
background: `linear-gradient(90deg, ${getTimerColor()}, ${getTimerColor()}88)`,
borderRadius: 2,
transition: "width 1s linear, background 0.5s"
}} />
</div>
{/* Nav Dots */}
<div style= display: "flex", flexWrap: "wrap", gap: "0.4rem", marginBottom: "1.5rem" >
{questions.map((_, i) => {
const state = i === currentQ ? "current"
: markedForReview[i] ? "review"
: answers[i] !== undefined ? "answered"
: "unanswered";
return (
<button key={i} style={styles.navDot(state)} onClick={() => setCurrentQ(i)}>
{i + 1}
</button>
);
})}
</div>
{/* Question */}
<div style={styles.qCard}>
<div style=
display: "flex", justifyContent: "space-between", alignItems: "flex-start",
marginBottom: "1.5rem", gap: "1rem"
>
<div style={{
background: `${selectedSubject.color}15`,
border: `1px solid ${selectedSubject.color}30`,
color: selectedSubject.color,
padding: "0.2rem 0.7rem",
borderRadius: 20,
fontSize: "0.7rem",
whiteSpace: "nowrap"
}}>
{q.bloomLevel || "K4"} · {q.topic || selectedSubject.name}
</div>
<div style=
background: "rgba(245,158,11,0.1)",
color: "#f59e0b",
border: "1px solid rgba(245,158,11,0.2)",
padding: "0.2rem 0.7rem",
borderRadius: 20,
fontSize: "0.7rem",
whiteSpace: "nowrap"
>
{DIFFICULTY_LEVELS.find(d => d.id === difficulty).marks} marks
</div>
</div>
<p style= fontSize: "1rem", lineHeight: 1.7, color: "#e2e8f0", marginBottom: "1.75rem", fontFamily: "Georgia, serif" >
<strong style= color: selectedSubject.color >Q{currentQ + 1}.</strong> {q.question}
</p>
{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 (
<button key={oi}
style={styles.optionBtn(state)}
onClick={() => { if (!testSubmitted) setAnswers(a => ({ ...a, [currentQ]: oi })); }}
>
{opt}
{testSubmitted && oi === q.correct && <span style= float: "right" >✓</span>}
{testSubmitted && answered === oi && oi !== q.correct && <span style= float: "right" >✗</span>}
</button>
);
})}
{testSubmitted && showExplanation && (
<div style=
background: "rgba(16,185,129,0.08)",
border: "1px solid rgba(16,185,129,0.2)",
borderRadius: 8,
padding: "1rem",
marginTop: "0.5rem",
fontSize: "0.85rem",
color: "#6ee7b7",
lineHeight: 1.6
>
<strong style= color: "#34d399" >📝 Explanation:</strong> {q.explanation}
</div>
)}
</div>
{/* Controls */}
<div style= display: "flex", justifyContent: "space-between", alignItems: "center", marginTop: "1.25rem", flexWrap: "wrap", gap: "0.75rem" >
<div style= display: "flex", gap: "0.75rem" >
<button
style={styles.btn("ghost")}
onClick={() => setCurrentQ(q => Math.max(0, q - 1))}
disabled={currentQ === 0}
>← Prev</button>
<button
style=
...styles.btn("ghost"),
borderColor: markedForReview[currentQ] ? "#f59e0b" : undefined,
color: markedForReview[currentQ] ? "#f59e0b" : undefined
onClick={() => setMarkedForReview(m => ({ ...m, [currentQ]: !m[currentQ] }))}
>
🔖 {markedForReview[currentQ] ? "Unmark" : "Mark"}
</button>
</div>
<div style= display: "flex", gap: "0.75rem" >
{testSubmitted && (
<button style={styles.btn("ghost")} onClick={() => setShowExplanation(s => !s)}>
{showExplanation ? "Hide" : "Show"} Explanation
</button>
)}
{currentQ < questions.length - 1 ? (
<button style={styles.btn("primary")} onClick={() => setCurrentQ(q => q + 1)}>
Next →
</button>
) : !testSubmitted ? (
<button style={styles.btn("danger")} onClick={handleSubmitTest}>
Submit Test
</button>
) : (
<button style={styles.btn("success")} onClick={() => setScreen("results")}>
View Results →
</button>
)}
</div>
</div>
</div>
</div>
);
}
// ─── 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 (
<div style={styles.app}>
<div style={styles.bg} />
<div style={styles.container}>
<div style= textAlign: "center", marginBottom: "2.5rem" >
<div style={styles.badge}>Test Completed</div>
<div style={{
width: 120, height: 120, borderRadius: "50%",
background: `${gradeColor}15`,
border: `3px solid ${gradeColor}`,
display: "flex", alignItems: "center", justifyContent: "center",
margin: "1.5rem auto",
fontSize: "2.5rem", fontWeight: 900, color: gradeColor
}}>{grade}</div>
<h2 style= ...styles.title, fontSize: "1.8rem" >{label}</h2>
<p style= color: "#64748b", marginTop: "0.5rem" >
{selectedSubject.name} · {difficulty === "expert" ? "Expert" : "Tough"} Level
</p>
</div>
{/* Stats */}
<div style= display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: "1rem", marginBottom: "2rem" >
{[
{ 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 => (
<div key={s.label} style={styles.statBox(s.color)}>
<div style= fontSize: "1.4rem", fontWeight: 800, color: s.color >{s.val}</div>
<div style= fontSize: "0.7rem", color: "#64748b", marginTop: "0.25rem" >{s.label}</div>
</div>
))}
</div>
{/* Progress */}
<div style= marginBottom: "2rem" >
<div style= display: "flex", justifyContent: "space-between", marginBottom: "0.5rem", fontSize: "0.8rem", color: "#64748b" >
<span>Performance</span><span>{pct}%</span>
</div>
<div style= height: 10, background: "rgba(255,255,255,0.05)", borderRadius: 5, overflow: "hidden" >
<div style={{
height: "100%", width: `${pct}%`,
background: `linear-gradient(90deg, ${gradeColor}, ${gradeColor}88)`,
borderRadius: 5, transition: "width 1s ease"
}} />
</div>
</div>
{/* Question Review */}
<p style={styles.sectionTitle}>Question Review</p>
<div style= display: "flex", flexDirection: "column", gap: "1rem", maxHeight: 400, overflowY: "auto", paddingRight: "0.5rem" >
{questions.map((q, i) => {
const isCorrect = answers[i] === q.correct;
return (
<div key={i} style={{
background: isCorrect ? "rgba(16,185,129,0.06)" : "rgba(239,68,68,0.06)",
border: `1px solid ${isCorrect ? "rgba(16,185,129,0.2)" : "rgba(239,68,68,0.2)"}`,
borderRadius: 10, padding: "1rem"
}}>
<div style= display: "flex", justifyContent: "space-between", marginBottom: "0.5rem" >
<span style= fontSize: "0.75rem", color: "#64748b" >Q{i + 1} · {q.topic}</span>
<span style= fontSize: "0.8rem", fontWeight: 700, color: isCorrect ? "#34d399" : "#f87171" >
{isCorrect ? "✓ Correct" : "✗ Wrong"}
</span>
</div>
<p style= fontSize: "0.85rem", color: "#cbd5e1", margin: "0 0 0.5rem", lineHeight: 1.5 >
{q.question.length > 100 ? q.question.slice(0, 100) + "..." : q.question}
</p>
{!isCorrect && (
<div style= fontSize: "0.75rem" >
<span style= color: "#ef4444" >Your: {q.options[answers[i]] || "Not answered"}</span>
<span style= color: "#34d399", marginLeft: "1rem" >✓ {q.options[q.correct]}</span>
</div>
)}
<div style= fontSize: "0.72rem", color: "#475569", marginTop: "0.5rem", lineHeight: 1.5 >
💡 {q.explanation?.slice(0, 120)}...
</div>
</div>
);
})}
</div>
{/* Actions */}
<div style= display: "flex", gap: "1rem", marginTop: "2rem", flexWrap: "wrap" >
<button style= ...styles.btn("primary"), flex: 1 onClick={() => {
setScreen("config"); setQuestions([]); setAnswers({});
}}>
🔄 Retake Test
</button>
<button style= ...styles.btn("ghost"), flex: 1 onClick={() => {
setScreen("home"); setSelectedSubject(null); setQuestions([]);
}}>
← Choose Subject
</button>
<button style= ...styles.btn("ghost") onClick={() => {
setScreen("test"); setCurrentQ(0); setShowExplanation(true);
}}>
📖 Review Answers
</button>
</div>
<div style= textAlign: "center", marginTop: "2.5rem", color: "#1e293b", fontSize: "0.72rem" >
AVVM Sri Pushpam College · MCA Department · Outcome Based Education
</div>
</div>
</div>
);
}
return null;
}
Variables (3)
Subject
{{subject}}RequiredSelect a subject
Discrete MathematicsPython ProgrammingData Structures & AlgorithmsBig Data Analytics+1 more
Difficulty Level
{{difficulty}}RequiredSelect difficulty
hardexpert
Number of Questions
{{num_questions}}Requirede.g., 10
AI Configuration
Extended Thinking
Model
Custom Model
Reviews
Customer Reviews
No reviews yet
Be the first to share your experience!
Create Your Own AI Recipes
Join Springbase to save, customize, and share your own AI prompt recipes with the world.