Quiz maker Html Quiz Generator
Table of Contents
HTML Quiz Generator
Instructions
Enter your quiz questions and options. After generating the quiz, you can preview it or copy the HTML code.
Generated ✔
PREVIEW
Generated Code 1
<script src="https://cdn.tailwindcss.com "></script>
<style>
@import url('https://fonts.googleapis.com/css2?family=Inter :wght@400;600;700&display=swap');
body {
font-family: 'Inter', sans-serif;
}
.card {
box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1);
transition: transform 0.2s ease;
}
.card:hover {
transform: translateY(-5px);
}
.option {
transition: all 0.2s ease;
border-radius: 1rem;
border: 2px solid transparent;
}
.option:hover {
border-color: #3b82f6;
transform: translateX(5px);
}
.explanation-box {
background: #f0f9ff;
border-left: 4px solid #3b82f6;
padding: 1rem;
margin-top: 1rem;
border-radius: 0.5rem;
}
@keyframes fadeIn {
from { opacity: 0; transform: translateY(10px); }
to { opacity: 1; transform: translateY(0); }
}
.animate-fade-in {
animation: fadeIn 0.5s ease forwards;
}
</style>
<class="bg-gradient-to-br from-blue-50 to-indigo-100 min-h-screen flex items-center justify-center p-4">
<div class="bg-white card rounded-2xl shadow-lg max-w-lg w-full p-8">
<form id="quizForm" class="space-y-6 animate-fade-in">
<!-- Questions will be inserted here -->
</form>
<div class="button-container mt-6 flex flex-col sm:flex-row gap-3">
<button onclick="submitQuiz()" class="flex-1 bg-gradient-to-r from-blue-500 to-indigo-600 text-white py-3 px-6 rounded-xl hover:shadow-lg transform hover:-translate-y-1 transition-all duration-200 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50">
<span class="font-semibold">Check Answers</span>
</button>
<button onclick="resetQuiz()" class="flex-1 bg-gray-200 text-gray-700 py-3 px-6 rounded-xl hover:bg-gray-300 transition-colors duration-200">
<span class="font-semibold">Try Again</span>
</button>
</div>
<div id="result" class="mt-6 text-center animate-fade-in">
<div class="bg-gradient-to-r from-blue-50 to-indigo-50 p-4 rounded-xl border border-blue-100 hidden" id="scoreCard">
<p class="text-2xl font-bold text-blue-800" id="scoreText"></p>
</div>
</div>
<div class="mt-8 text-center text-sm text-gray-500 animate-fade-in">
<hr class="my-4 border-gray-200">
<p>This quiz is made using the <a href="https://salatigacity.blogspot.com/2025/05/quiz-maker-html-quiz-generator.html " class="underline hover:text-blue-600">HTML Quiz Maker</a> on <a href="https://salatigacity.blogspot.com/">Coding Salatiga</a>, supported by <a href="https://labinggris.com/">LabInggris.com</a></p>
</div>
</div>
<script>
const questions = [
Generated Code 2
Generated Code 3
];
function loadQuiz() {
const quizForm = document.getElementById('quizForm');
quizForm.innerHTML = '';
questions.forEach((q, index) => {
const questionDiv = document.createElement('div');
questionDiv.className = "question animate-fade-in";
questionDiv.style.animationDelay = `${index * 0.1}s`;
questionDiv.innerHTML = `
<div class="mb-4">
<p class="text-xl font-bold text-gray-800 mb-3">${index + 1}. ${q.question}</p>
<div class="space-y-3" id="options-${index}">
${q.options.map((option, i) => `
<label class="block p-3 border-2 border-transparent rounded-xl bg-gray-50 hover:bg-blue-50 transition-all duration-200 option">
<div class="flex items-center">
<div class="flex-shrink-0 w-6 h-6 rounded-full border-2 border-gray-300 flex items-center justify-center mr-3">
<div class="w-3 h-3 rounded-full bg-blue-500 scale-0 transition-transform duration-200"></div>
</div>
<input type="radio" name="question${index}" value="${i + 1}" class="sr-only" onchange="selectOption(${index}, ${i + 1})">
<span class="text-gray-700 font-medium">${option}</span>
</div>
</label>
`).join('')}
</div>
<!-- Explanation will be injected here after last option -->
</div>
`;
quizForm.appendChild(questionDiv);
});
}
function selectOption(questionIndex, optionIndex) {
const quizForm = document.getElementById('quizForm');
const questionDiv = quizForm.querySelectorAll('.question')[questionIndex];
questionDiv.querySelectorAll('.option').forEach((label, i) => {
const radio = label.querySelector('input[type="radio"]');
const indicator = label.querySelector('.w-3');
if (radio.value === String(optionIndex)) {
label.classList.add('bg-blue-50', 'border-blue-100');
indicator.classList.remove('scale-0');
indicator.classList.add('scale-100');
} else {
label.classList.remove('bg-blue-50', 'border-blue-100');
indicator.classList.remove('scale-100');
indicator.classList.add('scale-0');
}
});
}
function submitQuiz() {
const quizForm = document.getElementById('quizForm');
const userAnswers = new FormData(quizForm);
let correctCount = 0;
questions.forEach((q, index) => {
const userAnswer = parseInt(userAnswers.get(`question${index}`), 10);
const questionDiv = quizForm.querySelectorAll('.question')[index];
const optionsContainer = document.getElementById(`options-${index}`);
// Remove any existing explanation
const existingExplanation = questionDiv.querySelector('.explanation-box');
if (existingExplanation) {
existingExplanation.remove();
}
// Create and append explanation box
const explanationDiv = document.createElement('div');
explanationDiv.className = "explanation-box hidden";
explanationDiv.innerHTML = q.explanation;
optionsContainer.appendChild(explanationDiv);
// Show explanation after submission
setTimeout(() => {
explanationDiv.classList.remove('hidden');
explanationDiv.classList.add('animate-fade-in');
}, 300);
questionDiv.querySelectorAll('.option').forEach((label, i) => {
const radio = label.querySelector('input[type="radio"]');
const indicator = label.querySelector('.w-3');
// Remove checkmark/cross indicators
if (i + 1 === q.correct) {
label.classList.remove('bg-blue-50', 'bg-gray-50', 'hover:bg-blue-50');
label.classList.add('bg-green-50', 'border-green-100');
indicator.classList.remove('bg-blue-500');
indicator.classList.add('bg-green-500');
indicator.classList.remove('scale-0');
indicator.classList.add('scale-100');
} else if (radio.checked) {
label.classList.remove('bg-blue-50', 'bg-gray-50', 'hover:bg-blue-50');
label.classList.add('bg-red-50', 'border-red-100');
indicator.classList.remove('bg-blue-500');
indicator.classList.add('bg-red-500');
indicator.classList.remove('scale-0');
indicator.classList.add('scale-100');
}
// Disable all options after submission
label.style.pointerEvents = 'none';
});
if (userAnswer === q.correct) correctCount++;
});
const totalQuestions = questions.length;
const percentage = Math.round((correctCount / totalQuestions) * 100);
const scoreCard = document.getElementById('scoreCard');
const scoreText = document.getElementById('scoreText');
scoreText.innerHTML = `You got <strong class="text-blue-700">${correctCount}</strong> out of <strong class="text-blue-700">${totalQuestions}</strong> questions correct (${percentage}%)`;
scoreCard.classList.remove('hidden');
scoreCard.classList.add('animate-fade-in');
}
function resetQuiz() {
document.getElementById('scoreCard').classList.add('hidden');
document.getElementById('scoreCard').classList.remove('animate-fade-in');
loadQuiz();
}
window.onload = loadQuiz;
</script>
