Immediate start
Start a quiz immediately without a landing screen.
Props demonstrated: disableSynopsis. Every example also supplies the required quiz prop.
Try the quiz
The first question is ready as soon as this preview loads. Answer both questions to see the built-in results.
How it works
disableSynopsis skips the entire landing screen. Without it, users start the quiz with the Start Quiz button.
Implementation
Install react-quiz-component, then copy this component and the quiz.ts data file into the same directory. Quiz loads its own stylesheet automatically. The preview mounts in the browser; Next.js applications should use a client boundary.
'use client';
import Quiz from 'react-quiz-component';
import { quiz } from './quiz';
export default function ImmediateStartExample() {
return <Quiz quiz={quiz} disableSynopsis />;
}
Quiz data
import type { Quiz } from 'react-quiz-component';
export const quiz: Quiz = {
quizTitle: 'React essentials',
quizSynopsis: 'Two questions about React hooks and rendering.',
questions: [
{
question: 'Which hook stores local state?',
questionType: 'text',
answerSelectionType: 'single',
answers: ['useState', 'useEffect', 'useRef'],
correctAnswer: '1',
point: 10,
messageForCorrectAnswer: 'Correct! useState stores component state.',
messageForIncorrectAnswer: 'useState is the hook for local state.',
explanation: 'useState returns the current value and a setter.',
},
{
question: 'Which APIs render React content? Pick two.',
questionType: 'text',
answerSelectionType: 'multiple',
answers: ['createRoot', 'renderToString', 'querySelector'],
correctAnswer: [1, 2],
point: 20,
explanation:
'createRoot renders in the browser; renderToString renders HTML on the server.',
},
],
};
Default quiz
Try the default Quiz component with instant feedback, a progress bar, and a final score. Use the runnable component source and accompanying quiz data to add a complete, styled quiz to your application.
Question images and photo answers
Try a question image and image answer choices with descriptive alternative text and a complete runnable quiz.