Spaces:
Build error
Build error
| {% extends "Test-layout.html" %} | |
| {% block content %} | |
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Quiz Selection</title> | |
| <!-- Tailwind CSS --> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <style> | |
| @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap'); | |
| body { | |
| font-family: 'Inter', sans-serif; | |
| } | |
| /* Fade-in animation */ | |
| @keyframes fadeIn { | |
| from { | |
| opacity: 0; | |
| transform: translateY(20px); | |
| } | |
| to { | |
| opacity: 1; | |
| transform: translateY(0); | |
| } | |
| } | |
| .fade-in { | |
| animation: fadeIn 0.6s ease-out forwards; | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-gradient-to-br from-gray-50 to-blue-100"> | |
| <!-- Main container --> | |
| <div class="min-h-screen flex items-center justify-center p-4"> | |
| <!-- Card --> | |
| <div class="w-full max-w-lg bg-white/70 backdrop-blur-xl p-8 rounded-2xl shadow-lg border border-gray-200/80 space-y-5 fade-in"> | |
| <!-- Title --> | |
| <h1 class="text-3xl font-bold text-center text-gray-800 mb-8">Choose Your Quiz</h1> | |
| <!-- SVG Icon --> | |
| <svg xmlns="http://www.w3.org/2000/svg" class="hidden"> | |
| <symbol id="quiz-icon" viewBox="0 0 24 24"> | |
| <path stroke-linecap="round" stroke-linejoin="round" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" /> | |
| </symbol> | |
| </svg> | |
| <!-- ✅ All Free Quiz Options --> | |
| <button class="quiz-option group w-full flex items-center space-x-4 text-left p-4 rounded-xl bg-white border border-gray-200 hover:bg-blue-600 hover:border-blue-600 focus:outline-none focus:ring-2 focus:ring-blue-500 transition-all duration-300 ease-in-out shadow-sm hover:shadow-md transform hover:-translate-y-1" data-count="10"> | |
| <svg class="h-7 w-7 text-blue-500 group-hover:text-white transition-colors" fill="none" stroke="currentColor" stroke-width="1.5"> | |
| <use xlink:href="#quiz-icon" /> | |
| </svg> | |
| <span class="text-gray-700 text-lg font-semibold group-hover:text-white transition-colors">10 Question Quiz</span> | |
| </button> | |
| <button class="quiz-option group w-full flex items-center space-x-4 text-left p-4 rounded-xl bg-white border border-gray-200 hover:bg-blue-600 hover:border-blue-600 focus:outline-none focus:ring-2 focus:ring-blue-500 transition-all duration-300 ease-in-out shadow-sm hover:shadow-md transform hover:-translate-y-1" data-count="10"> | |
| <svg class="h-7 w-7 text-blue-500 group-hover:text-white transition-colors" fill="none" stroke="currentColor" stroke-width="1.5"> | |
| <use xlink:href="#quiz-icon" /> | |
| </svg> | |
| <span class="text-gray-700 text-lg font-semibold group-hover:text-white transition-colors">10 Question Quiz</span> | |
| </button> | |
| <button class="quiz-option group w-full flex items-center space-x-4 text-left p-4 rounded-xl bg-white border border-gray-200 hover:bg-blue-600 hover:border-blue-600 focus:outline-none focus:ring-2 focus:ring-blue-500 transition-all duration-300 ease-in-out shadow-sm hover:shadow-md transform hover:-translate-y-1" data-count="15"> | |
| <svg class="h-7 w-7 text-blue-500 group-hover:text-white transition-colors" fill="none" stroke="currentColor" stroke-width="1.5"> | |
| <use xlink:href="#quiz-icon" /> | |
| </svg> | |
| <span class="text-gray-700 text-lg font-semibold group-hover:text-white transition-colors">15 Question Quiz</span> | |
| </button> | |
| <button class="quiz-option group w-full flex items-center space-x-4 text-left p-4 rounded-xl bg-white border border-gray-200 hover:bg-blue-600 hover:border-blue-600 focus:outline-none focus:ring-2 focus:ring-blue-500 transition-all duration-300 ease-in-out shadow-sm hover:shadow-md transform hover:-translate-y-1" data-count="15"> | |
| <svg class="h-7 w-7 text-blue-500 group-hover:text-white transition-colors" fill="none" stroke="currentColor" stroke-width="1.5"> | |
| <use xlink:href="#quiz-icon" /> | |
| </svg> | |
| <span class="text-gray-700 text-lg font-semibold group-hover:text-white transition-colors">15 Question Quiz</span> | |
| </button> | |
| <button class="quiz-option group w-full flex items-center space-x-4 text-left p-4 rounded-xl bg-white border border-gray-200 hover:bg-blue-600 hover:border-blue-600 focus:outline-none focus:ring-2 focus:ring-blue-500 transition-all duration-300 ease-in-out shadow-sm hover:shadow-md transform hover:-translate-y-1" data-count="25"> | |
| <svg class="h-7 w-7 text-blue-500 group-hover:text-white transition-colors" fill="none" stroke="currentColor" stroke-width="1.5"> | |
| <use xlink:href="#quiz-icon" /> | |
| </svg> | |
| <span class="text-gray-700 text-lg font-semibold group-hover:text-white transition-colors">25 Question Quiz</span> | |
| </button> | |
| <button class="quiz-option group w-full flex items-center space-x-4 text-left p-4 rounded-xl bg-white border border-gray-200 hover:bg-blue-600 hover:border-blue-600 focus:outline-none focus:ring-2 focus:ring-blue-500 transition-all duration-300 ease-in-out shadow-sm hover:shadow-md transform hover:-translate-y-1" data-count="25"> | |
| <svg class="h-7 w-7 text-blue-500 group-hover:text-white transition-colors" fill="none" stroke="currentColor" stroke-width="1.5"> | |
| <use xlink:href="#quiz-icon" /> | |
| </svg> | |
| <span class="text-gray-700 text-lg font-semibold group-hover:text-white transition-colors">25 Question Quiz</span> | |
| </button> | |
| </div> | |
| </div> | |
| <script> | |
| // --- Event listener for quiz buttons --- | |
| const quizButtons = document.querySelectorAll('.quiz-option'); | |
| quizButtons.forEach(button => { | |
| button.addEventListener('click', () => { | |
| const count = button.getAttribute('data-count'); | |
| const topic = 'Deep_Reinforcement_Learning'; // Example topic | |
| window.location.href = `/Quiz-test?topic=${topic}&count=${count}`; | |
| }); | |
| }); | |
| </script> | |
| </body> | |
| </html> | |
| {% endblock %} |