{
  "id": "quiz-generator",
  "name": "Quiz Generator",
  "category": "research",
  "tags": ["quiz", "test", "learning"],
  "description": "Multiple choice quiz from user-provided Q&A with score tracking.",
  "triggers": ["quiz", "test me", "quiz generator", "practice test"],
  "defaultSize": { "w": 4, "h": 4 },
  "source": "function QuizGeneratorWidget() {\n  const questions = [\n    { q: 'What is the time complexity of binary search?', options: ['O(n)', 'O(log n)', 'O(n^2)', 'O(1)'], a: 1 },\n    { q: 'Which protocol is connectionless?', options: ['TCP', 'HTTP', 'UDP', 'FTP'], a: 2 },\n    { q: 'What does CSS stand for?', options: ['Computer Style Sheets', 'Cascading Style Sheets', 'Creative Style System', 'Colorful Style Sheets'], a: 1 }\n  ];\n  const [current, setCurrent] = React.useState(0);\n  const [score, setScore] = React.useState(0);\n  const [finished, setFinished] = React.useState(false);\n  const [selected, setSelected] = React.useState(null);\n\n  function choose(optionIndex) {\n    if (selected !== null) return;\n    setSelected(optionIndex);\n    if (optionIndex === questions[current].a) {\n      setScore(score + 1);\n    }\n    setTimeout(() => {\n      if (current + 1 < questions.length) {\n        setCurrent(current + 1);\n        setSelected(null);\n      } else {\n        setFinished(true);\n      }\n    }, 800);\n  }\n\n  function restart() {\n    setCurrent(0);\n    setScore(0);\n    setFinished(false);\n    setSelected(null);\n  }\n\n  if (finished) {\n    return (\n      <div style={{ fontFamily: 'system-ui, sans-serif', padding: 16, background: '#0f172a', color: '#e2e8f0', borderRadius: 12, height: '100%', display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center' }}>\n        <h3 style={{ margin: 0, marginBottom: 12 }}>Quiz Complete</h3>\n        <div style={{ fontSize: 28, fontWeight: 700, color: '#22c55e', marginBottom: 8 }}>{score}/{questions.length}</div>\n        <button onClick={restart} style={{ padding: '10px 20px', borderRadius: 8, border: 'none', background: '#3b82f6', color: '#fff', fontWeight: 600, cursor: 'pointer', fontFamily: 'system-ui, sans-serif' }}>Retry</button>\n      </div>\n    );\n  }\n\n  return (\n    <div style={{ fontFamily: 'system-ui, sans-serif', padding: 16, background: '#0f172a', color: '#e2e8f0', borderRadius: 12, height: '100%', display: 'flex', flexDirection: 'column' }}>\n      <h3 style={{ margin: 0, marginBottom: 10 }}>Quiz</h3>\n      <div style={{ fontSize: 13, marginBottom: 12 }}>Q{current + 1}: {questions[current].q}</div>\n      <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>\n        {questions[current].options.map((opt, i) => {\n          let bg = '#1e293b';\n          if (selected !== null) {\n            if (i === questions[current].a) bg = '#166534';\n            else if (i === selected) bg = '#7f1d1d';\n          }\n          return (\n            <button\n              key={i}\n              onClick={() => choose(i)}\n              style={{\n                textAlign: 'left',\n                padding: 10,\n                borderRadius: 8,\n                border: 'none',\n                background: bg,\n                color: '#e2e8f0',\n                cursor: selected !== null ? 'default' : 'pointer',\n                fontFamily: 'system-ui, sans-serif',\n                fontSize: 13\n              }}\n            >\n              {opt}\n            </button>\n          );\n        })}\n      </div>\n    </div>\n  );\n}\nrender(<QuizGeneratorWidget/>);",
  "placeholders": []
}