Update js/ui/quiz_ui.js

js/ui/quiz_ui.js

@@ -1,177 +1,90 @@
 class QuizUI {
-    constructor() {
-        this.currentDay = 1;
-        this.initializeApp();
-    }
+    static render(quizData) {
+        const quizForm = document.getElementById('quizForm');
+        if (!quizForm || !quizData) return;
 
-    async initializeApp() {
-        // مقداردهی اولیه سیستم احراز هویت
-        AuthMiddleware.initializeApp();
+        let html = '<div class="quiz-questions">';
         
-        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>
+        quizData.questions.forEach((question, index) => {
+            html += `
+                <div class="quiz-question" data-question-id="${question.id}">
+                    <h4>${index + 1}. ${question.question}</h4>
+                    <div class="options-container">
+                        ${question.options.map((option, optIndex) => `
+                            <label class="option-label">
+                                <input type="radio" name="question_${question.id}" value="${optIndex}">
+                                <span class="option-text">${option}</span>
+                            </label>
+                        `).join('')}
                     </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;
-        }
+        html += `</div>
+            <button type="button" class="btn btn-primary" onclick="QuizUI.submitQuiz()">
+                ارسال پاسخ‌ها
+            </button>
+        `;
 
-        const result = authManager.loginUser(data.username, data.password);
-        if (result.success) {
-            document.querySelector('.modal').remove();
-            this.updateAuthDisplay();
-            this.updateScoreDisplay();
-            alert('با موفقیت وارد شدید!');
-        } else {
-            alert(result.message);
-        }
+        quizForm.innerHTML = html;
     }
 
-    // متدهای قبلی با اضافه شدن بررسی احراز هویت
-    submitQuiz() {
+    static async 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}`);
-            }
+            const currentDay = window.app?.currentDay || 1;
+            const userAnswers = this.collectAnswers();
             
-            this.updateScoreDisplay();
+            learningLogic.checkQuizAnswers(currentDay, userAnswers)
+                .then(result => {
+                    this.showQuizResult(result);
+                })
+                .catch(error => {
+                    console.error('Quiz submission error:', error);
+                    Utils.showNotification('خطا در ارسال آزمون', 'error');
+                });
         })();
     }
 
-    submitExercise() {
-        return requireAuth(() => {
-            const answer = document.getElementById('exerciseAnswer').value.trim();
-            if (!answer) {
-                alert('لطفاً پاسخ خود را وارد کنید');
-                return;
-            }
+    static collectAnswers() {
+        // جمع‌آوری پاسخ‌ها از فرم
+        const answers = [];
+        const questions = document.querySelectorAll('.quiz-question');
+        
+        questions.forEach(question => {
+            const selected = question.querySelector('input[type="radio"]:checked');
+            answers.push(selected ? parseInt(selected.value) : -1);
+        });
+        
+        return answers;
+    }
 
-            const validation = ValidationMiddleware.validateExerciseAnswer(answer);
-            if (!validation.isValid) {
-                alert(validation.errors.join('\n'));
-                return;
-            }
+    static showQuizResult(result) {
+        // نمایش نتایج آزمون
+        const feedbackContainer = document.getElementById('quizFeedback');
+        if (!feedbackContainer) 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();
-        })();
-    }
+        let html = `
+            <div class="quiz-result ${result.correctCount === result.totalQuestions ? 'perfect' : 'good'}">
+                <div class="result-header">
+                    <h4>${result.correctCount === result.totalQuestions ? '🎉 عالی!' : '👍 خوب بود!'}</h4>
+                    <div class="score-badge">${result.correctCount}/${result.totalQuestions}</div>
+                </div>
+                <p>${result.feedback.message}</p>
+                <p class="reward-info">🎁 ${result.reward} امتیاز دریافت کردید</p>
+                
+                ${result.correctCount < result.totalQuestions ? `
+                    <button class="btn btn-outline" onclick="QuizUI.showExplanations()">
+                        📖 مشاهده توضیحات
+                    </button>
+                ` : ''}
+            </div>
+        `;
 
-    updateScoreDisplay() {
-        const scoreDisplay = document.getElementById('userScore');
-        const user = authManager.getCurrentUser();
+        feedbackContainer.innerHTML = html;
         
-        if (scoreDisplay && user) {
-            scoreDisplay.textContent = `${user.progress.totalScore || 0} امتیاز`;
-        } else if (scoreDisplay) {
-            scoreDisplay.textContent = '0 امتیاز - لطفاً وارد شوید';
-        }
+        // ارسال event برای به‌روزرسانی UI
+        document.dispatchEvent(new CustomEvent('progressUpdated'));
     }
-
-    // بقیه متدها مانند قبل...
-}
-
-// راه‌اندازی برنامه
-const quizUI = new QuizUI();
+}