Quiz

Template for quiz cards

Usage

A quiz card with 3 options where the first option (Option 1) is the correct answer

import img from "..."
<ActionCardQuizTemplateProps title="Exmaple Title" imageProps={{img: img}} quizOptionsProps={{options:["Option 1", "Option 2", "Option 3"], correctAnswerIndex:0}}/>

caution

Max 3 options allowed

Saving and Using Quiz Responses

warning

Ensure the component that uses the quiz response is a functional component! For challenge components see the garbage quiz for an example (garbagequiz.tsx)

Saving Quiz Response

The quiz response is automatically stored after each response if an id is given to the quiz

import img from "..."
<ActionCardQuizTemplateProps title="Exmaple Title" imageProps={{img: img}} quizOptionsProps={{        id="doc/quiz",         options:["Option 1", "Option 2", "Option 3"],         correctAnswerIndex:0    }}/>

Getting Quiz Data

To get the stored response, quiz, or all quizzes, use the useQuiz hook.

note

The quizzes are stored in a dictionary where the quiz's ID is the key.

UseQuiz Hook

The useQuiz hook allows for easily accessing the quiz data for the current session.

It returns 2 functions, and 1 variable being getQuizResponse, getQuiz and quizzes.

getQuizResponse

The getQuizResponse returns undefined if no response exists or QuizResponse object with the following data:

{    answerIndex, // index of the response - can be used to get the value of the quiz option that was selected    correct, // if the answer was correct or not}

// Assuming the quiz has receive a response
const { getQuizRespone } = useQuiz()
console.log(getQuizRespone("quizID"))

getQuiz

The getQuizResponse returns undefined if no quiz exists or a QuizResponse object with the following data:

warning

Currently only works if a user has responded to the quiz

{    id, // (string)    response, // (QuizResponse)    options, // (number) index of the response    correctAnswerIndex, // (number | number[]) the index/indices for the correct answers}

// Assuming the quiz has receive a response
const { getQuiz } = useQuiz()
console.log(getQuiz("quizID"))

'quizzes' list

quizzes is a dictionary with all the quizzes in it. The quiz id is used as the key

const { quizzes } = useQuiz()
console.log(quizzes)console.log(quizzes["quizID"]) // same as getQuiz("quizID")

Props

Name	Type	Default	Description
title	string	undefined	The card title
description	string	undefined	The card decription
imageProps	ActionCardImageProps	undefined	The props used for the image. See props here
quizOptionProps*	ActionCardQuizOptionsProps	undefined	The props passed to the quiz options component. See props here

*required