HTML Quiz Generator
Table of Contents
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');
}
.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);
}
@keyframes fadeIn {
from { opacity: 0; transform: translateY(10px); }
to { opacity: 1; transform: translateY(0); }
}
.animate-fade-in {
animation: fadeIn 0.5s ease forwards;
}
</style>
<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 <a href="https://salatigacity.blogspot.com/p/html-quiz-generator.html" class="underline hover:text-blue-600">Html Quiz Maker</a> by <a href="https://salatigacity.blogspot.com/">Coding Salatiga</a> brought to you 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">
${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>
${q.explanation && q.explanation.trim() !== '' ? `
<div class="mt-4 ml-9 hidden explanation-text text-sm text-gray-500">
<div class="bg-blue-50 p-3 rounded-lg">
<strong class="text-blue-600">Explanation:</strong> ${q.explanation}
</div>
</div>
` : ''}
</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 explanation = questionDiv.querySelector('.explanation-text');
if (explanation && q.explanation && q.explanation.trim() !== '') {
explanation.classList.remove('hidden');
explanation.classList.add('block');
}
questionDiv.querySelectorAll('.option').forEach((label, i) => {
const radio = label.querySelector('input[type="radio"]');
const indicator = label.querySelector('.w-3');
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');
}
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 = `Score: <strong class="text-blue-700">${correctCount}</strong> / <strong class="text-blue-700">${totalQuestions}</strong> ( ${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>