DocsAllOver Interactive MCQ Container with CSS & JavaScript Snippets

Interactive MCQ Container with CSS & JavaScript

April 3, 2025

HTML, CSS, Js, Card, Clean UI, Form

Full Screen

<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Interactive MCQ Container with CSS & JavaScript</title>
</head>

<body>
    <div class="quiz-container" id="quiz">
        <div class="quiz-header">
            <h2 id="question">Question text</h2>
            <ul>
                <li>
                    <input type="radio" name="answer" id="a" class="answer">
                    <label for="a" id="a_text"> Question</label>
                </li>
                <li>
                    <input type="radio" name="answer" id="b" class="answer">
                    <label for="b" id="b_text"> Question</label>
                </li>
                <li>
                    <input type="radio" name="answer" id="c" class="answer">
                    <label for="c" id="c_text"> Question</label>
                </li>
                <li>
                    <input type="radio" name="answer" id="d" class="answer">
                    <label for="d" id="d_text"> Question</label>
                </li>
            </ul>
        </div>
        <button id="submit">Submit</button>
    </div>


    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"></script>
</body>

</html>

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;400&display=swap');

* {
    box-sizing: border-box;
}

body {
    font-family: 'Poppins', sans-serif;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 90vh;
    overflow: hidden;
    margin: 0;
    background-color: #eee;
}

.quiz-container {
    background-color: #fff;
    border-radius: 2%;
    box-shadow: 0 0 10px 2px rgba(100, 100, 100, 0.1);
    width: 37.5rem;
    overflow: hidden;
}

.quiz-header {
    padding: 4rem;
}

h2 {
    padding: 1rem;
    text-align: center;
    margin: 0;
}

ul {
    list-style-type: none;
    padding: 0;
}

ul li {
    font-size: 1.2rem;
    margin: 1rem 0;
}

ul li label {
    cursor: pointer;
}

button {
    background-color: #33a1eb;
    border: none;
    color: #fff;
    display: block;
    width: 100%;
    cursor: pointer;
    font-size: 1.1rem;
    font-family: inherit;
    padding: 1.3rem;
}

button:hover {
    background-color: #3c8ae3;
}

button:focus {
    outline: none;
    background-color: #3c8ae3;
}

const quizData = [{
    question: "Which language runs in a web browser?",
    a: "Java",
    b: "C",
    c: "Python",
    d: "JavaScript",
    correct: "d",
}, {
    question: "What does CSS stand for?",
    a: "Central StyleSheets",
    b: "Cascading Style Sheets",
    c: "Cascading Simple Sheets",
    d: "Cars SUVs Sailboats",
    correct: "b",
}, {
    question: "What does HTML stand for?",
    a: "HyperText Markup Language",
    b: "Heypertext Markdown Language",
    c: "Hyperloop Machine Language",
    d: "Helicopters Terminals Motorboats Lamborginis",
    correct: "a",
}, {
    question: "What year was JavScript launched?",
    a: "1994",
    b: "1995",
    c: "1997",
    d: "none of the above",
    correct: "b",
}
];

const quiz = document.getElementById('quiz');
const answerEls = document.querySelectorAll('.answer');
const questionEl = document.getElementById('question');
const a_text = document.getElementById('a_text');
const b_text = document.getElementById('b_text');
const c_text = document.getElementById('c_text');
const d_text = document.getElementById('d_text');
const submitBtn = document.getElementById('submit');

let currentQuiz = 0;
let score = 0;

loadQuiz();

function loadQuiz() {
    deselectAnswer();

    const currentQuizData = quizData[currentQuiz];

    questionEl.innerText = currentQuizData.question;
    a_text.innerText = currentQuizData.a;
    b_text.innerText = currentQuizData.b;
    c_text.innerText = currentQuizData.c;
    d_text.innerText = currentQuizData.d;
}

function deselectAnswer() {
    answerEls.forEach(answerEl => answerEl.checked = false);
}

function getSelected() {
    let answer;

    answerEls.forEach(answerEl => {
        if (answerEl.checked) {
            answer = answerEl.id;
        }
    });

    return answer;
}

submitBtn.addEventListener('click', () => {
    const answer = getSelected();

    if (answer) {
        if (answer === quizData[currentQuiz].correct) {
            score++;
        }

        currentQuiz++;

        if (currentQuiz < quizData.length) { loadQuiz(); } else {
            quiz.innerHTML = ` <h2> You answered correctly at ${score}/${quizData.length} questions correctly</h2>

    <button onclick="location.reload()">
        Reload
    </button>
    `
        }
    }
})

This snippet creates an engaging and interactive multiple-choice question (MCQ) container, providing a dynamic learning experience with pure CSS and JavaScript. The component allows users to interact with quiz questions, select answers, and receive immediate feedback, enhancing user engagement and comprehension.

Key Features:

Interactive Functionality: Implements JavaScript to handle user interactions, including answer selection, feedback display, and score tracking.
Dynamic Content Handling: Utilizes JavaScript to dynamically load and manage MCQ questions and answer options.
Responsive Design: Ensures the MCQ container adapts to various screen sizes, offering a consistent user experience across devices.
Clear Visual Indicators: Uses CSS to create clear visual cues for correct and incorrect answers, enhancing user understanding.

Implementation:

Create the HTML Structure: Set up the basic HTML structure for the MCQ container, including question display, answer options, and feedback areas.
Apply CSS Styles: Use CSS to style the MCQ container, answer options, feedback elements, and visual indicators.
Implement JavaScript Logic: Write JavaScript code to handle user interactions, manage question states, provide feedback, and track scores.
Integrate Dynamic Content: Use JavaScript to dynamically load and display MCQ questions and answer options from a data source.

By following these steps, you can create an interactive and engaging MCQ container using pure CSS and JavaScript, enhancing the learning experience for your website visitors.

Latest Snippets

View All