Next.js: Build a Simple Interactive Quiz App

Written by

javascriptdebugged

in

Quizzes are a fantastic way to engage users, test their knowledge, and provide a fun learning experience. Building a quiz app might seem daunting, but with Next.js, it becomes surprisingly manageable. This tutorial will guide you through creating a simple, interactive quiz app from scratch, perfect for beginners and intermediate developers looking to expand their Next.js skills. We’ll cover everything from setting up your project to implementing question logic and providing user feedback. By the end, you’ll have a fully functional quiz app that you can customize and expand upon.

Why Build a Quiz App?

Quiz apps are versatile. They can be used for educational purposes, entertainment, or even marketing. Think about it: a quiz can assess a user’s understanding of a topic, provide personalized recommendations, or simply entertain them with a fun, interactive experience. Building a quiz app is also a great learning exercise. It allows you to practice fundamental web development concepts like state management, event handling, and conditional rendering, all while creating something engaging and useful.

What We’ll Build

Our quiz app will be straightforward. It will:

  • Display a series of questions.
  • Allow users to select an answer for each question.
  • Provide feedback on whether the answer is correct or incorrect.
  • Track the user’s score.
  • Display the final score at the end of the quiz.

This project will focus on the core functionality, allowing you to add more features later. We’ll use Next.js for its server-side rendering capabilities, which improve SEO and initial load times. We will also use basic HTML, CSS, and JavaScript, keeping things simple to focus on the Next.js fundamentals.

Prerequisites

Before you start, make sure you have the following:

  • Node.js and npm (or yarn) installed on your machine.
  • A basic understanding of HTML, CSS, and JavaScript.
  • A code editor (like VS Code) installed.

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 will create a new directory called quiz-app with all the necessary files for a Next.js project. Navigate into the project directory:

cd quiz-app

Now, start the development server:

npm run dev

Open your 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

Let’s take a quick look at the project structure. The key directories and files are:

  • pages/: This is where you’ll put your pages. Each file in this directory represents a route in your application. For example, pages/index.js will be accessible at the root path (/).
  • components/: This is where you can create reusable React components.
  • styles/: This directory contains your CSS files.
  • public/: This directory is for static assets like images.
  • package.json: This file contains your project’s dependencies and scripts.

Creating the Quiz Component

We’ll create a component to handle the quiz logic and display. Create a new file named Quiz.js inside the components directory. This component will handle displaying the questions, managing the user’s answers, and calculating the score.

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

import { useState } from 'react';

const Quiz = () => {
  // State variables will go here
  return (
    <div>
      {/* Quiz content will go here */}
    </div>
  );
};

export default Quiz;

Let’s add some state variables. We’ll need to keep track of:

  • The current question index.
  • The user’s selected answer for each question.
  • The user’s score.
  • Whether the quiz has been completed.
  • The questions themselves.

Modify the Quiz.js component to include these state variables:

import { useState } from 'react';

const Quiz = () => {
  const [currentQuestion, setCurrentQuestion] = useState(0);
  const [answers, setAnswers] = useState({});
  const [score, setScore] = useState(0);
  const [quizCompleted, setQuizCompleted] = useState(false);
  const [questions, setQuestions] = useState([
    {
      question: 'What is the capital of France?',
      options: ['Berlin', 'Madrid', 'Paris', 'Rome'],
      correctAnswer: 'Paris',
    },
    {
      question: 'What is the highest mountain in the world?',
      options: ['K2', 'Mount Everest', 'Kangchenjunga', 'Lhotse'],
      correctAnswer: 'Mount Everest',
    },
    // Add more questions here
  ]);

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

export default Quiz;

We’ve initialized the state variables. The questions array now contains two sample questions. You can add more questions as needed. Each question object has a question property, an options array, and a correctAnswer property.

Displaying the Questions

Now, let’s display the questions and answer options. Inside the Quiz.js component, add the following code to render the current question and its options. We’ll use a simple <div> for the question and <button> elements for the answer options.

import { useState } from 'react';

const Quiz = () => {
  const [currentQuestion, setCurrentQuestion] = useState(0);
  const [answers, setAnswers] = useState({});
  const [score, setScore] = useState(0);
  const [quizCompleted, setQuizCompleted] = useState(false);
  const [questions, setQuestions] = useState([
    {
      question: 'What is the capital of France?',
      options: ['Berlin', 'Madrid', 'Paris', 'Rome'],
      correctAnswer: 'Paris',
    },
    {
      question: 'What is the highest mountain in the world?',
      options: ['K2', 'Mount Everest', 'Kangchenjunga', 'Lhotse'],
      correctAnswer: 'Mount Everest',
    },
  ]);

  const question = questions[currentQuestion];

  return (
    <div>
      {quizCompleted ? (
        <div>
          <h2>Quiz Completed!</h2>
          <p>Your score: {score} / {questions.length}</p>
        </div>
      ) : (
        <div>
          <h2>Question {currentQuestion + 1} / {questions.length}</h2>
          <p>{question.question}</p>
          <div>
            {question.options.map((option, index) => (
              <button key={index}>{option}</button>
            ))}
          </div>
        </div>
      )}
    </div>
  );
};

export default Quiz;

Here, we are conditionally rendering the quiz content based on the quizCompleted state. If the quiz is not completed, we display the current question and its options. We use the .map() method to iterate through the options array and render a button for each option. We also display the current question number and the total number of questions.

Handling User Input

Next, we need to handle user input. When a user clicks an answer option, we need to:

  1. Update the answers state with the user’s selected answer for the current question.
  2. Move to the next question.
  3. Check if the quiz is complete.

Add an handleAnswerClick function inside the Quiz.js component:

import { useState } from 'react';

const Quiz = () => {
  const [currentQuestion, setCurrentQuestion] = useState(0);
  const [answers, setAnswers] = useState({});
  const [score, setScore] = useState(0);
  const [quizCompleted, setQuizCompleted] = useState(false);
  const [questions, setQuestions] = useState([
    {
      question: 'What is the capital of France?',
      options: ['Berlin', 'Madrid', 'Paris', 'Rome'],
      correctAnswer: 'Paris',
    },
    {
      question: 'What is the highest mountain in the world?',
      options: ['K2', 'Mount Everest', 'Kangchenjunga', 'Lhotse'],
      correctAnswer: 'Mount Everest',
    },
  ]);

  const question = questions[currentQuestion];

  const handleAnswerClick = (selectedAnswer) => {
    // 1. Update the answers state
    setAnswers(prevAnswers => ({
      ...prevAnswers,
      [currentQuestion]: selectedAnswer,
    }));

    // 2. Move to the next question or complete the quiz
    if (currentQuestion < questions.length - 1) {
      setCurrentQuestion(currentQuestion + 1);
    } else {
      // Calculate the score and set quizCompleted to true
      let newScore = 0;
      questions.forEach((q, index) => {
        if (answers[index] === q.correctAnswer) {
          newScore++;
        }
      });
      setScore(newScore);
      setQuizCompleted(true);
    }
  };

  return (
    <div>
      {quizCompleted ? (
        <div>
          <h2>Quiz Completed!</h2>
          <p>Your score: {score} / {questions.length}</p>
        </div>
      ) : (
        <div>
          <h2>Question {currentQuestion + 1} / {questions.length}</h2>
          <p>{question.question}</p>
          <div>
            {question.options.map((option, index) => (
              <button key={index} onClick={() => handleAnswerClick(option)}>{option}</button>
            ))}
          </div>
        </div>
      )}
    </div>
  );
};

export default Quiz;

In this function, we first update the answers state using the spread operator to preserve the previous answers and add the selected answer for the current question. Then, we check if there are more questions. If so, we move to the next question by incrementing currentQuestion. If not, we calculate the score by comparing the user’s answers to the correct answers and update the score and set quizCompleted to true.

Inside the map function that renders the answer options, we add an onClick event handler to each button. When a button is clicked, the handleAnswerClick function is called, passing the selected answer as an argument.

Displaying the Quiz in the Main Page

Now that we’ve created the Quiz component, let’s display it on our main page (pages/index.js). Open pages/index.js and modify it as follows:

import Quiz from '../components/Quiz';

export default function Home() {
  return (
    <div>
      <main>
        <Quiz />
      </main>
    </div>
  );
}

We import the Quiz component and render it inside the <main> element. Now, when you visit http://localhost:3000, you should see your quiz app!

Adding Styling

The quiz app is functional, but it could use some styling to make it visually appealing. We’ll add some basic CSS to improve the appearance. Create a new file named styles/Quiz.module.css. Then add the following code:

.quizContainer {
  max-width: 600px;
  margin: 20px auto;
  padding: 20px;
  border: 1px solid #ccc;
  border-radius: 5px;
  background-color: #f9f9f9;
}

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

.options {
  display: flex;
  flex-direction: column;
}

.options button {
  padding: 10px;
  margin-bottom: 10px;
  border: 1px solid #ddd;
  border-radius: 5px;
  background-color: #fff;
  cursor: pointer;
  text-align: left;
}

.options button:hover {
  background-color: #f0f0f0;
}

.options button:focus {
  outline: none;
  border-color: #0070f3;
  box-shadow: 0 0 0 2px rgba(0, 112, 243, 0.2);
}

.score {
  font-size: 1.2rem;
  font-weight: bold;
  margin-top: 20px;
}

This CSS provides basic styling for the quiz container, questions, answer options, and score display. Feel free to customize the styles to your liking.

Now, import the CSS module into the Quiz.js component and apply the styles. Modify your Quiz.js component as follows:

import { useState } from 'react';
import styles from '../styles/Quiz.module.css';

const Quiz = () => {
  const [currentQuestion, setCurrentQuestion] = useState(0);
  const [answers, setAnswers] = useState({});
  const [score, setScore] = useState(0);
  const [quizCompleted, setQuizCompleted] = useState(false);
  const [questions, setQuestions] = useState([
    {
      question: 'What is the capital of France?',
      options: ['Berlin', 'Madrid', 'Paris', 'Rome'],
      correctAnswer: 'Paris',
    },
    {
      question: 'What is the highest mountain in the world?',
      options: ['K2', 'Mount Everest', 'Kangchenjunga', 'Lhotse'],
      correctAnswer: 'Mount Everest',
    },
  ]);

  const question = questions[currentQuestion];

  const handleAnswerClick = (selectedAnswer) => {
    setAnswers(prevAnswers => ({
      ...prevAnswers,
      [currentQuestion]: selectedAnswer,
    }));

    if (currentQuestion < questions.length - 1) {
      setCurrentQuestion(currentQuestion + 1);
    } else {
      let newScore = 0;
      questions.forEach((q, index) => {
        if (answers[index] === q.correctAnswer) {
          newScore++;
        }
      });
      setScore(newScore);
      setQuizCompleted(true);
    }
  };

  return (
    <div className={styles.quizContainer}>
      {quizCompleted ? (
        <div>
          <h2>Quiz Completed!</h2>
          <p className={styles.score}>Your score: {score} / {questions.length}</p>
        </div>
      ) : (
        <div>
          <h2>Question {currentQuestion + 1} / {questions.length}</h2>
          <p className={styles.question}>{question.question}</p>
          <div className={styles.options}>
            {question.options.map((option, index) => (
              <button
                key={index}
                onClick={() => handleAnswerClick(option)}
              >
                {option}
              </button>
            ))}
          </div>
        </div>
      )}
    </div>
  );
};

export default Quiz;

We import the styles object from Quiz.module.css and use it to apply the CSS classes to the relevant elements. Now, the quiz app should have a more polished look.

Adding More Features

This is a basic quiz app, but there are many ways to enhance it. Here are some ideas:

  • Feedback: Provide immediate feedback to the user when they select an answer (e.g., green for correct, red for incorrect).
  • Question Types: Support different question types, such as multiple-choice, true/false, and fill-in-the-blank.
  • Timer: Add a timer to limit the time users have to answer each question.
  • Scoring System: Implement a more sophisticated scoring system, such as awarding points based on the difficulty of the questions.
  • Question Randomization: Randomize the order of the questions to prevent users from memorizing the answers.
  • Data Fetching: Fetch questions from an external API or a database to make the quiz more dynamic.
  • User Interface Improvements: Enhance the UI with better layouts, animations, and transitions.

Common Mistakes and How to Fix Them

Here are some common mistakes beginners make when building quiz apps and how to fix them:

  • Incorrect State Management: Make sure you’re updating the state correctly using the useState hook. When updating an array or object in state, always use the spread operator (...) to avoid unintended side effects. For example, when updating the answers object, use the following:
setAnswers(prevAnswers => ({
  ...prevAnswers,
  [currentQuestion]: selectedAnswer,
}));
  • Incorrect Event Handling: Ensure your event handlers are correctly attached to the elements. For example, use onClick for button clicks. Double-check your event handler functions to ensure they are correctly receiving and processing the event data.
  • Forgetting to Update the Current Question: When moving to the next question, remember to update the currentQuestion state variable. This is a common oversight that can lead to the quiz not progressing.
  • Improper Use of Conditional Rendering: Make sure you are using conditional rendering correctly to display different content based on the quiz state (e.g., displaying the questions or the final score).
  • Not Handling Quiz Completion: Ensure that you have a mechanism to detect when the quiz is over (i.e., when the user has answered all questions) and display the final results. Remember to set the quizCompleted state variable to true.

Key Takeaways

In this tutorial, you’ve learned how to build a simple, interactive quiz app using Next.js. You’ve covered the basics of:

  • Setting up a Next.js project.
  • Creating a React component.
  • Managing state with the useState hook.
  • Handling user input with event handlers.
  • Conditional rendering to display different content based on the quiz state.
  • Adding basic styling with CSS modules.

You now have a solid foundation for building more complex quiz applications and interactive experiences using Next.js. Remember to experiment with the code, add new features, and practice these concepts to solidify your understanding. The possibilities are endless, and you can create engaging and educational apps with the skills you’ve acquired.

FAQ

1. How can I add more questions to the quiz?

To add more questions, simply add more objects to the questions array in the Quiz.js component. Each object should have a question, options, and correctAnswer property.

2. How can I change the styling of the quiz?

You can customize the styling by modifying the CSS in styles/Quiz.module.css. Adjust the CSS properties of the different classes (e.g., .quizContainer, .question, .options) to change the appearance of the quiz.

3. How do I make the quiz more dynamic and fetch questions from an API?

You can use the useEffect hook in your Quiz.js component to fetch questions from an API. Inside the useEffect hook, make an API call using fetch or a library like axios. Then, update the questions state with the fetched data. Remember to handle potential errors during the API call.

4. How can I add a timer to the quiz?

You can add a timer by using the useState and useEffect hooks. Create a state variable to store the remaining time. In the useEffect hook, use setInterval to decrement the timer every second. When the timer reaches zero, you can automatically submit the quiz or move to the next question. Remember to clear the interval when the quiz is completed or the component unmounts to prevent memory leaks.

5. How can I implement feedback for correct and incorrect answers?

You can provide feedback by adding a state variable to store the user’s answer feedback. When a user selects an answer, compare it to the correct answer. If the answer is correct, you can display a success message (e.g., “Correct!”) and style the answer button accordingly. If the answer is incorrect, display an error message (e.g., “Incorrect!”) and highlight the correct answer.

This simple quiz app demonstrates how easy it is to create interactive web applications with Next.js. By understanding the core concepts of state management, event handling, and conditional rendering, you can build much more complex and engaging experiences. The modular structure of Next.js and the use of components makes it easy to add new features and customize your app. With further development, this quiz app can be transformed into a valuable tool for learning, entertainment, or business purposes. Keep experimenting, and you’ll be amazed at what you can achieve.

More posts