Update app.py

app.py

@@ -108,10 +108,31 @@ class QuizApp:
         <div style="max-width: 800px; margin: 0 auto; padding: 20px; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;">
             <div style="background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: white; padding: 30px; border-radius: 15px; text-align: center; margin-bottom: 30px; box-shadow: 0 10px 30px rgba(0,0,0,0.2);">
                 <h1 style="margin: 0; font-size: 2.5em; font-weight: 300;">📝 Multiple Choice Quiz</h1>
-                <p style="margin: 10px 0 0 0; font-size: 1.2em; opacity: 0.9;">Test your knowledge with {len(self.questions)} questions</p>
+                <p style="margin: 10px 0 15px 0; font-size: 1.2em; opacity: 0.9;">Test your knowledge with {len(self.questions)} questions</p>
+                <button type="button" onclick="openQuizModal()" 
+                        style="background: rgba(255,255,255,0.2); color: white; border: 2px solid white; padding: 12px 30px; font-size: 1.1em; border-radius: 25px; cursor: pointer; transition: all 0.3s ease; font-weight: 500; backdrop-filter: blur(10px);"
+                        onmouseover="this.style.background='white'; this.style.color='#667eea';"
+                        onmouseout="this.style.background='rgba(255,255,255,0.2)'; this.style.color='white';">
+                    🚀 Start Quiz
+                </button>
             </div>
             
-            <form id="quizForm" style="background: white; padding: 30px; border-radius: 15px; box-shadow: 0 5px 20px rgba(0,0,0,0.1);">
+            <!-- Quiz Modal -->
+            <div id="quizModal" style="display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.8); z-index: 10000; backdrop-filter: blur(5px);">
+                <div style="position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 90%; max-width: 900px; max-height: 90%; background: white; border-radius: 20px; box-shadow: 0 20px 60px rgba(0,0,0,0.3); overflow: hidden;">
+                    
+                    <!-- Modal Header -->
+                    <div style="background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: white; padding: 20px 30px; display: flex; justify-content: space-between; align-items: center;">
+                        <div>
+                            <h2 style="margin: 0; font-size: 1.8em; font-weight: 300;">📝 Quiz in Progress</h2>
+                            <p style="margin: 5px 0 0 0; opacity: 0.9;" id="progressText">Question 1 of {len(self.questions)}</p>
+                        </div>
+                        <button onclick="closeQuizModal()" style="background: none; border: none; color: white; font-size: 1.5em; cursor: pointer; padding: 5px; border-radius: 50%; transition: background 0.3s;" onmouseover="this.style.background='rgba(255,255,255,0.2)';" onmouseout="this.style.background='none';">✕</button>
+                    </div>
+                    
+                    <!-- Modal Body -->
+                    <div style="padding: 0; max-height: 70vh; overflow-y: auto;">
+                        <form id="quizForm" style="padding: 30px;">
         """
         
         for i, q in enumerate(self.questions):
@@ -143,23 +164,99 @@ class QuizApp:
             """
         
         html += f"""
-                <div style="text-align: center; margin-top: 40px;">
-                    <button type="button" onclick="submitQuiz()" 
-                            style="background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: white; border: none; padding: 15px 40px; font-size: 1.2em; border-radius: 30px; cursor: pointer; box-shadow: 0 5px 15px rgba(102, 126, 234, 0.4); transition: all 0.3s ease; font-weight: 500;"
-                            onmouseover="this.style.transform='translateY(-2px)'; this.style.boxShadow='0 8px 25px rgba(102, 126, 234, 0.6)';"
-                            onmouseout="this.style.transform='translateY(0)'; this.style.boxShadow='0 5px 15px rgba(102, 126, 234, 0.4)';">
-                        🚀 Submit Quiz
-                    </button>
+                        </form>
+                    </div>
+                    
+                    <!-- Modal Footer -->
+                    <div style="background: #f8f9ff; padding: 20px 30px; border-top: 1px solid #e1e5e9; text-align: center;">
+                        <button type="button" onclick="submitQuiz()" 
+                                style="background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: white; border: none; padding: 15px 40px; font-size: 1.2em; border-radius: 30px; cursor: pointer; box-shadow: 0 5px 15px rgba(102, 126, 234, 0.4); transition: all 0.3s ease; font-weight: 500; margin-right: 15px;"
+                                onmouseover="this.style.transform='translateY(-2px)'; this.style.boxShadow='0 8px 25px rgba(102, 126, 234, 0.6)';"
+                                onmouseout="this.style.transform='translateY(0)'; this.style.boxShadow='0 5px 15px rgba(102, 126, 234, 0.4)';">
+                            🚀 Submit Quiz
+                        </button>
+                        <button type="button" onclick="closeQuizModal()" 
+                                style="background: #6c757d; color: white; border: none; padding: 15px 30px; font-size: 1.1em; border-radius: 25px; cursor: pointer; transition: all 0.3s ease;"
+                                onmouseover="this.style.background='#5a6268';"
+                                onmouseout="this.style.background='#6c757d';">
+                            Cancel
+                        </button>
+                    </div>
                 </div>
-            </form>
+            </div>
             
-            <div id="results" style="margin-top: 30px; display: none;"></div>
+            <!-- Results Modal -->
+            <div id="resultsModal" style="display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.8); z-index: 10001; backdrop-filter: blur(5px);">
+                <div style="position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 90%; max-width: 900px; max-height: 90%; background: white; border-radius: 20px; box-shadow: 0 20px 60px rgba(0,0,0,0.3); overflow: hidden;">
+                    
+                    <!-- Results Header -->
+                    <div style="background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: white; padding: 20px 30px; display: flex; justify-content: space-between; align-items: center;">
+                        <div>
+                            <h2 style="margin: 0; font-size: 1.8em; font-weight: 300;">🎉 Quiz Results</h2>
+                            <p style="margin: 5px 0 0 0; opacity: 0.9;">Your performance summary</p>
+                        </div>
+                        <button onclick="closeResultsModal()" style="background: none; border: none; color: white; font-size: 1.5em; cursor: pointer; padding: 5px; border-radius: 50%; transition: background 0.3s;" onmouseover="this.style.background='rgba(255,255,255,0.2)';" onmouseout="this.style.background='none';">✕</button>
+                    </div>
+                    
+                    <!-- Results Body -->
+                    <div id="resultsContent" style="padding: 0; max-height: 70vh; overflow-y: auto;">
+                        <!-- Results will be populated here -->
+                    </div>
+                    
+                    <!-- Results Footer -->
+                    <div style="background: #f8f9ff; padding: 20px 30px; border-top: 1px solid #e1e5e9; text-align: center;">
+                        <button onclick="restartQuiz()" 
+                                style="background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: white; border: none; padding: 12px 30px; font-size: 1.1em; border-radius: 25px; cursor: pointer; box-shadow: 0 5px 15px rgba(102, 126, 234, 0.4); margin-right: 15px;">
+                            🔄 Take Quiz Again
+                        </button>
+                        <button onclick="closeResultsModal()" 
+                                style="background: #6c757d; color: white; border: none; padding: 12px 30px; font-size: 1.1em; border-radius: 25px; cursor: pointer; transition: all 0.3s ease;"
+                                onmouseover="this.style.background='#5a6268';"
+                                onmouseout="this.style.background='#6c757d';">
+                            Close
+                        </button>
+                    </div>
+                </div>
+            </div>
         </div>
         
         <script>
             // Store quiz data
             const quizData = JSON.parse("{quiz_data_json}".replace(/&quot;/g, '"'));
             
+            function openQuizModal() {{
+                document.getElementById('quizModal').style.display = 'block';
+                document.body.style.overflow = 'hidden'; // Prevent background scrolling
+            }}
+            
+            function closeQuizModal() {{
+                if (confirm('Are you sure you want to close the quiz? Your progress will be lost.')) {{
+                    document.getElementById('quizModal').style.display = 'none';
+                    document.body.style.overflow = 'auto';
+                }}
+            }}
+            
+            function closeResultsModal() {{
+                document.getElementById('resultsModal').style.display = 'none';
+                document.body.style.overflow = 'auto';
+            }}
+            
+            function restartQuiz() {{
+                // Reset form
+                document.getElementById('quizForm').reset();
+                
+                // Clear visual selections
+                const labels = document.querySelectorAll('#quizForm label');
+                labels.forEach(label => {{
+                    label.style.borderColor = '#e1e5e9';
+                    label.style.backgroundColor = 'white';
+                }});
+                
+                // Close results and open quiz
+                closeResultsModal();
+                openQuizModal();
+            }}
+            
             function selectAnswer(labelElement) {{
                 // Remove previous selections from this question
                 const questionDiv = labelElement.closest('div[style*="margin-bottom: 35px"]');
@@ -228,23 +325,27 @@ class QuizApp:
                 console.log('Final score:', score);
                 console.log('Feedback:', feedback);
                 
+                // Close quiz modal and show results
+                document.getElementById('quizModal').style.display = 'none';
                 displayResults(score, totalQuestions, feedback);
             }}
             
             function displayResults(score, total, feedback) {{
                 const percentage = Math.round((score / total) * 100);
                 let resultsHtml = `
-                    <div style="background: white; padding: 30px; border-radius: 15px; box-shadow: 0 5px 20px rgba(0,0,0,0.1);">
-                        <div style="text-align: center; margin-bottom: 30px;">
-                            <h2 style="color: #333; margin-bottom: 15px;">🎉 Quiz Complete!</h2>
-                            <div style="background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: white; padding: 20px; border-radius: 15px; display: inline-block; min-width: 200px;">
-                                <div style="font-size: 3em; font-weight: bold; margin-bottom: 10px;">${{score}}/${{total}}</div>
-                                <div style="font-size: 1.5em;">${{percentage}}%</div>
+                    <div style="padding: 30px; text-align: center;">
+                        <div style="margin-bottom: 30px;">
+                            <div style="background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: white; padding: 30px; border-radius: 15px; display: inline-block; min-width: 250px; margin-bottom: 20px;">
+                                <div style="font-size: 4em; font-weight: bold; margin-bottom: 10px;">${{score}}/${{total}}</div>
+                                <div style="font-size: 2em; margin-bottom: 10px;">${{percentage}}%</div>
+                                <div style="font-size: 1.2em; opacity: 0.9;">
+                                    ${{percentage >= 80 ? 'Excellent! 🌟' : percentage >= 60 ? 'Good Job! 👍' : 'Keep Practicing! 💪'}}
+                                </div>
                             </div>
                         </div>
                         
-                        <div style="margin-top: 30px;">
-                            <h3 style="color: #333; margin-bottom: 20px; text-align: center;">📊 Detailed Results</h3>
+                        <div style="text-align: left; margin-top: 30px;">
+                            <h3 style="color: #333; margin-bottom: 20px; text-align: center; font-size: 1.5em;">📊 Detailed Results</h3>
                 `;
                 
                 feedback.forEach((item, index) => {{
@@ -254,42 +355,54 @@ class QuizApp:
                     
                     resultsHtml += `
                         <div style="margin-bottom: 20px; padding: 20px; background: ${{bgColor}}; border-left: 5px solid ${{borderColor}}; border-radius: 8px;">
-                            <div style="font-weight: bold; color: #333; margin-bottom: 10px;">
+                            <div style="font-weight: bold; color: #333; margin-bottom: 10px; font-size: 1.1em;">
                                 ${{icon}} Question ${{index + 1}}
                             </div>
-                            <div style="color: #666; margin-bottom: 10px; font-style: italic;">
+                            <div style="color: #666; margin-bottom: 15px; font-style: italic; line-height: 1.4;">
                                 "${{item.question}}"
                             </div>
-                            <div style="margin-bottom: 5px;">
-                                <strong>Your answer:</strong> ${{item.userAnswer}}
+                            <div style="margin-bottom: 8px;">
+                                <strong style="color: #333;">Your answer:</strong> 
+                                <span style="color: ${{item.isCorrect ? '#4caf50' : '#f44336'}}; font-weight: 500;">${{item.userAnswer}}</span>
                             </div>
                             <div>
-                                <strong>Correct answer:</strong> ${{item.correctAnswer}}
+                                <strong style="color: #333;">Correct answer:</strong> 
+                                <span style="color: #4caf50; font-weight: 500;">${{item.correctAnswer}}</span>
                             </div>
                         </div>
                     `;
                 }});
                 
-                resultsHtml += `
-                        </div>
-                        
-                        <div style="text-align: center; margin-top: 30px;">
-                            <button onclick="location.reload()" 
-                                    style="background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: white; border: none; padding: 12px 30px; font-size: 1.1em; border-radius: 25px; cursor: pointer; box-shadow: 0 5px 15px rgba(102, 126, 234, 0.4);">
-                                🔄 Take Quiz Again
-                            </button>
-                        </div>
-                    </div>
-                `;
+                resultsHtml += `</div></div>`;
                 
-                document.getElementById('results').innerHTML = resultsHtml;
-                document.getElementById('results').style.display = 'block';
-                document.getElementById('quizForm').style.display = 'none';
+                document.getElementById('resultsContent').innerHTML = resultsHtml;
+                document.getElementById('resultsModal').style.display = 'block';
+            }}
+            
+            // Close modal when clicking outside
+            window.onclick = function(event) {{
+                const quizModal = document.getElementById('quizModal');
+                const resultsModal = document.getElementById('resultsModal');
                 
-                // Scroll to results
-                document.getElementById('results').scrollIntoView({{ behavior: 'smooth' }});
+                if (event.target === quizModal) {{
+                    closeQuizModal();
+                }}
+                if (event.target === resultsModal) {{
+                    closeResultsModal();
+                }}
             }}
             
+            // Keyboard shortcuts
+            document.addEventListener('keydown', function(event) {{
+                if (event.key === 'Escape') {{
+                    if (document.getElementById('resultsModal').style.display === 'block') {{
+                        closeResultsModal();
+                    }} else if (document.getElementById('quizModal').style.display === 'block') {{
+                        closeQuizModal();
+                    }}
+                }}
+            }});
+            
             // Add some debugging
             console.log('Quiz script loaded');
             console.log('Quiz data available:', typeof quizData !== 'undefined');