Create a Quiz App using ReactJS

08 Oct, 2020
React is a JavaScript library used to develop interactive user interfaces. It is managed by Facebook and a community of individual developers and companies. react mainly focus on developing single-page web or mobile applications. here, we will create a quiz app to understand the basics of reactjs.
Modules required:
npm
React
React Bootstrapnpm install react-bootstrap bootstrap
npm install react-bootstrap bootstrap
Basic setup:
Start a project by the following command –
npx create-react-app quiz
NPX is a package runner tool that comes with npm 5.2+, npx is easy to use CLI tools. npx is used for executing Node packages. It greatly simplifies a number of things one of which is checked/run a node package quickly without installing it locally or globally.
now, goto the folder create
cd quiz
Start the server- Start the server by typing following command in terminal –
npm start
open http://localhost:3000/
Change directory to src –
cd src
Delete every thing inside the directory
rm *
Now create index.js files
touch index.js 
This file will render our app to html file which is in public folder now, create a folder name components with files src/components/QuestionBox.js and src/components/ResultBox.js to hold our app components and a folder question with file src/question/index.js to hold our questions.
mkdir components && cd components && touch app.js
mkdir question && cd question && index.js
Edit src/index.js fileThis file contains our app logic.
import React, {Component} from "react";import ReactDOM from "react-dom";import "./style.css";import questionAPI from './question';import QuestionBox from './components/QuestionBox';import Result from './components/ResultBox';  class Quiz extends Component {  constructor() {    super();    this.state = {      questionBank: [],      score: 0,      responses: 0    };  }    // Function to get question from ./question  getQuestions = () => {    questionAPI().then(question => {      this.setState({questionBank: question});    });  };    // Set state back to default and call function  playAgain = () => {    this.getQuestions();    this.setState({score: 0, responses: 0});  };    // Function to compute scores  computeAnswer = (answer, correctAns) => {    if (answer === correctAns) {      this.setState({        score: this.state.score + 1      });    }    this.setState({      responses: this.state.responses < 5        ? this.state.responses + 1        : 5    });  };    // componentDidMount function to get question  componentDidMount() {    this.getQuestions();  }    render() {    return (<div className="container">      <div className="title">        QuizOn      </div>        {this.state.questionBank.length > 0 &&        this.state.responses < 5 &&        this.state.questionBank.map(({question, answers,       correct, questionId}) => <QuestionBox question=       {question} options={answers} key={questionId}       selected={answer => this.computeAnswer(answer, correct)}/>)}        {        this.state.responses === 5          ? (<Result score={this.state.score}            playAgain={this.playAgain}/>)          : null      }      </div>)  }}  ReactDOM.render(<Quiz/>, document.getElementById("root"));
Edit src/question/index.js file: This file contains all question which will be displayed.
const qBank = [  {    question:      "how build the app ?",    answers: ["vinayak", "sarthak", "somil", "devesh"],    correct: "vinayak",    questionId: "099099"  },  {    question:      "how build the app ?",    answers: ["vinayak", "sarthak", "somil", "devesh"],    correct: "vinayak",    questionId: "093909"  },  {    question:      "how build the app ?",    answers: ["vinayak", "sarthak", "somil", "devesh"],    correct: "vinayak",    questionId: "009039"  },  {    question:      "how build the app ?",    answers: ["vinayak", "sarthak", "somil", "devesh"],    correct: "vinayak",    questionId: "090089"  },  {    question:      "how build the app ?",    answers: ["vinayak", "sarthak", "somil", "devesh"],    correct: "vinayak",    questionId: "01010101"  },  {    question:      "how build the app ?",    answers: ["vinayak", "sarthak", "somil", "devesh"],    correct: "vinayak",    questionId: "092299"  },  {    question:      "how build the app ?",    answers: ["vinayak", "sarthak", "somil", "devesh"],    correct: "vinayak",    questionId: "099099"  },  {    question:      "how build the app ?",    answers: ["vinayak", "sarthak", "somil", "devesh"],    correct: "vinayak",    questionId: "222099"  },  {    question:      "how build the app ?",    answers: ["vinayak", "sarthak", "somil", "devesh"],    correct: "vinayak",    questionId: "2222099"  },  {    question:      "how build the app ?",    answers: ["vinayak", "sarthak", "somil", "devesh"],    correct: "vinayak",    questionId: "09922099"  },  {    question:      "how build the app ?",    answers: ["vinayak", "sarthak", "somil", "devesh"],    correct: "vinayak",    questionId: "222292099"  },  {    question:      "how build the app ?",    answers: ["vinayak", "sarthak", "somil", "devesh"],    correct: "vinayak",    questionId: "0998999099"  },  {    question:      "how build the app ?",    answers: ["vinayak", "sarthak", "somil", "devesh"],    correct: "vinayak",    questionId: "099099"  },  {    question:      "how build the app ?",    answers: ["vinayak", "sarthak", "somil", "devesh"],    correct: "vinayak",    questionId: "099099"  },  {    question:      "how build the app ?",    answers: ["vinayak", "sarthak", "somil", "devesh"],    correct: "vinayak",    questionId: "099099"  },  {    question:      "how build the app ?",    answers: ["vinayak", "sarthak", "somil", "devesh"],    correct: "vinayak",    questionId: "09459099"  },  {    question:      "how build the app ?",    answers: ["vinayak", "sarthak", "somil", "devesh"],    correct: "vinayak",    questionId: "0912219099"  },  ];  // n = 5 to export 5 questionexport default (n = 5) =>  Promise.resolve(qBank.sort(() => 0.5 - Math.random()).slice(0, n));
Edit src/components/QuestionBox.js file: This file makes question box with buttons.
import React, {useState} from "react";import "../style.css";  // Function to question inside our appconst QuestionBox = ({ question, options, selected}) => {  const [answer, setAnswer] = useState(options);  return (    <div className="questionBox">        <div className="question">{question}</div>        {answer.map((text, index) => (          <button              key={index}              className="answerBtn"              onClick={()=>{                    setAnswer();                    selected(text);                  }}> {text}         </button>        ))}    </div>  )};  export default QuestionBox;
Edit src/components/ResultBox.js file: This file displays the result.
import React from 'react';import "../style.css";  const Result = ({score, playAgain}) => (  <div className="score-board">    <div className="score"> Your score is {score} / 5 correct answer ! ! ! </div>    <button className="playBtn" onClick={playAgain} > Play Again </button>  </div>)  export default Result;
Save all files and start the server:
npm start
open http://localhost:3000/ URL in the browser. It will display the result.
react-js
Web Technologies
Write From Home
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.