<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Anime Quiz </title>
<link href="https://fonts.googleapis.com/css2?family=Press+Start+2P&family=Comic+Neue:wght@700&display=swap" rel="stylesheet">
<style>
body {
font-family: 'Comic Neue', cursive;
padding: 20px;
background: linear-gradient(135deg, #ffb3d9 0%, #a3d8f4 100%);
min-height: 100vh;
}
h1 {
font-family: 'Press Start 2P', cursive;
text-align: center;
color: #ff0066;
text-shadow: 2px 2px #ffffff;
margin: 20px 0 40px;
}
.input-section {
text-align: center;
margin-bottom: 30px;
}
label {
display: block;
margin: 8px 0;
padding: 10px;
border-radius: 10px;
transition: all 0.2s ease;
cursor: pointer;
background: white; /* Add base background */
}
label:hover {
background: #ffe6f0 !important; /* Matches index.html's pink */
transform: translateX(5px);
box-shadow: 0 2px 8px rgba(255, 0, 102, 0.1);
} #animeInput {
padding: 12px 20px;
width: 300px;
border: 3px solid #ff0066;
border-radius: 30px;
font-size: 1.1rem;
margin-right: 10px;
}
button {
padding: 12px 30px;
border: none;
border-radius: 30px;
background: #ff0066;
color: white;
cursor: pointer;
font-size: 1.1rem;
transition: all 0.3s ease;
box-shadow: 0 4px 15px rgba(255,0,102,0.3);
}
button:hover {
transform: translateY(-2px);
box-shadow: 0 6px 20px rgba(255,0,102,0.4);
}
#quizContainer {
max-width: 800px;
margin: 20px auto;
}
.question-block {
margin-bottom: 20px;
background: rgba(255, 255, 255, 0.9);
padding: 20px;
border-radius: 15px;
box-shadow: 0 4px 15px rgba(0,0,0,0.2);
border-left: 5px solid #ff0066;
position: relative;
overflow: hidden;
}
.question-block::before {
content: "❓";
position: absolute;
right: 10px;
top: 10px;
font-size: 1.5rem;
opacity: 0.3;
}
.question-block p {
margin: 0 0 15px;
font-weight: bold;
color: #333;
font-size: 1.1rem;
}
#result {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background: white;
padding: 40px 50px;
border-radius: 20px;
text-align: center;
box-shadow: 0 0 30px rgba(0,0,0,0.2);
z-index: 1000;
max-width: 400px;
display: none;
}
#result.show {
display: block;
animation: popIn 0.4s cubic-bezier(0.18, 0.89, 0.32, 1.28);
}
@keyframes popIn {
0% { transform: translate(-50%, -50%) scale(0); }
100% { transform: translate(-50%, -50%) scale(1); }
}
.overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0,0,0,0.5);
backdrop-filter: blur(3px);
display: none;
z-index: 999;
}
.overlay.active {
display: block;
}
</style>
</head>
<body>
<h1>🎌 Anime Quiz challange 🎌</h1>
<div class="input-section">
<input id="animeInput" type="text" placeholder="enter a anime name?" />
<button id="startBtn">Start quiz!</button>
</div>
<div id="quizContainer"></div>
<div class="overlay" id="overlay"></div>
<div id="result">
<h2 style="color: #ff0066; margin: 0 0 20px;">Quiz Results 🎯</h2>
<div id="scoreDisplay" style="font-size: 2.5em; margin: 20px 0;"></div>
<p id="resultMessage" style="font-size: 1.2em;"></p>
<button onclick="closeResult()" style="margin-top: 25px;">Close</button>
</div>
<script>
document.getElementById('startBtn').addEventListener('click', loadQuiz);
let currentAnime = null;
async function loadQuiz() {
const inputEl = document.getElementById("animeInput");
const query = inputEl.value.trim().toLowerCase();
if (!query) {
alert("Please enter an anime title!");
return;
}
document.getElementById('quizContainer').style.display = 'none';
try {
const res = await fetch('dataset.json');
const dataset = await res.json();
currentAnime = dataset.find(a => a.title.toLowerCase() === query);
if (!currentAnime) {
alert("Anime not found in our database!");
return;
}
renderQuiz();
} catch (err) {
console.error(err);
alert("Failed to load quiz data!");
}
}
function renderQuiz() {
const container = document.getElementById("quizContainer");
container.innerHTML = '';
currentAnime.questions.forEach((q, idx) => {
const block = document.createElement('div');
block.className = 'question-block';
block.innerHTML = `<p style="font-size: 1.1em; color: #333;">${idx+1}. ${q.question}</p>`;
q.choices.forEach(choice => {
const id = `q${idx}_${choice.replace(/\s/g, '')}`;
block.innerHTML += `
<label style="display: block; margin: 10px 0; padding: 12px;
border-radius: 10px; background: #fff5f9;">
<input type="radio" name="q${idx}" value="${choice}">
${choice}
</label>`;
});
container.appendChild(block);
});
const submitBtn = document.createElement('button');
submitBtn.textContent = 'Submit Answers';
submitBtn.style.margin = '20px auto';
submitBtn.style.display = 'block';
submitBtn.addEventListener('click', showResult);
container.appendChild(submitBtn);
container.style.display = 'block';
}
function showResult() {
let correct = 0;
currentAnime.questions.forEach((q, idx) => {
const selected = document.querySelector(`input[name="q${idx}"]:checked`);
if (selected && selected.value === q.answer) correct++;
});
const scoreText = `${correct}/${currentAnime.questions.length}`;
const percentage = (correct / currentAnime.questions.length * 100).toFixed(1);
document.getElementById('scoreDisplay').textContent = scoreText;
document.getElementById('resultMessage').innerHTML = `
${percentage}% Correct!<br>
${getResultMessage(percentage)}
`;
document.getElementById('overlay').classList.add('active');
document.getElementById('result').classList.add('show');
}
function closeResult() {
document.getElementById('overlay').classList.remove('active');
document.getElementById('result').classList.remove('show');
}
function getResultMessage(percentage) {
if (percentage >= 90) return "Legendary! 🏆";
if (percentage >= 70) return "Awesome! You rock! 🤘";
if (percentage >= 50) return "Good effort! Keep going! 💪";
return "Better luck next time! 🌸";
}
</script>
</body>
</html>