Quiz

A <Quiz> component represents a quiz or survey. It supports multiple question types (e.g. radio, dropdown, text input) and renders progress, navigation, and optional informational popovers.

Example

Preview

Lorem ipsum odor amet consectetuer adipiscing elit.

Nibh torquent senectus blandit auctor nascetur class vivamus augue consectetur metus!

Code

import { Button } from '@hv/ui/button';
import {
  Quiz,
  QuizNotStarted,
  QuizStarted,
  QuizStepHeader,
  QuizContent,
  QuizQuestionText,
  QuizQuestionInfo,
  QuizAnswerOptions,
  QuizButton,
  QuizCompleted,
  QuizStartButton,
} from '@hv/ui/quiz.client';
import {
  QuizAnswers,
  QuizWrapper,
  QuizHeader,
  QuizBody,
  QuizQuestion,
  QuizCompletedBody,
  QuizCompletedMessage,
} from '@hv/ui/quiz.server';
import { Text } from '@hv/ui/text';

export function QuizExample({
  header,
  strings,
  cta,
  questions,
  headerPosition,
  questionPosition,
  hideStepHeader,
  quizCompletedMessage,
  quizCompletedCta,
}) {
  return (
    <QuizWrapper>
      <Quiz
        hideStepHeader={hideStepHeader}
        questions={questions ?? []}
        strings={strings}
      >
        <QuizNotStarted>
          <QuizHeader position={headerPosition}>
            <Text id='' text={header} type='text' format='markdown' />
            <QuizStartButton variant={cta?.variant} label={cta?.label} />
          </QuizHeader>
        </QuizNotStarted>
        <QuizStarted>
          <QuizBody>
            <QuizStepHeader />
            <QuizContent>
              <QuizQuestion position={questionPosition}>
                <QuizQuestionText />
                <QuizQuestionInfo />
              </QuizQuestion>
              <QuizAnswers>
                <QuizAnswerOptions />
              </QuizAnswers>
              <QuizButton />
            </QuizContent>
          </QuizBody>
          <QuizCompleted>
            <QuizCompletedBody>
              <QuizCompletedMessage>
                <Text
                  id=''
                  text={quizCompletedMessage}
                  type='text'
                  format='markdown'
                />
              </QuizCompletedMessage>
              <Button variant={quizCompletedCta?.variant}>
                {quizCompletedCta.label}
              </Button>
            </QuizCompletedBody>
          </QuizCompleted>
        </QuizStarted>
      </Quiz>
    </QuizWrapper>
  );
}

Props

Use theicon above to preview

Quiz Props

Props	Description	Values
header	The introductory text displayed at the top of the quiz before it starts	String
headerPosition	Position of header text and CTA button	start center end
questionPosition	Position of the quiz question text	start center end
hideStepHeader	Boolean to hide or show the step header (which includes the progress bar and back button) from the quiz layout	true false
cta	The button to start the quiz	label variant
questions	The questions for the quiz	Array of quiz questions
bottomContent	Optional content below the header	Array of content blocks

Quiz Question Props

Props	Description	Values
id	A unique identifier for the question	String
type	The question type	radio dropdown input
question	The question text	String
information	Text content for the information icon popup (optional)	String
answerOptions	The list of possible answers for the question	Array of answer option objects
questionBottomContent	Optional content below the question	Array of content blocks

Answer Options Props

Props	Description	Values
id	A unique identifier for the answer option	String
image	An optional image asset associated with the answer option	Media object or URL
optionText	The answer option text	String

Customization

The approach for customization will vary depending on if the customization is intended to be global for all consumers of the UI component or if it is only an override for a particular instance.

• If the customization is necessary for all use cases, update the component source code in the UI library package directly, otherwise, pass className overrides.