mcp-quiz-server/public/debug-settings-timer.js

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

/**
 * Debug Settings Menu Auto-Start Timer Issue
 *
 * This test checks:
 * 1. If SettingsMenu component is properly mounted
 * 2. If the auto-start timer checkbox element exists
 * 3. If the settings subscription is working
 * 4. If the updateUI method is being called
 */

console.log('🔍 DEBUG: Auto-Start Timer Settings Issue');

// Wait for DOM to be ready
document.addEventListener('DOMContentLoaded', () => {
  setTimeout(() => {
    console.log('📋 Starting settings menu debug...');

    // 1. Check if SettingsMenu component exists in the app
    const settingsButton = document.querySelector('#settings-menu-btn');
    const settingsDropdown = document.querySelector('#settings-dropdown');
    console.log('🔘 Settings button exists:', !!settingsButton);
    console.log('📋 Settings dropdown exists:', !!settingsDropdown);

    // 2. Check if auto-start timer checkbox exists
    const autoStartCheckbox = document.querySelector('#auto-start-timer');
    console.log('⏰ Auto-start timer checkbox exists:', !!autoStartCheckbox);
    if (autoStartCheckbox) {
      console.log('✅ Checkbox current state:', autoStartCheckbox.checked);
      console.log('🎛️ Checkbox ID:', autoStartCheckbox.id);
      console.log('🔧 Checkbox class:', autoStartCheckbox.className);
    }

    // 3. Get SettingsService instance and check current settings
    try {
      const app = window.__quizApp;
      if (!app) {
        console.log('❌ Quiz app not found on window object');
        return;
      }

      const settingsService = app.settingsService || app.getSettingsService?.();
      if (!settingsService) {
        console.log('❌ SettingsService not accessible from app');
        return;
      }

      const currentSettings = settingsService.getSettings();
      console.log('⚙️ Current autoStartTimer setting:', currentSettings.quiz.autoStartTimer);

      // 4. Test updating the setting and check if checkbox updates
      console.log('🔄 Testing setting update...');
      const originalValue = currentSettings.quiz.autoStartTimer;

      // Toggle the setting
      settingsService.updateQuizSettings({ autoStartTimer: !originalValue });

      setTimeout(() => {
        const newSettings = settingsService.getSettings();
        const newCheckboxState = autoStartCheckbox ? autoStartCheckbox.checked : null;

        console.log('📊 After update:');
        console.log('  - Setting value:', newSettings.quiz.autoStartTimer);
        console.log('  - Checkbox state:', newCheckboxState);
        console.log('  - Values match:', newSettings.quiz.autoStartTimer === newCheckboxState);

        if (newSettings.quiz.autoStartTimer !== newCheckboxState) {
          console.error('❌ ISSUE FOUND: Setting and checkbox are out of sync!');

          // Check if SettingsMenu component subscription is working
          console.log('🔍 Checking SettingsMenu component...');

          // Try to find the SettingsMenu instance
          if (
            window.quizApp &&
            window.quizApp.components &&
            window.quizApp.components.settingsMenu
          ) {
            console.log('✅ SettingsMenu component found in app');
            console.log('🔧 Testing manual updateUI call...');
            window.quizApp.components.settingsMenu.updateUI();

            setTimeout(() => {
              const finalCheckboxState = autoStartCheckbox ? autoStartCheckbox.checked : null;
              console.log('📊 After manual updateUI - Checkbox state:', finalCheckboxState);
            }, 100);
          } else {
            console.error('❌ SettingsMenu component not found in global app instance');
          }
        } else {
          console.log('✅ Settings sync working correctly!');
        }

        // Restore original value
        settingsService.updateQuizSettings({ autoStartTimer: originalValue });
      }, 100);
    } catch (error) {
      console.error('❌ Error accessing SettingsService:', error);
    }
  }, 2000); // Wait 2 seconds for app initialization
});

// Also test when settings button is clicked
document.addEventListener('click', e => {
  if (e.target && e.target.id === 'settings-menu-btn') {
    setTimeout(() => {
      const autoStartCheckbox = document.querySelector('#auto-start-timer');
      const app = window.__quizApp;
      if (!app) {
        console.log('❌ Quiz app not found on window object');
        return;
      }

      const settingsService = app.getSettingsService();
      if (!settingsService) {
        console.log('❌ SettingsService not accessible from app');
        return;
      }

      const currentSettings = settingsService.getSettings();

      console.log('🎯 Settings menu opened - checking sync:');
      console.log('  - Setting value:', currentSettings.quiz.autoStartTimer);
      console.log(
        '  - Checkbox state:',
        autoStartCheckbox ? autoStartCheckbox.checked : 'not found'
      );
    }, 100);
  }
});