|
|
<!DOCTYPE html> |
|
|
<html lang="en"> |
|
|
<head> |
|
|
<meta charset="UTF-8"> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
|
<title>QuizCraft Pro - History</title> |
|
|
<link rel="icon" type="image/x-icon" href="/static/favicon.ico"> |
|
|
<script src="https://cdn.tailwindcss.com"></script> |
|
|
<script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script> |
|
|
<script src="https://unpkg.com/feather-icons"></script> |
|
|
<script src="https://cdn.jsdelivr.net/npm/vanta@latest/dist/vanta.waves.min.js"></script> |
|
|
<script src="https://cdn.jsdelivr.net/npm/animejs/lib/anime.min.js"></script> |
|
|
<style> |
|
|
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap'); |
|
|
body { |
|
|
font-family: 'Poppins', sans-serif; |
|
|
} |
|
|
.glass-card { |
|
|
background: rgba(255, 255, 255, 0.1); |
|
|
backdrop-filter: blur(10px); |
|
|
border: 1px solid rgba(255, 255, 255, 0.2); |
|
|
} |
|
|
.stat-card { |
|
|
background: linear-gradient(135deg, rgba(102, 126, 234, 0.2), rgba(118, 75, 162, 0.2); |
|
|
} |
|
|
.history-item { |
|
|
transition: all 0.3s ease; |
|
|
} |
|
|
.history-item:hover { |
|
|
transform: translateX(5px); |
|
|
background: rgba(255, 255, 255, 0.05); |
|
|
} |
|
|
</style> |
|
|
</head> |
|
|
<body class="min-h-screen bg-gradient-to-br from-blue-900 via-purple-900 to-indigo-900 text-white"> |
|
|
<div id="vanta-waves" class="fixed top-0 left-0 w-full h-full z-0"></div> |
|
|
|
|
|
|
|
|
<nav class="glass-card rounded-lg m-4 p-4 relative z-10"> |
|
|
<div class="container mx-auto flex justify-between items-center"> |
|
|
<div class="flex items-center space-x-2"> |
|
|
<i data-feather="award" class="text-purple-400"></i> |
|
|
<span class="text-xl font-bold">QuizCraft Pro</span> |
|
|
</div> |
|
|
<div class="flex space-x-6"> |
|
|
<a href="index.html" class="hover:text-purple-300 transition-colors">Home</a> |
|
|
<a href="quiz.html" class="hover:text-purple-300 transition-colors">Quiz</a> |
|
|
<a href="history.html" class="hover:text-purple-300 transition-colors">History</a> |
|
|
</div> |
|
|
</div> |
|
|
</nav> |
|
|
|
|
|
|
|
|
<div class="container mx-auto px-4 py-8 max-w-6xl relative z-10"> |
|
|
|
|
|
<div class="text-center mb-12"> |
|
|
<h1 class="text-4xl md:text-5xl font-bold mb-4 bg-gradient-to-r from-blue-400 to-purple-400 bg-clip-text text-transparent"> |
|
|
Your Quiz Journey |
|
|
</h1> |
|
|
<p class="text-xl text-gray-300"> |
|
|
Track your progress and see how far you've come |
|
|
</p> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="grid md:grid-cols-3 gap-6 mb-12"> |
|
|
<div class="stat-card p-6 rounded-xl text-center"> |
|
|
<i data-feather="trending-up" class="w-8 h-8 mx-auto mb-3 text-green-400"></i> |
|
|
<div class="text-3xl font-bold" id="total-quizzes">0</div> |
|
|
<div class="text-gray-300">Total Quizzes</div> |
|
|
</div> |
|
|
<div class="stat-card p-6 rounded-xl text-center"> |
|
|
<i data-feather="target" class="w-8 h-8 mx-auto mb-3 text-blue-400"></i> |
|
|
<div class="text-3xl font-bold" id="average-score">0%</div> |
|
|
<div class="text-gray-300">Average Score</div> |
|
|
</div> |
|
|
<div class="stat-card p-6 rounded-xl text-center"> |
|
|
<i data-feather="star" class="w-8 h-8 mx-auto mb-3 text-yellow-400"></i> |
|
|
<div class="text-3xl font-bold" id="best-score">0%</div> |
|
|
<div class="text-gray-300">Best Score</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="glass-card p-6 rounded-xl"> |
|
|
<h2 class="text-2xl font-semibold mb-6">Recent Attempts</h2> |
|
|
|
|
|
<div id="history-list" class="space-y-4"> |
|
|
|
|
|
<div class="text-center py-8 text-gray-400" id="empty-state"> |
|
|
<i data-feather="inbox" class="w-12 h-12 mx-auto mb-4"></i> |
|
|
<p>No quiz attempts yet. Start your first quiz!</p> |
|
|
<a href="quiz.html" class="btn-primary inline-block mt-4 px-6 py-2 rounded-full"> |
|
|
Take a Quiz |
|
|
</a> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="text-center mt-8"> |
|
|
<button id="clear-history" class="glass-card px-6 py-3 rounded-full font-semibold text-red-400 hover:text-red-300 transition-colors"> |
|
|
<i data-feather="trash-2" class="inline mr-2"></i>Clear All History |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<script> |
|
|
feather.replace(); |
|
|
|
|
|
|
|
|
VANTA.WAVES({ |
|
|
el: "#vanta-waves", |
|
|
mouseControls: true, |
|
|
touchControls: true, |
|
|
gyroControls: false, |
|
|
minHeight: 200.00, |
|
|
minWidth: 200.00, |
|
|
scale: 1.00, |
|
|
scaleMobile: 1.00, |
|
|
color: 0x667eea, |
|
|
shininess: 35.00, |
|
|
waveHeight: 15.00, |
|
|
waveSpeed: 0.70, |
|
|
zoom: 0.75 |
|
|
}); |
|
|
|
|
|
|
|
|
function loadHistory() { |
|
|
const history = JSON.parse(localStorage.getItem('quizHistory') || '[]'); |
|
|
const historyList = document.getElementById('history-list'); |
|
|
const emptyState = document.getElementById('empty-state'); |
|
|
|
|
|
|
|
|
const totalQuizzes = document.getElementById('total-quizzes'); |
|
|
const averageScore = document.getElementById('average-score'); |
|
|
const bestScore = document.getElementById('best-score'); |
|
|
|
|
|
totalQuizzes.textContent = history.length; |
|
|
|
|
|
if (history.length > 0) { |
|
|
emptyState.style.display = 'none'; |
|
|
|
|
|
const totalScore = history.reduce((sum, quiz) => sum + quiz.score, 0); |
|
|
const avgScore = Math.round(totalScore / history.length); |
|
|
averageScore.textContent = `${avgScore}%`; |
|
|
|
|
|
const best = Math.max(...history.map(quiz => quiz.score)); |
|
|
bestScore.textContent = `${best}%`; |
|
|
|
|
|
|
|
|
historyList.innerHTML = ''; |
|
|
|
|
|
|
|
|
history.forEach((quiz, index) => { |
|
|
const historyItem = document.createElement('div'); |
|
|
historyItem.className = 'history-item p-4 rounded-lg border border-gray-700'; |
|
|
historyItem.innerHTML = ` |
|
|
<div class="flex justify-between items-center"> |
|
|
<div class="flex items-center space-x-4"> |
|
|
<div class="w-12 h-12 rounded-full bg-gradient-to-r from-purple-500 to-blue-500 flex items-center justify-center"> |
|
|
<span class="font-bold">${quiz.score}</span> |
|
|
</div> |
|
|
<div class="flex-1"> |
|
|
<h3 class="font-semibold">${quiz.category}</h3> |
|
|
<p class="text-sm text-gray-400">${new Date(quiz.date).toLocaleDateString()}</p> |
|
|
</div> |
|
|
<div class="text-right"> |
|
|
<div class="text-2xl font-bold">${quiz.score}%</h3> |
|
|
<p class="text-sm text-gray-400">${quiz.score}/${quiz.totalQuestions}</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
`; |
|
|
historyList.appendChild(historyItem); |
|
|
}); |
|
|
} else { |
|
|
emptyState.style.display = 'block'; |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
document.getElementById('clear-history').addEventListener('click', function() { |
|
|
if (confirm('Are you sure you want to clear all your quiz history? This action cannot be undone.')) { |
|
|
localStorage.removeItem('quizHistory'); |
|
|
loadHistory(); |
|
|
} |
|
|
}); |
|
|
|
|
|
|
|
|
document.addEventListener('DOMContentLoaded', function() { |
|
|
loadHistory(); |
|
|
|
|
|
|
|
|
anime({ |
|
|
targets: '.glass-card, .stat-card', |
|
|
translateY: [30, 0], |
|
|
opacity: [0, 1], |
|
|
duration: 800, |
|
|
delay: anime.stagger(100) |
|
|
}); |
|
|
}); |
|
|
</script> |
|
|
</body> |
|
|
</html> |
|
|
|
