@thirtymadison/quiz-ui

Quiz UI

This is the UI library for rendering ThirtyMadison quizzes

Installing

yarn add @thirtymadison/quiz-ui

Usage

import { QuizRoot, TakeQuiz, createQuizTheme } from "@thirtymadison/quiz-ui"

export const SomeComponent = () => (
  <QuizRoot apiUrl="graph/api/url" bucketUrl="bucket/url" theme={createQuizTheme(...)}>
    <TakeQuiz scope="evens" name="sample" onError={(error) => {}} onDidComplete={(quizResponse) => {}} />
  </QuizRoot>
)

<QuizRoot/> props

name	required	description
apiUrl	true	url of the graph api
bucketUrl	true	url of the s3 bucket containing quizzes.
theme	true	a theme object. use the createQuizTheme function to create this. The argument types define what is supported. all values should be styled-system compatible

<TakeQuiz/> props

name	type	required	description
scope	string	true	The brand scope (keeps/cove/evens/picnic)
name	string	true	The identifier of the quiz to take
version	number | "latest"	false	The quiz version to take. Defaults to the latest version
persist	boolean	false	Determines whether or not to persist answers as the quiz progresses. Defaults to true
context	AnyObject	false	An object of arbitrary data to use in quiz config Conditions
onError	(error) => void	true	A callback to be notified of errors
onDidComplete	(response: QuizResponse | CompleteQuizResponseParams) => Promise<string | void>	true	This will be invoked once the user reaches the end of the quiz. Receives the quizResponse object. If the user session is anonymous, this object won't have an id as it won't be saved to the db. If persist is false, this prop can be used to persist the completed payload to the database
onDidLoad	(data: { quizResponse?: QuizResponse; meta: QuizMeta }) => void	false	A callback that will be invoked once the quiz has been bootstrapped and is ready for user interaction. If the user is resuming a draft quiz response, that quizResponse will be accessible data. meta has configName, configVersion, and the current progress of the quiz response
onDidCaptureLead	(data: DidAnswerData) => Promise<number | string | void>	false	If the quiz can be started by an anonymous user and has lead capture steps, this callback will be invoked anytime lead information is completed successfully. If the callback returns a promise resolving to a user id (number), the quiz will begin to persist the quizResponse for the provided userId to the database. If the callback returns a promise resolving to a string, the string will be used as an error message.
onDidAnswer	(data: DidAnswerData) => Promise<string | void> | void	false	Invoked after each step the user completes. If persist is false, this prop can be used to persist quiz questions to the database. If the callback returns a promise resolving to a string, that string will be used as an error message.
onDidSave	(quizResponse: QuizResponse) => void	false	Invoked with the updated quizResponse after answers are persisted

Recipes

The <QuizRoot/> and some required props are left out of these examples for brevity.

Kick off other actions such as journey transitions when the user starts the quiz

Because each answer will be persisted to the db, onDidSave will be called first when a record has been created

const SomeComponent = () => {
  const doOtherThing = (quizResponse) => {
    // start journey transition, etc.
  }

  return <TakeQuiz onDidSave={doOtherThing} />
}

Lead capture when quiz can be initiated anonymously

const SomeComponent = () => {
  const leadRef = useRef({})

  return (
    <TakeQuiz
      onDidCaptureLead={async (field, value) => {
        leadRef.current[field] = value

        if (leadRef.current.email && leadRef.current.firstName && leadRef.current.lastName) {
          const { data } = await createUser({ variables: { user: { ...leadRef.current, eCommerceUser: true } } })
          return data?.createUser.id
        }
        return
      }}
    />
  )
}

Hide until ready

const SomeComponent = () => {
  const [quizReady, setQuizReady] = useState(false)

  return (
    <>
      {!quizReady && <CoolLoadingScreen />}
      <Box hidden={!quizReady}>
        <TakeQuiz onDidLoad={() => setQuizReady(true)} />
      </Box>
    </>
  )
}