ReactJs – Quiz App

In this step by step tutorial, I would teach you how to create a quiz app in React.js. It would be a simple one. You’ll have all the codes you need.

This application would be make up of just three parts:

• index.js: the application starting point. This file is created for us
• QuizData.js: this file contains a list of questions
• Quiz.js: contains the main logic of the application
• styles.css: to style the page

The Video: Quiz App Step by Step Guide in React

So let’s get started!

We’ll be using VS Code as our IDE. Follow

So run the command npx create-react-app quiz-app

Navigate into the new folder that is created, and run the command npm start.

You will see that the application starts at port 3000.

Now you can delete unnecessary files (watch the video to see which files are unnecessary)

Create a folder named components. This folder would hold our components.

Inside the components folder, create the two files Quiz.js and QuizData.js.

The QuizData.js

As mentioned before, this file would contain your list of quiz. I have composed a few of them as you can see below. So copy and paste into the Quizdata.js file.

export const QuizData = [
    {
        id: 0,
        question: `What is the capital of Nigeria?`,
        options: [`New Delhi`, `Abuja`, `Aba`, `Onisha`],
        answer: `Abuja`
    },
    {
        id: 1,
        question: `What is the capital of India?`,
        options: [`Punjab`, `Awka`, `Owerri`, `Enugu`],
        answer: `New Delhi`
    },
    {
        id: 2,
        question: `What is the capital of Australia?`,
        options: [`Mumbai`, `Abuja`, `Warri`, `Sydney`],
        answer: `Sydney`
    },
    {
        id: 3,
        question: `What is the capital of Turkey?`,
        options: [`Bangalore`, `Ankara`, `Istanbul`, `Enugu`],
        answer: `Ankara`
    },
    {
        id: 4,
        question: `What is the capital of Syria?`,
        options: [`Rimadi`, `Damascus`, `Owerri`, `Tel Aviv`],
        answer: `Damascus`
    },
]

Feel free to modify.

Next, we’ll now work on the stylesheet. I have created it. So just copy and paste too.

.App{
    text-align: center;
    font-family: Arial;
}

.selected {
    background: yellow !important;
}

.options {
    padding: 8px;
    border: 3px solid #000;
    cursor: pointer;
    width:100%;
    background-color: white;
    color: steelblue;
    font-weight: bold;
}

ul {
    list-style-type: none;
}

ul li {
    margin: 5px;
}

body{
    display: flex;
    justify-content: center;    
    color:white;
    font-family: 'Segoe UI',;
    font-size: 18px;
    background-color: teal;
 }

Finally, we would not take time to build the Quiz.js component. We would take it bit by bit.

The States

First, the code below is the states that would be needed for the quiz component.

state = {
    userAnswer:null,    //current users answer
    currentIndex:0,  //current questions index
    options: [],       //the four options
    quizEnd: false, //True if it's the last question
    score: 0,      //the Score
    disabled: true,
}

loadQuiz() Function

I have created this function as an arrow function. This function simply sets a question based on the current index

//Component that holds the current quiz
loadQuiz = () => {
    const {currentIndex} = this.state //get the current index
    this.setState(() => {
        return {
            question: QuizData[currentIndex].question,
            options : QuizData[currentIndex].options,
            answer: QuizData[currentIndex].answer          
        }
    }
    )
}

nextQuestionHandler()

Listens to click event of the Next button. It does two things: (1) increament the current index (2) if the userAnswer is correct, also increment the score

//Handles Click event for the next button
nextQuestionHander = () => {
    const {userAnswer, answer, score} = this.state
    this.setState({
        currentIndex: this.state.currentIndex + 1
    })

    //Check for correct answer and increment score
    if(userAnswer === answer){
        this.setState({
            score: score + 1
        })
    }
}

Note: userAnswer should be set to null at this point when next is clicked

componentDidMount()

As you know, this is a lifecycle method. It get’s executed once when the component is mounted. We can load the first quiz at this time

//Load the quiz once the component mounts
componentDidMount(){
    this.loadQuiz();
}

componentDidUpdate()

This is another lifecycle method. It called whenever there is a change in state. In this case, if the current index changes, then we have to set the question and also disable the options so that user would not be able to select another option.

So copy and paste it as well

//Update the component
componentDidUpdate(prevProps, prevState){
    const{currentIndex} = this.state;
    if(this.state.currentIndex !== prevState.currentIndex){
        this.setState(() => {
            return {
                disabled: true,
                question: QuizData[currentIndex].question,
                options : QuizData[currentIndex].options,
                answer: QuizData[currentIndex].answer          
            }
        });

    }
}

checkAnswer()

Sets the userAnswer state to the option selected by the user

//Check the answer
checkAnswer = answer => {
    this.setState({
        userAnswer: answer,
        disabled:false
    })
}

finishHandler()

This function simply sets the quizEnd state to true. It is called when the user clicks on the Finish button

//Responds to the click of the finish button
finishHandler =() => {
    if(this.state.currentIndex === QuizData.length -1){
        this.setState({
            quizEnd:true
        })
    }

}

dsfasdf

The render() Function

Since this function contains all the logic, it is explained in the video. Meanwhile, here are all the files