Update app.py

app.py

@@ -108,31 +108,10 @@ 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 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>
+                <p style="margin: 10px 0 0 0; font-size: 1.2em; opacity: 0.9;">Test your knowledge with {len(self.questions)} questions</p>
             </div>
             
-            <!-- 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;">
+            <form id="quizForm" style="background: white; padding: 30px; border-radius: 15px; box-shadow: 0 5px 20px rgba(0,0,0,0.1);">
         """
         
         for i, q in enumerate(self.questions):
@@ -164,99 +143,23 @@ class QuizApp:
             """
         
         html += f"""
-                        </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 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>
                 </div>
-            </div>
+            </form>
             
-            <!-- 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 id="results" style="margin-top: 30px; display: none;"></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"]');
@@ -325,27 +228,23 @@ 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="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 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>
                         </div>
                         
-                        <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>
+                        <div style="margin-top: 30px;">
+                            <h3 style="color: #333; margin-bottom: 20px; text-align: center;">📊 Detailed Results</h3>
                 `;
                 
                 feedback.forEach((item, index) => {{
@@ -355,54 +254,42 @@ 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; font-size: 1.1em;">
+                            <div style="font-weight: bold; color: #333; margin-bottom: 10px;">
                                 ${{icon}} Question ${{index + 1}}
                             </div>
-                            <div style="color: #666; margin-bottom: 15px; font-style: italic; line-height: 1.4;">
+                            <div style="color: #666; margin-bottom: 10px; font-style: italic;">
                                 "${{item.question}}"
                             </div>
-                            <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 style="margin-bottom: 5px;">
+                                <strong>Your answer:</strong> ${{item.userAnswer}}
                             </div>
                             <div>
-                                <strong style="color: #333;">Correct answer:</strong> 
-                                <span style="color: #4caf50; font-weight: 500;">${{item.correctAnswer}}</span>
+                                <strong>Correct answer:</strong> ${{item.correctAnswer}}
                             </div>
                         </div>
                     `;
                 }});
                 
-                resultsHtml += `</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>
+                `;
                 
-                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');
+                document.getElementById('results').innerHTML = resultsHtml;
+                document.getElementById('results').style.display = 'block';
+                document.getElementById('quizForm').style.display = 'none';
                 
-                if (event.target === quizModal) {{
-                    closeQuizModal();
-                }}
-                if (event.target === resultsModal) {{
-                    closeResultsModal();
-                }}
+                // Scroll to results
+                document.getElementById('results').scrollIntoView({{ behavior: 'smooth' }});
             }}
             
-            // 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');