quiz-component-react v1.0.5

quiz-component-react

:orange_book: React Quiz Component

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

License

This project is licensed under the MIT License - see the LICENSE.md file for details