ishapathak19/roadmap-wizardry
0
1```html2<!DOCTYPE html>3<html lang="en">4<head>5 <meta charset="UTF-8">6 <meta name="viewport" content="width=device-width, initial-scale=1.0">7 <title>Practice | Roadmap Wizardry 🧙♂️</title>8 <link rel="stylesheet" href="style.css">9 <script src="https://cdn.tailwindcss.com"></script>10 <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>11</head>12<body class="bg-gray-50">13 <custom-navbar></custom-navbar>14 15 <main class="container mx-auto px-4 py-12">16 <div class="bg-white p-8 rounded-xl shadow-lg">17 <h2 class="text-3xl font-bold text-indigo-800 mb-6">Practice Questions</h2>18 19 <div id="practice-container" class="space-y-8">20 <!-- Questions will be loaded from JSON -->21 </div>22 23 <div class="mt-8 flex justify-between items-center">24 <button id="prev-btn" class="btn-primary opacity-50 cursor-not-allowed" disabled>← Previous</button>25 <span id="question-counter" class="text-gray-600">Question 1 of 5</span>26 <button id="next-btn" class="btn-primary">Next →</button>27 </div>28 </div>29 </main>30 31 <custom-footer></custom-footer>32 33 <script src="components/navbar.js"></script>34 <script src="components/footer.js"></script>35 <script src="script.js"></script>36 <script>37 feather.replace();38 39 let currentQuestion = 0;40 let questions = [];41 42 // Load practice questions from JSON43 fetch('data/practice.json')44 .then(response => response.json())45 .then(data => {46 questions = data;47 showQuestion(currentQuestion);48 });49 50 function showQuestion(index) {51 const container = document.getElementById('practice-container');52 const question = questions[index];53 54 container.innerHTML = `55 <div>56 <h3 class="text-xl font-bold mb-4">${question.question}</h3>57 <div class="space-y-3">58 ${question.options.map((option, i) => `59 <div class="flex items-center">60 <input type="radio" id="option-${i}" name="answer" value="${i}" class="mr-3">61 <label for="option-${i}">${option}</label>62 </div>63 `).join('')}64 </div>65 </div>66 ${question.explanation ? `67 <div id="explanation" class="hidden bg