Create a Quiz App using ReactJS

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 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 file
This 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 question
export 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 app
const 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.