Spaces:

keepyoursins
/

quizcraft-pro-brainy-battles-history-trails

Running

App Files Files Community

keepyoursins commited on Oct 10

Commit

0b82439

verified ·

1 Parent(s): e4f83c5

Create a Quiz App, with a quiz section, and a history section.

Browse files

Files changed (4) hide show

README.md +7 -4
history.html +205 -0
index.html +137 -18
quiz.html +333 -0

README.md CHANGED Viewed

@@ -1,10 +1,13 @@
 ---
-title: Quizcraft Pro Brainy Battles History Trails
-emoji: 💻
-colorFrom: green
 colorTo: yellow
 sdk: static
 pinned: false
 ---
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

 ---
+title: QuizCraft Pro - Brainy Battles & History Trails 🧠
+colorFrom: pink
 colorTo: yellow
+emoji: 🐳
 sdk: static
 pinned: false
+tags:
+  - deepsite-v3
 ---
+# Welcome to your new DeepSite project!
+This project was created with [DeepSite](https://deepsite.hf.co).

history.html ADDED Viewed

	@@ -0,0 +1,205 @@

+<!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>
+    <!-- Navigation -->
+    <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>
+    <!-- Main Content -->
+    <div class="container mx-auto px-4 py-8 max-w-6xl relative z-10">
+        <!-- Header -->
+        <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>
+        <!-- Statistics Cards -->
+        <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>
+        <!-- History List -->
+        <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">
+                <!-- History items will be dynamically inserted here -->
+                <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>
+        <!-- Clear History Button -->
+        <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();
+        // Initialize Vanta.js waves
+        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
+        });
+        // Load and display history
+        function loadHistory() {
+            const history = JSON.parse(localStorage.getItem('quizHistory') || '[]');
+            const historyList = document.getElementById('history-list');
+            const emptyState = document.getElementById('empty-state');
+            // Update statistics
+            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}%`;
+                // Clear existing items
+                historyList.innerHTML = '';
+                // Add history items
+                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';
+            }
+        }
+        // Clear history
+        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();
+                }
+            });
+        // Load history on page load
+        document.addEventListener('DOMContentLoaded', function() {
+            loadHistory();
+            // Add entrance animations
+            anime({
+                targets: '.glass-card, .stat-card',
+                translateY: [30, 0],
+                opacity: [0, 1],
+                duration: 800,
+                delay: anime.stagger(100)
+            });
+        });
+    </script>
+</body>
+</html>

index.html CHANGED Viewed

@@ -1,19 +1,138 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
 </html>

+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>QuizCraft Pro - Home</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.globe.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;
+        }
+        .vanta-bg {
+            position: fixed;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            z-index: -1;
+        }
+        .glass-card {
+            background: rgba(255, 255, 255, 0.1);
+            backdrop-filter: blur(10px);
+            border: 1px solid rgba(255, 255, 255, 0.2);
+        }
+        .btn-primary {
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            transition: all 0.3s ease;
+        }
+        .btn-primary:hover {
+            transform: translateY(-2px);
+            box-shadow: 0 10px 20px rgba(0,0,0,0.2);
+        }
+        .btn-secondary {
+            background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
+            transition: all 0.3s ease;
+        }
+        .btn-secondary:hover {
+            transform: translateY(-2px);
+            box-shadow: 0 10px 20px rgba(0,0,0,0.2);
+        }
+    </style>
+</head>
+<body class="min-h-screen text-white overflow-x-hidden">
+    <div id="vanta-bg" class="vanta-bg"></div>
+    <!-- Navigation -->
+    <nav class="glass-card rounded-lg m-4 p-4">
+        <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>
+    <!-- Hero Section -->
+    <section class="container mx-auto px-4 py-16 text-center">
+        <div class="max-w-4xl mx-auto">
+            <h1 class="text-5xl md:text-7xl font-bold mb-6 bg-gradient-to-r from-purple-400 to-pink-400 bg-clip-text text-transparent">
+                Challenge Your Mind
+            </h1>
+            <p class="text-xl md:text-2xl mb-8 text-gray-300">
+                Dive into endless knowledge, track your progress, and become the ultimate quiz master!
+            </p>
+            <div class="flex flex-col sm:flex-row gap-4 justify-center">
+                <a href="quiz.html" class="btn-primary px-8 py-4 rounded-full font-semibold text-lg">
+                    <i data-feather="play" class="inline mr-2"></i>Start Quiz
+                </a>
+                <a href="history.html" class="btn-secondary px-8 py-4 rounded-full font-semibold text-lg">
+                    <i data-feather="bar-chart-2" class="inline mr-2"></i>View History
+                </a>
+            </div>
+        </div>
+    </section>
+    <!-- Features Section -->
+    <section class="container mx-auto px-4 py-16">
+        <div class="grid md:grid-cols-3 gap-8">
+            <div class="glass-card p-6 rounded-xl text-center">
+                <i data-feather="zap" class="w-12 h-12 mx-auto mb-4 text-yellow-400"></i>
+                <h3 class="text-xl font-semibold mb-3">Lightning Fast</h3>
+                <p class="text-gray-300">Instant feedback and seamless transitions for the best quiz experience</p>
+            </div>
+            <div class="glass-card p-6 rounded-xl text-center">
+                <i data-feather="trending-up" class="w-12 h-12 mx-auto mb-4 text-green-400"></i>
+                <h3 class="text-xl font-semibold mb-3">Track Progress</h3>
+                <p class="text-gray-300">Monitor your improvement with detailed analytics and history</p>
+            </div>
+            <div class="glass-card p-6 rounded-xl text-center">
+                <i data-feather="database" class="w-12 h-12 mx-auto mb-4 text-blue-400"></i>
+                <h3 class="text-xl font-semibold mb-3">Vast Categories</h3>
+                <p class="text-gray-300">Thousands of questions across multiple topics and difficulty levels</p>
+            </div>
+        </div>
+    </section>
+    <script>
+        // Initialize Vanta.js globe
+        VANTA.GLOBE({
+            el: "#vanta-bg",
+            mouseControls: true,
+            touchControls: true,
+            gyroControls: false,
+            minHeight: 200.00,
+            minWidth: 200.00,
+            scale: 1.00,
+            scaleMobile: 1.00,
+            color: 0x764ba2,
+            backgroundColor: 0x0
+        });
+        // Initialize feather icons
+        feather.replace();
+        // Add some entrance animations
+        document.addEventListener('DOMContentLoaded', function() {
+            anime({
+                targets: 'h1, p, .btn-primary, .btn-secondary',
+                translateY: [50, 0],
+                opacity: [0, 1],
+                duration: 1000,
+                delay: anime.stagger(200)
+            });
+        });
+    </script>
+</body>
 </html>

quiz.html ADDED Viewed

	@@ -0,0 +1,333 @@

+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>QuizCraft Pro - Quiz</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/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);
+        }
+        .btn-primary {
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            transition: all 0.3s ease;
+        }
+        .btn-primary:hover {
+            transform: translateY(-2px);
+            box-shadow: 0 10px 20px rgba(0,0,0,0.2);
+        }
+        .option-card {
+            transition: all 0.3s ease;
+            cursor: pointer;
+        }
+        .option-card:hover {
+            transform: translateY(-2px);
+            background: rgba(255, 255, 255, 0.15);
+        }
+        .option-card.selected {
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+        }
+        .progress-bar {
+            transition: width 0.5s ease-in-out;
+        }
+    </style>
+</head>
+<body class="min-h-screen bg-gradient-to-br from-purple-900 via-blue-900 to-indigo-900 text-white">
+    <!-- Navigation -->
+    <nav class="glass-card rounded-lg m-4 p-4">
+        <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>
+    <!-- Quiz Container -->
+    <div class="container mx-auto px-4 py-8 max-w-4xl">
+        <!-- Category Selection -->
+        <div id="category-selection" class="glass-card p-8 rounded-xl mb-8">
+            <h2 class="text-3xl font-bold mb-6 text-center">Choose Your Challenge</h2>
+            <div class="grid grid-cols-2 md:grid-cols-4 gap-4">
+                <div class="option-card p-4 rounded-lg text-center border-2 border-purple-500" data-category="9">
+                    <i data-feather="brain" class="w-8 h-8 mx-auto mb-2"></i>
+                    <span>General Knowledge</span>
+                </div>
+                <div class="option-card p-4 rounded-lg text-center border-2 border-blue-500" data-category="17">
+                    <i data-feather="atom" class="w-8 h-8 mx-auto mb-2"></i>
+                    <span>Science</span>
+                </div>
+                <div class="option-card p-4 rounded-lg text-center border-2 border-green-500" data-category="22">
+                    <i data-feather="map" class="w-8 h-8 mx-auto mb-2"></i>
+                    <span>Geography</span>
+                </div>
+                <div class="option-card p-4 rounded-lg text-center border-2 border-yellow-500" data-category="23">
+                    <i data-feather="book" class="w-8 h-8 mx-auto mb-2"></i>
+                    <span>History</span>
+                </div>
+            </div>
+            <div class="text-center mt-6">
+                <button id="start-quiz" class="btn-primary px-8 py-3 rounded-full font-semibold">
+                    Start Quiz <i data-feather="arrow-right" class="inline ml-2"></i>
+                </button>
+            </div>
+        </div>
+        <!-- Quiz Interface -->
+        <div id="quiz-interface" class="hidden">
+            <!-- Progress Bar -->
+            <div class="glass-card p-4 rounded-xl mb-6">
+                <div class="flex justify-between items-center mb-2">
+                    <span class="text-sm">Question <span id="current-question">1</span> of 10</span>
+                    <span id="score" class="text-sm">Score: 0</span>
+                </div>
+                <div class="w-full bg-gray-700 rounded-full h-2">
+                    <div id="progress-bar" class="progress-bar h-2 rounded-full bg-gradient-to-r from-purple-400 to-pink-400" style="width: 10%"></div>
+            </div>
+            <!-- Question Card -->
+            <div id="question-card" class="glass-card p-8 rounded-xl mb-6">
+                <h2 id="question-text" class="text-2xl font-semibold mb-6 text-center"></h2>
+                <div id="options-container" class="grid gap-4">
+                    <!-- Options will be dynamically inserted here -->
+                </div>
+            </div>
+            <!-- Navigation Buttons -->
+            <div class="flex justify-between">
+                <button id="prev-question" class="glass-card px-6 py-3 rounded-full font-semibold opacity-50 cursor-not-allowed">
+                    <i data-feather="arrow-left" class="inline mr-2"></i>Previous
+                </button>
+                <button id="next-question" class="btn-primary px-6 py-3 rounded-full font-semibold">
+                    Next <i data-feather="arrow-right" class="inline ml-2"></i>
+                </button>
+            </div>
+        </div>
+        <!-- Results Screen -->
+        <div id="results-screen" class="hidden glass-card p-8 rounded-xl text-center">
+            <i data-feather="award" class="w-16 h-16 mx-auto mb-4 text-yellow-400"></i>
+            <h2 class="text-4xl font-bold mb-4">Quiz Complete!</h2>
+            <div id="final-score" class="text-6xl font-bold mb-4 bg-gradient-to-r from-purple-400 to-pink-400 bg-clip-text text-transparent"></div>
+            <p id="performance-message" class="text-xl mb-6"></p>
+            <div class="flex flex-col sm:flex-row gap-4 justify-center">
+                <button id="play-again" class="btn-primary px-6 py-3 rounded-full font-semibold">
+                <i data-feather="refresh-cw" class="inline mr-2"></i>Play Again
+                </button>
+                <a href="history.html" class="btn-secondary px-6 py-3 rounded-full font-semibold">
+                <i data-feather="bar-chart-2" class="inline mr-2"></i>View History
+                </a>
+            </div>
+        </div>
+    </div>
+    <script>
+        feather.replace();
+        // Quiz state
+        let currentCategory = null;
+        let currentQuestionIndex = 0;
+        let score = 0;
+        let questions = [];
+        let selectedOptions = new Array(10).fill(null);
+        // DOM Elements
+        const categorySelection = document.getElementById('category-selection');
+        const quizInterface = document.getElementById('quiz-interface');
+        const resultsScreen = document.getElementById('results-screen');
+        const startQuizBtn = document.getElementById('start-quiz');
+        const questionText = document.getElementById('question-text');
+        const optionsContainer = document.getElementById('options-container');
+        const currentQuestionSpan = document.getElementById('current-question');
+        const scoreSpan = document.getElementById('score');
+        const progressBar = document.getElementById('progress-bar');
+        const prevQuestionBtn = document.getElementById('prev-question');
+        const nextQuestionBtn = document.getElementById('next-question');
+        const finalScore = document.getElementById('final-score');
+        const performanceMessage = document.getElementById('performance-message');
+        const playAgainBtn = document.getElementById('play-again');
+        // Category selection
+        document.querySelectorAll('.option-card').forEach(card => {
+            card.addEventListener('click', function() {
+                document.querySelectorAll('.option-card').forEach(c => {
+                    c.classList.remove('selected', 'border-white');
+                    c.classList.add('border-opacity-50');
+                });
+                this.classList.add('selected', 'border-white');
+                this.classList.remove('border-opacity-50');
+                currentCategory = this.dataset.category;
+            });
+        });
+        // Start quiz
+        startQuizBtn.addEventListener('click', async function() {
+            if (!currentCategory) {
+                alert('Please select a category first!');
+                return;
+            }
+            try {
+                const response = await fetch(`https://opentdb.com/api.php?amount=10&category=${currentCategory}&type=multiple`);
+                const data = await response.json();
+                questions = data.results;
+                categorySelection.classList.add('hidden');
+                quizInterface.classList.remove('hidden');
+                loadQuestion(0);
+            } catch (error) {
+                console.error('Error fetching questions:', error);
+                alert('Failed to load questions. Please try again.');
+            }
+        });
+        // Load question
+        function loadQuestion(index) {
+            const question = questions[index];
+            currentQuestionIndex = index;
+            // Update UI
+            currentQuestionSpan.textContent = index + 1;
+            scoreSpan.textContent = `Score: ${score}`;
+            progressBar.style.width = `${((index + 1) / 10) * 100}%`;
+            // Set question text
+            questionText.textContent = decodeHTML(question.question);
+            // Create options
+            const allOptions = [...question.incorrect_answers, question.correct_answer]
+                .sort(() => Math.random() - 0.5);
+            optionsContainer.innerHTML = '';
+            allOptions.forEach((option, optionIndex) => {
+                const optionDiv = document.createElement('div');
+                optionDiv.className = `option-card p-4 rounded-lg border-2 border-gray-600 ${
+                    selectedOptions[index] === option ? 'selected' : ''
+                }`;
+                optionDiv.innerHTML = `
+                    <div class="flex items-center justify-between">
+                        <span>${decodeHTML(option)}</span>
+                        ${selectedOptions[index] === option ? '<i data-feather="check" class="w-5 h-5"></i>' : ''}
+                    </div>
+                `;
+                optionDiv.addEventListener('click', () => selectOption(option, index));
+                optionsContainer.appendChild(optionDiv);
+            });
+            // Update navigation buttons
+            prevQuestionBtn.disabled = index === 0;
+            prevQuestionBtn.classList.toggle('opacity-50', index === 0);
+            prevQuestionBtn.classList.toggle('cursor-not-allowed', index === 0);
+            if (index === 9) {
+                nextQuestionBtn.textContent = 'Finish Quiz';
+                nextQuestionBtn.innerHTML = 'Finish Quiz <i data-feather="check" class="inline ml-2"></i>';
+            } else {
+                nextQuestionBtn.textContent = 'Next';
+                nextQuestionBtn.innerHTML = 'Next <i data-feather="arrow-right" class="inline ml-2"></i>';
+            }
+            feather.replace();
+        }
+        // Select option
+        function selectOption(option, index) {
+            selectedOptions[index] = option;
+            const isCorrect = option === questions[index].correct_answer;
+            // Update score if this is a new selection
+            if (isCorrect && selectedOptions[index] !== option) {
+                score += 10;
+            }
+            loadQuestion(index); // Reload to show selection
+        }
+        // Navigation
+        prevQuestionBtn.addEventListener('click', () => {
+            if (currentQuestionIndex > 0) {
+                loadQuestion(currentQuestionIndex - 1);
+            }
+        });
+        nextQuestionBtn.addEventListener('click', () => {
+            if (currentQuestionIndex < 9) {
+                loadQuestion(currentQuestionIndex + 1);
+            } else {
+                // Show results
+                showResults();
+            }
+        });
+        // Show results
+        function showResults() {
+            quizInterface.classList.add('hidden');
+            resultsScreen.classList.remove('hidden');
+            finalScore.textContent = `${score}/100`;
+            if (score >= 90) {
+                performanceMessage.textContent = 'Outstanding! You are a quiz master! 🌟';
+            } else if (score >= 70) {
+                performanceMessage.textContent = 'Great job! You know your stuff! 💪';
+            } else if (score >= 50) {
+                performanceMessage.textContent = 'Good effort! Keep learning! 📚';
+            } else {
+                performanceMessage.textContent = 'Nice try! Practice makes perfect! 🔄';
+            }
+            // Save to localStorage for history
+            const quizResult = {
+                category: document.querySelector('.selected span').textContent,
+                score: score,
+                date: new Date().toISOString(),
+                totalQuestions: 10
+            };
+            let history = JSON.parse(localStorage.getItem('quizHistory') || '[]');
+            history.unshift(quizResult);
+            localStorage.setItem('quizHistory', JSON.stringify(history));
+        }
+        // Play again
+        playAgainBtn.addEventListener('click', () => {
+            location.reload();
+        });
+        // Utility function to decode HTML entities
+        function decodeHTML(html) {
+            const txt = document.createElement('textarea');
+            txt.innerHTML = html;
+            return txt.value;
+        }
+        // Entrance animations
+        document.addEventListener('DOMContentLoaded', function() {
+            anime({
+                targets: '.glass-card',
+                translateY: [30, 0],
+                opacity: [0, 1],
+                duration: 800,
+                delay: anime.stagger(100)
+            });
+        });
+    </script>
+</body>
+</html>