Python Claude Ai Api Quiz
~5 minutes
MCQ Quiz
Instructions: Click an option to select your answer. Use Show Answer to reveal the correct answer at any time. When ready, click Submit Quiz to see your score.
{
if (phase === "loading") {
intervalRef.current = setInterval(() => setDots(d => (d + 1) % 4), 450);
} else {
clearInterval(intervalRef.current);
}
return () => clearInterval(intervalRef.current);
}, [phase]);
async function fetchQuiz() {
setPhase("loading");
setError(null);
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: 3000,
messages: [{ role: "user", content: SYSTEM_PROMPT }]
})
});
if (!res.ok) {
throw new Error(`API error: ${res.status}`);
}
const data = await res.json();
const raw = (data.content?.[0]?.text || "").trim();
// Strip any accidental markdown fences
const clean = raw.replace(/^```(?:json)?\s*/i, "").replace(/\s*```$/, "").trim();
let parsed;
try {
parsed = JSON.parse(clean);
} catch {
// Try to find JSON array inside the response
const match = clean.match(/\[[\s\S]*\]/);
if (match) parsed = JSON.parse(match[0]);
else throw new Error("Could not parse JSON from response");
}
if (!Array.isArray(parsed) || parsed.length === 0) {
throw new Error("Invalid quiz data returned");
}
setQuestions(parsed);
setAnswers([]);
setCurrent(0);
setSelected(null);
setShowExp(false);
setPhase("quiz");
} catch (e) {
setError(e.message || "Failed to generate quiz. Please try again.");
setPhase("intro");
}
}
function handleSelect(idx) {
if (selected !== null) return;
setSelected(idx);
setShowExp(true);
}
function handleNext() {
const newAnswers = [...answers, { selected, correct: questions[current].correct }];
setAnswers(newAnswers);
if (current + 1 >= questions.length) {
setPhase("result");
} else {
setCurrent(current + 1);
setSelected(null);
setShowExp(false);
}
}
function retryQuiz() {
setCurrent(0);
setSelected(null);
setShowExp(false);
setAnswers([]);
setPhase("quiz");
}
const score = answers.filter(a => a.selected === a.correct).length;
const LABELS = ["A", "B", "C", "D"];
// ─── STYLES ────────────────────────────────────────────────────
const S = {
page: {
minHeight: "100vh",
background: "linear-gradient(135deg,#0f0c29 0%,#302b63 55%,#24243e 100%)",
display: "flex",
alignItems: "center",
justifyContent: "center",
padding: "24px 16px",
fontFamily: "'Segoe UI', system-ui, sans-serif",
boxSizing: "border-box",
},
card: {
background: "rgba(255,255,255,0.05)",
backdropFilter: "blur(24px)",
WebkitBackdropFilter: "blur(24px)",
border: "1px solid rgba(255,255,255,0.13)",
borderRadius: "24px",
padding: "40px 36px",
maxWidth: "640px",
width: "100%",
boxShadow: "0 32px 80px rgba(0,0,0,0.55)",
position: "relative",
overflow: "hidden",
boxSizing: "border-box",
},
glow: {
position: "absolute", top: "-90px", right: "-90px",
width: "300px", height: "300px",
background: "radial-gradient(circle,rgba(99,179,237,0.14) 0%,transparent 70%)",
pointerEvents: "none",
},
badge: {
display: "inline-block",
background: "linear-gradient(135deg,#667eea,#764ba2)",
color: "#fff", fontSize: "11px", fontWeight: 700,
letterSpacing: "2px", textTransform: "uppercase",
padding: "5px 14px", borderRadius: "20px", marginBottom: "16px",
},
h1: {
fontSize: "26px", fontWeight: 800, color: "#fff",
lineHeight: 1.3, marginBottom: "10px", margin: "0 0 10px",
},
sub: {
fontSize: "14px", color: "rgba(255,255,255,0.55)",
marginBottom: "24px", lineHeight: 1.7, margin: "0 0 24px",
},
tags: { display: "flex", gap: "10px", marginBottom: "24px", flexWrap: "wrap" },
tag: {
fontSize: "12px", color: "rgba(255,255,255,0.5)",
background: "rgba(255,255,255,0.06)", borderRadius: "8px",
padding: "4px 12px", border: "1px solid rgba(255,255,255,0.1)",
},
primaryBtn: {
background: "linear-gradient(135deg,#667eea 0%,#764ba2 100%)",
color: "#fff", border: "none", borderRadius: "14px",
padding: "15px 28px", fontSize: "16px", fontWeight: 700,
cursor: "pointer", width: "100%", letterSpacing: "0.4px",
boxShadow: "0 8px 24px rgba(102,126,234,0.4)",
transition: "transform 0.15s, box-shadow 0.15s",
},
ghostBtn: {
background: "rgba(255,255,255,0.07)", color: "#e2e8f0",
border: "1px solid rgba(255,255,255,0.13)", borderRadius: "14px",
padding: "13px 28px", fontSize: "14px", fontWeight: 600,
cursor: "pointer", width: "100%", marginTop: "10px",
},
errorBox: {
background: "rgba(252,129,129,0.1)", border: "1px solid rgba(252,129,129,0.3)",
borderRadius: "10px", padding: "12px 14px",
color: "#feb2b2", fontSize: "13px", marginBottom: "16px",
},
// Quiz phase
progressBar: { display: "flex", gap: "5px", marginBottom: "26px" },
pip: (active, done) => ({
height: "4px", flex: 1, borderRadius: "4px",
background: done
? "linear-gradient(90deg,#667eea,#764ba2)"
: active ? "rgba(102,126,234,0.6)" : "rgba(255,255,255,0.1)",
transition: "background 0.3s",
}),
qLabel: {
fontSize: "11px", fontWeight: 700, color: "rgba(255,255,255,0.38)",
letterSpacing: "1.5px", textTransform: "uppercase", marginBottom: "10px",
},
qText: {
fontSize: "18px", fontWeight: 700, color: "#fff",
lineHeight: 1.5, marginBottom: "22px",
},
optBtn: (state) => ({
display: "flex", alignItems: "center", width: "100%", textAlign: "left",
padding: "13px 16px", marginBottom: "10px", borderRadius: "12px",
border: `2px solid ${
state === "correct" ? "#48bb78" :
state === "wrong" ? "#fc8181" :
"rgba(255,255,255,0.1)"
}`,
background:
state === "correct" ? "rgba(72,187,120,0.12)" :
state === "wrong" ? "rgba(252,129,129,0.12)" :
"rgba(255,255,255,0.04)",
color:
state === "correct" ? "#9ae6b4" :
state === "wrong" ? "#feb2b2" : "#e2e8f0",
fontSize: "14px", fontWeight: 500,
cursor: selected !== null ? "default" : "pointer",
transition: "all 0.18s", gap: "12px",
}),
optCircle: (state) => ({
width: "26px", height: "26px", borderRadius: "50%", flexShrink: 0,
display: "flex", alignItems: "center", justifyContent: "center",
fontSize: "11px", fontWeight: 800,
background:
state === "correct" ? "rgba(72,187,120,0.35)" :
state === "wrong" ? "rgba(252,129,129,0.35)" :
"rgba(255,255,255,0.1)",
}),
expBox: {
background: "rgba(102,126,234,0.1)",
border: "1px solid rgba(102,126,234,0.25)",
borderRadius: "12px", padding: "14px 16px",
fontSize: "13px", color: "rgba(255,255,255,0.78)",
lineHeight: 1.65, marginBottom: "18px",
},
nextBtn: {
background: "linear-gradient(135deg,#667eea 0%,#764ba2 100%)",
color: "#fff", border: "none", borderRadius: "12px",
padding: "14px 28px", fontSize: "14px", fontWeight: 700,
cursor: "pointer", width: "100%",
boxShadow: "0 6px 20px rgba(102,126,234,0.35)",
},
// Result phase
scoreBig: {
fontSize: "76px", fontWeight: 900, color: "#fff",
textAlign: "center", lineHeight: 1, marginBottom: "4px",
},
gradeText: {
textAlign: "center", fontSize: "26px", marginBottom: "6px", color: "#fff",
},
scoreSub: {
textAlign: "center", fontSize: "14px",
color: "rgba(255,255,255,0.5)", marginBottom: "28px",
},
divider: {
height: "1px", background: "rgba(255,255,255,0.08)", margin: "0 0 20px",
},
reviewLabel: {
fontSize: "11px", fontWeight: 700, color: "rgba(255,255,255,0.35)",
letterSpacing: "1.5px", textTransform: "uppercase", marginBottom: "12px",
},
reviewScroll: { maxHeight: "280px", overflowY: "auto", marginBottom: "22px" },
reviewRow: (ok) => ({
display: "flex", gap: "10px", alignItems: "flex-start",
padding: "11px 12px", borderRadius: "10px", marginBottom: "8px",
background: ok ? "rgba(72,187,120,0.07)" : "rgba(252,129,129,0.07)",
border: `1px solid ${ok ? "rgba(72,187,120,0.18)" : "rgba(252,129,129,0.18)"}`,
}),
};
// ─── INTRO ─────────────────────────────────────────────────────
if (phase === "intro") return (
);
// ─── LOADING ───────────────────────────────────────────────────
if (phase === "loading") return (
);
// ─── QUIZ ──────────────────────────────────────────────────────
if (phase === "quiz" && questions.length > 0) {
const q = questions[current];
return (
);
}
// ─── RESULT ────────────────────────────────────────────────────
if (phase === "result") {
const pct = Math.round((score / questions.length) * 100);
const grade =
pct >= 90 ? "Excellent! 🏆" :
pct >= 70 ? "Well done! 🌟" :
pct >= 50 ? "Good effort! 💪" :
"Keep practicing! 📚";
return (
);
}
return null;
}'>
theiqra.edu.pk
Python & Claude API Quiz
10 AI-generated MCQ questions testing your knowledge of building AI applications with Python and the Claude API. Beginner-friendly, tailored for Pakistani students.
{error &&⚠ {error}
}
{["10 Questions","Beginner Level","Instant Feedback","AI Generated"].map(t => (
{t}
))}
🤖
Generating your quiz{"...".slice(0, dots + 1)}
Claude AI is crafting 10 custom questions
about Python & Claude API
about Python & Claude API
{questions.map((_, i) => )}
Question {current + 1} of {questions.length}
{q.q}
{q.opts.map((opt, i) => {
const state =
selected === null ? "idle" :
i === q.correct ? "correct" :
i === selected ? "wrong" : "idle";
return (
);
})}
{showExp && (
💡 Explanation: {q.exp}
)}
{selected !== null && (
)}
Quiz Complete
{score}/{questions.length}
{grade}
{pct}% correct — {score} right, {questions.length - score} wrong
Review
{questions.map((q, i) => {
const ok = answers[i]?.selected === q.correct;
return (
{ok ? "✅" : "❌"}
);
})}
Q{i + 1}. {q.q}
{!ok && (
✓ Correct: {q.opts[q.correct]}
)}
0%
Your Result
0
Correct
0
Wrong
0
Skipped