{"id":18402553,"url":"https://github.com/wingkwong/react-quiz-component","last_synced_at":"2025-05-14T19:06:52.170Z","repository":{"id":38805239,"uuid":"132996347","full_name":"wingkwong/react-quiz-component","owner":"wingkwong","description":":orange_book: React Quiz Component","archived":false,"fork":false,"pushed_at":"2025-04-07T19:50:39.000Z","size":4762,"stargazers_count":389,"open_issues_count":38,"forks_count":150,"subscribers_count":5,"default_branch":"develop","last_synced_at":"2025-04-07T22:38:03.115Z","etag":null,"topics":["hacktoberfest","quiz","react","react-plugin","react-quiz","react-quiz-component"],"latest_commit_sha":null,"homepage":"https://wingkwong.github.io/react-quiz-component/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/wingkwong.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null},"funding":{"github":"wingkwong","patreon":null,"open_collective":null,"ko_fi":null,"tidelift":null,"community_bridge":null,"liberapay":null,"issuehunt":null,"otechie":null,"lfx_crowdfunding":null,"custom":null}},"created_at":"2018-05-11T06:04:58.000Z","updated_at":"2025-04-07T12:21:36.000Z","dependencies_parsed_at":"2023-10-03T10:07:03.663Z","dependency_job_id":"5828d05c-5b31-4ee2-82cf-e2ea29da51df","html_url":"https://github.com/wingkwong/react-quiz-component","commit_stats":{"total_commits":384,"total_committers":16,"mean_commits":24.0,"dds":"0.48697916666666663","last_synced_commit":"410d5cd2da9a1edc8d16d4b40a8dd7907d6e30ec"},"previous_names":[],"tags_count":9,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/wingkwong%2Freact-quiz-component","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/wingkwong%2Freact-quiz-component/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/wingkwong%2Freact-quiz-component/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/wingkwong%2Freact-quiz-component/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/wingkwong","download_url":"https://codeload.github.com/wingkwong/react-quiz-component/tar.gz/refs/heads/develop","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248717240,"owners_count":21150387,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["hacktoberfest","quiz","react","react-plugin","react-quiz","react-quiz-component"],"created_at":"2024-11-06T02:42:48.508Z","updated_at":"2025-04-13T12:46:35.786Z","avatar_url":"https://github.com/wingkwong.png","language":"JavaScript","funding_links":["https://github.com/sponsors/wingkwong"],"categories":[],"sub_categories":[],"readme":"# react-quiz-component\n\n:orange_book: React Quiz Component \n[![NPM version](https://img.shields.io/npm/v/react-quiz-component.svg)](https://www.npmjs.com/package/react-quiz-component) [![License](https://img.shields.io/npm/l/react-quiz-component.svg)](https://github.com/wingkwong/react-quiz-component/blob/master/LICENSE) [![Total NPM Download](https://img.shields.io/npm/dt/react-quiz-component.svg)](https://www.npmjs.com/package/react-quiz-component)\n\nreact-quiz-component is a ReactJS component allowing users to attempt a quiz. \n\n## Features\n\n- JSON-based input\n- Quiz landing page showing title, synopsis and number of questions\n- Quiz Input Validator \n- Multiple answers with single correct answer\n- Multiple answers with multiple correct answers\n- Support text and photo answers\n- Continue till answered correctly\n- Show explainations when answered correctly or not\n- Quiz result page at the end with the dropdown filtering all questions or only those you answered correctly or incorrectly\n- Support custom result page\n- Return quiz summary at the page\n- Allow Instant feedback\n- Allow retry until the answer is selected correctly\n- Allow markdown in Question\n- Allow Picture in Question\n- Scoring System\n- Shuffling Questions / Answers\n- Timer Support\n- Support Pause/Resume Timer\n- Shows unanswered questions\n\n## Installing\n\n```\nnpm i react-quiz-component\n```\n\n## Importing react-quiz-component\n\n```js\nimport Quiz from 'react-quiz-component';\n```\n\n## Defining Your Quiz Source\nThe quiz source is a JSON object. You can use [react-quiz-form](https://github.com/wingkwong/react-quiz-form/) to generate it.\n\n```js\nexport const quiz =  {\n  \"quizTitle\": \"React Quiz Component Demo\",\n  \"quizSynopsis\": \"Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim\",\n  \"progressBarColor\": \"#9de1f6\", \n  \"nrOfQuestions\": \"4\",\n  \"questions\": [\n    {\n      \"question\": \"How can you access the state of a component from inside of a member function?\",\n      \"questionType\": \"text\",\n      \"questionPic\": \"https://dummyimage.com/600x400/000/fff\u0026text=X\", // if you need to display Picture in Question\n      \"answerSelectionType\": \"single\",\n      \"answers\": [\n        \"this.getState()\",\n        \"this.prototype.stateValue\",\n        \"this.state\",\n        \"this.values\"\n      ],\n      \"correctAnswer\": \"3\",\n      \"messageForCorrectAnswer\": \"Correct answer. Good job.\",\n      \"messageForIncorrectAnswer\": \"Incorrect answer. Please try again.\",\n      \"explanation\": \"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.\",\n      \"point\": \"20\"\n    },\n    {\n      \"question\": \"ReactJS is developed by _____?\",\n      \"questionType\": \"text\",\n      \"answerSelectionType\": \"single\",\n      \"answers\": [\n        \"Google Engineers\",\n        \"Facebook Engineers\"\n      ],\n      \"correctAnswer\": \"2\",\n      \"messageForCorrectAnswer\": \"Correct answer. Good job.\",\n      \"messageForIncorrectAnswer\": \"Incorrect answer. Please try again.\",\n      \"explanation\": \"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.\",\n      \"point\": \"20\"\n    },\n    {\n      \"question\": \"ReactJS is an MVC based framework?\",\n      \"questionType\": \"text\",\n      \"answerSelectionType\": \"single\",\n      \"answers\": [\n        \"True\",\n        \"False\"\n      ],\n      \"correctAnswer\": \"2\",\n      \"messageForCorrectAnswer\": \"Correct answer. Good job.\",\n      \"messageForIncorrectAnswer\": \"Incorrect answer. Please try again.\",\n      \"explanation\": \"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.\",\n      \"point\": \"10\"\n    },\n    {\n      \"question\": \"Which of the following concepts is/are key to ReactJS?\",\n      \"questionType\": \"text\",\n      \"answerSelectionType\": \"single\",\n      \"answers\": [\n        \"Component-oriented design\",\n        \"Event delegation model\",\n        \"Both of the above\",\n      ],\n      \"correctAnswer\": \"3\",\n      \"messageForCorrectAnswer\": \"Correct answer. Good job.\",\n      \"messageForIncorrectAnswer\": \"Incorrect answer. Please try again.\",\n      \"explanation\": \"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.\",\n      \"point\": \"30\"\n    },\n    {\n      \"question\": \"Lorem ipsum dolor sit amet, consectetur adipiscing elit,\",\n      \"questionType\": \"photo\",\n      \"answerSelectionType\": \"single\",\n      \"answers\": [\n        \"https://dummyimage.com/600x400/000/fff\u0026text=A\",\n        \"https://dummyimage.com/600x400/000/fff\u0026text=B\",\n        \"https://dummyimage.com/600x400/000/fff\u0026text=C\",\n        \"https://dummyimage.com/600x400/000/fff\u0026text=D\"\n      ],\n      \"correctAnswer\": \"1\",\n      \"messageForCorrectAnswer\": \"Correct answer. Good job.\",\n      \"messageForIncorrectAnswer\": \"Incorrect answer. Please try again.\",\n      \"explanation\": \"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.\",\n      \"point\": \"20\"\n    },\n    {\n      \"question\": \"What are the advantages of React JS?\",\n      \"questionType\": \"text\",\n      \"answerSelectionType\": \"multiple\",\n      \"answers\": [\n        \"React can be used on client and as well as server side too\",\n        \"Using React increases readability and makes maintainability easier. Component, Data patterns improves readability and thus makes it easier for manitaining larger apps\",\n        \"React components have lifecycle events that fall into State/Property Updates\",\n        \"React can be used with any other framework (Backbone.js, Angular.js) as it is only a view layer\"\n      ],\n      \"correctAnswer\": [1, 2, 4],\n      \"messageForCorrectAnswer\": \"Correct answer. Good job.\",\n      \"messageForIncorrectAnswer\": \"Incorrect answer. Please try again.\",\n      \"explanation\": \"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.\",\n      \"point\": \"20\"\n    },\n  ]\n} \n```\n\n### Locale Customization\n\nIf you want to use your customized text, you can add appLocale into your quiz source. Below is the default one. \u003cquestionLength\u003e and \u003ccorrectIndexLength\u003e will be replaced dynamically.\n\n```json\n\"appLocale\": {\n  \"landingHeaderText\": \"\u003cquestionLength\u003e Questions\",\n  \"question\": \"Question\",\n  \"startQuizBtn\": \"Start Quiz\",\n  \"resultFilterAll\": \"All\",\n  \"resultFilterCorrect\": \"Correct\",\n  \"resultFilterIncorrect\": \"Incorrect\",\n  \"prevQuestionBtn\": \"Prev\",\n  \"nextQuestionBtn\": \"Next\",\n  \"resultPageHeaderText\": \"You have completed the quiz. You got \u003ccorrectIndexLength\u003e out of \u003cquestionLength\u003e questions.\"\n} \n```\n\n## Passing to Quiz container\n\n```js\nimport { quiz } from './quiz';\n...\n\u003cQuiz quiz={quiz}/\u003e\n```\n\n## Shuffling Question Set\n\n```js\nimport { quiz } from './quiz';\n...\n\u003cQuiz quiz={quiz} shuffle={true}/\u003e\n```\n\n## Shuffling Answer Set\n\n```js\nimport { quiz } from './quiz';\n...\n\u003cQuiz quiz={quiz} shuffleAnswer={true}/\u003e\n```\n\n## Disabling Default Result Page\n\n```js\nimport { quiz } from './quiz';\n...\n\u003cQuiz quiz={quiz} showDefaultResult={false}/\u003e\n```\n\n## Enabling Custom Result Page\n\n* In order to enable custom result page, showDefaultResult has to be false.\n```js\nimport { quiz } from './quiz';\n...\nconst renderCustomResultPage = (obj) =\u003e {\n  console.log(obj);\n  return (\n    \u003cdiv\u003e\n      This is a custom result page. You can use obj to render your custom result page\n    \u003c/div\u003e\n  )\n}\n\n```\n\u003cQuiz quiz={quiz} showDefaultResult={false} customResultPage={renderCustomResultPage}/\u003e\n```\n\n## Enabling onComplete Action\n\n```js\nimport { quiz } from './quiz';\n...\nconst setQuizResult = (obj) =\u003e {\n  console.log(obj);\n  // YOUR LOGIC GOES HERE\n}\n...\n\u003cQuiz quiz={quiz} showDefaultResult={false} onComplete={setQuizResult}/\u003e\n```\n\n## Example of Quiz Summary returned to customResultPage and onComplete\n\n````\nObject\n  numberOfCorrectAnswers: 4\n  numberOfIncorrectAnswers: 1\n  numberOfQuestions: 5\n  questions: Array(5)\n    0: {question: \"Which of the following concepts is/are key to ReactJS?\", questionType: \"text\", answers: Array(3), correctAnswer: \"3\", messageForCorrectAnswer: \"Correct answer. Good job.\", …}\n    1: {question: \"ReactJS is developed by _____?\", questionType: \"text\", answers: Array(2), correctAnswer: \"2\", messageForCorrectAnswer: \"Correct answer. Good job.\", …}\n    2: {question: \"How can you access the state of a component from inside of a member function?\", questionType: \"text\", answers: Array(4), correctAnswer: \"3\", messageForCorrectAnswer: \"Correct answer. Good job.\", …}\n    3: {question: \"Lorem ipsum dolor sit amet, consectetur adipiscing elit,\", questionType: \"photo\", answers: Array(4), correctAnswer: \"1\", messageForCorrectAnswer: \"Correct answer. Good job.\", …}\n    4: {question: \"ReactJS is an MVC based framework?\", questionType: \"text\", answers: Array(2), correctAnswer: \"2\", messageForCorrectAnswer: \"Correct answer. Good job.\", …}\n  userInput: (5) [1, 2, 1, 2, 3]\n  totalPoints: 100\n  correctPoints: 40\n````\n\n## Showing Instant Feedback\n\n```js\nimport { quiz } from './quiz';\n...\n\u003cQuiz quiz={quiz} showInstantFeedback={true}/\u003e\n```\n\n## Answering the same question till it is correct\n\n```js\nimport { quiz } from './quiz';\n...\n\u003cQuiz quiz={quiz} continueTillCorrect={true}/\u003e\n```\n\n\n## Timer Feature\n\n```js\nimport { quiz } from './quiz';\n...\n\u003cQuiz quiz={quiz} timer={60}/\u003e\n```\n\n\n## Pause / Resume Timer Feature\n\n```js\nimport { quiz } from './quiz';\n...\n\u003cQuiz quiz={quiz} timer={60} allowPauseTimer={true}/\u003e\n```\n\n\n## Enable / Disable Progress Bar \n\n```js\nimport { quiz } from './quiz';\n...\n\u003cQuiz quiz={quiz} enableProgressBar={true} /\u003e\n```\n\n## Props\n\n|Name|Type|Default|Required|Description|\n|:--|:--:|:-----:|:--|:----------|\n|quiz|`object`|`null`|Y|Quiz Json Object|\n|shuffle|`boolean`|`false`|N|Shuffle the questions|\n|shuffleAnswer|`boolean`|`false`|N|Shuffle the answers|\n|showDefaultResult|`boolean`|`true`|N|Show the default result page|\n|customResultPage|`function`|`null`|N|A quiz summary object will be returned to the function and users can use it to render its custom result page|\n|onComplete|`function`|`null`|N|A quiz summary object will be returned to the function|\n|showInstantFeedback|`boolean`|`false`|N|Show instant feedback when it is true|\n|continueTillCorrect|`boolean`|`false`|N|Continue to select an answer until it is correct|\n|onQuestionSubmit|`function`|`null`|N|A user response for a question will be returned|\n|disableSynopsis|`boolean`|`false`|N|Disable synopsis before quiz|\n|timer|`number`|`false`|N|Sets timer in seconds|\n|allowPauseTimer|`boolean`|`false`|N|Pause / Resume timer|\n|enableProgressBar|`boolean`|`false`|N|Enable a progress bar|\n\n## Contribution \n\n- Clone the repository\n- Run `npm install`\n- Run `npm run dev`\n- Run `npm run lint`\n- Make a PR to `develop` and describe the changes\n\n## Demo\n\nThe demo is available at https://wingkwong.github.io/react-quiz-component/\n\n## License\n\nThis project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwingkwong%2Freact-quiz-component","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fwingkwong%2Freact-quiz-component","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwingkwong%2Freact-quiz-component/lists"}