In this tutorial, I would take you through building a simple quiz application in React. As we go through, I would be explaining the pieces of codes as well.<\/p>\n
We would cover the following:<\/p>\n
Also, remember to go along with the video.<\/p>\n
<\/p>\n
<\/p>\n
The question data bank is simply a list of questions along with options and a correct answer. Each item in the data bank has<\/p>\n
To set up the question service, create a folder named components in the src folder. Then create a file called QuizData.js in the components folder. Add the following inside. Feel free to change up the questions list, or even add more questions!<\/p>\n
export const QuizData = [\n {\n id: 0,\n question: `What is the capital of Nigeria?`,\n options: [`New Delhi`, `Abuja`, `Owerri`, `Enugu`],\n answer: `Abuja`\n },\n {\n id: 0,\n question: `What is the capital of India?`,\n options: [`New Delhi`, `Abuja`, `Mumbai`, `Aba`],\n answer: `New Delhi`\n },\n {\n id: 0,\n question: `What is the capital of Australia?`,\n options: [`Melbourne`, `Akokwa`, `Owerri`, `Sydney`],\n answer: `Sydney`\n },\n {\n id: 0,\n question: `What is the capital of Turkey?`,\n options: [`Rijadh`, `Ankara`, `Istanbul`, `Abakaliki`],\n answer: `Ankara`\n },\n {\n id: 0,\n question: `What is the capital of Syria?`,\n options: [`Syria`, `Damascus`, `Anambra`, `Enugu`],\n answer: `Damascus`\n },\n]\n<\/pre>\n <\/p>\n
Step 2: Add a Stylesheet<\/strong><\/h5>\nLet’s now add a stylesheet to control the appearance of the application.\u00a0 The stylesheet is given below. So just create a file in the src folder and add the styles in it<\/p>\n
.App{\n text-align: center;\n font-family: Arial;\n}\n\n\/* The answer selecteed by the user *\/\n.selected {\n background-color: orange;\n}\n\n\/* The list of options *\/\n.options {\n padding: 8px;\n border: 2px solid #000;\n cursor: pointer;\n}\n\nul {\n list-style-type: none;\n}\n\nbody{\n font-family: Verdana;\n font-size: 18px;\n background-color: #2980B9; \n}\n<\/pre>\n <\/p>\n
Step 3: Create the Index.js File (App component)<\/strong><\/h5>\nThis file would be the entry point of our quiz application. I would contain the App function which would be mounted at the root element of the index.html file. You can take a look at the index.html file locate inside the public folder (but don’t modify it!)<\/p>\n
import React from 'react'\nimport ReactDOM from 'react-dom'\nimport Quiz from '.\/components\/Quiz'\n\nimport '.\/styles.css';\n\nfunction App() {\n return (\n <div<\/span> className=<\/span>\"App\"<\/span>><\/span>\n <Quiz<\/span> \/><\/span>\n <\/div><\/span>\n )\n}\n\nconst rootElement = document.getElementById('root');\nReactDOM.render(<App><\/App><\/span>, rootElement) \/\/renders the component(first parameter) as a child of the element(second parameter)\n<\/pre>\n <\/p>\n
Step 4: Create the Quiz Component<\/strong><\/h5>\nThis is the component that would manage all the logic associated with the quiz.\u00a0 This would be a class component.<\/p>\n
So create a file called Quiz.js inside the components folder. The initial content is shown below:<\/p>\n
import React, { Component } from 'react'\nimport {QuizData} from '.\/QuizData';\n\nexport class Quiz extends Component {\n render() {\n return (\n <div><\/span>\n \n <\/div><\/span>\n )\n }\n}\n\nexport default Quiz\n<\/pre>\n <\/p>\n
Note that we have imported the QuizData component as well as the React.<\/p>\n
At this point, you have completed the Part 1 of out quiz application. In the next part we would now work on displaying the questions and also responding to user actions. I recommend you watch the video as well.<\/p>\n","protected":false},"excerpt":{"rendered":"
In this tutorial, I would take you through building a simple quiz application in React. As we go through, I would be explaining the pieces … <\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"pagelayer_contact_templates":[],"_pagelayer_content":"","footnotes":""},"categories":[414],"tags":[],"class_list":["post-1955","post","type-post","status-publish","format-standard","hentry","category-programming"],"_links":{"self":[{"href":"https:\/\/kindsonthegenius.com\/blog\/wp-json\/wp\/v2\/posts\/1955","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/kindsonthegenius.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/kindsonthegenius.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/kindsonthegenius.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/kindsonthegenius.com\/blog\/wp-json\/wp\/v2\/comments?post=1955"}],"version-history":[{"count":1,"href":"https:\/\/kindsonthegenius.com\/blog\/wp-json\/wp\/v2\/posts\/1955\/revisions"}],"predecessor-version":[{"id":2123,"href":"https:\/\/kindsonthegenius.com\/blog\/wp-json\/wp\/v2\/posts\/1955\/revisions\/2123"}],"wp:attachment":[{"href":"https:\/\/kindsonthegenius.com\/blog\/wp-json\/wp\/v2\/media?parent=1955"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/kindsonthegenius.com\/blog\/wp-json\/wp\/v2\/categories?post=1955"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/kindsonthegenius.com\/blog\/wp-json\/wp\/v2\/tags?post=1955"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}