Create quiz_ui.js

ui/quiz_ui.js

@@ -0,0 +1,177 @@
+class QuizUI {
+    constructor() {
+        this.currentDay = 1;
+        this.initializeApp();
+    }
+
+    async initializeApp() {
+        // مقداردهی اولیه سیستم احراز هویت
+        AuthMiddleware.initializeApp();
+        
+        await this.loadProgress();
+        this.renderLesson();
+        this.renderQuiz();
+        this.renderExercise();
+        this.updateScoreDisplay();
+        this.setupAuthUI();
+    }
+
+    setupAuthUI() {
+        // نمایش وضعیت کاربر در رابط کاربری
+        this.updateAuthDisplay();
+        
+        // افزودن event listener برای دکمه خروج
+        const logoutBtn = document.getElementById('logoutBtn');
+        if (logoutBtn) {
+            logoutBtn.addEventListener('click', () => {
+                authManager.logout();
+                this.updateAuthDisplay();
+                alert('با موفقیت خارج شدید.');
+            });
+        }
+    }
+
+    updateAuthDisplay() {
+        const authSection = document.getElementById('authSection');
+        const user = authManager.getCurrentUser();
+
+        if (authSection) {
+            if (user) {
+                authSection.innerHTML = `
+                    <div class="user-info">
+                        <span>خوش آمدید, ${user.profile.fullName || user.username}!</span>
+                        <button id="logoutBtn" class="btn btn-secondary">خروج</button>
+                    </div>
+                `;
+                
+                // اضافه کردن event listener برای دکمه جدید
+                document.getElementById('logoutBtn')?.addEventListener('click', () => {
+                    authManager.logout();
+                    this.updateAuthDisplay();
+                    alert('با موفقیت خارج شدید.');
+                });
+            } else {
+                authSection.innerHTML = `
+                    <div class="auth-buttons">
+                        <button onclick="quizUI.showLoginModal()" class="btn btn-primary">ورود</button>
+                        <button onclick="quizUI.showRegisterModal()" class="btn btn-secondary">ثبت نام</button>
+                    </div>
+                `;
+            }
+        }
+    }
+
+    showLoginModal() {
+        // نمایش مودال ورود
+        const modalHTML = `
+            <div class="modal">
+                <div class="modal-content">
+                    <h3>ورود به سیستم</h3>
+                    <form id="loginForm">
+                        <input type="text" name="username" placeholder="نام کاربری" required>
+                        <input type="password" name="password" placeholder="رمز عبور" required>
+                        <button type="submit">ورود</button>
+                    </form>
+                    <button onclick="this.closest('.modal').remove()">بستن</button>
+                </div>
+            </div>
+        `;
+        
+        document.body.insertAdjacentHTML('beforeend', modalHTML);
+        
+        document.getElementById('loginForm').addEventListener('submit', (e) => {
+            e.preventDefault();
+            this.handleLogin(new FormData(e.target));
+        });
+    }
+
+    handleLogin(formData) {
+        const data = {
+            username: formData.get('username'),
+            password: formData.get('password')
+        };
+
+        const validation = ValidationMiddleware.validateLoginData(data);
+        if (!validation.isValid) {
+            alert(validation.errors.join('\n'));
+            return;
+        }
+
+        const result = authManager.loginUser(data.username, data.password);
+        if (result.success) {
+            document.querySelector('.modal').remove();
+            this.updateAuthDisplay();
+            this.updateScoreDisplay();
+            alert('با موفقیت وارد شدید!');
+        } else {
+            alert(result.message);
+        }
+    }
+
+    // متدهای قبلی با اضافه شدن بررسی احراز هویت
+    submitQuiz() {
+        return requireAuth(() => {
+            const quizData = this.learningLogic.load_quiz(this.currentDay);
+            const userAnswers = [];
+
+            quizData.questions.forEach(question => {
+                const selectedOption = document.querySelector(
+                    `input[name="question_${question.id}"]:checked`
+                );
+                userAnswers.push(selectedOption ? parseInt(selectedOption.value) : -1);
+            });
+
+            const result = this.learningLogic.check_quiz_answers(this.currentDay, userAnswers);
+            this.showQuizFeedback(result);
+            
+            // به‌روزرسانی امتیاز کاربر
+            if (result.reward > 0) {
+                userManager.updateUserProgress(result.reward, `quiz_day${this.currentDay}`);
+            }
+            
+            this.updateScoreDisplay();
+        })();
+    }
+
+    submitExercise() {
+        return requireAuth(() => {
+            const answer = document.getElementById('exerciseAnswer').value.trim();
+            if (!answer) {
+                alert('لطفاً پاسخ خود را وارد کنید');
+                return;
+            }
+
+            const validation = ValidationMiddleware.validateExerciseAnswer(answer);
+            if (!validation.isValid) {
+                alert(validation.errors.join('\n'));
+                return;
+            }
+
+            const result = this.learningLogic.check_exercise_answer(this.currentDay, answer);
+            this.showExerciseFeedback(result);
+            
+            // به‌روزرسانی امتیاز کاربر
+            if (result.reward > 0) {
+                userManager.updateUserProgress(result.reward, `exercise_day${this.currentDay}`);
+            }
+            
+            this.updateScoreDisplay();
+        })();
+    }
+
+    updateScoreDisplay() {
+        const scoreDisplay = document.getElementById('userScore');
+        const user = authManager.getCurrentUser();
+        
+        if (scoreDisplay && user) {
+            scoreDisplay.textContent = `${user.progress.totalScore || 0} امتیاز`;
+        } else if (scoreDisplay) {
+            scoreDisplay.textContent = '0 امتیاز - لطفاً وارد شوید';
+        }
+    }
+
+    // بقیه متدها مانند قبل...
+}
+
+// راه‌اندازی برنامه
+const quizUI = new QuizUI();