Free Quiz Widget with Flaschards & Schema Markup Set up for Blogger blog

Replace the following JSON code with your quiz in the provided JavaScript. You can easily generate the JSON code for your quiz using our Quiz Code Generator. Additionally, optimize your quiz using the Quiz Schema Markup Generator.

{ question: "What is 2 + 2?", options: ["3", "4", "5", "6"], correctanswer: "4" },
{ question: "What is the capital of France?", options: ["Berlin", "Madrid", "Paris", "Rome"], correctanswer: "Paris" },
{ question: "who was marx?", options: ["poet", "dramatist", "economist", "writer"], correctanswer: "economist" }
Demo

    <div class="quiz-widget">
      <button id="fullscreen-btn" class="fullscreen-toggle"> [ ]</button>
        <!-- Home Screen -->
        <div id="home-screen">
            <input type="text" id="user-name" placeholder="Enter your name" />
            <button class="btn" id="start-quiz-btn">Start Quiz</button>
            <button class="btn" id="flashcards-btn">Flashcards</button>
        </div>

        <!-- Flashcards Screen -->
        <div id="flashcards-screen" class="hidden">
            <div class="flashcard-header">
                <button id="back-to-home">&larr; Back</button>
            </div>
            <div class="flashcard-content">
                <p id="flashcard-question"></p>
                <p id="flashcard-answer"></p>
            </div>
            <div class="flashcard-nav">
                <button id="prev-flashcard" class="btn nav-btn">←</button>
                <button id="next-flashcard" class="btn nav-btn">→</button>
            </div>
        </div>

        <!-- Quiz Screen -->
        <div id="quiz-screen" class="hidden">
            <div class="quiz-header">
                <span id="timer">25</span>
            </div>
            <div class="quiz-content">
                <p id="quiz-question"></p>
                <div id="quiz-options"></div>
            </div>
        </div>

        <!-- Result Screen -->
        <div id="quiz-result-screen" class="hidden">
            <p id="result"></p>
            <button class="btn" id="try-again-btn">Try Again</button>
        </div>
    </div>

<style> .quiz-widget {
    position: relative;
    width: 100%;
    max-width: 900px;
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    padding: 20px;
    text-align: center;
}

.btn {
    background-color: #2196f3;
    color: white;
    border: none;
    padding: 10px 20px;
    margin: 10px 5px;
    border-radius: 5px;
    cursor: pointer;
    font-size: 16px;
}

.btn:hover {
    background-color: #1e88e5;
}

.hidden {
    display: none;
}

.flashcard-header,
.quiz-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

#user-name {
    display: block;
    width: 90%;
    margin: 10px auto;
    padding: 10px;
    font-size: 16px;
    border: 1px solid #ccc;
    border-radius: 5px;
}

.flashcard-content,
.quiz-content {
    margin-top: 20px;
}

#quiz-options {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
}

#quiz-options button {
    padding: 10px;
    border: none;
    border-radius: 5px;
    font-size: 16px;
    background-color: #f5f5f5;
    color: #333;
    cursor: pointer;
}

#quiz-options button:hover {
    background-color: #e0e0e0;
}

.correct {
    background-color: #bbdefb !important;
}

.wrong {
    background-color: #ffcdd2 !important;
}

.fullscreen-toggle {
    position: absolute;
    top: 15px;
    right: 15px;
    background: none;
    border: none;
    font-size: 18px;
    cursor: pointer;
    color: #333;
}
   #back-to-home {
      cursor: pointer;
      background-color: #6200ea;
      color: white;
      border: none;
      padding: 10px 15px;
      border-radius: 4px;
    }

    #back-to-home:hover {
      background-color: #4500c4;
    }
</style>

<script> const data = [
    
    { question: "What is 2 + 2?", options: ["3", "4", "5", "6"], correctanswer: "4" },
    { question: "What is the capital of France?", options: ["Berlin", "Madrid", "Paris", "Rome"], correctanswer: "Paris" },
    { question: "who was marx?", options: ["poet", "dramatist", "economist", "writer"], correctanswer: "writer" }
];

let currentFlashcard = 0;
let currentQuestion = 0;
let score = 0;
let timerInterval;

const homeScreen = document.getElementById('home-screen');
const flashcardsScreen = document.getElementById('flashcards-screen');
const quizScreen = document.getElementById('quiz-screen');
const resultScreen = document.getElementById('quiz-result-screen');
const userNameInput = document.getElementById('user-name');
const fullscreenBtn = document.getElementById('fullscreen-btn');
const widget = document.querySelector('.quiz-widget');

const flashcardQuestion = document.getElementById('flashcard-question');
const flashcardAnswer = document.getElementById('flashcard-answer');
const quizQuestion = document.getElementById('quiz-question');
const quizOptions = document.getElementById('quiz-options');
const timer = document.getElementById('timer');

document.getElementById('flashcards-btn').onclick = () => {
    if (!userNameInput.value.trim()) {
        alert("Please enter your name to proceed!");
        return;
    }
    homeScreen.classList.add('hidden');
    flashcardsScreen.classList.remove('hidden');
    loadFlashcard();
};

document.getElementById('back-to-home').onclick = () => {
    flashcardsScreen.classList.add('hidden');
    homeScreen.classList.remove('hidden');
};

document.getElementById('next-flashcard').onclick = () => {
    currentFlashcard = (currentFlashcard + 1) % data.length;
    loadFlashcard();
};

document.getElementById('prev-flashcard').onclick = () => {
    currentFlashcard = (currentFlashcard - 1 + data.length) % data.length;
    loadFlashcard();
};

function loadFlashcard() {
    flashcardQuestion.textContent = `Q: ${data[currentFlashcard].question}`;
    flashcardAnswer.textContent = `A: ${data[currentFlashcard].correctanswer}`;
}

document.getElementById('start-quiz-btn').onclick = () => {
    if (!userNameInput.value.trim()) {
        alert("Please enter your name to proceed!");
        return;
    }
    homeScreen.classList.add('hidden');
    quizScreen.classList.remove('hidden');
    startQuiz();
};

function startQuiz() {
    currentQuestion = 0;
    score = 0;
    loadQuestion();
}

function loadQuestion() {
    if (currentQuestion >= data.length) {
        endQuiz();
        return;
    }

    resetTimer();

    const questionData = data[currentQuestion];
    quizQuestion.textContent = questionData.question;
    quizOptions.innerHTML = '';
    questionData.options.forEach(option => {
        const button = document.createElement('button');
        button.textContent = option;
        button.onclick = () => handleAnswer(option, questionData.correctanswer);
        quizOptions.appendChild(button);
    });
}

function handleAnswer(selected, correct) {
    clearInterval(timerInterval);

    const buttons = quizOptions.querySelectorAll('button');
    buttons.forEach(btn => {
        if (btn.textContent === correct) btn.classList.add('correct');
        if (btn.textContent === selected && selected !== correct) btn.classList.add('wrong');
        btn.disabled = true;
    });

    if (selected === correct) score++;

    setTimeout(() => {
        currentQuestion++;
        loadQuestion();
    }, 1500);
}

function resetTimer() {
    let timeLeft = 25;
    timer.textContent = timeLeft;
    clearInterval(timerInterval);
    timerInterval = setInterval(() => {
        timeLeft--;
        timer.textContent = timeLeft;
        if (timeLeft <= 0) {
            clearInterval(timerInterval);
            currentQuestion++;
            loadQuestion();
        }
    }, 1000);
}

function endQuiz() {
    clearInterval(timerInterval);
    quizScreen.classList.add('hidden');
    resultScreen.classList.remove('hidden');
    const percentage = (score / data.length) * 100;
    const userName = userNameInput.value.trim() || "User";
    document.getElementById('result').textContent = `${userName}, you scored ${score}/${data.length} (${percentage.toFixed(2)}%)`;
}

document.getElementById('try-again-btn').onclick = () => {
    resultScreen.classList.add('hidden');
    homeScreen.classList.remove('hidden');
};

// Fullscreen functionality
fullscreenBtn.onclick = () => {
    if (!document.fullscreenElement) {
        widget.requestFullscreen().catch(err => {
            alert(`Error attempting to enable fullscreen mode: ${err.message}`);
        });
        fullscreenBtn.textContent = 'X'; // Change icon to close
    } else {
        document.exitFullscreen();
        fullscreenBtn.textContent = '[]'; // Change icon to fullscreen
    }
};

document.addEventListener('fullscreenchange', () => {
    if (!document.fullscreenElement) {
        fullscreenBtn.textContent = '[]'; // Reset icon to fullscreen
    }
});
</script>

{ question: "What is 2 + 2?", options: ["3", "4", "5", "6"], correctanswer: "4" },

    { question: "What is the capital of France?", options: ["Berlin", "Madrid", "Paris", "Rome"], correctanswer: "Paris" },

    { question: "who was marx?", options: ["poet", "dramatist", "economist", "writer"], correctanswer: "economist" }