quiz-component-react
quiz-component-react is a React component allowing users to attempt a quiz.
Features
- Progress bar ✓
- Allow retry ✓
- Custom result page
- New question types
- Allow markdown in question
Installing
npm i quiz-component-react
Importing quiz-component-react
import { Quiz } from 'quiz-component-react';
Defining Your Quiz Source
The quiz source is a JSON object.
export const quiz = {
"title": "Title quiz",
"questions": [
{
"question": "Paul can't touch the ceiling because he is too ______.",
"image": "src image",
"answers": [
"shortening",
"shortly",
"short",
"shortness"
],
"correctAnswer": "3",
"messageForCorrectAnswer": "Correct answer. Good job.",
"messageForIncorrectAnswer": "Incorrect answer. Please try again.",
"point": "20"
},
]
} Locale Customization
If you want to use your customized text, you can send props locale
"locale": {
"questionText": "Question",
"nextButton": "Next",
"resultText": "Your result",
"endText": "Сongratulations you passed the quiz",
"correctText": "Correct answers",
"incorrectText": "Incorrect answers",
"retryText": "Retry",
} Props
| Name | Type | Default | Required | Description |
|---|---|---|---|---|
| quiz | object |
null |
Y | Quiz Json Object |
| shuffle | boolean |
false |
N | Shuffle the questions |
| onComplete | function |
null |
N | Function after end quiz |
| onQuestionSubmit | function |
null |
N | Function after question |
| locale | function |
locale |
N | Text in quiz |
| isPorgressBar | boolean |
false |
N | Show progress bar |
| isAllowRetry | boolean |
false |
N | Allow retry quiz |
| isAllowRetry | boolean |
false |
N | Don't show answer after select |
License
This project is licensed under the MIT License - see the LICENSE.md file for details