mkdir -p /home/daytona/workspace/jsx-mcqs

~/jsx-mcqs/JSX_MCQs.jsx

import { useState } from "react";

const questions = [
  // --- JSX Basics ---
  {
    id: 1,
    category: "JSX Basics",
    question: "What does JSX stand for?",
    options: [
      "JavaScript XML",
      "JavaScript Extension",
      "Java Syntax Extension",
      "JSON XML",
    ],
    answer: 0,
    explanation: "JSX stands for JavaScript XML. It allows you to write HTML-like syntax inside JavaScript.",
  },
  {
    id: 2,
    category: "JSX Basics",
    question: "Which of the following is valid JSX?",
    options: [
      "<div class='box'>Hello</div>",
      "<div className='box'>Hello</div>",
      "<div Class='box'>Hello</div>",
      "<div classname='box'>Hello</div>",
    ],
    answer: 1,
    explanation: "In JSX, you must use `className` instead of `class` because `class` is a reserved keyword in JavaScript.",
  },
  {
    id: 3,
    category: "JSX Basics",
    question: "JSX must have how many root elements?",
    options: [
      "No limit",
      "Exactly two",
      "Exactly one (or a Fragment)",
      "At least three",
    ],
    answer: 2,
    explanation: "JSX expressions must have a single root element. You can use <React.Fragment> or the shorthand <> </> to wrap multiple elements.",
  },
  {
    id: 4,
    category: "JSX Basics",
    question: "How do you embed a JavaScript expression inside JSX?",
    options: [
      "Using {{ expression }}",
      "Using ${ expression }",
      "Using { expression }",
      "Using ## expression ##",
    ],
    answer: 2,
    explanation: "Curly braces { } are used to embed JavaScript expressions in JSX.",
  },
  {
    id: 5,
    category: "JSX Basics",
    question: "Which tool compiles JSX into regular JavaScript?",
    options: ["Webpack", "Babel", "Node.js", "ESLint"],
    answer: 1,
    explanation: "Babel is the JavaScript compiler that transforms JSX syntax into React.createElement() calls that browsers can understand.",
  },
  // --- Components ---
  {
    id: 6,
    category: "Components",
    question: "A React functional component must return:",
    options: [
      "A JavaScript object",
      "A number",
      "JSX or null",
      "A plain string only",
    ],
    answer: 2,
    explanation: "Functional components must return JSX (or null if nothing should be rendered).",
  },
  {
    id: 7,
    category: "Components",
    question: "Component names in React must start with:",
    options: [
      "A lowercase letter",
      "An uppercase letter",
      "An underscore",
      "The word 'component'",
    ],
    answer: 1,
    explanation: "React component names must start with an uppercase letter so React can distinguish them from plain HTML tags.",
  },
  {
    id: 8,
    category: "Components",
    question: "What is the correct way to render a component called `Button`?",
    options: [
      "<button />",
      "<Button />",
      "<BUTTON />",
      "render(Button)",
    ],
    answer: 1,
    explanation: "Custom components use PascalCase: <Button />. Lowercase names like <button /> are treated as native HTML tags.",
  },
  {
    id: 9,
    category: "Components",
    question: "Props in React are:",
    options: [
      "Mutable inside the component",
      "Read-only by convention",
      "Always arrays",
      "Only available in class components",
    ],
    answer: 1,
    explanation: "Props are read-only. A component should never modify its own props.",
  },
  {
    id: 10,
    category: "Components",
    question: "How do you pass a numeric prop `count={5}` to a component?",
    options: [
      'count="5"',
      "count={5}",
      "count=(5)",
      "count:5",
    ],
    answer: 1,
    explanation: "Curly braces { } are used to pass non-string values like numbers, booleans, and expressions as props.",
  },
  // --- State & Hooks ---
  {
    id: 11,
    category: "Hooks & State",
    question: "Which hook is used to add state to a functional component?",
    options: ["useEffect", "useContext", "useState", "useReducer"],
    answer: 2,
    explanation: "`useState` returns a state variable and a setter function: const [value, setValue] = useState(initial).",
  },
  {
    id: 12,
    category: "Hooks & State",
    question: "What does `useEffect` do in React?",
    options: [
      "Creates a new component",
      "Runs side effects after render",
      "Replaces useState",
      "Memoizes a function",
    ],
    answer: 1,
    explanation: "`useEffect` lets you perform side effects (data fetching, subscriptions, DOM mutations) after the component renders.",
  },
  {
    id: 13,
    category: "Hooks & State",
    question: "An empty dependency array `[]` in useEffect means:",
    options: [
      "Runs on every render",
      "Never runs",
      "Runs only once after the initial render",
      "Runs before every render",
    ],
    answer: 2,
    explanation: "Passing [] as the dependency array makes useEffect run only once after the first render, similar to componentDidMount.",
  },
  {
    id: 14,
    category: "Hooks & State",
    question: "Which hook is used to share state across components without prop drilling?",
    options: ["useState", "useRef", "useContext", "useEffect"],
    answer: 2,
    explanation: "`useContext` lets you consume a React Context value, avoiding the need to pass props through every level of the tree.",
  },
  {
    id: 15,
    category: "Hooks & State",
    question: "Which hook returns a mutable ref object whose `.current` does not trigger a re-render?",
    options: ["useState", "useRef", "useMemo", "useCallback"],
    answer: 1,
    explanation: "`useRef` returns a mutable object. Changes to `.current` do NOT cause re-renders, making it ideal for DOM references or storing mutable values.",
  },
  // --- Lists & Keys ---
  {
    id: 16,
    category: "Lists & Keys",
    question: "Why does React require a `key` prop when rendering lists?",
    options: [
      "For CSS styling",
      "To help React identify which items changed",
      "To sort the list",
      "To make items focusable",
    ],
    answer: 1,
    explanation: "Keys help React efficiently update the DOM by identifying which list items have been added, changed, or removed.",
  },
  {
    id: 17,
    category: "Lists & Keys",
    question: "Which is the WORST choice for a list `key`?",
    options: [
      "A unique database ID",
      "A UUID string",
      "The array index",
      "A stable slug",
    ],
    answer: 2,
    explanation: "Using the array index as a key can cause bugs when items are reordered or deleted, because indices change but React may reuse the same key for different items.",
  },
  // --- Events ---
  {
    id: 18,
    category: "Events",
    question: "How do you correctly attach a click handler in JSX?",
    options: [
      '<button onclick={handleClick}>Click</button>',
      '<button onClick={handleClick()}>Click</button>',
      '<button onClick={handleClick}>Click</button>',
      '<button on-click={handleClick}>Click</button>',
    ],
    answer: 2,
    explanation: "React uses camelCase event names (`onClick`) and you pass the function reference without invoking it (no parentheses).",
  },
  // --- Conditional Rendering ---
  {
    id: 19,
    category: "Conditional Rendering",
    question: "Which pattern is commonly used for conditional rendering in JSX?",
    options: [
      "if/else blocks inside JSX tags",
      "Ternary operator or && short-circuit",
      "switch statements inside return",
      "try/catch blocks",
    ],
    answer: 1,
    explanation: "The ternary operator `condition ? <A /> : <B />` and the && short-circuit `condition && <A />` are the most common patterns for conditional rendering in JSX.",
  },
  // --- Styling ---
  {
    id: 20,
    category: "Styling",
    question: "How do you apply inline styles in JSX?",
    options: [
      'style="color: red;"',
      'style={color: "red"}',
      'style={{ color: "red" }}',
      'css={{ color: "red" }}',
    ],
    answer: 2,
    explanation: "Inline styles in JSX use a double-curly syntax: the outer `{}` is for the JSX expression and the inner `{}` is the JavaScript object.",
  },
];

export default function JSX_MCQs() {
  const [selected, setSelected] = useState({});
  const [submitted, setSubmitted] = useState(false);
  const [current, setCurrent] = useState(0);

  const total = questions.length;
  const q = questions[current];

  const handleSelect = (optionIndex) => {
    if (submitted) return;
    setSelected((prev) => ({ ...prev, [q.id]: optionIndex }));
  };

  const handleSubmit = () => {
    if (Object.keys(selected).length < total) {
      alert("Please answer all questions before submitting.");
      return;
    }
    setSubmitted(true);
    setCurrent(0);
  };

  const handleReset = () => {
    setSelected({});
    setSubmitted(false);
    setCurrent(0);
  };

  const score = questions.filter((q) => selected[q.id] === q.answer).length;

  const isCorrect = (qId, optIdx) => questions.find((q) => q.id === qId)?.answer === optIdx;

  const optionClass = (qId, optIdx) => {
    const userPick = selected[qId];
    if (!submitted) {
      return userPick === optIdx
        ? "bg-blue-100 border-blue-500 text-blue-800"
        : "hover:bg-gray-100 border-gray-300";
    }
    if (isCorrect(qId, optIdx)) return "bg-green-100 border-green-500 text-green-800 font-semibold";
    if (userPick === optIdx && !isCorrect(qId, optIdx))
      return "bg-red-100 border-red-400 text-red-700 line-through";
    return "border-gray-200 text-gray-400";
  };

  return (
    <div className="min-h-screen bg-gray-50 py-10 px-4">
      <div className="max-w-3xl mx-auto">
        {/* Header */}
        <div className="mb-8 text-center">
          <h1 className="text-3xl font-bold text-indigo-700">JSX & React MCQ Quiz</h1>
          <p className="text-gray-500 mt-1">{total} questions covering JSX, Components, Hooks, Events, and more</p>
          {submitted && (
            <div className="mt-4 inline-block bg-indigo-50 border border-indigo-300 rounded-xl px-6 py-3">
              <span className="text-indigo-700 font-bold text-xl">
                Score: {score} / {total} ({Math.round((score / total) * 100)}%)
              </span>
            </div>
          )}
        </div>

        {/* Navigation pills */}
        <div className="flex flex-wrap gap-2 mb-6 justify-center">
          {questions.map((q, i) => {
            let pill = "bg-gray-200 text-gray-600";
            if (selected[q.id] !== undefined && !submitted) pill = "bg-blue-400 text-white";
            if (submitted) {
              pill =
                selected[q.id] === q.answer
                  ? "bg-green-500 text-white"
                  : "bg-red-400 text-white";
            }
            if (current === i) pill += " ring-2 ring-offset-1 ring-indigo-500";
            return (
              <button
                key={q.id}
                onClick={() => setCurrent(i)}
                className={`w-9 h-9 rounded-full text-sm font-bold transition ${pill}`}
              >
                {i + 1}
              </button>
            );
          })}
        </div>

        {/* Question Card */}
        <div className="bg-white rounded-2xl shadow p-6 mb-6">
          <div className="flex justify-between items-center mb-2">
            <span className="text-xs font-semibold uppercase tracking-wide text-indigo-400">
              {q.category}
            </span>
            <span className="text-xs text-gray-400">
              {current + 1} / {total}
            </span>
          </div>
          <h2 className="text-lg font-semibold text-gray-800 mb-5">{q.question}</h2>

          <div className="space-y-3">
            {q.options.map((opt, idx) => (
              <button
                key={idx}
                onClick={() => handleSelect(idx)}
                className={`w-full text-left px-4 py-3 rounded-xl border-2 transition text-sm ${optionClass(q.id, idx)}`}
              >
                <span className="font-bold mr-2">{String.fromCharCode(65 + idx)}.</span>
                {opt}
              </button>
            ))}
          </div>

          {submitted && (
            <div className="mt-5 p-4 bg-yellow-50 border border-yellow-300 rounded-xl text-sm text-yellow-800">
              <strong>Explanation:</strong> {q.explanation}
            </div>
          )}
        </div>

        {/* Prev / Next */}
        <div className="flex justify-between mb-6">
          <button
            onClick={() => setCurrent((c) => Math.max(0, c - 1))}
            disabled={current === 0}
            className="px-5 py-2 rounded-xl bg-gray-200 text-gray-700 font-semibold disabled:opacity-40 hover:bg-gray-300"
          >
            ← Previous
          </button>
          <button
            onClick={() => setCurrent((c) => Math.min(total - 1, c + 1))}
            disabled={current === total - 1}
            className="px-5 py-2 rounded-xl bg-gray-200 text-gray-700 font-semibold disabled:opacity-40 hover:bg-gray-300"
          >
            Next →
          </button>
        </div>

        {/* Submit / Reset */}
        <div className="text-center">
          {!submitted ? (
            <button
              onClick={handleSubmit}
              className="px-8 py-3 bg-indigo-600 text-white font-bold rounded-xl shadow hover:bg-indigo-700 transition"
            >
              Submit Quiz ({Object.keys(selected).length}/{total} answered)
            </button>
          ) : (
            <button
              onClick={handleReset}
              className="px-8 py-3 bg-green-600 text-white font-bold rounded-xl shadow hover:bg-green-700 transition"
            >
              Retake Quiz
            </button>
          )}
        </div>
      </div>
    </div>
  );
}