Audio questions

Fields demonstrated: questionAudio, questionAudioLabel, and questionAudioTranscript inside the quiz prop.

Try the quizCopy Anchor Link

Start the quiz, play the clip using the native audio controls, and count the tones. You can also read the text alternative. Choose an answer and finish to replay the clip in the result review.

How it worksCopy Anchor Link

questionAudio adds native playback controls above the answers. questionType still describes the answer choices, so this demo uses text. The clip is a locally bundled, synthetic two-tone WAV file; no external audio service is needed.

Audio never autoplays and uses preload="none". questionAudioLabel names the player, while questionAudioTranscript provides a visible text alternative linked to its accessible description. This demonstration deliberately gives equivalent information in text; for assessments where that discloses the answer, provide an equivalent accessible assessment in your application.

Completing the quiz stops the question's player; the result review has its own player. See the Audio guide for playback lifecycle and format details.

ImplementationCopy Anchor Link

Download two-tones.wav into your app's public/audio 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: 'Listen and count',
  quizSynopsis: 'Play the short clip or read its text alternative, then answer.',
  questions: [
    {
      question: 'How many tones are in the clip?',
      questionType: 'text',
      answerSelectionType: 'single',
      questionAudio: `${basePath}/audio/two-tones.wav`,
      questionAudioLabel: 'Listen to the tone sequence',
      questionAudioTranscript: 'Two short tones of the same pitch, separated by silence.',
      answers: ['One tone', 'Two tones', 'Three tones'],
      correctAnswer: '2',
      point: 10,
      explanation: 'The clip plays two tones with a short pause between them.',
    },
  ],
};

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