mcp-quiz-server/public/dist/components/quiz/NavigationController.js

🧠 AI-Powered Quiz Management via Model Context Protocol (MCP) - Create, manage, and take quizzes directly from VS Code, Claude, and other AI agents.

import { EventManagement } from './EventManagement';
export class NavigationController {
    constructor(store, settingsService) {
        this.currentQuestionIndex = 0;
        this.store = store;
        this.settingsService = settingsService;
        document.addEventListener('quiz:next-question', this.handleNextQuestion.bind(this));
    }
    setupNavigation() {
        console.log('🧭 Setting up navigation controls');
        EventManagement.cleanup(['continue-button', 'complete-quiz-button']);
        this.bindContinueButton();
        this.bindCompleteQuizButton();
        console.log('✅ Navigation setup complete - infinite recursion prevented');
    }
    bindContinueButton() {
        const continueButton = document.getElementById('continue-btn');
        if (continueButton) {
            EventManagement.addListener(continueButton, 'click', () => this.handleNextQuestion(), 'continue-button-click');
            EventManagement.addListener(continueButton, 'keydown', (e) => {
                const keyEvent = e;
                if (keyEvent.key === 'Enter' || keyEvent.key === ' ') {
                    keyEvent.preventDefault();
                    this.handleNextQuestion();
                }
            }, 'continue-button-keyboard');
            console.log('🔗 Continue button bound successfully');
        }
    }
    bindCompleteQuizButton() {
        const completeQuizButton = document.getElementById('complete-quiz-btn');
        if (completeQuizButton) {
            EventManagement.addListener(completeQuizButton, 'click', () => {
                console.log('🏁 Complete Quiz button clicked from single mode');
                this.handleSubmit();
            }, 'complete-quiz-button-click');
            EventManagement.addListener(completeQuizButton, 'keydown', (e) => {
                const keyEvent = e;
                if (keyEvent.key === 'Enter' || keyEvent.key === ' ') {
                    keyEvent.preventDefault();
                    console.log('🏁 Complete Quiz button (keyboard) from single mode');
                    this.handleSubmit();
                }
            }, 'complete-quiz-button-keyboard');
            console.log('🔗 Complete quiz button bound successfully');
        }
    }
    handleNextQuestion() {
        console.log('➡️ Handling next question navigation');
        const state = this.store.getState();
        const quiz = state.currentQuiz;
        if (!quiz) {
            console.error('🚨 No current quiz available for navigation');
            return;
        }
        if (this.currentQuestionIndex >= quiz.questions.length - 1) {
            console.log('🏁 At last question, triggering quiz completion');
            this.handleSubmit();
            return;
        }
        this.currentQuestionIndex++;
        console.log(`📖 Moving to question ${this.currentQuestionIndex + 1}/${quiz.questions.length}`);
        const renderEvent = new CustomEvent('quiz:render-question', {
            detail: { questionIndex: this.currentQuestionIndex },
        });
        document.dispatchEvent(renderEvent);
    }
    async handleSubmit() {
        console.log('📝 Handling quiz submission');
        try {
            const result = await this.store.submitQuiz();
            if (result) {
                console.log('✅ Quiz submitted successfully');
                const resultsEvent = new CustomEvent('quiz:show-results');
                document.dispatchEvent(resultsEvent);
            }
            else {
                console.warn('⚠️ Quiz submission failed - may be incomplete');
            }
        }
        catch (error) {
            console.error('🚨 Error during quiz submission:', error);
        }
    }
    setCurrentQuestionIndex(index) {
        this.currentQuestionIndex = index;
        console.log(`📍 Question index set to: ${index}`);
    }
    getCurrentQuestionIndex() {
        return this.currentQuestionIndex;
    }
    isLastQuestion() {
        const state = this.store.getState();
        const quiz = state.currentQuiz;
        return quiz ? this.currentQuestionIndex >= quiz.questions.length - 1 : false;
    }
    goToQuestion(index) {
        const state = this.store.getState();
        const quiz = state.currentQuiz;
        if (!quiz || index < 0 || index >= quiz.questions.length) {
            console.error('🚨 Invalid question index:', index);
            return;
        }
        this.currentQuestionIndex = index;
        console.log(`🎯 Navigating to question ${index + 1}/${quiz.questions.length}`);
        const renderEvent = new CustomEvent('quiz:render-question', {
            detail: { questionIndex: this.currentQuestionIndex },
        });
        document.dispatchEvent(renderEvent);
    }
    goToPreviousQuestion() {
        if (this.currentQuestionIndex > 0) {
            this.goToQuestion(this.currentQuestionIndex - 1);
        }
    }
    goToNextQuestion() {
        const state = this.store.getState();
        const quiz = state.currentQuiz;
        if (quiz && this.currentQuestionIndex < quiz.questions.length - 1) {
            this.goToQuestion(this.currentQuestionIndex + 1);
        }
    }
    cleanup() {
        EventManagement.componentCleanup('continue-');
        EventManagement.componentCleanup('complete-quiz-');
        document.removeEventListener('quiz:next-question', this.handleNextQuestion.bind(this));
        console.log('🧹 NavigationController cleanup completed');
    }
}
//# sourceMappingURL=NavigationController.js.map