How to Add a Quiz in Hostinger Website Builder

ByBen
https://youtu.be/gYg2oCUkk1M
Go to Hostinger.com
Get Hostinger Free Courses

Adding a quiz to your website is a great way to engage visitors and make your content more interactive. If you’re using Hostinger Website Builder, you can easily embed a quiz using custom code. In this guide, I’ll walk you through the exact steps to add a quiz in Hostinger Website Builder, customize the design, and edit questions.

Step 1: Access Your Website in Hostinger Website Builder

  1. Log in to your Hostinger account.
  2. Navigate to the Websites section.
  3. Click on the Edit Website button next to the site where you want to add the quiz.

If you have multiple websites, note that Hostinger Website Builder sites have a different icon than WordPress sites. This helps you distinguish between them easily.

Step 2: Add the Embed Code Element

  1. In the website editor, click on Add Element from the left sidebar.
  2. Scroll down and find the Embed Code element.
  3. Drag and drop it into the section where you want your quiz to appear.
  4. Click Enter Code, delete any existing code, and paste the quiz code provided in this tutorial.
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Simple Quiz</title>
    <style>
        body {
            font-family: 'Poppins', sans-serif;
            text-align: center;
            background: linear-gradient(to right, #ff7e5f, #feb47b);
            color: white;
            margin: 0;
            padding: 0;
        }
        .quiz-container {
            width: 50%;
            margin: 50px auto;
            padding: 20px;
            background: rgba(255, 255, 255, 0.2);
            border-radius: 15px;
            box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
        }
        h2 {
            margin-bottom: 20px;
            font-size: 28px;
        }
        .question {
            font-size: 20px;
            margin-bottom: 15px;
        }
        .options {
            list-style: none;
            padding: 0;
        }
        .options li {
            margin: 10px 0;
            background: rgba(255, 255, 255, 0.3);
            padding: 10px;
            border-radius: 5px;
            cursor: pointer;
            transition: 0.3s;
        }
        .options li:hover {
            background: rgba(255, 255, 255, 0.5);
        }
        button {
            margin-top: 20px;
            padding: 10px 20px;
            font-size: 29px;
            background: #ff5f6d;
            border: none;
            border-radius: 5px;
            color: white;
            cursor: pointer;
            transition: 0.3s;
        }
        button:hover {
            background: #ff3b5a;
        }
        .result {
            margin-top: 20px;
            font-size: 22px;
            font-weight: bold;
        }
    </style>
</head>
<body>
    <div class="quiz-container">
        <h2>Ben's Funny Quiz</h2>
        <div id="quiz"></div>
        <button onclick="nextQuestion()">Next</button>
        <div class="result" id="result"></div>
    </div>

    <script>
        const questions = [
            {
                question: "What is the capital of France?",
                options: ["Berlin", "Madrid", "Paris", "Lisbon"],
                answer: "Paris"
            },
            {
                question: "Which is the largest planet in our solar system?",
                options: ["Earth", "Jupiter", "Mars", "Venus"],
                answer: "Jupiter"
            },
            {
                question: "What is 2 + 2?",
                options: ["3", "4", "5", "6"],
                answer: "4"
            },
            {
                question: "added question",
                options: ["3", "4", "5", "6"],
                answer: "4"
            }
        ];

        let currentQuestionIndex = 0;
        let score = 0;

        function loadQuestion() {
            const quizDiv = document.getElementById("quiz");
            const questionObj = questions[currentQuestionIndex];
            quizDiv.innerHTML = `
                <div class="question">${questionObj.question}</div>
                <ul class="options">
                    ${questionObj.options.map(option => `
                        <li onclick="selectAnswer(this, '${option}')">${option}</li>
                    `).join('')}
                </ul>
            `;
        }

        function selectAnswer(element, selectedValue) {
            document.querySelectorAll('.options li').forEach(li => li.style.background = 'rgba(255, 255, 255, 0.3)');
            element.style.background = 'rgba(255, 255, 255, 0.7)';
            element.dataset.selected = selectedValue;
        }

        function nextQuestion() {
            const selectedElement = document.querySelector(".options li[style*='0.7']");
            if (!selectedElement) {
                alert("Please select an answer!");
                return;
            }

            if (selectedElement.dataset.selected === questions[currentQuestionIndex].answer) {
                score++;
            }

            currentQuestionIndex++;

            if (currentQuestionIndex < questions.length) {
                loadQuestion();
            } else {
                document.getElementById("quiz").innerHTML = "Quiz completed!";
                document.getElementById("result").innerText = `Your score: ${score} / ${questions.length}`;
            }
        }

        loadQuestion();
    </script>
</body>
</html>

Step 3: Customize the Quiz

Once the quiz is embedded, you can customize it:

  • Change the text color: Modify the color settings to match your website design.
  • Adjust the quiz size: Change the width of the quiz container for a better layout.
  • Optimize for mobile: The quiz automatically adapts to mobile screens, but you can fine-tune margins if needed.

Step 4: Edit the Quiz Questions

The quiz consists of multiple questions, each with different answer choices. Here’s how to modify them:

  • Locate the question section in the code.
  • Change the text to match your quiz topic.
  • Define the correct answer to ensure accurate scoring.
  • To add more questions, simply copy the existing structure and paste a new question block.

Step 5: Publish and Test the Quiz

  1. Click Update Website to save changes.
  2. Open your website and test the quiz by selecting different answers.
  3. Check if the scoring system works correctly and make adjustments if needed.

Conclusion

That’s it! You now know how to add a quiz in Hostinger Website Builder using custom code. This is a powerful way to create interactive content, whether for fun, education, or engagement.

If you have any questions, feel free to drop a comment below!

🚀 Want to learn more? Join my free Hostinger Website Builder course today!
📖 Get My Hostinger Course for Free

Similar Posts