Function startTutorial

tutorials.js:200–270

(tutorialId)

// Start a tutorial by ID - using confirm() dialogs
export async function startTutorial(tutorialId) {
    CarrotDebug.ui(`🎓 startTutorial called with ID: ${tutorialId}`);
    const tutorial = tutorials[tutorialId];
    if (!tutorial) {
        alert(`Tutorial "${tutorialId}" not found`);
        return;
    }

    const steps = tutorial.steps;

    // Show each step with browser confirm dialog
    for (let i = 0; i < steps.length; i++) {
        const step = steps[i];

        // Highlight the target element
        const target = document.querySelector(step.target);
        if (target) {
            // Remove previous highlights
            document.querySelectorAll('.carrot-tutorial-highlight')
                .forEach(el => el.classList.remove('carrot-tutorial-highlight'));

            // Add highlight to current target
            target.classList.add('carrot-tutorial-highlight');

            // Scroll to target
            const isMobile = window.innerWidth <= 768 || 'ontouchstart' in window;
            const scrollOptions = {
                behavior: 'smooth',
                block: isMobile ? 'start' : 'center',
                inline: 'nearest'
            };

            target.scrollIntoView(scrollOptions);

            // Wait for scroll to complete
            await new Promise(resolve => setTimeout(resolve, isMobile ? 800 : 500));
        }

        // Clean up HTML tags and format text nicely
        const cleanContent = step.content
            .replace(/<[^>]*>/g, '') // Remove HTML tags
            .replace(/\s+/g, ' ') // Normalize whitespace
            .replace(/&lt;/g, '<').replace(/&gt;/g, '>') // Fix HTML entities
            .replace(/&amp;/g, '&') // Fix ampersands
            .trim();

        // Format text with proper line breaks for readability
        const formattedContent = cleanContent
            .replace(/([.!?])\s+([A-Z])/g, '$1\n\n$2') // Add breaks after sentences
            .replace(/([:])\s*([A-Z•])/g, '$1\n$2') // Add breaks after colons
            .replace(/•\s/g, '\n• ') // Put bullets on new lines
            .replace(/(\d+\.)\s/g, '\n$1 ') // Put numbered items on new lines
            .replace(/\n\n\n+/g, '\n\n') // Clean up multiple line breaks
            .trim();

        // Show step as confirm dialog
        const continueClicked = confirm(
            `Step ${i + 1} of ${steps.length}: ${step.title}\n\n${formattedContent}\n\nClick OK for next step, Cancel to exit tutorial.`