Question images and photo answers

Fields demonstrated: questionPic, questionPicAlt, questionType: 'photo', and answerAltTexts inside the quiz prop.

Try the quizCopy Anchor Link

Identify the shape in the first question, then select the circle image in the second. Finish to see the images and explanations in the result review.

How it worksCopy Anchor Link

questionPic adds an image above the answer choices, including when answers are text. questionType: 'photo' treats each answer as an image URL. This demo uses small SVG shapes; you can replace them with photographs in browser-supported formats such as JPEG or PNG.

Give the question image a meaningful questionPicAlt, and supply an answerAltTexts entry for every image choice in the same order. correctAnswer uses a one-based index, just as it does with text answers. See the Images guide for more details.

ImplementationCopy Anchor Link

Copy circle.svg and square.svg into your app's public/images directory. Install react-quiz-component and copy the component below; its quiz data is included.

The example uses NEXT_PUBLIC_BASE_PATH for this site's deployment prefix. In another React setup, replace basePath with your public asset prefix, or an empty string when hosting at the domain root. Next.js applications need a client boundary. Quiz loads its own stylesheet automatically.

'use client';
import Quiz, { type Quiz as QuizData } from 'react-quiz-component';

const basePath = process.env.NEXT_PUBLIC_BASE_PATH ?? '';
const quiz: QuizData = {
  quizTitle: 'Shapes in pictures',
  quizSynopsis: 'Try a question image followed by image answer choices.',
  questions: [
    {
      question: 'Which shape is shown above the answers?',
      questionType: 'text',
      questionPic: `${basePath}/images/square.svg`,
      questionPicAlt: 'A purple square',
      answerSelectionType: 'single',
      answers: ['Circle', 'Square'],
      correctAnswer: '2',
      point: 10,
      explanation: 'The picture shows a square with four equal sides.',
    },
    {
      question: 'Which picture shows a circle?',
      questionType: 'photo',
      answerSelectionType: 'single',
      answers: [`${basePath}/images/circle.svg`, `${basePath}/images/square.svg`],
      answerAltTexts: ['Blue circle', 'Purple square'],
      correctAnswer: '1',
      point: 10,
      explanation: 'The blue shape is a circle.',
    },
  ],
};

export default function PhotosExample() {
  return <Quiz quiz={quiz} showInstantFeedback />;
}