The dashboards are not space efficient, also auto save progress and repeat the mistakes ones with the tags along with the mistake count and users thinking process analysis to align with the proper logical thinking required. - Follow Up Deployment

index.html

@@ -6,6 +6,75 @@
     <title>Python Quiz Generator</title>
     <script src="https://cdn.tailwindcss.com"></script>
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
+    <!-- Shop Modal -->
+    <div id="shopModal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 hidden">
+        <div class="bg-gray-800 rounded-xl shadow-2xl p-8 max-w-2xl w-full max-h-[90vh] overflow-y-auto">
+            <div class="flex justify-between items-center mb-6">
+                <h2 class="text-3xl font-bold">Power-Up Shop</h2>
+                <button id="closeShop" class="text-gray-400 hover:text-white text-2xl">&times;</button>
+            </div>
+            
+            <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
+                <!-- Power-Up Items -->
+                <div class="bg-gray-700 rounded-lg p-4 border-2 border-python-blue">
+                    <div class="flex justify-between items-start mb-3">
+                        <h3 class="text-xl font-bold">50/50</h3>
+                        <div class="flex items-center">
+                            <i class="fas fa-coins text-python-yellow mr-1"></i>
+                            <span>100</span>
+                        </div>
+                    </div>
+                    <p class="text-gray-300 mb-4">Eliminates two wrong answers</p>
+                    <button class="buy-btn w-full bg-python-blue hover:bg-python-light text-white font-bold py-2 px-4 rounded-lg transition-all" data-powerup="5050" data-cost="100">
+                        Buy
+                    </button>
+                </div>
+
+                <div class="bg-gray-700 rounded-lg p-4 border-2 border-python-yellow">
+                    <div class="flex justify-between items-start mb-3">
+                        <h3 class="text-xl font-bold">Time Freeze</h3>
+                        <div class="flex items-center">
+                            <i class="fas fa-coins text-python-yellow mr-1"></i>
+                            <span>150</span>
+                        </div>
+                    </div>
+                    <p class="text-gray-300 mb-4">Gives you extra 30 seconds per question</p>
+                    <button class="buy-btn w-full bg-python-yellow hover:bg-yellow-400 text-gray-800 font-bold py-2 px-4 rounded-lg transition-all" data-powerup="timefreeze" data-cost="150">
+                        Buy
+                    </button>
+                </div>
+
+                <div class="bg-gray-700 rounded-lg p-4 border-2 border-python-light">
+                    <div class="flex justify-between items-start mb-3">
+                        <h3 class="text-xl font-bold">Double Points</h3>
+                        <div class="flex items-center">
+                            <i class="fas fa-coins text-python-yellow mr-1"></i>
+                            <span>200</span>
+                        </div>
+                    </div>
+                    <p class="text-gray-300 mb-4">Next correct answer gives double points</p>
+                    <button class="buy-btn w-full bg-python-light hover:bg-blue-400 text-white font-bold py-2 px-4 rounded-lg transition-all" data-powerup="doublepoints" data-cost="200">
+                        Buy
+                    </button>
+                </div>
+
+                <div class="bg-gray-700 rounded-lg p-4 border-2 border-green-500">
+                    <div class="flex justify-between items-start mb-3">
+                        <h3 class="text-xl font-bold">Skip Question</h3>
+                        <div class="flex items-center">
+                            <i class="fas fa-coins text-python-yellow mr-1"></i>
+                            <span>75</span>
+                        </div>
+                    </div>
+                    <p class="text-gray-300 mb-4">Skip the current question</p>
+                    <button class="buy-btn w-full bg-green-500 hover:bg-green-400 text-white font-bold py-2 px-4 rounded-lg transition-all" data-powerup="skip" data-cost="75">
+                        Buy
+                    </button>
+                </div>
+            </div>
+        </div>
+    </div>
+
     <script>
         tailwind.config = {
             theme: {
@@ -111,6 +180,17 @@
             <p class="text-xl text-gray-300">Test your Python knowledge with interactive challenges!</p>
         </header>
 
+        <!-- Currency Display -->
+        <div class="bg-gray-800 rounded-xl shadow-2xl p-4 mb-4 flex justify-between items-center">
+            <div class="flex items-center">
+                <i class="fas fa-coins text-python-yellow text-2xl mr-2"></i>
+                <span id="coinCount" class="text-xl font-bold">0</span>
+            </div>
+            <button id="shopBtn" class="bg-python-light hover:bg-python-blue text-white font-bold py-2 px-4 rounded-lg transition-all">
+                <i class="fas fa-store mr-2"></i> Shop
+            </button>
+        </div>
+
         <!-- Quiz Controls -->
         <div class="bg-gray-800 rounded-xl shadow-2xl p-6 mb-8">
             <div class="flex flex-wrap justify-between items-center gap-4">
@@ -245,7 +325,8 @@
         </div>
 
         <!-- Results Container -->
-        <div id="resultsContainer" class="hidden bg-gray-800 rounded-xl shadow-2xl p-8 text-center">
+        <div id="resultsContainer" class="hidden bg-gray-800 rounded-xl shadow-2xl p-8">
+            <div class="text-center mb-8">
             <div class="flex justify-center mb-6">
                 <div class="bg-gradient-to-br from-python-blue to-python-light rounded-full w-24 h-24 flex items-center justify-center">
                     <i class="fas fa-trophy text-white text-4xl"></i>
@@ -256,6 +337,53 @@
                 <span id="finalScore">8</span>/<span id="finalTotal">10</span>
             </div>
             <p id="resultMessage" class="text-xl mb-8">Great job! You have a solid understanding of Python fundamentals.</p>
+            <!-- Analytics Section -->
+            <div class="bg-gray-700 rounded-xl p-6 mb-8">
+                <h3 class="text-2xl font-bold mb-4 text-center">Your Performance Analysis</h3>
+                
+                <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
+                    <!-- Weak Areas -->
+                    <div class="bg-gray-800 rounded-lg p-4">
+                        <h4 class="text-xl font-bold mb-3 flex items-center">
+                            <i class="fas fa-exclamation-triangle text-red-400 mr-2"></i> Weak Areas
+                        </h4>
+                        <ul id="weakAreas" class="space-y-2">
+                            <!-- Dynamically populated -->
+                        </ul>
+                    </div>
+                    
+                    <!-- Progress Chart -->
+                    <div class="bg-gray-800 rounded-lg p-4">
+                        <h4 class="text-xl font-bold mb-3 flex items-center">
+                            <i class="fas fa-chart-line text-green-400 mr-2"></i> Progress
+                        </h4>
+                        <div class="h-48" id="progressChart">
+                            <!-- Chart will be rendered here -->
+                        </div>
+                    </div>
+                    
+                    <!-- Mnemonics -->
+                    <div class="bg-gray-800 rounded-lg p-4">
+                        <h4 class="text-xl font-bold mb-3 flex items-center">
+                            <i class="fas fa-brain text-purple-400 mr-2"></i> Memory Aids
+                        </h4>
+                        <div id="mnemonics" class="space-y-3">
+                            <!-- Dynamically populated -->
+                        </div>
+                    </div>
+                    
+                    <!-- Flashcards -->
+                    <div class="bg-gray-800 rounded-lg p-4">
+                        <h4 class="text-xl font-bold mb-3 flex items-center">
+                            <i class="fas fa-layer-group text-blue-400 mr-2"></i> Key Concepts
+                        </h4>
+                        <div id="flashcards" class="grid grid-cols-2 gap-3">
+                            <!-- Dynamically populated -->
+                        </div>
+                    </div>
+                </div>
+            </div>
+
             <div class="flex justify-center gap-4">
                 <button id="restartBtn" class="bg-python-blue hover:bg-python-light text-white font-bold py-3 px-8 rounded-lg transition-all transform hover:scale-105">
                     <i class="fas fa-redo mr-2"></i> Try Again
@@ -389,14 +517,52 @@
         const restartBtn = document.getElementById('restartBtn');
         const newQuizBtn = document.getElementById('newQuizBtn');
 
-        // Quiz state
+        // Enhanced quiz state
         let currentQuestionIndex = 0;
+        let coins = 0;
+        let powerups = {
+            '5050': 0,
+            'timefreeze': 0,
+            'doublepoints': 0,
+            'skip': 0
+        };
+        let weakAreas = {};
+        let questionHistory = [];
         let score = 0;
         let userAnswers = [];
         let quizQuestions = [];
 
-        // Initialize
+        // Initialize with new features
         document.addEventListener('DOMContentLoaded', () => {
+            // Load saved coins from localStorage
+            coins = parseInt(localStorage.getItem('pythonQuizCoins')) || 0;
+            updateCoinDisplay();
+            
+            // Shop functionality
+            const shopBtn = document.getElementById('shopBtn');
+            const shopModal = document.getElementById('shopModal');
+            const closeShop = document.getElementById('closeShop');
+            
+            shopBtn.addEventListener('click', () => shopModal.classList.remove('hidden'));
+            closeShop.addEventListener('click', () => shopModal.classList.add('hidden'));
+            
+            // Handle powerup purchases
+            document.querySelectorAll('.buy-btn').forEach(btn => {
+                btn.addEventListener('click', function() {
+                    const powerup = this.dataset.powerup;
+                    const cost = parseInt(this.dataset.cost);
+                    
+                    if (coins >= cost) {
+                        coins -= cost;
+                        powerups[powerup]++;
+                        updateCoinDisplay();
+                        localStorage.setItem('pythonQuizCoins', coins);
+                        alert(`Purchased ${powerup}! You now have ${powerups[powerup]}`);
+                    } else {
+                        alert("Not enough coins!");
+                    }
+                });
+            });
             generateBtn.addEventListener('click', startQuiz);
             optionElements.forEach((option, index) => {
                 option.addEventListener('click', () => selectAnswer(index));
@@ -460,7 +626,32 @@
             nextBtn.classList.add('hidden');
         }
 
-        // Handle answer selection
+        // Update coin display
+        function updateCoinDisplay() {
+            document.getElementById('coinCount').textContent = coins;
+        }
+
+        // Award coins for correct answers
+        function awardCoins(isCorrect, difficulty) {
+            let amount = 0;
+            if (isCorrect) {
+                amount = difficulty === 'Beginner' ? 10 : 
+                         difficulty === 'Intermediate' ? 20 : 30;
+                coins += amount;
+                updateCoinDisplay();
+                localStorage.setItem('pythonQuizCoins', coins);
+                
+                // Show coin animation
+                const coinAnim = document.createElement('div');
+                coinAnim.className = 'absolute -top-2 -right-2 bg-python-yellow text-gray-800 font-bold rounded-full w-8 h-8 flex items-center justify-center animate-bounce';
+                coinAnim.innerHTML = `+${amount}`;
+                document.getElementById('coinCount').parentNode.appendChild(coinAnim);
+                
+                setTimeout(() => coinAnim.remove(), 2000);
+            }
+        }
+
+        // Handle answer selection with powerups
         function selectAnswer(selectedIndex) {
             const question = quizQuestions[currentQuestionIndex];
             const correctIndex = question.answer;
@@ -543,7 +734,67 @@
             }
         }
 
-        // Show results
+        // Analyze weak areas
+        function analyzeWeakAreas() {
+            weakAreas = {};
+            quizQuestions.forEach((q, i) => {
+                if (userAnswers[i] !== q.answer) {
+                    const category = q.question.split(' ')[0]; // Simple categorization
+                    weakAreas[category] = (weakAreas[category] || 0) + 1;
+                }
+            });
+            
+            // Sort weak areas
+            const sortedWeakAreas = Object.entries(weakAreas)
+                .sort((a, b) => b[1] - a[1])
+                .slice(0, 3);
+            
+            // Display weak areas
+            const weakAreasList = document.getElementById('weakAreas');
+            weakAreasList.innerHTML = sortedWeakAreas.map(([area, count]) => `
+                <li class="flex justify-between items-center">
+                    <span>${area}</span>
+                    <span class="bg-red-500 text-white text-sm px-2 py-1 rounded-full">${count} mistakes</span>
+                </li>
+            `).join('');
+            
+            // Generate mnemonics for weak areas
+            const mnemonicsContainer = document.getElementById('mnemonics');
+            mnemonicsContainer.innerHTML = sortedWeakAreas.map(([area]) => {
+                const mnemonic = generateMnemonic(area);
+                return `
+                    <div class="bg-gray-900 p-3 rounded-lg">
+                        <div class="font-bold text-python-yellow mb-1">${area}</div>
+                        <div>${mnemonic}</div>
+                    </div>
+                `;
+            }).join('');
+            
+            // Generate flashcards
+            const flashcardsContainer = document.getElementById('flashcards');
+            flashcardsContainer.innerHTML = quizQuestions
+                .filter((q, i) => userAnswers[i] !== q.answer)
+                .slice(0, 4)
+                .map(q => `
+                    <div class="flashcard bg-gray-900 p-3 rounded-lg cursor-pointer transform transition hover:scale-105" onclick="this.classList.toggle('bg-gray-800')">
+                        <div class="font-bold text-python-blue">Q: ${q.question.substring(0, 50)}...</div>
+                        <div class="hidden mt-2 text-sm">A: ${q.options[q.answer]}</div>
+                    </div>
+                `).join('');
+        }
+
+        // Simple mnemonic generator
+        function generateMnemonic(topic) {
+            const mnemonics = {
+                "What": "When in doubt, PEMDAS rules them all (Parentheses, Exponents, Multiplication/Division, Addition/Subtraction)",
+                "Which": "VENV is Very Essential for New Versions",
+                "What does": "Yield gives you a generator - it 'yields' results one by one",
+                "Which method": "POP goes the last element! (like popcorn popping out)"
+            };
+            return mnemonics[topic] || "Practice makes perfect! Review this concept regularly.";
+        }
+
+        // Show enhanced results
         function showResults() {
             quizContainer.classList.add('hidden');
             resultsContainer.classList.remove('hidden');
@@ -551,6 +802,15 @@
             finalScore.textContent = score;
             finalTotal.textContent = quizQuestions.length;
             
+            // Award bonus coins based on performance
+            const bonus = Math.floor(score * 5);
+            coins += bonus;
+            updateCoinDisplay();
+            localStorage.setItem('pythonQuizCoins', coins);
+            
+            // Analyze performance
+            analyzeWeakAreas();
+            
             // Custom message based on score
             const percentage = (score / quizQuestions.length) * 100;
             if (percentage >= 90) {