📚 Quiz System

Login to access your account

Demo Accounts:

Teacher: teacher1 / teacher123

Student: student1 / student123

${title}

Answer all questions and click submit to see your score

${imageSection}
${questionsHTML}
`; } function copyCode() { const code = document.getElementById('liveCode').textContent; navigator.clipboard.writeText(code).then(() => { showStatus('HTML code copied to clipboard!', 'success'); }).catch(() => { showStatus('Failed to copy code. Please select and copy manually.', 'error'); }); } function downloadCode() { const code = document.getElementById('liveCode').textContent; const title = document.getElementById('quizTitle').value || 'quiz'; const filename = `${title.replace(/[^a-z0-9]/gi, '_').toLowerCase()}.html`; const blob = new Blob([code], { type: 'text/html' }); const url = URL.createObjectURL(blob); const a = document.createElement('a'); a.href = url; a.download = filename; document.body.appendChild(a); a.click(); document.body.removeChild(a); URL.revokeObjectURL(url); showStatus(`Quiz downloaded as ${filename}!`, 'success'); } function toggleCodeView() { const container = document.getElementById('liveCodeContainer'); const toggleText = document.getElementById('codeToggleText'); if (container.classList.contains('hidden')) { container.classList.remove('hidden'); toggleText.textContent = '📄 Hide HTML'; } else { container.classList.add('hidden'); toggleText.textContent = '📄 Show HTML'; } } function saveQuiz() { const title = document.getElementById('quizTitle').value; const editingId = document.getElementById('editingQuizId').value; if (!title) { showStatus('Please enter a quiz title.', 'error'); return; } const questions = collectQuestions(); if (questions.length === 0) { showStatus('Please add at least one question.', 'error'); return; } if (editingId) { // Update existing quiz const quizIndex = quizzes.findIndex(q => q.id == editingId); if (quizIndex !== -1) { quizzes[quizIndex] = { ...quizzes[quizIndex], title: title, imageUrl: uploadedImageUrl, questions: questions, updatedAt: new Date().toISOString() }; showStatus('Quiz updated successfully!', 'success'); } } else { // Create new quiz const quizData = { id: Date.now(), title: title, imageUrl: uploadedImageUrl, questions: questions, createdBy: currentUser.username, createdAt: new Date().toISOString() }; quizzes.push(quizData); showStatus('Quiz saved successfully!', 'success'); } localStorage.setItem('allQuizzes', JSON.stringify(quizzes)); displayTeacherQuizzes(); clearForm(); } function editQuiz(id) { const quiz = quizzes.find(q => q.id === id); if (!quiz) return; // Fill form with quiz data document.getElementById('quizTitle').value = quiz.title; document.getElementById('editingQuizId').value = quiz.id; document.getElementById('saveButtonText').textContent = '✏️ Update'; document.getElementById('cancelEditBtn').classList.remove('hidden'); // Set image if exists if (quiz.imageUrl) { uploadedImageUrl = quiz.imageUrl; document.getElementById('uploadContent').classList.add('hidden'); document.getElementById('imagePreview').classList.remove('hidden'); document.getElementById('previewImg').src = quiz.imageUrl; document.getElementById('fileName').textContent = 'Current image'; } // Clear and add questions document.getElementById('questionsContainer').innerHTML = ''; questionCount = 0; quiz.questions.forEach(q => { addQuestion(); const questionDivs = document.querySelectorAll('#questionsContainer .border'); const lastDiv = questionDivs[questionDivs.length - 1]; lastDiv.querySelector('.question-text').value = q.question; lastDiv.querySelector('.option-a').value = q.options.A; lastDiv.querySelector('.option-b').value = q.options.B; lastDiv.querySelector('.option-c').value = q.options.C; lastDiv.querySelector('.option-d').value = q.options.D; lastDiv.querySelector('.correct-answer').value = q.correct; }); updateLiveCode(); // Update code when editing // Scroll to form document.querySelector('.bg-white.rounded-xl.shadow-lg').scrollIntoView({ behavior: 'smooth' }); } function cancelEdit() { clearForm(); document.getElementById('editingQuizId').value = ''; document.getElementById('saveButtonText').textContent = '💾 Save'; document.getElementById('cancelEditBtn').classList.add('hidden'); } function collectQuestions() { const questions = []; const questionDivs = document.querySelectorAll('#questionsContainer .border'); questionDivs.forEach(div => { const questionText = div.querySelector('.question-text').value; const optionA = div.querySelector('.option-a').value; const optionB = div.querySelector('.option-b').value; const optionC = div.querySelector('.option-c').value; const optionD = div.querySelector('.option-d').value; const correctAnswer = div.querySelector('.correct-answer').value; if (questionText && optionA && optionB && optionC && optionD) { questions.push({ question: questionText, options: { A: optionA, B: optionB, C: optionC, D: optionD }, correct: correctAnswer }); } }); return questions; } function previewQuiz() { const title = document.getElementById('quizTitle').value || 'Untitled Quiz'; const questions = collectQuestions(); if (questions.length === 0) { showStatus('Please add at least one question to preview.', 'error'); return; } const previewDiv = document.getElementById('quizPreview'); const previewContent = document.getElementById('previewContent'); previewContent.innerHTML = `

${title}

${uploadedImageUrl ? `` : ''} ${questions.map((q, i) => `

${i + 1}. ${q.question}

${Object.entries(q.options).map(([key, value]) => `
${key === q.correct ? '✓' : key} ${key}. ${value}
`).join('')}
`).join('')} `; previewDiv.classList.remove('hidden'); previewDiv.scrollIntoView({ behavior: 'smooth' }); } function displayTeacherQuizzes() { const container = document.getElementById('teacherQuizzes'); const teacherQuizzes = quizzes.filter(q => q.createdBy === currentUser.username); if (teacherQuizzes.length === 0) { container.innerHTML = '

No quizzes created yet. Create your first quiz above!

'; return; } container.innerHTML = teacherQuizzes.map(quiz => `

${quiz.title}

${quiz.questions.length} questions • Created ${new Date(quiz.createdAt).toLocaleDateString()}

${quiz.updatedAt ? `

Updated ${new Date(quiz.updatedAt).toLocaleDateString()}

` : ''}
`).join(''); } function displayStudentQuizzes() { const container = document.getElementById('studentQuizzes'); if (quizzes.length === 0) { container.innerHTML = '

No quizzes available yet. Check back later!

'; return; } container.innerHTML = quizzes.map(quiz => `

${quiz.title}

${quiz.questions.length} questions • By ${quiz.createdBy}

Created ${new Date(quiz.createdAt).toLocaleDateString()}

`).join(''); } function takeQuiz(id) { const quiz = quizzes.find(q => q.id === id); if (!quiz) return; const quizDiv = document.createElement('div'); quizDiv.className = 'fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 p-4'; quizDiv.innerHTML = `

${quiz.title}

${quiz.imageUrl ? `` : ''}
${quiz.questions.map((q, i) => `

${i + 1}. ${q.question}

${Object.entries(q.options).map(([key, value]) => ` `).join('')}
`).join('')}
`; document.body.appendChild(quizDiv); } function submitQuiz(quizId) { const quiz = quizzes.find(q => q.id === quizId); if (!quiz) return; let score = 0; const total = quiz.questions.length; quiz.questions.forEach((q, i) => { const selected = document.querySelector(`input[name="q${i}"]:checked`); if (selected && selected.value === q.correct) { score++; } }); const percentage = Math.round((score / total) * 100); const resultsDiv = document.getElementById('quiz-results'); resultsDiv.innerHTML = `

Quiz Complete!

${score}/${total}

${percentage}% Score

${percentage >= 80 ? '🎉 Excellent work!' : percentage >= 60 ? '👍 Good job!' : '📚 Keep studying!'}
`; resultsDiv.classList.remove('hidden'); } function closeQuiz() { const quizModal = document.querySelector('.fixed.inset-0'); if (quizModal) { quizModal.remove(); } } function deleteQuiz(id) { if (confirm('Are you sure you want to delete this quiz?')) { quizzes = quizzes.filter(q => q.id !== id); localStorage.setItem('allQuizzes', JSON.stringify(quizzes)); displayTeacherQuizzes(); showStatus('Quiz deleted successfully.', 'success'); } } function clearForm() { document.getElementById('quizTitle').value = ''; document.getElementById('questionsContainer').innerHTML = ''; document.getElementById('uploadContent').classList.remove('hidden'); document.getElementById('imagePreview').classList.add('hidden'); uploadedImageUrl = ''; questionCount = 0; addQuestion(); updateLiveCode(); // Update code when form is cleared } function showStatus(message, type) { const statusDiv = document.getElementById('statusMessage'); statusDiv.className = `p-4 rounded-lg mb-4 ${ type === 'success' ? 'bg-green-100 text-green-800 border border-green-200' : type === 'error' ? 'bg-red-100 text-red-800 border border-red-200' : 'bg-blue-100 text-blue-800 border border-blue-200' }`; statusDiv.textContent = message; statusDiv.classList.remove('hidden'); setTimeout(() => { statusDiv.classList.add('hidden'); }, 5000); } function showLoginMessage(message, type) { const messageDiv = document.getElementById('loginMessage'); messageDiv.className = `mt-4 p-3 rounded-lg ${ type === 'success' ? 'bg-green-100 text-green-800 border border-green-200' : type === 'error' ? 'bg-red-100 text-red-800 border border-red-200' : 'bg-blue-100 text-blue-800 border border-blue-200' }`; messageDiv.textContent = message; messageDiv.classList.remove('hidden'); setTimeout(() => { messageDiv.classList.add('hidden'); }, 5000); }