Getting Started
Installation
Install @crease/react with any one of the following commands:
npm i @crease/reactBasic Usage
Let's implement a simple true or false quiz.
Import Quiz component
Additionally, for typescript users, import the types
import { Quiz } from '@crease/react';
import type { MixedContent, NonEmptyArray } from '@crease/react';Instantiate the content variable
The content variable contains all the questions, options and correct answers
const content: NonEmptyArray<MixedContent> = [
{
format: "single-answer",
question: "Is 1+1=2?",
options: [
"True",
"False"
],
correctAnswers: 0 // Index of the correct answer within the options array.
},
{
format: "single-answer",
question: "Are there more atoms in the universe than pigeons?",
options: [
"True",
"False"
],
correctAnswers: 0
},
{
format: "multiple-answers",
question: "Which of these are prime numbers?",
options: ["-2", "7", "3", "1"],
correctAnswers: [1, 2] // has to be an array of indexes for "multiple-answers" format
}
]What your code should look like
import { Quiz } from '@crease/react';
import type { MixedContent, NonEmptyArray } from '@crease/react';
const content: NonEmptyArray<MixedContent> = [
{
format: "single-answer",
question: "Is 1+1=2?",
options: [
"True",
"False"
],
correctAnswers: 0 // Index of the correct answer within the options array.
},
{
format: "single-answer",
question: "Are there more atoms in the universe than pigeons?",
options: [
"True",
"False"
],
correctAnswers: 0
},
{
format: "multiple-answers",
question: "Which of these are prime numbers?",
options: ["-2", "7", "3", "1"],
correctAnswers: [1, 2] // has to be an array of indexes for "multiple-answers" format
}
]
function App() {
return (
<Quiz
theme='dark'
shuffle={true} // Order of questions displayed will be random
content={content}
/>
)
}