HTMLify

index.html
Views: 367 | Author: amar
<!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>
HTMLify

Share this file:
