Build a Simple Next.js Interactive Web-Based Quiz App

Written by

javascriptdebugged

in

Quizzes are a fantastic way to engage users, test knowledge, and provide valuable feedback. In the digital age, web-based quizzes are more popular than ever, offering an accessible and interactive experience. This tutorial will guide you, step-by-step, through building a simple, yet functional, quiz application using Next.js. We’ll cover everything from setting up your project to implementing question logic, scoring, and providing user feedback. Whether you’re a beginner looking to learn Next.js or an intermediate developer seeking to expand your skillset, this project is designed to be both educational and practical. By the end, you’ll have a fully working quiz app you can customize and expand upon.

Why Build a Quiz App?

Creating a quiz app offers several benefits. Firstly, it allows you to learn and practice fundamental web development concepts, including state management, event handling, and conditional rendering. Secondly, it provides a tangible project you can showcase in your portfolio, demonstrating your ability to build interactive web applications. Finally, it’s a fun and engaging way to learn – both for you, the developer, and for the users who interact with your quiz. This tutorial focuses on building a quiz application with multiple-choice questions, which is a common and easily understandable format. This allows us to concentrate on the core Next.js concepts without getting bogged down in overly complex question types.

Prerequisites

Before we begin, ensure you have the following installed on your system:

  • Node.js (version 16 or higher)
  • npm or yarn (package manager)
  • A code editor (VS Code, Sublime Text, etc.)

Familiarity with HTML, CSS, and JavaScript is also recommended. While we’ll explain the code as we go, having a basic understanding of these technologies will make the process smoother. Don’t worry if you’re not an expert; this tutorial is designed to be accessible to developers of varying skill levels.

Setting Up Your Next.js Project

Let’s start by creating a new Next.js project. Open your terminal and run the following command:

npx create-next-app quiz-app

This command creates a new directory called quiz-app and initializes a Next.js project inside it. Navigate into the project directory:

cd quiz-app

Now, start the development server:

npm run dev

Open your web browser and go to http://localhost:3000. You should see the default Next.js welcome page. This confirms that your project is set up correctly.

Project Structure Overview

Before we dive into the code, let’s briefly look at the project structure. Next.js projects typically have the following structure:

  • pages/: This directory contains your application’s pages. Each file in this directory represents a route in your application. For example, pages/index.js corresponds to the root route (/).
  • components/: This directory is where you’ll store reusable React components.
  • public/: This directory holds static assets like images, fonts, and other files.
  • styles/: This directory contains your CSS or styling files.
  • package.json: This file lists your project’s dependencies and scripts.

We’ll be primarily working within the pages/ and components/ directories for this project.

Creating the Quiz Component

Let’s create the core of our quiz application: the Quiz component. Create a new file named Quiz.js inside the components/ directory. This component will handle the quiz logic, display questions, and manage user interactions.

Here’s the basic structure of the Quiz.js component:

// components/Quiz.js
import { useState } from 'react';

const Quiz = () => {
  // State variables will go here

  return (
    <div>
      <h2>Quiz App</h2>
      {/* Quiz content will go here */}
    </div>
  );
};

export default Quiz;

This code imports the useState hook from React, which we’ll use to manage the quiz’s state. It also defines a basic functional component named Quiz, which renders a heading. Now, let’s add some state variables to manage the quiz data and user interactions.

Adding State Variables

We need several state variables to keep track of the quiz’s progress and the user’s answers. Add the following state variables inside the Quiz component, before the return statement:

  const [currentQuestion, setCurrentQuestion] = useState(0);
  const [score, setScore] = useState(0);
  const [showScore, setShowScore] = useState(false);
  const [questions, setQuestions] = useState([
    {
      questionText: 'What is the capital of France?',
      answerOptions: [
        { answerText: 'New York', isCorrect: false },
        { answerText: 'London', isCorrect: false },
        { answerText: 'Paris', isCorrect: true },
        { answerText: 'Dublin', isCorrect: false },
      ],
    },
    {
      questionText: 'Who is CEO of Tesla?',
      answerOptions: [
        { answerText: 'Jeff Bezos', isCorrect: false },
        { answerText: 'Elon Musk', isCorrect: true },
        { answerText: 'Bill Gates', isCorrect: false },
        { answerText: 'Tony Stark', isCorrect: false },
      ],
    },
    {
      questionText: 'The iPhone was created by which company?',
      answerOptions: [
        { answerText: 'Apple', isCorrect: true },
        { answerText: 'Intel', isCorrect: false },
        { answerText: 'Amazon', isCorrect: false },
        { answerText: 'Microsoft', isCorrect: false },
      ],
    },
    {
      questionText: 'How many Harry Potter books are there?',
      answerOptions: [
        { answerText: '1', isCorrect: false },
        { answerText: '4', isCorrect: false },
        { answerText: '6', isCorrect: false },
        { answerText: '7', isCorrect: true },
      ],
    },
  ]);

Let’s break down these state variables:

  • currentQuestion: This variable keeps track of the index of the currently displayed question. It starts at 0, representing the first question.
  • score: This variable stores the user’s current score. It starts at 0.
  • showScore: This boolean variable indicates whether the final score should be displayed (true) or the quiz questions should be shown (false).
  • questions: This array holds the quiz questions and their corresponding answer options. Each object in the array represents a question. Each question object has a questionText property (the question itself) and an answerOptions array. Each element in the answerOptions array is an object with an answerText and a isCorrect property.

Displaying Questions and Answers

Now, let’s render the questions and answer options within our Quiz component. Replace the comment {/* Quiz content will go here */} in the return statement with the following code:


  {showScore ? (
    <div className="score-section">
      You scored {score} out of {questions.length}
    </div>
  ) : (
    <>
      <div className="question-section">
        <div className="question-count">
          <span>Question {currentQuestion + 1}/{questions.length}</span>
        </div>
        <div className="question-text">{questions[currentQuestion].questionText}</div>
      </div>
      <div className="answer-section">
        {questions[currentQuestion].answerOptions.map((answerOption, index) => (
          <button onClick={() => handleAnswerClick(answerOption.isCorrect)} key={index}>
            {answerOption.answerText}
          </button>
        ))}
      </div>
    </>
  )
}

This code does the following:

  • It uses a ternary operator to conditionally render either the score section (if showScore is true) or the quiz questions (if showScore is false).
  • If showScore is true, it displays the user’s score and the total number of questions.
  • If showScore is false, it displays the current question number, the question text, and the answer options.
  • It uses the map function to iterate over the answerOptions array for the current question and render a button for each answer option.
  • The handleAnswerClick function (which we’ll define next) is called when an answer button is clicked.

Implementing the Answer Click Handler

Next, let’s implement the handleAnswerClick function. This function will be called when the user clicks on an answer button. It will check if the selected answer is correct, update the score, and move to the next question.

Add the following code inside the Quiz component, before the return statement:


  const handleAnswerClick = (isCorrect) => {
    if (isCorrect) {
      setScore(score + 1);
    }

    const nextQuestion = currentQuestion + 1;
    if (nextQuestion < questions.length) {
      setCurrentQuestion(nextQuestion);
    } else {
      setShowScore(true);
    }
  };

Here’s what this function does:

  • It takes a boolean isCorrect parameter, which indicates whether the selected answer is correct.
  • If isCorrect is true, it increments the score.
  • It calculates the index of the next question (nextQuestion).
  • If nextQuestion is within the bounds of the questions array, it updates currentQuestion to display the next question.
  • If nextQuestion is out of bounds (i.e., the quiz is over), it sets showScore to true, displaying the final score.

Importing and Using the Quiz Component

Now that we’ve created the Quiz component, let’s import it into our main page (pages/index.js) and display it.

Open pages/index.js and replace its content with the following code:

// pages/index.js
import Quiz from '../components/Quiz';

const Home = () => {
  return (
    <div className="app">
      <Quiz />
    </div>
  );
};

export default Home;

This code imports the Quiz component and renders it within a div with the class name app. This is the main layout of our application. Next, we will add some styling to make the app look better.

Styling the Quiz App

To make our quiz app visually appealing, let’s add some basic CSS. Create a new file named Quiz.css inside the components/ directory. Add the following CSS rules to this file:

.app {
  width: 100%;
  min-height: 100vh;
  background-color: #282c34;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20px;
  color: #fff;
  font-family: sans-serif;
}

.score-section {
  margin-top: 20px;
  font-size: 1.5rem;
}

.question-section {
  width: 100%;
  background-color: #fff;
  color: #282c34;
  border-radius: 15px;
  padding: 20px;
  box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.2);
  margin-bottom: 20px;
}

.question-count {
  margin-bottom: 10px;
  font-size: 1.2rem;
}

.question-text {
  font-size: 1.5rem;
  margin-bottom: 10px;
}

.answer-section {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}

button {
  padding: 15px;
  font-size: 1.2rem;
  border: none;
  border-radius: 15px;
  background-color: #3498db;
  color: #fff;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

button:hover {
  background-color: #2980b9;
}

/* Add more styles as needed */

Next, import this CSS file into your Quiz.js component. Add the following import statement at the top of your Quiz.js file:

import './Quiz.css';

Finally, add the app class to the main div in pages/index.js and also add appropriate classes to elements in the Quiz.js component, as shown in the code snippets provided earlier. This will apply the styles to your quiz app.

Adding More Questions

To expand the quiz, simply add more question objects to the questions array in the Quiz.js component. Each question object should have a questionText property and an answerOptions array. Make sure to set the isCorrect property to true for the correct answer.

For example, to add a new question, you could add the following object to the questions array:

    {
      questionText: 'What is the largest planet in our solar system?',
      answerOptions: [
        { answerText: 'Earth', isCorrect: false },
        { answerText: 'Jupiter', isCorrect: true },
        { answerText: 'Mars', isCorrect: false },
        { answerText: 'Saturn', isCorrect: false },
      ],
    },

Common Mistakes and How to Fix Them

Here are some common mistakes beginners encounter and how to fix them:

  • Incorrect State Updates: Make sure you’re using the correct state update functions (e.g., setScore, setCurrentQuestion) to update your state variables. Directly modifying state variables can lead to unexpected behavior.
  • Incorrect Answer Logic: Double-check the isCorrect property in your answer options to ensure it’s set correctly. Also, verify that your handleAnswerClick function correctly updates the score based on the selected answer.
  • Missing Imports: Ensure you’ve imported all necessary components and hooks (e.g., useState) at the top of your file.
  • CSS Conflicts: If your styles aren’t appearing as expected, check for any CSS conflicts. Make sure your CSS selectors are specific enough to target the correct elements. Also, inspect your browser’s developer tools to see if there are any CSS errors.
  • Incorrect Component Rendering: Ensure that you’re correctly rendering the components and passing the necessary props. Check the console for any errors related to rendering.

Key Takeaways

In this tutorial, we’ve built a simple quiz app using Next.js. We covered the following key concepts:

  • Setting up a Next.js project.
  • Creating a React component.
  • Using the useState hook to manage state.
  • Rendering questions and answer options dynamically.
  • Handling user interactions (answer clicks).
  • Implementing scoring and displaying the final score.
  • Adding basic CSS styling.

This project provides a solid foundation for understanding the basics of Next.js and building interactive web applications. You can now extend this app by adding features like:

  • Different question types (e.g., true/false, fill-in-the-blank).
  • Timer for each question.
  • User authentication.
  • Leaderboards.
  • More advanced styling and UI improvements.

FAQ

Here are some frequently asked questions about building a quiz app with Next.js:

  1. Can I use a database to store the questions? Yes, you can. You can integrate a database (like MongoDB, PostgreSQL, or Firebase) to store and retrieve your quiz questions. You’ll need to install the necessary database client library and write code to interact with the database.
  2. How can I make the quiz responsive? You can use CSS media queries or a CSS framework like Bootstrap or Tailwind CSS to make your quiz app responsive. This will ensure that your quiz looks good on different screen sizes.
  3. How do I deploy my quiz app? You can deploy your Next.js app to platforms like Vercel, Netlify, or AWS. These platforms provide easy deployment and hosting options.
  4. Can I add animations to my quiz app? Yes, you can use CSS animations or a JavaScript animation library (like Framer Motion) to add animations to your quiz app.
  5. How can I improve the user experience? You can improve the user experience by adding features like progress indicators, feedback on correct/incorrect answers, and clear instructions.

Congratulations! You’ve successfully built a simple quiz app with Next.js. This project is a great starting point for exploring the power of Next.js and building more complex web applications. Remember that practice is key. Experiment with different features, modify the code, and try to build your own unique quiz app. The more you practice, the more confident you’ll become in your web development skills. Keep coding, keep learning, and enjoy the process of building!

More posts