Complete walkthrough JavaScript file and fix black page issue

walkthrough-enhancement.js

@@ -175,4 +175,383 @@ const enhancedTutorials = {
                 element: '#taskOutput',
                 position: 'top',
                 duration: 10000,
-                explanation: 'Linear separability means a simple
+                explanation: 'Linear separability means a simple perceptron (single layer) can solve this problem.'
+            },
+            {
+                title: 'OR Gate - At Least One Must Be True',
+                content: 'OR outputs 1 when at least one input is 1. Like "I\'ll be happy if I have coffee OR chocolate." Also linearly separable, so it learns quickly. Watch how the network adjusts to recognize this different pattern!',
+                element: '#taskOutput',
+                position: 'top',
+                duration: 8000,
+                explanation: 'OR and AND gates have different decision boundaries but both are linearly separable.'
+            },
+            {
+                title: 'XOR Gate - The Challenge',
+                content: 'XOR (exclusive OR) outputs 1 when inputs are different. This is NOT linearly separable! You can\'t draw a single straight line to separate the patterns. This is why we need multiple layers - hidden layers create complex decision boundaries.',
+                element: '#taskOutput',
+                position: 'top',
+                duration: 12000,
+                explanation: 'XOR was historically important because it proved that multi-layer networks were necessary for complex problems.'
+            },
+            {
+                title: 'Why Multiple Layers Matter',
+                content: 'Hidden layers transform the input space, making non-linear problems solvable. The first hidden layer might separate some patterns, the second layer combines those patterns in new ways. Each layer adds expressive power!',
+                element: '#networkCanvas',
+                position: 'bottom',
+                duration: 10000,
+                explanation: 'Universal approximation theorem: neural networks with enough hidden units can approximate any continuous function.'
+            }
+        ]
+    }
+};
+
+// Walkthrough state management
+let walkthroughState = {
+    active: false,
+    currentTutorial: null,
+    currentStep: 0,
+    autoPlay: false,
+    speed: 'normal'
+};
+
+// DOM elements for walkthrough
+const walkthroughElements = {
+    overlay: null,
+    highlight: null,
+    popup: null,
+    progress: null,
+    indicator: null
+};
+
+// Initialize walkthrough elements
+function initializeWalkthrough() {
+    // Get DOM elements
+    walkthroughElements.overlay = document.getElementById('walkthroughOverlay');
+    walkthroughElements.highlight = document.getElementById('walkthroughHighlight');
+    walkthroughElements.popup = document.getElementById('walkthroughPopup');
+    walkthroughElements.progress = document.getElementById('walkthroughProgress');
+    walkthroughElements.indicator = document.getElementById('walkthroughIndicator');
+    
+    // Set up event listeners
+    setupWalkthroughEventListeners();
+}
+
+// Setup event listeners for walkthrough
+function setupWalkthroughEventListeners() {
+    // Previous button
+    const prevBtn = document.getElementById('walkthroughPrev');
+    if (prevBtn) {
+        prevBtn.addEventListener('click', () => {
+            if (walkthroughState.currentStep > 0) {
+                walkthroughState.currentStep--;
+                updateWalkthroughStep();
+            }
+        });
+    }
+    
+    // Next button
+    const nextBtn = document.getElementById('walkthroughNext');
+    if (nextBtn) {
+        nextBtn.addEventListener('click', () => {
+            const tutorial = enhancedTutorials[walkthroughState.currentTutorial];
+            if (walkthroughState.currentStep < tutorial.steps.length - 1) {
+                walkthroughState.currentStep++;
+                updateWalkthroughStep();
+            } else {
+                endWalkthrough();
+            }
+        });
+    }
+    
+    // Skip/Exit button
+    const skipBtn = document.getElementById('walkthroughSkip');
+    if (skipBtn) {
+        skipBtn.addEventListener('click', endWalkthrough);
+    }
+    
+    // Overlay click to exit
+    if (walkthroughElements.overlay) {
+        walkthroughElements.overlay.addEventListener('click', (e) => {
+            if (e.target === walkthroughElements.overlay) {
+                endWalkthrough();
+            }
+        });
+    }
+    
+    // Keyboard navigation
+    document.addEventListener('keydown', (e) => {
+        if (!walkthroughState.active) return;
+        
+        switch(e.key) {
+            case 'ArrowLeft':
+                e.preventDefault();
+                if (walkthroughState.currentStep > 0) {
+                    walkthroughState.currentStep--;
+                    updateWalkthroughStep();
+                }
+                break;
+            case 'ArrowRight':
+                e.preventDefault();
+                const tutorial = enhancedTutorials[walkthroughState.currentTutorial];
+                if (walkthroughState.currentStep < tutorial.steps.length - 1) {
+                    walkthroughState.currentStep++;
+                    updateWalkthroughStep();
+                } else {
+                    endWalkthrough();
+                }
+                break;
+            case 'Escape':
+                e.preventDefault();
+                endWalkthrough();
+                break;
+        }
+    });
+}
+
+// Start a specific walkthrough tutorial
+function startWalkthrough(tutorialId) {
+    console.log('Starting walkthrough:', tutorialId);
+    
+    // Check if tutorial exists
+    if (!enhancedTutorials[tutorialId]) {
+        console.error('Tutorial not found:', tutorialId);
+        return;
+    }
+    
+    // Start with AND gate for logic tutorial
+    if (tutorialId === 'logic') {
+        selectTask('and'); // This should trigger the AND gate task
+        setTimeout(() => {
+            startWalkthroughOnTask(tutorialId);
+        }, 100);
+    } else {
+        startWalkthroughOnTask(tutorialId);
+    }
+}
+
+// Start walkthrough on current task
+function startWalkthroughOnTask(tutorialId) {
+    walkthroughState.active = true;
+    walkthroughState.currentTutorial = tutorialId;
+    walkthroughState.currentStep = 0;
+    
+    // Show overlay and indicator
+    if (walkthroughElements.overlay) {
+        walkthroughElements.overlay.style.display = 'block';
+    }
+    if (walkthroughElements.indicator) {
+        walkthroughElements.indicator.style.display = 'block';
+    }
+    
+    // Hide walkthrough mode menu
+    const walkthroughMode = document.getElementById('walkthroughMode');
+    if (walkthroughMode) {
+        walkthroughMode.style.display = 'none';
+    }
+    
+    // Show training interface if not already shown
+    const trainingInterface = document.getElementById('trainingInterface');
+    if (trainingInterface && trainingInterface.style.display === 'none') {
+        trainingInterface.style.display = 'block';
+    }
+    
+    updateWalkthroughStep();
+}
+
+// Update the current walkthrough step
+function updateWalkthroughStep() {
+    const tutorial = enhancedTutorials[walkthroughState.currentTutorial];
+    const step = tutorial.steps[walkthroughState.currentStep];
+    
+    if (!step) return;
+    
+    // Update progress indicator
+    if (walkthroughElements.progress) {
+        walkthroughElements.progress.style.display = 'block';
+        document.getElementById('walkthroughStep').textContent = walkthroughState.currentStep + 1;
+        document.getElementById('walkthroughTotal').textContent = tutorial.steps.length;
+    }
+    
+    // Update popup content
+    if (walkthroughElements.popup) {
+        document.getElementById('walkthroughTitle').textContent = step.title;
+        document.getElementById('walkthroughContent').textContent = step.content;
+        
+        // Position popup
+        positionWalkthroughPopup(step);
+        
+        // Show popup
+        walkthroughElements.popup.style.display = 'block';
+    }
+    
+    // Update highlight
+    if (step.element && step.highlight) {
+        highlightElement(step.element, step.highlight);
+    } else if (step.element) {
+        highlightElement(step.element);
+    } else {
+        // Center mode - no specific element highlighted
+        if (walkthroughElements.highlight) {
+            walkthroughElements.highlight.style.display = 'none';
+        }
+    }
+    
+    // Update button states
+    const prevBtn = document.getElementById('walkthroughPrev');
+    const nextBtn = document.getElementById('walkthroughNext');
+    
+    if (prevBtn) {
+        prevBtn.disabled = walkthroughState.currentStep === 0;
+        prevBtn.style.opacity = walkthroughState.currentStep === 0 ? '0.5' : '1';
+    }
+    
+    if (nextBtn) {
+        const isLastStep = walkthroughState.currentStep === tutorial.steps.length - 1;
+        nextBtn.textContent = isLastStep ? 'Finish' : 'Next';
+    }
+}
+
+// Position the walkthrough popup
+function positionWalkthroughPopup(step) {
+    const popup = walkthroughElements.popup;
+    if (!popup) return;
+    
+    // Remove all position classes
+    popup.className = 'walkthrough-popup';
+    
+    if (step.position === 'center') {
+        // Center the popup
+        popup.style.position = 'fixed';
+        popup.style.top = '50%';
+        popup.style.left = '50%';
+        popup.style.transform = 'translate(-50%, -50%)';
+        popup.style.maxWidth = '90vw';
+    } else if (step.element) {
+        const element = document.querySelector(step.element);
+        if (element) {
+            const rect = element.getBoundingClientRect();
+            
+            popup.style.position = 'fixed';
+            popup.style.transform = 'none';
+            
+            switch(step.position) {
+                case 'top':
+                    popup.style.left = `${rect.left + rect.width / 2 - 175}px`;
+                    popup.style.top = `${rect.top - 200}px`;
+                    popup.className += ' top';
+                    break;
+                case 'bottom':
+                    popup.style.left = `${rect.left + rect.width / 2 - 175}px`;
+                    popup.style.top = `${rect.bottom + 20}px`;
+                    popup.className += ' bottom';
+                    break;
+                case 'left':
+                    popup.style.left = `${rect.left - 370}px`;
+                    popup.style.top = `${rect.top + rect.height / 2 - 100}px`;
+                    popup.className += ' left';
+                    break;
+                case 'right':
+                    popup.style.left = `${rect.right + 20}px`;
+                    popup.style.top = `${rect.top + rect.height / 2 - 100}px`;
+                    popup.className += ' right';
+                    break;
+            }
+            
+            // Ensure popup stays within viewport
+            const popupRect = popup.getBoundingClientRect();
+            if (popupRect.right > window.innerWidth) {
+                popup.style.left = `${window.innerWidth - popupRect.width - 20}px`;
+            }
+            if (popupRect.left < 0) {
+                popup.style.left = '20px';
+            }
+            if (popupRect.bottom > window.innerHeight) {
+                popup.style.top = `${window.innerHeight - popupRect.height - 20}px`;
+            }
+            if (popupRect.top < 0) {
+                popup.style.top = '20px';
+            }
+        }
+    }
+}
+
+// Highlight a specific element
+function highlightElement(selector, customBounds = null) {
+    const element = document.querySelector(selector);
+    const highlight = walkthroughElements.highlight;
+    
+    if (!element || !highlight) return;
+    
+    const rect = element.getBoundingClientRect();
+    
+    let bounds = {
+        x: rect.left,
+        y: rect.top,
+        width: rect.width,
+        height: rect.height
+    };
+    
+    // Use custom bounds if provided (for highlighting parts of elements)
+    if (customBounds) {
+        bounds = {
+            x: rect.left + customBounds.x,
+            y: rect.top + customBounds.y,
+            width: customBounds.width,
+            height: customBounds.height
+        };
+    }
+    
+    // Position the highlight
+    highlight.style.display = 'block';
+    highlight.style.left = `${bounds.x - 5}px`;
+    highlight.style.top = `${bounds.y - 5}px`;
+    highlight.style.width = `${bounds.width + 10}px`;
+    highlight.style.height = `${bounds.height + 10}px`;
+}
+
+// End the walkthrough
+function endWalkthrough() {
+    walkthroughState.active = false;
+    walkthroughState.currentTutorial = null;
+    walkthroughState.currentStep = 0;
+    
+    // Hide all walkthrough elements
+    if (walkthroughElements.overlay) {
+        walkthroughElements.overlay.style.display = 'none';
+    }
+    if (walkthroughElements.highlight) {
+        walkthroughElements.highlight.style.display = 'none';
+    }
+    if (walkthroughElements.popup) {
+        walkthroughElements.popup.style.display = 'none';
+    }
+    if (walkthroughElements.progress) {
+        walkthroughElements.progress.style.display = 'none';
+    }
+    if (walkthroughElements.indicator) {
+        walkthroughElements.indicator.style.display = 'none';
+    }
+    
+    // Return to walkthrough mode menu
+    const walkthroughMode = document.getElementById('walkthroughMode');
+    if (walkthroughMode) {
+        walkthroughMode.style.display = 'block';
+    }
+    
+    // Hide training interface if we were in walkthrough
+    const trainingInterface = document.getElementById('trainingInterface');
+    if (trainingInterface) {
+        trainingInterface.style.display = 'none';
+    }
+}
+
+// Initialize when the page loads
+document.addEventListener('DOMContentLoaded', () => {
+    console.log('Initializing walkthrough system...');
+    initializeWalkthrough();
+});
+
+// Make functions globally available
+window.startWalkthrough = startWalkthrough;
+window.endWalkthrough = endWalkthrough;
+window.walkthroughState = walkthroughState;