Quiz with JSON and JavaScript 🚀

In this tutorial, we will explore how to create a dynamic, responsive quiz for your blog. We will use JSON to manage our questions, CSS to style the interactive cards, and JavaScript to handle the scoring logic. This approach keeps your code clean and makes it incredibly easy to add new questions in the future! 💡

The Data Structure (JSON) 📂

Instead of hardcoding questions into HTML, we store them in a structured array. Each object contains the question (v), an array of options (o), and the index of the correct answer (p).

[
    {
        "v": "Which HTML element is used to specify a footer?",
        "o": ["<bottom>", "<footer>", "<section>"],
        "p": 1
    },
    {
        "v": "In CSS, what property changes the background color?",
        "o": ["color", "bgcolor", "background-color"],
        "p": 2
    },
    {
        "v": "Which JS method writes text to the browser console?",
        "o": ["console.log()", "console.print()", "window.debug()"],
        "p": 0
    }
]

Styling the Interface (CSS) 🎨

To ensure the quiz matches your blog's aesthetic, we use your custom CSS variables. We define the look for the question cards, the navigation "dots" at the top, and the feedback colors for correct/wrong answers. 🖌️

/* Question Card Styling */
.quiz-question-block {
    background-color: var(--color-shade);
    border: 1px solid var(--color-shade-crisp);
    padding: 25px;
    margin-bottom: 2rem;
    position: relative;
    border-radius: 8px;
}

/* Left Accent Border (Signature Style) */
.quiz-question-block::after {
    content: "";
    position: absolute;
    top: 0; left: 0; bottom: 0;
    width: 4px;
    background-color: var(--color-light);
}

/* Navigation Circles */
.quiz-nav-item {
    display: inline-block;
    width: 35px;
    height: 35px;
    line-height: 35px;
    text-align: center;
    border-radius: 50%;
    background-color: var(--color-light);
    margin: 5px;
    font-weight: bold;
}

/* Feedback Colors */
.correct-nav { background-color: #567b1a !important; color: #fff; }
.wrong-nav { background-color: var(--color-primary-shade) !important; color: #fff; }

The Logic (JavaScript) ⚙️

The JavaScript handles two main tasks: dynamically rendering the questions from the JSON data and calculating the final score when the user submits their answers. 🧠

// Function to render the quiz
function renderQuiz(data) {
    const container = document.getElementById('quiz-container');
    data.forEach((item, index) => {
        const html = `
                            

                ${index + 1}. ${item.v}
                ${item.o.map((opt, i) => `
                                    
                                        
                        ${opt.replace(/</g, "&lt;")}
                                    
                `).join('')}
                            
`;
        container.innerHTML += html;
    });
}

// Function to calculate results
function checkAnswers() {
    let score = 0;
    quizData.forEach((item, i) => {
        const selected = document.querySelector(\`input[name="q\${i}"]:checked\`);
        const navDot = document.getElementById(\`nav-dot-\${i}\`);
                        
        if (selected && parseInt(selected.value) === item.p) {
            score++;
            navDot.classList.add('correct-nav');
        } else {
            navDot.classList.add('wrong-nav');
        }
    });
    console.log(\`Final Score: \${score}/\${quizData.length}\`);
}

Pro Tip: Always use .replace(/</g, "&lt;") when displaying HTML tags inside your quiz options. This prevents the browser from interpreting them as actual elements! 🛡️