@thirtymadison/quiz-ui v1.2.3

Quiz UI

This is the UI library for rendering ThirtyMadison quizzes

Note - This library has a dependency on the react-intl package which does not work out of the box with iOS 13.X. Polyfills are needed, see Polyfills section below

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>
)

\ props

\ props

Recipes

The \ 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>
    </>
  )
}

Polyfills

See the docs here and here

Install the polyfills needed:

yarn add @formatjs/intl-getcanonicallocales @formatjs/intl-locale

Import the polyfills somewhere at the root of your application, such as index.tsx or app.tsx

import "@formatjs/intl-locale/polyfill"
import "@formatjs/intl-getcanonicallocales/polyfill"