Quiz

Quiz (diffbook’s Quiz) composes a title and a list of questions into a single quiz: answer each question, then hit Submit to grade them all at once and see the per-question results and total score simultaneously. Each question is a discriminated union (type: 'single' | 'multiple' | 'numeric').

Quick check

Which runs JS outside the browser?

PythonNode.jsGo

What is 3 × 3?

2 questions

Quick check

Which runs JS outside the browser?

Python Node.js Go

What is 3 × 3?

2 questions

// apps/docs/src/components/examples/quiz/default/react.tsx
import { Quiz } from '@cloudvoyant/helical-react';

const questions = [
  {
    id: 'a1',
    type: 'single' as const,
    prompt: 'Which runs JS outside the browser?',
    choices: ['Python', 'Node.js', 'Go'],
    correct: 1,
  },
  {
    id: 'a2',
    type: 'numeric' as const,
    prompt: 'What is 3 × 3?',
    answer: 9,
  },
];

export default function ReactQuizDefault() {
  return <Quiz id="quiz-demo" title="Quick check" questions={questions} />;
}

<!-- apps/docs/src/components/examples/quiz/default/svelte.svelte -->
<script lang="ts">
  import { Quiz } from '@cloudvoyant/helical-svelte';
  import type { Question } from '@cloudvoyant/helical-ui';

  const questions: Question[] = [
    {
      id: 'a1',
      type: 'single',
      prompt: 'Which runs JS outside the browser?',
      choices: ['Python', 'Node.js', 'Go'],
      correct: 1,
    },
    {
      id: 'a2',
      type: 'numeric',
      prompt: 'What is 3 × 3?',
      answer: 9,
    },
  ];
</script>

<Quiz id="quiz-demo" title="Quick check" {questions} />

Examples

API Reference

Prop	Type	Description
`id`	`string`	Unique quiz id. Required.
`title`	`string`	Optional heading.
`questions`	`Question[]`	The question list. Required.