Shuffled questions and answers
Shuffle questions and answer choices when a new quiz session starts.
Props demonstrated: shuffle, shuffleAnswer. Every example also supplies the required quiz prop.
Try the quiz
Start the quiz and answer both questions in their displayed order. Use Restart quiz to create a fresh session and shuffle again.
How it works
Shuffling happens when a session is created. Changing the React key remounts the component and clears the previous answers. A new shuffle may produce the same order. Prepared answer indexes and callback payloads follow the shuffled choices.
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 { useState } from 'react';
import Quiz from 'react-quiz-component';
import { quiz } from './quiz';
export default function ShuffledExample() {
const [session, setSession] = useState(0);
return (
<div>
<button
type="button"
onClick={() => setSession((current) => current + 1)}
style={{ border: '1px solid currentColor', borderRadius: 8, padding: '8px 12px', marginBottom: 16 }}
>
Restart quiz
</button>
<Quiz key={session} quiz={quiz} shuffle shuffleAnswer />
</div>
);
}
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.',
},
],
};