Spaces:

Neurolingua
/

Aiducation-Edtech-GenAI

App Files Files Community

Neurolingua commited on Aug 8

Commit

37c46bc

•

1 Parent(s): 879327a

Update templates/student_quiz.html

Browse files

Files changed (1) hide show

templates/student_quiz.html +481 -442

templates/student_quiz.html CHANGED Viewed

@@ -1,443 +1,482 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>SmartLearn - Quiz Generation</title>
-    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
-    <style>
-        @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600&display=swap');
-        body {
-            font-family: 'Poppins', sans-serif;
-            margin: 0;
-            padding: 0;
-            display: flex;
-            justify-content: center;
-            align-items: center;
-            min-height: 100vh;
-            background-image: url('../static/quiz.jpg');
-            background-size: cover;
-            background-position: center;
-            background-attachment: fixed;
-        }
-        .container {
-            border-radius: 20px;
-            padding: 40px;
-            width: 90%;
-            max-width: 500px;
-            text-align: center;
-            position: relative;
-            z-index: 2;
-            background: rgba(255, 255, 255, 0.1);
-            backdrop-filter: blur(10px);
-            box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
-            border: 1px solid rgba(255, 255, 255, 0.18);
-        }
-        .quiz-form {
-            padding: 20px;
-            border-radius: 10px;
-        }
-        .form-group {
-            margin-bottom: 20px;
-            text-align: left;
-        }
-        .form-group label {
-            display: block;
-            margin-bottom: 5px;
-            color: #fff;
-            font-weight: 600;
-        }
-        .form-group input,
-        .form-group select {
-            width: 100%;
-            padding: 10px;
-            border: none;
-            border-radius: 5px;
-            background: rgba(255, 255, 255, 0.8);
-            color: #000;
-            font-size: 16px;
-        }
-        .form-group select {
-            appearance: none;
-            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
-            background-repeat: no-repeat;
-            background-position: right 10px center;
-            background-size: 20px;
-        }
-        .btn {
-            background-color: #3498db;
-            color: white;
-            border: none;
-            padding: 12px 24px;
-            border-radius: 30px;
-            cursor: pointer;
-            font-size: 18px;
-            transition: all 0.3s ease;
-        }
-        .btn:hover {
-            background-color: #2980b9;
-            transform: translateY(-2px);
-            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
-        }
-        h1, h2, h3 {
-            color: #fff;
-            text-shadow: 2px 2px 4px rgba(0,0,0,0.5);
-        }
-        .score-circle {
-            width: 150px;
-            height: 150px;
-            background-color: rgba(52, 152, 219, 0.8);
-            border-radius: 50%;
-            display: flex;
-            justify-content: center;
-            align-items: center;
-            margin: 0 auto 30px;
-            font-size: 36px;
-            font-weight: bold;
-            color: white;
-            box-shadow: 0 5px 15px rgba(52, 152, 219, 0.3);
-        }
-        .areas-to-improve {
-            background-color: rgba(248, 249, 250, 0.1);
-            border-radius: 10px;
-            padding: 20px;
-            text-align: left;
-            color: #fff;
-        }
-        .areas-to-improve ol {
-            padding-left: 20px;
-        }
-        .areas-to-improve li {
-            margin-bottom: 10px;
-        }
-        .validation-container {
-            display: none;
-            justify-content: center;
-            align-items: center;
-            flex-direction: column;
-        }
-        .loader {
-            border: 5px solid rgba(255, 255, 255, 0.3);
-            border-top: 5px solid #3498db;
-            border-radius: 50%;
-            width: 50px;
-            height: 50px;
-            animation: spin 1s linear infinite;
-        }
-        @keyframes spin {
-            0% { transform: rotate(0deg); }
-            100% { transform: rotate(360deg); }
-        }
-        .validation-text {
-            margin-top: 20px;
-            font-size: 18px;
-            color: #fff;
-        }
-        .correct { color: #2ecc71; }
-        .incorrect { color: #e74c3c; }
-        #areas-to-improve { margin-top: 20px; }
-        .options li {
-            display: flex;
-            align-items: center;
-            margin-bottom: 10px;
-            color: #fff;
-        }
-        .options li input {
-            margin-right: 10px;
-        }
-        .back-button {
-            position: absolute;
-            top: 20px;
-            left: 20px;
-            background-color: #6c757d;
-            color: white;
-            border: none;
-            padding: 10px 20px;
-            border-radius: 30px;
-            cursor: pointer;
-            transition: background-color 0.3s;
-            font-size: 16px;
-        }
-        .back-button:hover {
-            background-color: #5a6268;
-        }
-        .fade-in {
-            animation: fadeIn 0.5s ease-in-out;
-        }
-        @keyframes fadeIn {
-            from { opacity: 0; transform: translateY(20px); }
-            to { opacity: 1; transform: translateY(0); }
-        }
-        .icon {
-            margin-right: 10px;
-        }
-        .loading-animation {
-            display: flex;
-            flex-direction: column;
-            align-items: center;
-            justify-content: center;
-            margin-top: 20px;
-        }
-        .loading-animation p {
-            margin-top: 10px;
-            color: #fff;
-            font-weight: 600;
-        }
-    </style>
-</head>
-<body>
-    <div class="container fade-in">
-        <button class="back-button" onclick="goBack()"><i class="fas fa-arrow-left"></i> Back</button>
-        <h1><i class="fas fa-graduation-cap icon"></i>Generate Your Custom Quiz</h1>
-        <form class="quiz-form">
-            <div class="form-group">
-                <label for="subject"><i class="fas fa-book icon"></i>Subject:</label>
-                <input type="text" id="subject" name="subject" required>
-            </div>
-            <div class="form-group">
-                <label for="topic"><i class="fas fa-lightbulb icon"></i>Topic:</label>
-                <input type="text" id="topic" name="topic" required>
-            </div>
-            <div class="form-group">
-                <label for="num-questions"><i class="fas fa-list-ol icon"></i>Number of Questions:</label>
-                <select id="num-questions" name="num-questions">
-                    <option value="5">5</option>
-                    <option value="10">10</option>
-                    <option value="15">15</option>
-                    <option value="20">20</option>
-                </select>
-            </div>
-            <div class="form-group">
-                <label for="difficulty"><i class="fas fa-signal icon"></i>Difficulty Level:</label>
-                <select id="difficulty" name="difficulty">
-                    <option value="easy">Easy</option>
-                    <option value="medium">Medium</option>
-                    <option value="hard">Hard</option>
-                </select>
-            </div>
-            <button type="submit" class="btn"><i class="fas fa-magic icon"></i>Generate Quiz</button>
-        </form>
-        <div id="loading-animation" class="loading-animation" style="display: none;">
-            <div class="loader"></div>
-            <p>Generating Quiz...</p>
-        </div>
-        <div id="quiz-result" class="quiz-result" style="display: none;">
-            <!-- Quiz questions will be dynamically inserted here -->
-        </div>
-        <div id="validation-container" class="validation-container">
-            <div id="loader" class="loader"></div>
-            <div id="validation-text" class="validation-text">Validating...</div>
-        </div>
-        <div id="quiz-score" style="display: none;"></div>
-        <div id="areas-to-improve" class="areas-to-improve" style="display: none;"></div>
-    </div>
-    <script>
-        let quizData = [];
-        let studentId = ''; // Assume you set this variable with the logged-in student's ID.
-        document.querySelector('.quiz-form').addEventListener('submit', function(e) {
-            e.preventDefault();
-            const formData = new FormData(this);
-            const data = {
-                subject: formData.get('subject'),
-                topic: formData.get('topic'),
-                'num-questions': formData.get('num-questions'),
-                difficulty: formData.get('difficulty')
-            };
-            fetch('/generate_quiz', {
-                method: 'POST',
-                headers: {
-                    'Content-Type': 'application/json',
-                },
-                body: JSON.stringify(data)
-            })
-            .then(response => response.json())
-            .then(data => {
-                quizData = parseQuizData(data.quiz);
-                showQuiz(quizData);
-            })
-            .catch(error => console.error('Error:', error));
-        });
-        function parseQuizData(quizString) {
-            const questions = quizString.split('Question:').filter(q => q.trim() !== '');
-            return questions.map((question, index) => {
-                const [questionText, ...options] = question.split('\n').filter(line => line.trim() !== '');
-                const answerLine = options.pop();
-                const correctAnswer = parseInt(answerLine.split(':')[1].trim());
-                return {
-                    id: index + 1,
-                    text: questionText.trim(),
-                    options: options.map(opt => opt.replace('<<o>>', '').trim()),
-                    correctAnswer: correctAnswer,
-                    concept: questionText.match(/\[(.*?)\]/)[1]
-                };
-            });
-        }
-        function showQuiz(questions) {
-            const quizResult = document.getElementById('quiz-result');
-            let quizHtml = '<h2>Your Custom Quiz</h2>';
-            questions.forEach((question, index) => {
-                quizHtml += `
-                    <div class="question fade-in">
-                        <h3>${question.id}. ${question.text}</h3>
-                        <ul class="options">
-                `;
-                question.options.forEach((option, optionIndex) => {
-                    quizHtml += `
-                        <li>
-                            <input type="radio" name="q${index}" value="${optionIndex + 1}" id="q${index}o${optionIndex}">
-                            <label for="q${index}o${optionIndex}">${option}</label>
-                        </li>
-                    `;
-                });
-                quizHtml += `
-                        </ul>
-                    </div>
-                `;
-            });
-            quizHtml += '<button onclick="submitQuiz()" class="btn">Submit Quiz</button>';
-            quizResult.innerHTML = quizHtml;
-            quizResult.style.display = 'block';
-        }
-        function submitQuiz() {
-    const validationContainer = document.getElementById('validation-container');
-    const quizResult = document.getElementById('quiz-result');
-    const quizScore = document.getElementById('quiz-score');
-    const areasToImprove = document.getElementById('areas-to-improve');
-    quizResult.style.display = 'none';
-    validationContainer.style.display = 'block';
-    setTimeout(() => {
-        validationContainer.style.display = 'none';
-        const score = calculateScore();
-        displayResults(score);
-        // Get areas to improve
-        let improveAreas = [];
-        let incorrectQuestions = quizData.filter((question, index) => {
-            const selectedAnswer = document.querySelector(`input[name="q${index}"]:checked`);
-            return !selectedAnswer || parseInt(selectedAnswer.value) !== question.correctAnswer;
-        });
-        if (incorrectQuestions.length > 0) {
-            improveAreas = incorrectQuestions.map(question => question.concept);
-        }
-        // Ensure studentId is set correctly
-        const studentId = '[email protected]';  // Replace with actual student ID
-        // Send areas to improve to the backend
-        fetch('/update_student_areas', {
-            method: 'POST',
-            headers: {
-                'Content-Type': 'application/json',
-            },
-            body: JSON.stringify({ student_id: studentId, areas_to_improve: improveAreas })
-        })
-        .then(response => response.json())
-        .then(data => {
-            if (data.status === 'success') {
-                console.log('Student areas to improve updated successfully.');
-            } else {
-                console.error('Failed to update student areas to improve.');
-            }
-        })
-        .catch(error => console.error('Error:', error));
-    }, 2000);
-}
-        function calculateScore() {
-            let score = 0;
-            quizData.forEach((question, index) => {
-                const selectedAnswer = document.querySelector(`input[name="q${index}"]:checked`);
-                if (selectedAnswer && parseInt(selectedAnswer.value) === question.correctAnswer) {
-                    score++;
-                }
-            });
-            return score;
-        }
-        function displayResults(score) {
-            const quizScore = document.getElementById('quiz-score');
-            const areasToImprove = document.getElementById('areas-to-improve');
-            quizScore.innerHTML = `
-                <div class="score-circle">${score}/${quizData.length}</div>
-                <h3>You have scored</h3>
-                <p>Performance: ${getPerformanceEvaluation(score, quizData.length)}</p>
-            `;
-            quizScore.style.display = 'block';
-            let incorrectQuestions = quizData.filter((question, index) => {
-                const selectedAnswer = document.querySelector(`input[name="q${index}"]:checked`);
-                return !selectedAnswer || parseInt(selectedAnswer.value) !== question.correctAnswer;
-            });
-            if (incorrectQuestions.length > 0) {
-                let improveHtml = '<h3>Areas to be improved</h3><ol>';
-                incorrectQuestions.forEach(question => {
-                    improveHtml += `<li>${question.concept}</li>`;
-                });
-                improveHtml += '</ol>';
-                areasToImprove.innerHTML = improveHtml;
-                areasToImprove.style.display = 'block';
-            }
-        }
-        function getPerformanceEvaluation(score, total) {
-            const percentage = (score / total) * 100;
-            if (percentage >= 80) return 'Excellent';
-            if (percentage >= 60) return 'Good';
-            if (percentage >= 40) return 'Average';
-            return 'Needs Improvement';
-        }
-        function goBack() {
-            window.history.back();
-        }
-    </script>
-</body>
 </html>

+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>SmartLearn - Quiz Generation</title>
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
+    <style>
+        @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600&display=swap');
+        body {
+            font-family: 'Poppins', sans-serif;
+            margin: 0;
+            padding: 0;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            min-height: 100vh;
+            background-image: url('../static/quiz.jpg');
+            background-size: cover;
+            background-position: center;
+            background-attachment: fixed;
+        }
+        .container {
+            border-radius: 20px;
+            padding: 40px;
+            width: 90%;
+            max-width: 500px;
+            text-align: center;
+            position: relative;
+            z-index: 2;
+            background: rgba(255, 255, 255, 0.1);
+            backdrop-filter: blur(10px);
+            box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
+            border: 1px solid rgba(255, 255, 255, 0.18);
+        }
+        .quiz-form {
+            padding: 20px;
+            border-radius: 10px;
+        }
+        .form-group {
+            margin-bottom: 20px;
+            text-align: left;
+        }
+        .form-group label {
+            display: block;
+            margin-bottom: 5px;
+            color: #fff;
+            font-weight: 600;
+        }
+        .form-group input,
+        .form-group select {
+            width: 100%;
+            padding: 10px;
+            border: none;
+            border-radius: 5px;
+            background: rgba(255, 255, 255, 0.8);
+            color: #000;
+            font-size: 16px;
+        }
+        .form-group select {
+            appearance: none;
+            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
+            background-repeat: no-repeat;
+            background-position: right 10px center;
+            background-size: 20px;
+        }
+        .btn {
+            background-color: #3498db;
+            color: white;
+            border: none;
+            padding: 12px 24px;
+            border-radius: 30px;
+            cursor: pointer;
+            font-size: 18px;
+            transition: all 0.3s ease;
+        }
+        .btn:hover {
+            background-color: #2980b9;
+            transform: translateY(-2px);
+            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
+        }
+        h1, h2, h3 {
+            color: #fff;
+            text-shadow: 2px 2px 4px rgba(0,0,0,0.5);
+        }
+        .score-circle {
+            width: 150px;
+            height: 150px;
+            background-color: rgba(52, 152, 219, 0.8);
+            border-radius: 50%;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            margin: 0 auto 30px;
+            font-size: 36px;
+            font-weight: bold;
+            color: white;
+            box-shadow: 0 5px 15px rgba(52, 152, 219, 0.3);
+        }
+        .areas-to-improve {
+            background-color: rgba(248, 249, 250, 0.1);
+            border-radius: 10px;
+            padding: 20px;
+            text-align: left;
+            color: #fff;
+        }
+        .areas-to-improve ol {
+            padding-left: 20px;
+        }
+        .areas-to-improve li {
+            margin-bottom: 10px;
+        }
+        .validation-container {
+            display: none;
+            justify-content: center;
+            align-items: center;
+            flex-direction: column;
+        }
+        .loader {
+            border: 5px solid rgba(255, 255, 255, 0.3);
+            border-top: 5px solid #3498db;
+            border-radius: 50%;
+            width: 50px;
+            height: 50px;
+            animation: spin 1s linear infinite;
+        }
+        @keyframes spin {
+            0% { transform: rotate(0deg); }
+            100% { transform: rotate(360deg); }
+        }
+        .validation-text {
+            margin-top: 20px;
+            font-size: 18px;
+            color: #fff;
+        }
+        .correct { color: #2ecc71; }
+        .incorrect { color: #e74c3c; }
+        #areas-to-improve { margin-top: 20px; }
+        .options li {
+            display: flex;
+            align-items: center;
+            margin-bottom: 10px;
+            color: #fff;
+        }
+        .options li input {
+            margin-right: 10px;
+        }
+        .back-button {
+            position: absolute;
+            top: 20px;
+            left: 20px;
+            background-color: #6c757d;
+            color: white;
+            border: none;
+            padding: 10px 20px;
+            border-radius: 30px;
+            cursor: pointer;
+            transition: background-color 0.3s;
+            font-size: 16px;
+        }
+        .back-button:hover {
+            background-color: #5a6268;
+        }
+        .fade-in {
+            animation: fadeIn 0.5s ease-in-out;
+        }
+        @keyframes fadeIn {
+            from { opacity: 0; transform: translateY(20px); }
+            to { opacity: 1; transform: translateY(0); }
+        }
+        .icon {
+            margin-right: 10px;
+        }
+        .loading-animation {
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            justify-content: center;
+            margin-top: 20px;
+        }
+        .loading-animation p {
+            margin-top: 10px;
+            color: #fff;
+            font-weight: 600;
+        }
+        @keyframes pulse {
+            0% { transform: scale(1); }
+            50% { transform: scale(1.1); }
+            100% { transform: scale(1); }
+        }
+        .loading-icon {
+            font-size: 48px;
+            color: #3498db;
+            animation: pulse 1.5s infinite;
+        }
+    </style>
+</head>
+<body>
+    <div class="container fade-in">
+        <button class="back-button" onclick="goBack()"><i class="fas fa-arrow-left"></i> Back</button>
+        <h1><i class="fas fa-graduation-cap icon"></i>Generate Your Custom Quiz</h1>
+        <form class="quiz-form">
+            <div class="form-group">
+                <label for="subject"><i class="fas fa-book icon"></i>Subject:</label>
+                <input type="text" id="subject" name="subject" required>
+            </div>
+            <div class="form-group">
+                <label for="topic"><i class="fas fa-lightbulb icon"></i>Topic:</label>
+                <input type="text" id="topic" name="topic" required>
+            </div>
+            <div class="form-group">
+                <label for="num-questions"><i class="fas fa-list-ol icon"></i>Number of Questions:</label>
+                <select id="num-questions" name="num-questions">
+                    <option value="5">5</option>
+                    <option value="10">10</option>
+                    <option value="15">15</option>
+                    <option value="20">20</option>
+                </select>
+            </div>
+            <div class="form-group">
+                <label for="difficulty"><i class="fas fa-signal icon"></i>Difficulty Level:</label>
+                <select id="difficulty" name="difficulty">
+                    <option value="easy">Easy</option>
+                    <option value="medium">Medium</option>
+                    <option value="hard">Hard</option>
+                </select>
+            </div>
+            <button type="submit" class="btn"><i class="fas fa-magic icon"></i>Generate Quiz</button>
+        </form>
+        <div id="loading-animation" class="loading-animation" style="display: none;">
+            <i class="fas fa-cog loading-icon"></i>
+            <p id="loading-text">Generating Quiz...</p>
+        </div>
+        <div id="quiz-result" class="quiz-result" style="display: none;">
+            <!-- Quiz questions will be dynamically inserted here -->
+        </div>
+        <div id="validation-container" class="validation-container">
+            <div id="loader" class="loader"></div>
+            <div id="validation-text" class="validation-text">Validating...</div>
+        </div>
+        <div id="quiz-score" style="display: none;"></div>
+        <div id="areas-to-improve" class="areas-to-improve" style="display: none;"></div>
+    </div>
+    <script>
+        let quizData = [];
+        let studentId = '[email protected]'; // Assume you set this variable with the logged-in student's ID.
+        document.querySelector('.quiz-form').addEventListener('submit', function(e) {
+            e.preventDefault();
+            const formData = new FormData(this);
+            const data = {
+                subject: formData.get('subject'),
+                topic: formData.get('topic'),
+                'num-questions': formData.get('num-questions'),
+                difficulty: formData.get('difficulty')
+            };
+            // Hide the form and show loading animation
+            this.style.display = 'none';
+            document.getElementById('loading-animation').style.display = 'flex';
+            let loadingTexts = [
+                "Crafting challenging questions...",
+                "Digging deep into the subject...",
+                "Polishing the perfect quiz for you...",
+                "Almost there, finalizing details..."
+            ];
+            let currentTextIndex = 0;
+            // Start the loading text animation
+            const loadingInterval = setInterval(() => {
+                document.getElementById('loading-text').textContent = loadingTexts[currentTextIndex];
+                currentTextIndex = (currentTextIndex + 1) % loadingTexts.length;
+            }, 3000);
+            fetch('/generate_quiz', {
+                method: 'POST',
+                headers: {
+                    'Content-Type': 'application/json',
+                },
+                body: JSON.stringify(data)
+            })
+            .then(response => response.json())
+            .then(data => {
+                // Clear the loading interval
+                clearInterval(loadingInterval);
+                // Hide loading animation
+                document.getElementById('loading-animation').style.display = 'none';
+                quizData = parseQuizData(data.quiz);
+                showQuiz(quizData);
+            })
+            .catch(error => {
+                console.error('Error:', error);
+                // Clear the loading interval
+                clearInterval(loadingInterval);
+                // Hide loading animation and show error message
+                document.getElementById('loading-animation').style.display = 'none';
+                alert('An error occurred while generating the quiz. Please try again.');
+            });
+        });
+        function parseQuizData(quizString) {
+            const questions = quizString.split('Question:').filter(q => q.trim() !== '');
+            return questions.map((question, index) => {
+                const [questionText, ...options] = question.split('\n').filter(line => line.trim() !== '');
+                const answerLine = options.pop();
+                const correctAnswer = parseInt(answerLine.split(':')[1].trim());
+                return {
+                    id: index + 1,
+                    text: questionText.trim(),
+                    options: options.map(opt => opt.replace('<<o>>', '').trim()),
+                    correctAnswer: correctAnswer,
+                    concept: questionText.match(/\[(.*?)\]/)[1]
+                };
+            });
+        }
+        function showQuiz(questions) {
+            const quizResult = document.getElementById('quiz-result');
+            let quizHtml = '<h2>Your Custom Quiz</h2>';
+            questions.forEach((question, index) => {
+                quizHtml += `
+                    <div class="question fade-in">
+                        <h3>${question.id}. ${question.text}</h3>
+                        <ul class="options">
+                `;
+                question.options.forEach((option, optionIndex) => {
+                    quizHtml += `
+                        <li>
+                            <input type="radio" name="q${index}" value="${optionIndex + 1}" id="q${index}o${optionIndex}">
+                            <label for="q${index}o${optionIndex}">${option}</label>
+                        </li>
+                    `;
+                });
+                quizHtml += `
+                        </ul>
+                    </div>
+                `;
+            });
+            quizHtml += '<button onclick="submitQuiz()" class="btn">Submit Quiz</button>';
+            quizResult.innerHTML = quizHtml;
+            quizResult.style.display = 'block';
+        }
+        function submitQuiz() {
+            const validationContainer = document.getElementById('validation-container');
+            const quizResult = document.getElementById('quiz-result');
+            const quizScore = document.getElementById('quiz-score');
+            const areasToImprove = document.getElementById('areas-to-improve');
+            quizResult.style.display = 'none';
+            validationContainer.style.display = 'flex';
+            setTimeout(() => {
+                validationContainer.style.display = 'none';
+                const score = calculateScore();
+                displayResults(score);
+                // Get areas to improve
+                let improveAreas = [];
+                let incorrectQuestions = quizData.filter((question, index) => {
+                    const selectedAnswer = document.querySelector(`input[name="q${index}"]:checked`);
+                    return !selectedAnswer || parseInt(selectedAnswer.value) !== question.correctAnswer;
+                });
+                if (incorrectQuestions.length > 0) {
+                    improveAreas = incorrectQuestions.map(question => question.concept);
+                }
+                // Send areas to improve to the backend
+                fetch('/update_student_areas', {
+                    method: 'POST',
+                    headers: {
+                        'Content-Type': 'application/json',
+                    },
+                    body: JSON.stringify({ student_id: studentId, areas_to_improve: improveAreas })
+                })
+                .then(response => response.json())
+                .then(data => {
+                    if (data.status === 'success') {
+                        console.log('Student areas to improve updated successfully.');
+                    } else {
+                        console.error('Failed to update student areas to improve.');
+                    }
+                })
+                .catch(error => console.error('Error:', error));
+            }, 2000);
+        }
+        function calculateScore() {
+            let score = 0;
+            quizData.forEach((question, index) => {
+                const selectedAnswer = document.querySelector(`input[name="q${index}"]:checked`);
+                if (selectedAnswer && parseInt(selectedAnswer.value) === question.correctAnswer) {
+                    score++;
+                }
+            });
+            return score;
+        }
+        function displayResults(score) {
+            const quizScore = document.getElementById('quiz-score');
+            const areasToImprove = document.getElementById('areas-to-improve');
+            quizScore.innerHTML = `
+                <div class="score-circle">${score}/${quizData.length}</div>
+                <h3>You have scored</h3>
+                <p>Performance: ${getPerformanceEvaluation(score, quizData.length)}</p>
+            `;
+            quizScore.style.display = 'block';
+            let incorrectQuestions = quizData.filter((question, index) => {
+                const selectedAnswer = document.querySelector(`input[name="q${index}"]:checked`);
+                return !selectedAnswer || parseInt(selectedAnswer.value) !== question.correctAnswer;
+            });
+            if (incorrectQuestions.length > 0) {
+                let improveHtml = '<h3>Areas to be improved</h3><ol>';
+                incorrectQuestions.forEach(question => {
+                    improveHtml += `<li>${question.concept}</li>`;
+                });
+                improveHtml += '</ol>';
+                areasToImprove.innerHTML = improveHtml;
+                areasToImprove.style.display = 'block';
+            }
+        }
+        function getPerformanceEvaluation(score, total) {
+            const percentage = (score / total) * 100;
+            if (percentage >= 80) return 'Excellent';
+            if (percentage >= 60) return 'Good';
+            if (percentage >= 40) return 'Average';
+            return 'Needs Improvement';
+        }
+        function goBack() {
+            window.history.back();
+        }
+    </script>
+</body>
 </html>