Images

Try the question images and photo answers example for a runnable quiz and downloadable assets.

Question and answer imagesCopy Anchor Link

Set questionPic to an image URL to show it above the answers. For image choices, set questionType: 'photo' and put image URLs in answers. Answer indexing stays one-based. Supply answerAltTexts, a nonempty description for each answer in the same order, so screen readers can distinguish the photos. Descriptions move with their images when answers are shuffled. Older quizzes without descriptions use numbered labels such as “Answer 1”; these identify the choice but do not describe its image. Use questionPicAlt to describe a question image (or an empty string for a decorative image).

The local assets below are served with this documentation. Copy circle.svg and square.svg into your app's public directory and use its base path when constructing URLs.

import type { Question } from 'react-quiz-component';

const basePath = ''; // For a project site, use its deployment prefix.
const photoQuestion: Question = {
  question: 'Which image shows a circle?',
  questionType: 'photo',
  answerSelectionType: 'single',
  answers: [`${basePath}/images/circle.svg`, `${basePath}/images/square.svg`],
  answerAltTexts: ['Blue circle', 'Blue square'],
  correctAnswer: '1',
};