How to Model a Quiz

A quiz on your platform may help you guide your website visitors to relevant content whether you're building a product, service provider website, or an e-commerce platform.

Page structure

model a quiz with Prismic
Static Fields
Dynamic Zone

This represents the introduction to your quiz and will stay in the static part of your Custom Type. You can translate the content in different languages to address your market in a personalized way. It consists of:

  • One Title field
  • One Rich text field
  • One Key text field for the button label
1 of 5
< PreviousNext >

This is your first Slice. You'll be able to create new sections as you have more questions and also re-order them to keep control of the logic of your quiz.

In the non-repeatable zone:

  • One Title field for your question
  • One Key text field for the button label

In the repeatable zone:

  • One Rich text field for your answers. Since it is a repeatable zone, you'll be able to add more elements for Answer 2.
2 of 5
< PreviousNext >

Use the second variant of Slice to add this section which looks different in your quiz. The answers are illustrated with images.

In the non-repeatable zone:

  • One Title field for your question
  • One Key text field for the button label

In the repeatable zone:

  • One Image field
  • One Title field to identify the image
  • You'll be able to add more elements here for answers B and C
3 of 5
< PreviousNext >

The results will be handled in the same template but in a separate tab.

The tab will be enriched with a Slice for results. For each different result, you'll add a slice containing the different combinations of questions and answers. Your result slice will consist of:

In the non-repeatable zone:

  • One Title field for your result name
  • One Rich text field for the description of your result
  • One Image field to illustrate your result if needed
  • One Key text field for the CTA label
  • One Link field to redirect the user to the page of your choice

In the repeatable zone, you'll handle the combination of question and answers for each result:

  • One Rich text field for your question
  • One Rich text field for your answer

Read more about tabs here.

4 of 5
< PreviousNext >

Simply add the Result slice in your tab to add more results and the corresponding combination of question and answer that will provide this result.

5 of 5
< PreviousNext >

How to set it up in Prismic

  • Create a new repeatable Custom Type. You can choose a singleton type if you'll have a single quiz on your website. But if you want a template for different quizzes for different websites, create a repeatable type so that your marketing team can create new quizzes on the fly.
  • Copy the JSON below and paste it under the "JSON Editor" of this new Custom Type
CopyExpand/Collapse

What editors will see

How to model content for your project Sarah will be glad to help you come up with a solid content model for your project. (It’s free.) Schedule a call