Create an Interactive Quiz Form in Tailwind CSS

This article demonstrates creating an engaging quiz using Tailwind CSS and JavaScript. After linking Tailwind CSS to the HTML file, the quiz form is structured and styled using Tailwind’s classes. Users interact with the quiz by selecting answers and clicking the result button.

JavaScript is then employed to determine the outcome: winning if the score exceeds 70, losing otherwise, with each correct answer earning 10 points. Throughout, Tailwind CSS enables seamless styling and layout design for an enjoyable user experience.

Preview Image

Approach:

• First, we make a folder where we put an HTML file and a JavaScript file. In the HTML file, we include a link to integrate Tailwind CSS.
• Now use Tailwind CSS classes to style the Quiz form. We add ten coding questions and make them visually appealing to the reader, using the next and previous button we can move to previous and next Quiz question.
• In the JavaScript file, we write the logic. When we select the correct answer, we earn 10 marks. If our score is over 70, we win the Quiz; otherwise, we lose.
• By following these steps, we create an interactive Quiz experience for users, where they can answer questions and see their results based on their performance.

Example: The below code example implements Create an Interactive Quiz Form in Tailwind CSS .

Javascript

// JavaScript Logic
let currentQuestionIndex = 0;

function showQuestion(index) {
    const questions =
        document.querySelectorAll('.flex.flex-col');
    questions.forEach((question, i) => {
        question.style.display = i === index ? 'flex' : 'none';
    });
}

function nextQuestion() {
    currentQuestionIndex =

            Math.min(currentQuestionIndex + 1, 9);
    showQuestion(currentQuestionIndex);
}

function prevQuestion() {
    currentQuestionIndex =

            Math.max(currentQuestionIndex - 1, 0);
    showQuestion(currentQuestionIndex);
}

function getSelectedOption(questionId) {
    const selectedOption =

            document.querySelector(`input[name=${questionId}]:checked`);
    return selectedOption ? selectedOption.value : null;
}

function submitQuiz() {
    // Your quiz submission logic here
    const answers = {
        q1: getSelectedOption('q1'),
        q2: getSelectedOption('q2'),
        q3: getSelectedOption('q3'),
        q4: getSelectedOption('q4'),
        q5: getSelectedOption('q5'),
        q6: getSelectedOption('q6'),
        q7: getSelectedOption('q7'),
        q8: getSelectedOption('q8'),
        q9: getSelectedOption('q9'),
        q10: getSelectedOption('q10'),
        // Add more questions as needed
    };

    // Calculate the score based on correct answers
    let score = 0;
    // Adjust correct answers based on your questions
    if (answers.q1 === 'a') {
        score += 10;
    }
    if (answers.q2 === 'a') {
        score += 10;
    }
    if (answers.q3 === 'a') {
        score += 10;
    }
    if (answers.q4 === 'b') {
        score += 10;
    }
    if (answers.q5 === 'd') {
        score += 10;
    }
    if (answers.q6 === 'd') {
        score += 10;
    }
    if (answers.q7 === 'b') {
        score += 10;
    }
    if (answers.q8 === 'a') {
        score += 10;
    }
    if (answers.q9 === 'a') {
        score += 10;
    }
    if (answers.q10 === 'b') {
        score += 10;
    }
    // Add more conditions for other questions

    // Display result section
    const resultSection = document.getElementById('result');
    resultSection.classList.remove('hidden');

    const scoreElement = document.getElementById('score');
    scoreElement.textContent =
        `Score: ${score}/100`; // Assuming each question has 10 points

    const feedbackElement =
        document.getElementById('feedback');
    // Customize feedback based on the score
    if (score >= 70) {
        feedbackElement.textContent =
            'Congratulations! You did great!';
    } else {
        feedbackElement.textContent =
            'You can do better. Keep practicing.';
    }
}

// Initially hide the result section
document.getElementById('result').classList.add('hidden');

// Initially show the first question
showQuestion(currentQuestionIndex);

function restartQuiz() {
    // Reset question index
    currentQuestionIndex = 0;
    // Hide result section
    document.getElementById('result').classList.add('hidden');

    // Clear selected options
    const radioButtons =
        document.querySelectorAll('input[type="radio"]');
    radioButtons.forEach(button => button.checked = false);

    // Show the first question
    showQuestion(currentQuestionIndex);
}

HTML

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,
                                   initial-scale=1.0">
    <title>Interactive Quiz</title>
    <link href=
"https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css"
          rel="stylesheet">
</head>

<body class="from-gray-100 via-gray-400
             to-gray-500 p-10">
    <div class="max-w-md mx-auto bg-white p-8
                rounded-md shadow-md"
         style="border: 1px solid black;">
        <h1 class="text-3xl font-bold mb-6
                   text-green-400 text-center
                   text-success">
            GeeksforGeeks
        </h1>
        <h3 class="text-2xl font-bold mb-6 text-center">
            Coding Quiz
        </h3>
        <form id="quizForm" class="space-y-4">
            <!-- Question 1 -->
            <div class="flex flex-col mb-4">
                <label for="q1" class="text-lg text-gray-800 mb-2">
                    1. What does HTML stand for?
                </label>
                <div class="flex items-center space-x-4">
                    <input type="radio" id="q1a" name="q1"
                           value="a" class="mr-2" required>
                    <label for="q1a" class="text-gray-700">
                        a) Hyper Text Markup Language
                    </label>
                </div>
                <div class="flex items-center space-x-4">
                    <input type="radio" id="q1b" name="q1"
                        value="b" class="mr-2" required>
                    <label for="q1b" class="text-gray-700">
                        b) Hyper Transfer Markup Language
                    </label>
                </div>
                <div class="flex items-center space-x-4">
                    <input type="radio" id="q1c" name="q1"
                    value="c" class="mr-2" required>
                    <label for="q1c" class="text-gray-700">
                        c) Hyperlink and Text Markup Language
                    </label>
                </div>
                <div class="flex items-center space-x-4">
                    <input type="radio" id="q1d" name="q1"
                    value="d" class="mr-2" required>
                    <label for="q1d" class="text-gray-700">
                        d) Hyper Tool Multi-language
                    </label>
                </div>
            </div>

            <!-- Question 2 -->
            <div class="flex flex-col mb-4">
                <label for="q2" class="text-lg text-gray-800 mb-2">
                    2. What does CSS stand for?
                </label>
                <div class="flex items-center space-x-4">
                    <input type="radio" id="q2a" name="q2"
                    value="a" class="mr-2" required>
                    <label for="q2a" class="text-gray-700">
                        a) Cascading Style Sheet
                    </label>
                </div>
                <div class="flex items-center space-x-4">
                    <input type="radio" id="q2b" name="q2"
                    value="b" class="mr-2" required>
                    <label for="q2b" class="text-gray-700">
                        b) Computer Style Sheet
                    </label>
                </div>
                <div class="flex items-center space-x-4">
                    <input type="radio" id="q2c" name="q2"
                    value="c" class="mr-2" required>
                    <label for="q2c" class="text-gray-700">
                        c) Colorful Style Sheet
                    </label>
                </div>
                <div class="flex items-center space-x-4">
                    <input type="radio" id="q2d" name="q2"
                    value="d" class="mr-2" required>
                    <label for="q2d" class="text-gray-700">
                        d) Creative Style Sheet
                    </label>
                </div>
            </div>

            <div class="flex flex-col mb-4">
                <label for="q3" class="text-lg text-gray-800 mb-2">
                    3. What is the purpose of HTML?</label>
                <div class="flex items-center space-x-4">
                    <input type="radio" id="q3a" name="q3"
                    value="a" class="mr-2" required>
                    <label for="q3a" class="text-gray-700">
                        b) Hyperlink and Text Markup Language
                    </label>
                </div>
                <div class="flex items-center space-x-4">
                    <input type="radio" id="q3b" name="q3"
                    value="b" class="mr-2" required>
                    <label for="q3b" class="text-gray-700">
                        b) Computer Style Sheet
                    </label>
                </div>
                <div class="flex items-center space-x-4">
                    <input type="radio" id="q3c" name="q3"
                    value="c" class="mr-2" required>
                    <label for="q3c" class="text-gray-700">
                        c) Home Tool Markup Language
                    </label>
                </div>
                <div class="flex items-center space-x-4">
                    <input type="radio" id="q3d" name="q3"
                    value="d" class="mr-2" required>
                    <label for="q3d" class="text-gray-700">
                        d) Hyper Transfer Markup Language
                    </label>
                </div>
            </div>

            <div class="flex flex-col mb-4">
                <label for="q4" class="text-lg text-gray-800 mb-2">
                    4. What does JavaScript primarily enable you to
                    do?
                </label>
                <div class="flex items-center space-x-4">
                    <input type="radio" id="q4a" name="q4"
                    value="a" class="mr-2" required>
                    <label for="q4a" class="text-gray-700">
                        a) Style web pages
                    </label>
                </div>
                <div class="flex items-center space-x-4">
                    <input type="radio" id="q4b" name="q4"
                    value="b" class="mr-2" required>
                    <label for="q4b" class="text-gray-700">
                        b) Program the behavior of web pages
                    </label>
                </div>
                <div class="flex items-center space-x-4">
                    <input type="radio" id="q4c" name="q4"
                    value="c" class="mr-2" required>
                    <label for="q4c" class="text-gray-700">
                        c) Define the structure of web pages
                    </label>
                </div>
                <div class="flex items-center space-x-4">
                    <input type="radio" id="q4d" name="q4"
                    value="d" class="mr-2" required>
                    <label for="q4d" class="text-gray-700">
                        d) Create databases
                    </label>
                </div>
            </div>

            <div class="flex flex-col mb-4">
                <label for="q5" class="text-lg text-gray-800 mb-2">
                    5. Which of the following is NOT a programming
                    language?
                </label>
                <div class="flex items-center space-x-4">
                    <input type="radio" id="q5a" name="q5"
                    value="a" class="mr-2" required>
                    <label for="q5a" class="text-gray-700">
                        a) Python
                    </label>
                </div>
                <div class="flex items-center space-x-4">
                    <input type="radio" id="q5b" name="q5"
                    value="b" class="mr-2" required>
                    <label for="q5b" class="text-gray-700">
                        b) HTML
                    </label>
                </div>
                <div class="flex items-center space-x-4">
                    <input type="radio" id="q5c" name="q5"
                    value="c" class="mr-2" required>
                    <label for="q5c" class="text-gray-700">
                        c) Java
                    </label>
                </div>
                <div class="flex items-center space-x-4">
                    <input type="radio" id="q5d" name="q5"
                    value="d" class="mr-2" required>
                    <label for="q5d" class="text-gray-700">
                        d) JPEG
                    </label>
                </div>
            </div>

            <div class="flex flex-col mb-4">
                <label for="q6" class="text-lg text-gray-800 mb-2">
                    6. What is the purpose of a CSS selector?
                </label>
                <div class="flex items-center space-x-4">
                    <input type="radio" id="q6a" name="q6"
                    value="a" class="mr-2" required>
                    <label for="q6a" class="text-gray-700">
                        a) To select elements in HTML
                    </label>
                </div>
                <div class="flex items-center space-x-4">
                    <input type="radio" id="q6b" name="q6"
                    value="b" class="mr-2" required>
                    <label for="q6b" class="text-gray-700">
                        b) To define styles for a webpage
                    </label>
                </div>
                <div class="flex items-center space-x-4">
                    <input type="radio" id="q6c" name="q6"
                    value="c" class="mr-2" required>
                    <label for="q6c" class="text-gray-700">
                        c) To create variables in JavaScript
                    </label>
                </div>
                <div class="flex items-center space-x-4">
                    <input type="radio" id="q6d" name="q6"
                    value="d" class="mr-2" required>
                    <label for="q6d" class="text-gray-700">
                        d) To structure HTML documents
                    </label>
                </div>
            </div>

            <div class="flex flex-col mb-4">
                <label for="q7" class="text-lg text-gray-800 mb-2">
                    7. What does the acronym API stand for?
                </label>
                <div class="flex items-center space-x-4">
                    <input type="radio" id="q7a" name="q7"
                    value="a" class="mr-2" required>
                    <label for="q7a" class="text-gray-700">
                        a) Advanced Programming Interface
                    </label>
                </div>
                <div class="flex items-center space-x-4">
                    <input type="radio" id="q7b" name="q7"
                    value="b" class="mr-2" required>
                    <label for="q7b" class="text-gray-700">
                        b) Application Programming Interface
                    </label>
                </div>
                <div class="flex items-center space-x-4">
                    <input type="radio" id="q7c" name="q7"
                    value="c" class="mr-2" required>
                    <label for="q7c" class="text-gray-700">
                        c) Automated Processing Interface
                    </label>
                </div>
                <div class="flex items-center space-x-4">
                    <input type="radio" id="q7d" name="q7"
                    value="d" class="mr-2" required>
                    <label for="q7d" class="text-gray-700">
                        d) Association of Programmers and Inventors
                    </label>
                </div>
            </div>

            <div class="flex flex-col mb-4">
                <label for="q8" class="text-lg text-gray-800 mb-2">
                    8. What is the purpose of the "alt" attribute in an
                    HTML image tag?
                </label>
                <div class="flex items-center space-x-4">
                    <input type="radio" id="q8a" name="q8"
                    value="a" class="mr-2" required>
                    <label for="q8a" class="text-gray-700">
                        a) It sets the alignment of the image.
                    </label>
                </div>
                <div class="flex items-center space-x-4">
                    <input type="radio" id="q8b" name="q8"
                    value="b" class="mr-2" required>
                    <label for="q8b" class="text-gray-700">
                        b) It defines the alternative text for the image.
                    </label>
                </div>
                <div class="flex items-center space-x-4">
                    <input type="radio" id="q8c" name="q8"
                    value="c" class="mr-2" required>
                    <label for="q8c" class="text-gray-700">
                        c) It specifies the size of the image.
                    </label>
                </div>
                <div class="flex items-center space-x-4">
                    <input type="radio" id="q8d" name="q8"
                    value="d" class="mr-2" required>
                    <label for="q8d" class="text-gray-700">
                        d) It sets the border color of the image.
                    </label>
                </div>
            </div>

            <div class="flex flex-col mb-4">
                <label for="q9" class="text-lg text-gray-800 mb-2">
                    9. In JavaScript, what does the "typeof" operator
                    do?
                </label>
                <div class="flex items-center space-x-4">
                    <input type="radio" id="q9a" name="q9"
                    value="a" class="mr-2" required>
                    <label for="q9a" class="text-gray-700">
                        a) It checks if a variable is defined.
                    </label>
                </div>
                <div class="flex items-center space-x-4">
                    <input type="radio" id="q9b" name="q9"
                    value="b" class="mr-2" required>
                    <label for="q9b" class="text-gray-700">
                        b) It returns the type of a variable or expression.
                    </label>
                </div>
                <div class="flex items-center space-x-4">
                    <input type="radio" id="q9c" name="q9"
                    value="c" class="mr-2" required>
                    <label for="q9c" class="text-gray-700">
                        c) It concatenates strings.
                    </label>
                </div>
                <div class="flex items-center space-x-4">
                    <input type="radio" id="q9d" name="q9"
                    value="d" class="mr-2" required>
                    <label for="q9d" class="text-gray-700">
                        d) It loops through an array.
                    </label>
                </div>
            </div>

            <div class="flex flex-col mb-4">
                <label for="q10" class="text-lg text-gray-800 mb-2">
                    10. What is the purpose of the "padding" property in
                    CSS?
                </label>
                <div class="flex items-center space-x-4">
                    <input type="radio" id="q10a" name="q10"
                    value="a" class="mr-2" required>
                    <label for="q10a" class="text-gray-700">
                        a) It sets the background color of an element.
                    </label>
                </div>
                <div class="flex items-center space-x-4">
                    <input type="radio" id="q10b" name="q10"
                    value="b" class="mr-2" required>
                    <label for="q10b" class="text-gray-700">
                        b) It defines the width of an element
                    </label>
                </div>
                <div class="flex items-center space-x-4">
                    <input type="radio" id="q10c" name="q10"
                    value="c" class="mr-2" required>
                    <label for="q10c" class="text-gray-700">
                        c) It adds space inside the borders of an element.
                    </label>
                </div>
                <div class="flex items-center space-x-4">
                    <input type="radio" id="q10d" name="q10"
                    value="d" class="mr-2" required>
                    <label for="q10d" class="text-gray-700">
                        d) It controls the visibility of an element
                    </label>
                </div>
            </div>

            <hr>

            <!-- Navigation Buttons -->
            <div class="flex justify-between">
                <button type="button" onclick="prevQuestion()"
                    class="bg-blue-500 hover:bg-blue-600
                           text-white px-2 py-1 rounded-md">
                      Previous
                  </button>
                <button type="button" onclick="nextQuestion()"
                        class="bg-blue-500 hover:bg-blue-600
                               text-white px-4 py-1 rounded-md">
                      Next
                  </button>
            </div>
            <hr>

            <button type="button" onclick="submitQuiz()"
                    class="bg-green-500 text-white px-4 py-2
                       rounded-md mt-8">
                  Submit
              </button>

            <button type="button" onclick="restartQuiz()"
                       class="bg-red-500 text-white px-3 py-2
                              rounded-md mt-4">
                  Restart Quiz
              </button>
        </form>

        <div id="result" class="mt-8 hidden">
            <h2 class="text-2xl font-bold mb-4 text-center">
                  ???? Quiz Result
              </h2>
            <p id="score" class="text-lg
                                 font-semibold mb-2
                                 text-center">
              </p>
            <p id="feedback" class="text-gray-700 text-center"></p>
        </div>
    </div>

    <script src="/script.js">

    </script>
</body>

</html>

Output:

Create an Interactive Quiz Form in Tailwind CSS