Quiz Fields

Hello fellow prismic people. I have a question and I'm hoping to get some guidance.

I have a Quiz page that looks like this and I'm struggling with how to build this out in Prismic.

I need the content author to have the ability to put in a question and four answers with one of them being the correct one. I've created a reusable custom type and gave it five key text fields for the question and answers. But I have no idea how I would let the content author choose which one is the correct answer The idea is that the content author would create a new 'Quiz Question' document. Is that the right approach? It seems like there'd be a lot of documents in the dashboard called 'Quiz Question.

Any advice?

Seems to me a way to look at this would be to have a slice that is a question. Inside that slice, in the non-repeatable zone you have your question. Let's say that your default variation is a multiple-choice. In the repeatable zone you have key text field and a boolean field. This allows editors to write answers and then they toggle true for the one(s) that are correct.

Slices would then allow you to arrange their order as needed, and are indexed as well. Thus, their number will correspond to their order.

Was that clear?

1 Like

Yes that makes perfect sense and it worked! You're a genius. Thank you :owl:

1 Like

@nf_mastroianni Follow up question. Any ideas on how I'd be able to get a count of all 'Question' slices? For example, if I wanted to show something like "Question 2 of 10". From what I gather, I don't really have a reference of the other Question slices inside of a given slice.

Ok @traek.wells let's see what we can figure out here...

// just guessing here

const { data: { slices}} = page

const questions = slices.filter((slice) => slice.slice_type === 'question')
// replace 'question' with your slice name
const questionCount = questions.length

How's that? Does it help at all?

@nf_mastroianni I'm assuming this is at the page level though right? I think this logic will work to the total amount at the page level but I still don't see how I'd pass that info down to the individual slice. I don't think I can pass additional props to the component.

Could this be of use:
Passing additional Properties in SliceZone with SliceProps - Developing with Prismic - Prismic People