|
|
{% extends "Test-layout.html" %}
|
|
|
|
|
|
|
|
|
{% block content %}
|
|
|
<!DOCTYPE html>
|
|
|
<html lang="en">
|
|
|
<head>
|
|
|
<meta charset="UTF-8">
|
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
|
<title>Quiz Selection</title>
|
|
|
|
|
|
<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;
|
|
|
}
|
|
|
|
|
|
|
|
|
@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">
|
|
|
|
|
|
|
|
|
<div class="min-h-screen flex items-center justify-center p-4">
|
|
|
|
|
|
|
|
|
<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">
|
|
|
|
|
|
|
|
|
<h1 class="text-3xl font-bold text-center text-gray-800 mb-8">Choose Your Quiz</h1>
|
|
|
|
|
|
|
|
|
<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>
|
|
|
|
|
|
|
|
|
<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>
|
|
|
|
|
|
const quizButtons = document.querySelectorAll('.quiz-option');
|
|
|
quizButtons.forEach(button => {
|
|
|
button.addEventListener('click', () => {
|
|
|
const count = button.getAttribute('data-count');
|
|
|
const topic = 'Stacking';
|
|
|
window.location.href = `/Quiz-test?topic=${topic}&count=${count}`;
|
|
|
|
|
|
});
|
|
|
});
|
|
|
</script>
|
|
|
|
|
|
</body>
|
|
|
</html>
|
|
|
{% endblock %} |
