{"id":3242,"date":"2025-06-01T02:32:30","date_gmt":"2025-06-01T02:32:30","guid":{"rendered":"https:\/\/wa11y.io\/?page_id=3242"},"modified":"2025-07-21T17:31:38","modified_gmt":"2025-07-21T17:31:38","slug":"claudia-focus-mode","status":"publish","type":"page","link":"https:\/\/staging.wa11y.io\/pt\/prototype\/claudia-focus-mode\/","title":{"rendered":"M\u00f3dulo Claudia"},"content":{"rendered":"<div data-elementor-type=\"wp-page\" data-elementor-id=\"3242\" class=\"elementor elementor-3242\" data-elementor-post-type=\"page\">\n\t\t\t\t<div class=\"elementor-element elementor-element-72821e7b e-flex e-con-boxed e-con e-parent\" data-id=\"72821e7b\" data-element_type=\"container\" id=\"hero\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t<div class=\"elementor-element elementor-element-4d36f925 e-con-full e-flex e-con e-child\" data-id=\"4d36f925\" data-element_type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-f6aa110 elementor-align-center elementor-widget-mobile__width-inherit elementor-mobile-align-center elementor-widget elementor-widget-button\" data-id=\"f6aa110\" data-element_type=\"widget\" data-widget_type=\"button.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<div class=\"elementor-button-wrapper\">\n\t\t\t\t\t<a class=\"elementor-button elementor-button-link elementor-size-sm\" href=\"#\">\n\t\t\t\t\t\t<span class=\"elementor-button-content-wrapper\">\n\t\t\t\t\t\t\t\t\t<span class=\"elementor-button-text\">Modo de foco<\/span>\n\t\t\t\t\t<\/span>\n\t\t\t\t\t<\/a>\n\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-9eb095d elementor-widget elementor-widget-html\" data-id=\"9eb095d\" data-element_type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t   <main id=\"main-content\" class=\"main\">\n        <div class=\"container\">\n            <!-- Progress Tracker -->\n            <section class=\"progress-tracker\" aria-labelledby=\"progress-heading\">\n                <h1 id=\"progress-heading\" class=\"sr-only\">Progresso do aprendizado<\/h1>\n                <div class=\"progress-stages\">\n                    <div class=\"stage active\" data-stage=\"1\">\n                        <div class=\"stage-circle\">1<\/div>\n                        <span class=\"stage-label\">In\u00edcio<\/span>\n                    <\/div>\n                    <div class=\"stage-line\"><\/div>\n                    <div class=\"stage\" data-stage=\"2\">\n                        <div class=\"stage-circle\">2<\/div>\n                        <span class=\"stage-label\">Em andamento<\/span>\n                    <\/div>\n                    <div class=\"stage-line\"><\/div>\n                    <div class=\"stage\" data-stage=\"3\">\n                        <div class=\"stage-circle\">3<\/div>\n                        <span class=\"stage-label\">Feito<\/span>\n                    <\/div>\n                <\/div>\n            <\/section>\n\n            <!-- Welcome Section -->\n            <section class=\"welcome-section\">\n                <div class=\"welcome-card\">\n                    <h1 class=\"welcome-heading\">Ol\u00e1, Marcus \ud83d\udc4b Bem-vindo ao M\u00f3dulo 2: M\u00e9todos de pesquisa do usu\u00e1rio<\/h1>\n                    <p class=\"welcome-message\">\n                        Este m\u00f3dulo foi projetado especificamente para seu estilo de aprendizagem em modo de foco.\n                        Voc\u00ea explorar\u00e1 os m\u00e9todos de pesquisa de usu\u00e1rios por meio de blocos de tamanho reduzido, acompanhamento do progresso por meio de jogos,\n                        e vit\u00f3rias r\u00e1pidas que criam impulso.\n                    <\/p>\n                    <div class=\"module-meta\">\n                        <span class=\"duration\">Tempo alvo: 8-12 minutos<\/span>\n                        <span class=\"format\">Formato: Blocos de microaprendizagem + Sprint Badge<\/span>\n                    <\/div>\n                <\/div>\n            <\/section>\n\n            <!-- Module Header -->\n            <section class=\"module-header\">\n                <h2 class=\"module-title\">M\u00e9todos de pesquisa do usu\u00e1rio<\/h2>\n                <p class=\"module-subtitle\">Tr\u00eas blocos focados - 8-12 minutos - Ganhe seu distintivo Sprint<\/p>\n                <div class=\"timer-container\">\n                    <span class=\"timer-label\">Hor\u00e1rio da sess\u00e3o:<\/span>\n                    <span id=\"session-timer\" class=\"timer\">00:00<\/span>\n                <\/div>\n            <\/section>\n\n            <!-- Learning Blocks -->\n            <div class=\"learning-blocks\">\n                \n                <!-- Block 1: What is User Research? -->\n                <section class=\"learning-block\" data-block=\"1\" aria-labelledby=\"block1-heading\">\n                    <div class=\"block-header\">\n                        <div class=\"block-number\">1<\/div>\n                        <h3 id=\"block1-heading\" class=\"block-title\">O que \u00e9 pesquisa com usu\u00e1rios?<\/h3>\n                        <div class=\"block-actions\">\n                            <label class=\"checkbox-container\">\n                                <input type=\"checkbox\" id=\"block1-check\" class=\"block-checkbox\" aria-describedby=\"block1-help\">\n                                <span class=\"checkmark\"><\/span>\n                                <span class=\"sr-only\">Marcar o Bloco 1 como conclu\u00eddo<\/span>\n                            <\/label>\n                            <button class=\"block-toggle\" aria-expanded=\"false\" aria-controls=\"block1-content\">\n                                <span class=\"toggle-icon\">\u25bc<\/span>\n                            <\/button>\n                        <\/div>\n                    <\/div>\n                    \n                    <div id=\"block1-content\" class=\"block-content\" style=\"display: none;\">\n                        <div class=\"content-text\">\n                            <p>A pesquisa com usu\u00e1rios \u00e9 a forma como entendemos o que as pessoas realmente precisam e querem de nossos projetos. Em vez de adivinhar, fazemos perguntas, observamos como as pessoas usam os produtos e testamos nossas ideias com usu\u00e1rios reais. \u00c9 como ser um detetive do bom design.<\/p>\n                        <\/div>\n                        \n                        <div class=\"audio-option\">\n                            <button id=\"play-block1-audio\" class=\"audio-btn\" aria-describedby=\"audio1-help\">\n                                <span class=\"audio-icon\">\ud83c\udfa7<\/span>\n                                <span class=\"audio-text\">Reproduzir \u00e1udio (30 segundos)<\/span>\n                            <\/button>\n                            <small id=\"audio1-help\" class=\"audio-help\">Opcional: Ou\u00e7a esta explica\u00e7\u00e3o<\/small>\n                        <\/div>\n                        \n                        <div class=\"block-progress\">\n                            <div class=\"progress-bar\">\n                                <div class=\"progress-fill\" data-progress=\"0\"><\/div>\n                            <\/div>\n                        <\/div>\n                    <\/div>\n                    <small id=\"block1-help\" class=\"block-help\">Marque a caixa quando voc\u00ea entender esse conceito<\/small>\n                <\/section>\n\n                <!-- Block 2: Interviews vs. Surveys -->\n                <section class=\"learning-block\" data-block=\"2\" aria-labelledby=\"block2-heading\">\n                    <div class=\"block-header\">\n                        <div class=\"block-number\">2<\/div>\n                        <h3 id=\"block2-heading\" class=\"block-title\">Entrevistas vs. pesquisas<\/h3>\n                        <div class=\"block-actions\">\n                            <label class=\"checkbox-container\">\n                                <input type=\"checkbox\" id=\"block2-check\" class=\"block-checkbox\" aria-describedby=\"block2-help\" disabled>\n                                <span class=\"checkmark\"><\/span>\n                                <span class=\"sr-only\">Marcar o Bloco 2 como conclu\u00eddo<\/span>\n                            <\/label>\n                            <button class=\"block-toggle\" aria-expanded=\"false\" aria-controls=\"block2-content\" disabled>\n                                <span class=\"toggle-icon\">\u25bc<\/span>\n                            <\/button>\n                        <\/div>\n                    <\/div>\n                    \n                    <div id=\"block2-content\" class=\"block-content\" style=\"display: none;\">\n                        <div class=\"comparison-table\">\n                            <div class=\"table-header\">\n                                <div class=\"table-cell header\">M\u00e9todo<\/div>\n                                <div class=\"table-cell header\">Melhor para<\/div>\n                                <div class=\"table-cell header\">Quando usar<\/div>\n                            <\/div>\n                            <div class=\"table-row\">\n                                <div class=\"table-cell method\">\n                                    <strong>Entrevistas<\/strong>\n                                    <span class=\"method-icon\">\ud83d\udcac<\/span>\n                                <\/div>\n                                <div class=\"table-cell\">Compreender o \"porqu\u00ea\" por tr\u00e1s dos comportamentos<\/div>\n                                <div class=\"table-cell\">Precisa de insights profundos de menos pessoas<\/div>\n                            <\/div>\n                            <div class=\"table-row\">\n                                <div class=\"table-cell method\">\n                                    <strong>Pesquisas<\/strong>\n                                    <span class=\"method-icon\">\ud83d\udcca<\/span>\n                                <\/div>\n                                <div class=\"table-cell\">Obter feedback r\u00e1pido de muitas pessoas<\/div>\n                                <div class=\"table-cell\">Necessidade de medir tend\u00eancias ou opini\u00f5es<\/div>\n                            <\/div>\n                        <\/div>\n                        \n                        <!-- Quick Quiz -->\n                        <div class=\"mini-quiz\">\n                            <h4 class=\"quiz-question\" style=\"color:#000;\">Verifica\u00e7\u00e3o r\u00e1pida: Voc\u00ea quer entender por que os usu\u00e1rios abandonam seus carrinhos de compras. Qual m\u00e9todo voc\u00ea escolheria?<\/h4>\n                            <div class=\"quiz-options\">\n                                <label class=\"quiz-option\">\n                                    <input type=\"radio\" name=\"quiz1\" value=\"interviews\" class=\"quiz-radio\">\n                                    <span class=\"option-text\">Entrevistas (para entender o motivo)<\/span>\n                                <\/label>\n                                <label class=\"quiz-option\">\n                                    <input type=\"radio\" name=\"quiz1\" value=\"surveys\" class=\"quiz-radio\">\n                                    <span class=\"option-text\">Pesquisas (para contar quantas)<\/span>\n                                <\/label>\n                            <\/div>\n                            <div id=\"quiz1-feedback\" class=\"quiz-feedback\" style=\"display: none;\"><\/div>\n                        <\/div>\n                        \n                        <div class=\"block-progress\">\n                            <div class=\"progress-bar\">\n                                <div class=\"progress-fill\" data-progress=\"0\"><\/div>\n                            <\/div>\n                        <\/div>\n                    <\/div>\n                    <small id=\"block2-help\" class=\"block-help\">Complete o question\u00e1rio para desbloquear este ponto de controle<\/small>\n                <\/section>\n\n                <!-- Block 3: Apply It -->\n                <section class=\"learning-block\" data-block=\"3\" aria-labelledby=\"block3-heading\">\n                    <div class=\"block-header\">\n                        <div class=\"block-number\">3<\/div>\n                        <h3 id=\"block3-heading\" class=\"block-title\">Aplicar<\/h3>\n                        <div class=\"block-actions\">\n                            <label class=\"checkbox-container\">\n                                <input type=\"checkbox\" id=\"block3-check\" class=\"block-checkbox\" aria-describedby=\"block3-help\" disabled>\n                                <span class=\"checkmark\"><\/span>\n                                <span class=\"sr-only\">Marcar o Bloco 3 como conclu\u00eddo<\/span>\n                            <\/label>\n                            <button class=\"block-toggle\" aria-expanded=\"false\" aria-controls=\"block3-content\" disabled>\n                                <span class=\"toggle-icon\">\u25bc<\/span>\n                            <\/button>\n                        <\/div>\n                    <\/div>\n                    \n                    <div id=\"block3-content\" class=\"block-content\" style=\"display: none;\">\n                        <div class=\"scenario-container\">\n                            <div class=\"scenario-image\">\n                                <div class=\"figma-mockup\" role=\"img\" aria-label=\"Captura de tela de um design de aplicativo m\u00f3vel com anota\u00e7\u00f5es de feedback do usu\u00e1rio\">\n                                    <div class=\"mockup-header\">\ud83d\udcf1 Aplicativo de entrega de comida - Feedback do usu\u00e1rio<\/div>\n                                    <div class=\"mockup-content\">\n                                        <div class=\"feedback-point\" data-feedback=\"1\">\n                                            <span class=\"feedback-dot\">1<\/span>\n                                            <span class=\"feedback-text\">\"N\u00e3o consigo encontrar o bot\u00e3o de pesquisa\"<\/span>\n                                        <\/div>\n                                        <div class=\"feedback-point\" data-feedback=\"2\">\n                                            <span class=\"feedback-dot\">2<\/span>\n                                            <span class=\"feedback-text\">\"Muitas etapas para o checkout\"<\/span>\n                                        <\/div>\n                                        <div class=\"feedback-point\" data-feedback=\"3\">\n                                            <span class=\"feedback-dot\">3<\/span>\n                                            <span class=\"feedback-text\">\"Adoro o recurso de reordenamento r\u00e1pido!\"<\/span>\n                                        <\/div>\n                                    <\/div>\n                                <\/div>\n                            <\/div>\n                            \n                            <div class=\"reflection-area\">\n                                <h4 class=\"reflection-prompt\">Com base nesse feedback do usu\u00e1rio, o que voc\u00ea pesquisaria em seguida?<\/h4>\n                                <textarea \n                                    id=\"reflection-input\" \n                                    class=\"reflection-textarea\" \n                                    placeholder=\"Escreva uma ou duas frases sobre o que voc\u00ea gostaria de aprender mais...\"\n                                    rows=\"3\"\n                                    aria-describedby=\"reflection-help\"\n                                ><\/textarea>\n                                <div id=\"reflection-help\" class=\"reflection-guidance\">\n                                    <span class=\"char-count\">0\/100 caracteres no m\u00ednimo<\/span>\n                                    <span class=\"hint\">Dica: Pense nos problemas que os usu\u00e1rios mencionaram<\/span>\n                                <\/div>\n                            <\/div>\n                        <\/div>\n                        \n                        <div class=\"block-progress\">\n                            <div class=\"progress-bar\">\n                                <div class=\"progress-fill\" data-progress=\"0\"><\/div>\n                            <\/div>\n                        <\/div>\n                    <\/div>\n                    <small id=\"block3-help\" class=\"block-help\">Compartilhe suas ideias para completar este bloco<\/small>\n                <\/section>\n            <\/div>\n\n            <!-- ALMA Encouragement (appears after each block) -->\n            <div id=\"alma-encouragement\" class=\"alma-message\" style=\"display: none;\">\n                <div class=\"alma-avatar\">\ud83e\udd16<\/div>\n                <div class=\"alma-content\">\n                    <p id=\"alma-text\">Bom trabalho, Marcus! Quer fazer uma pausa ou continuar?<\/p>\n                    <div class=\"alma-actions\">\n                        <button id=\"take-break\" class=\"btn-secondary\">Fa\u00e7a um intervalo de 5 minutos<\/button>\n                        <button id=\"continue-learning\" class=\"btn-primary\">Continue assim!<\/button>\n                    <\/div>\n                <\/div>\n            <\/div>\n\n            <!-- Sprint Badge (appears when all blocks complete) -->\n            <section id=\"sprint-badge\" class=\"sprint-badge\" style=\"display: none;\">\n                <div class=\"badge-container\">\n                    <div class=\"badge-icon\">\ud83c\udfc6<\/div>\n                    <h3 class=\"badge-title\">Conquista do distintivo Sprint!<\/h3>\n                    <p class=\"badge-description\">Voc\u00ea concluiu os M\u00e9todos de Pesquisa do Usu\u00e1rio em blocos focados. \u00c9 assim que se ganha impulso!<\/p>\n                    \n                    <div class=\"completion-stats\">\n                        <div class=\"stat\">\n                            <span class=\"stat-value\" id=\"completion-time\">0:00<\/span>\n                            <span class=\"stat-label\">Tempo de conclus\u00e3o<\/span>\n                        <\/div>\n                        <div class=\"stat\">\n                            <span class=\"stat-value\">3\/3<\/span>\n                            <span class=\"stat-label\">Blocos masterizados<\/span>\n                        <\/div>\n                    <\/div>\n                    \n                    <div id=\"alma-final-message\" class=\"alma-final\">\n                        <!-- Dynamic message based on completion time -->\n                    <\/div>\n                    \n                    <div class=\"badge-actions\">\n                        <button id=\"next-sprint\" class=\"btn-primary\">Iniciar o Desafio UX Sprint de 3 dias<\/button>\n                        <button id=\"back-dashboard\" class=\"btn-secondary\">Voltar ao painel<\/button>\n                    <\/div>\n                <\/div>\n            <\/section>\n        <\/div>\n    <\/main>\n\n<script>\n\/**\n * Module 2: User Research Methods - Marcus's Focus Mode Experience\n * Gamified microlearning with ADHD-friendly features\n *\/\n\n\/\/ Learning state management\nlet learningState = {\n    startTime: Date.now(),\n    currentBlock: 1,\n    completedBlocks: [],\n    blockStartTimes: {},\n    totalTime: 0,\n    breaksTaken: 0,\n    quizAnswers: {},\n    reflectionText: '',\n    audioPlayed: {}\n};\n\n\/\/ Block completion requirements\nconst blockRequirements = {\n    1: 'view', \/\/ Just view content\n    2: 'quiz', \/\/ Complete quiz\n    3: 'reflection' \/\/ Write reflection\n};\n\n\/\/ Initialize when DOM is ready\ndocument.addEventListener('DOMContentLoaded', function() {\n    console.log('Initializing Focus Mode for Marcus...');\n    initializeTimer();\n    initializeBlocks();\n    initializeQuiz();\n    initializeReflection();\n    initializeAudioButtons();\n    initializeALMAInteractions();\n    initializeAccessibility();\n    loadSavedProgress();\n    announcePageLoad();\n});\n\n\/**\n * Initialize session timer\n *\/\nfunction initializeTimer() {\n    const timerElement = document.getElementById('session-timer');\n    if (!timerElement) return;\n    \n    setInterval(() => {\n        const elapsed = Date.now() - learningState.startTime;\n        const minutes = Math.floor(elapsed \/ 60000);\n        const seconds = Math.floor((elapsed % 60000) \/ 1000);\n        timerElement.textContent = `${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}`;\n        learningState.totalTime = elapsed;\n    }, 1000);\n}\n\n\/**\n * Initialize learning blocks functionality\n *\/\nfunction initializeBlocks() {\n    \/\/ Enable first block\n    enableBlock(1);\n    \n    \/\/ Set up block toggles\n    document.querySelectorAll('.block-toggle').forEach(toggle => {\n        toggle.addEventListener('click', function() {\n            const blockContent = document.getElementById(this.getAttribute('aria-controls'));\n            const isExpanded = this.getAttribute('aria-expanded') === 'true';\n            \n            if (!isExpanded && !this.disabled) {\n                this.setAttribute('aria-expanded', 'true');\n                blockContent.style.display = 'block';\n                \n                \/\/ Track block start time\n                const blockNum = parseInt(this.closest('.learning-block').dataset.block);\n                if (!learningState.blockStartTimes[blockNum]) {\n                    learningState.blockStartTimes[blockNum] = Date.now();\n                }\n                \n                \/\/ Start progress animation\n                animateBlockProgress(blockNum);\n                \n                announce(`Block ${blockNum} expanded`);\n            } else if (isExpanded) {\n                this.setAttribute('aria-expanded', 'false');\n                blockContent.style.display = 'none';\n                announce(`Block ${blockNum} collapsed`);\n            }\n        });\n    });\n    \n    \/\/ Set up checkboxes\n    document.querySelectorAll('.block-checkbox').forEach(checkbox => {\n        checkbox.addEventListener('change', function() {\n            const blockNum = parseInt(this.closest('.learning-block').dataset.block);\n            \n            if (this.checked) {\n                completeBlock(blockNum);\n            }\n        });\n    });\n}\n\n\/**\n * Enable a specific block\n *\/\nfunction enableBlock(blockNum) {\n    const block = document.querySelector(`[data-block=\"${blockNum}\"]`);\n    if (!block) return;\n    \n    block.classList.remove('disabled');\n    \n    const checkbox = block.querySelector('.block-checkbox');\n    const toggle = block.querySelector('.block-toggle');\n    \n    if (checkbox) checkbox.disabled = false;\n    if (toggle) toggle.disabled = false;\n    \n    \/\/ Update progress tracker\n    updateProgressTracker(blockNum);\n    \n    \/\/ Auto-expand first block\n    if (blockNum === 1) {\n        setTimeout(() => {\n            toggle.click();\n        }, 500);\n    }\n    \n    announce(`Block ${blockNum} is now available`);\n}\n\n\/**\n * Complete a block\n *\/\nfunction completeBlock(blockNum) {\n    if (learningState.completedBlocks.includes(blockNum)) return;\n    \n    \/\/ Check if block requirements are met\n    if (!isBlockRequirementMet(blockNum)) {\n        const checkbox = document.querySelector(`#block${blockNum}-check`);\n        checkbox.checked = false;\n        \n        let requirement = '';\n        switch(blockRequirements[blockNum]) {\n            case 'quiz':\n                requirement = 'complete the quiz';\n                break;\n            case 'reflection':\n                requirement = 'write your reflection';\n                break;\n            default:\n                requirement = 'review the content';\n        }\n        \n        announce(`Please ${requirement} before marking this block as complete`);\n        return;\n    }\n    \n    learningState.completedBlocks.push(blockNum);\n    \n    const block = document.querySelector(`[data-block=\"${blockNum}\"]`);\n    block.classList.add('completed');\n    \n    \/\/ Update progress tracker\n    updateProgressTracker(blockNum + 1);\n    \n    \/\/ Show ALMA encouragement\n    showALMAEncouragement(blockNum);\n    \n    \/\/ Enable next block\n    if (blockNum < 3) {\n        setTimeout(() => {\n            enableBlock(blockNum + 1);\n        }, 1000);\n    } else {\n        \/\/ All blocks completed\n        setTimeout(() => {\n            showSprintBadge();\n        }, 1000);\n    }\n    \n    saveProgress();\n    announce(`Block ${blockNum} completed! Great progress, Marcus.`);\n}\n\n\/**\n * Check if block requirement is met\n *\/\nfunction isBlockRequirementMet(blockNum) {\n    switch(blockRequirements[blockNum]) {\n        case 'view':\n            return true; \/\/ Just viewing is enough\n        case 'quiz':\n            return learningState.quizAnswers.quiz1 !== undefined;\n        case 'reflection':\n            return learningState.reflectionText.length >= 100;\n        default:\n            return true;\n    }\n}\n\n\/**\n * Animate block progress\n *\/\nfunction animateBlockProgress(blockNum) {\n    const progressFill = document.querySelector(`[data-block=\"${blockNum}\"] .progress-fill`);\n    if (!progressFill) return;\n    \n    let progress = 0;\n    const targetProgress = blockNum === 1 ? 100 : 50; \/\/ Auto-complete block 1 on view\n    \n    const interval = setInterval(() => {\n        progress += 2;\n        progressFill.style.width = `${progress}%`;\n        progressFill.setAttribute('data-progress', progress);\n        \n        if (progress >= targetProgress) {\n            clearInterval(interval);\n            \n            if (blockNum === 1) {\n                \/\/ Auto-enable checkbox for block 1\n                setTimeout(() => {\n                    const checkbox = document.querySelector('#block1-check');\n                    if (checkbox && !checkbox.checked) {\n                        checkbox.disabled = false;\n                        announce('Block 1 content reviewed. You can now mark it as complete.');\n                    }\n                }, 500);\n            }\n        }\n    }, 50);\n}\n\n\/**\n * Update progress tracker\n *\/\nfunction updateProgressTracker(activeStage) {\n    document.querySelectorAll('.stage').forEach((stage, index) => {\n        const stageNum = index + 1;\n        \n        if (stageNum < activeStage) {\n            stage.classList.add('completed');\n            stage.classList.remove('active');\n        } else if (stageNum === activeStage) {\n            stage.classList.add('active');\n            stage.classList.remove('completed');\n        } else {\n            stage.classList.remove('active', 'completed');\n        }\n    });\n}\n\n\/**\n * Initialize quiz functionality\n *\/\nfunction initializeQuiz() {\n    const quizRadios = document.querySelectorAll('.quiz-radio');\n    const quizFeedback = document.getElementById('quiz1-feedback');\n    \n    quizRadios.forEach(radio => {\n        radio.addEventListener('change', function() {\n            learningState.quizAnswers.quiz1 = this.value;\n            \n            \/\/ Show feedback\n            const isCorrect = this.value === 'interviews';\n            quizFeedback.style.display = 'block';\n            quizFeedback.className = `quiz-feedback ${isCorrect ? 'correct' : 'incorrect'}`;\n            \n            if (isCorrect) {\n                quizFeedback.textContent = '\u2713 Correct! Interviews help us understand the \"why\" behind user behaviors.';\n            } else {\n                quizFeedback.textContent = '\u2717 Not quite. Think about which method gives you deep insights into motivations. Try again!';\n            }\n            \n            if (isCorrect) {\n                \/\/ Complete block 2 progress\n                const progressFill = document.querySelector('[data-block=\"2\"] .progress-fill');\n                if (progressFill) {\n                    progressFill.style.width = '100%';\n                    progressFill.setAttribute('data-progress', '100');\n                }\n                \n                \/\/ Enable checkbox\n                setTimeout(() => {\n                    const checkbox = document.querySelector('#block2-check');\n                    if (checkbox) {\n                        checkbox.disabled = false;\n                        announce('Quiz completed correctly! You can now mark Block 2 as complete.');\n                    }\n                }, 500);\n            }\n            \n            saveProgress();\n            announce(isCorrect ? 'Correct answer!' : 'Incorrect answer, try again.');\n        });\n    });\n}\n\n\/**\n * Initialize reflection functionality\n *\/\nfunction initializeReflection() {\n    const reflectionInput = document.getElementById('reflection-input');\n    const charCount = document.querySelector('.char-count');\n    \n    if (!reflectionInput) return;\n    \n    reflectionInput.addEventListener('input', function() {\n        const length = this.value.length;\n        learningState.reflectionText = this.value;\n        \n        charCount.textContent = `${length}\/100 characters minimum`;\n        \n        if (length >= 100) {\n            charCount.style.color = 'hsl(var(--success))';\n            \n            \/\/ Complete block 3 progress\n            const progressFill = document.querySelector('[data-block=\"3\"] .progress-fill');\n            if (progressFill) {\n                progressFill.style.width = '100%';\n                progressFill.setAttribute('data-progress', '100');\n            }\n            \n            \/\/ Enable checkbox\n            const checkbox = document.querySelector('#block3-check');\n            if (checkbox) {\n                checkbox.disabled = false;\n                announce('Reflection completed! You can now mark Block 3 as complete.');\n            }\n        } else {\n            charCount.style.color = 'hsl(var(--text-secondary))';\n        }\n        \n        saveProgress();\n    });\n}\n\n\/**\n * Initialize audio buttons\n *\/\nfunction initializeAudioButtons() {\n    const audioButton = document.getElementById('play-block1-audio');\n    if (!audioButton) return;\n    \n    audioButton.addEventListener('click', function() {\n        if (learningState.audioPlayed.block1) {\n            this.innerHTML = `\n                <span class=\"audio-icon\">\ud83d\udd01 <\/span>\n                <span class=\"audio-text\">Replay Audio<\/span>\n            `;\n        } else {\n            learningState.audioPlayed.block1 = true;\n            this.innerHTML = `\n                <span class=\"audio-icon\">\ud83d\udd08<\/span>\n                <span class=\"audio-text\">Playing... (30s)<\/span>\n            `;\n            \n            \/\/ Simulate audio playback\n            setTimeout(() => {\n                this.innerHTML = `\n                    <span class=\"audio-icon\">\ud83d\udd01<\/span>\n                    <span class=\"audio-text\">Replay Audio<\/span>\n                `;\n                announce('Audio explanation finished');\n            }, 3000); \/\/ 30 seconds simulated as 3 seconds\n        }\n        \n        announce('Playing audio explanation');\n        saveProgress();\n    });\n}\n\n\/**\n * Initialize ALMA interactions\n *\/\nfunction initializeALMAInteractions() {\n    const takeBreakBtn = document.getElementById('take-break');\n    const continueBtn = document.getElementById('continue-learning');\n    \n    if (takeBreakBtn) {\n        takeBreakBtn.addEventListener('click', function() {\n            learningState.breaksTaken++;\n            hideALMAEncouragement();\n            announce('Taking a 5-minute break. Come back when you\\'re ready!');\n            \n            \/\/ Simulate break timer\n            setTimeout(() => {\n                announce('Break time is over. Ready to continue learning?');\n            }, 5000); \/\/ 5 minutes simulated as 5 seconds\n        });\n    }\n    \n    if (continueBtn) {\n        continueBtn.addEventListener('click', function() {\n            hideALMAEncouragement();\n            announce('Great! Let\\'s keep the momentum going.');\n        });\n    }\n    \n    \/\/ Sprint badge actions\n    const nextSprintBtn = document.getElementById('next-sprint');\n    const backDashboardBtn = document.getElementById('back-dashboard');\n    \n    if (nextSprintBtn) {\n        nextSprintBtn.addEventListener('click', function() {\n            markModuleCompleted();\n            announce('Starting 3-Day UX Sprint Challenge!');\n            \/\/ Could redirect to sprint challenge page\n            window.location.href = 'dashboard.html';\n        });\n    }\n    \n    if (backDashboardBtn) {\n        backDashboardBtn.addEventListener('click', function() {\n            markModuleCompleted();\n            window.location.href = 'dashboard.html';\n        });\n    }\n}\n\n\/**\n * Show ALMA encouragement\n *\/\nfunction showALMAEncouragement(blockNum) {\n    const almaMessage = document.getElementById('alma-encouragement');\n    const almaText = document.getElementById('alma-text');\n    \n    const messages = [\n        \"Nice work, Marcus! You're building momentum. Want to take a break or continue?\",\n        \"Excellent! You're halfway through. Your focus is paying off. Break or continue?\",\n        \"Amazing! You completed all the blocks. Ready for your Sprint Badge?\"\n    ];\n    \n    almaText.textContent = messages[blockNum - 1];\n    almaMessage.style.display = 'block';\n    \n    \/\/ Scroll to ALMA message\n    setTimeout(() => {\n        almaMessage.scrollIntoView({ behavior: 'smooth', block: 'center' });\n    }, 300);\n}\n\n\/**\n * Hide ALMA encouragement\n *\/\nfunction hideALMAEncouragement() {\n    const almaMessage = document.getElementById('alma-encouragement');\n    almaMessage.style.display = 'none';\n}\n\n\/**\n * Show sprint badge\n *\/\nfunction showSprintBadge() {\n    const sprintBadge = document.getElementById('sprint-badge');\n    const completionTimeEl = document.getElementById('completion-time');\n    const almaFinalMessage = document.getElementById('alma-final-message');\n    \n    \/\/ Calculate completion time\n    const totalMinutes = Math.floor(learningState.totalTime \/ 60000);\n    const totalSeconds = Math.floor((learningState.totalTime % 60000) \/ 1000);\n    const timeString = `${totalMinutes}:${totalSeconds.toString().padStart(2, '0')}`;\n    \n    completionTimeEl.textContent = timeString;\n    \n    \/\/ Generate personalized ALMA message\n    let almaMessage = '';\n    if (totalMinutes <= 8) {\n        almaMessage = `Incredible, Marcus! You completed this lesson in ${timeString}. Your focus and efficiency are impressive. This kind of concentrated learning is perfect for building UX skills. Want to tackle a 3-day UX Sprint Challenge next?`;\n    } else if (totalMinutes <= 12) {\n        almaMessage = `Well done, Marcus! You completed this lesson in ${timeString}. You took your time to really understand the concepts, which shows great learning discipline. Ready to apply these skills in a practical UX Sprint Challenge?`;\n    } else {\n        almaMessage = `Great job, Marcus! You completed this lesson in ${timeString}. Taking breaks and pacing yourself is smart learning strategy. Your persistence paid off! Let's channel this momentum into a UX Sprint Challenge.`;\n    }\n    \n    almaFinalMessage.textContent = almaMessage;\n    \n    sprintBadge.style.display = 'block';\n    \n    \/\/ Update progress tracker to final state\n    updateProgressTracker(3);\n    document.querySelector('[data-stage=\"3\"]').classList.add('completed');\n    \n    \/\/ Scroll to badge\n    setTimeout(() => {\n        sprintBadge.scrollIntoView({ behavior: 'smooth', block: 'center' });\n    }, 500);\n    \n    announce('Congratulations! You earned your Sprint Badge. Module completed successfully.');\n}\n\n\/**\n * Mark module as completed\n *\/\nfunction markModuleCompleted() {\n    let progress = JSON.parse(localStorage.getItem('userProgress') || '{}');\n    \n    progress.completedModules = progress.completedModules || [];\n    if (!progress.completedModules.includes(2)) {\n        progress.completedModules.push(2);\n    }\n    \n    progress.modules = progress.modules || {};\n    progress.modules[2] = {\n        completed: true,\n        completedAt: new Date().toISOString(),\n        score: learningState.quizAnswers.quiz1 === 'interviews' ? { correct: 1, total: 1, percentage: 100 } : { correct: 0, total: 1, percentage: 0 },\n        timeSpent: Math.round(learningState.totalTime \/ 1000 \/ 60), \/\/ minutes\n        format: 'microlearning',\n        breaksTaken: learningState.breaksTaken,\n        completedBlocks: learningState.completedBlocks.length,\n        adaptations: ['focus-mode', 'microlearning', 'gamified', 'low-distraction']\n    };\n    \n    localStorage.setItem('userProgress', JSON.stringify(progress));\n}\n\n\/**\n * Save progress to localStorage\n *\/\nfunction saveProgress() {\n    localStorage.setItem('module2MarcusProgress', JSON.stringify(learningState));\n}\n\n\/**\n * Load saved progress\n *\/\nfunction loadSavedProgress() {\n    const saved = localStorage.getItem('module2MarcusProgress');\n    if (saved) {\n        const savedState = JSON.parse(saved);\n        \n        \/\/ Restore state\n        learningState = { ...learningState, ...savedState };\n        learningState.startTime = Date.now() - (savedState.totalTime || 0);\n        \n        \/\/ Restore quiz answers\n        if (savedState.quizAnswers.quiz1) {\n            const radio = document.querySelector(`input[value=\"${savedState.quizAnswers.quiz1}\"]`);\n            if (radio) {\n                radio.checked = true;\n                radio.dispatchEvent(new Event('change'));\n            }\n        }\n        \n        \/\/ Restore reflection\n        if (savedState.reflectionText) {\n            const reflectionInput = document.getElementById('reflection-input');\n            if (reflectionInput) {\n                reflectionInput.value = savedState.reflectionText;\n                reflectionInput.dispatchEvent(new Event('input'));\n            }\n        }\n        \n        \/\/ Restore completed blocks\n        savedState.completedBlocks.forEach(blockNum => {\n            const block = document.querySelector(`[data-block=\"${blockNum}\"]`);\n            const checkbox = document.querySelector(`#block${blockNum}-check`);\n            \n            if (block) block.classList.add('completed');\n            if (checkbox) {\n                checkbox.checked = true;\n                checkbox.disabled = false;\n            }\n        });\n        \n        \/\/ Enable appropriate blocks\n        const nextBlock = Math.max(1, Math.max(...savedState.completedBlocks) + 1);\n        if (nextBlock <= 3) {\n            enableBlock(nextBlock);\n        }\n    }\n}\n\n\/**\n * Initialize accessibility enhancements\n *\/\nfunction initializeAccessibility() {\n    addLiveRegion();\n    enhanceKeyboardNavigation();\n    manageFocus();\n}\n\n\/**\n * Add ARIA live region for announcements\n *\/\nfunction addLiveRegion() {\n    if (!document.getElementById('announcements')) {\n        const liveRegion = document.createElement('div');\n        liveRegion.id = 'announcements';\n        liveRegion.className = 'sr-only';\n        liveRegion.setAttribute('aria-live', 'polite');\n        liveRegion.setAttribute('aria-atomic', 'true');\n        document.body.insertBefore(liveRegion, document.body.firstChild);\n    }\n}\n\n\/**\n * Utility function to announce messages to screen readers\n *\/\nfunction announce(message) {\n    const announcements = document.getElementById('announcements');\n    if (announcements) {\n        announcements.textContent = message;\n        setTimeout(() => {\n            announcements.textContent = '';\n        }, 1000);\n    }\n}\n\n\/**\n * Enhance keyboard navigation\n *\/\nfunction enhanceKeyboardNavigation() {\n    document.addEventListener('keydown', function(e) {\n        \/\/ Space to toggle block content when focused on toggle button\n        if (e.code === 'Space' && e.target.classList.contains('block-toggle')) {\n            e.preventDefault();\n            e.target.click();\n        }\n        \n        \/\/ Enter to check\/uncheck when focused on checkbox\n        if (e.code === 'Enter' && e.target.classList.contains('block-checkbox')) {\n            e.preventDefault();\n            e.target.checked = !e.target.checked;\n            e.target.dispatchEvent(new Event('change'));\n        }\n    });\n}\n\n\/**\n * Manage focus for better accessibility\n *\/\nfunction manageFocus() {\n    \/\/ Focus management for dynamic content\n    const observer = new MutationObserver(function(mutations) {\n        mutations.forEach(function(mutation) {\n            if (mutation.type === 'attributes' && mutation.attributeName === 'style') {\n                const target = mutation.target;\n                if (target.style.display !== 'none' && target.id === 'sprint-badge') {\n                    \/\/ Focus sprint badge when it appears\n                    setTimeout(() => {\n                        const firstButton = target.querySelector('button');\n                        if (firstButton) firstButton.focus();\n                    }, 600);\n                }\n            }\n        });\n    });\n    \n    observer.observe(document.body, {\n        attributes: true,\n        subtree: true\n    });\n}\n\n\/**\n * Announce page load\n *\/\nfunction announcePageLoad() {\n    setTimeout(() => {\n        announce('Focus Mode loaded. Module 2: User Research Methods with 3 microlearning blocks. Timer started.');\n    }, 1000);\n}\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-f32ad8c e-flex e-con-boxed e-con e-parent\" data-id=\"f32ad8c\" data-element_type=\"container\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t<div class=\"elementor-element elementor-element-847c1a4 e-con-full e-flex e-con e-child\" data-id=\"847c1a4\" data-element_type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-ef7f593 elementor-widget elementor-widget-html\" data-id=\"ef7f593\" data-element_type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<style>\n.wa11y-timeline-wrapper {\n  position: relative;\n  padding: 40px 10px 20px;\n  max-width: 100%;\n}\n\n.wa11y-timeline-bar {\n  display: flex;\n  justify-content: space-between;\n  align-items: flex-start;\n  gap: 10px;\n  position: relative;\n  flex-wrap: wrap;\n  z-index: 1;\n}\n\n\/* Line before Step 2 (active) *\/\n.wa11y-line-progress {\n  position: absolute;\n  top: 58px;\n  left: 5%;\n  width: 47%;\n  height: 4px;\n  background-color: #F473B9;\n  z-index: 0;\n}\n\n\/* Line after Step 2 (inactive) *\/\n.wa11y-line-future {\n  position: absolute;\n  top: 58px;\n  left: 52%;\n  width: 43%;\n  height: 4px;\n  background-color: #DCDCDC;\n  z-index: 0;\n}\n\n.wa11y-step {\n  text-align: center;\n  flex: 1 1 30%;\n  position: relative;\n  z-index: 1;\n}\n\n.wa11y-step-circle {\n  background: #DCDCDC;\n  color: white;\n  font-weight: bold;\n  font-size: 16px;\n  width: 36px;\n  height: 36px;\n  border-radius: 50%;\n  line-height: 36px;\n  margin: 0 auto 8px;\n  box-shadow: 0 3px 10px rgba(0,0,0,0.1);\n  transition: 0.3s ease;\n}\n\n.wa11y-step-label {\n  font-size: 14px;\n  font-weight: 600;\n  color: #2d2d2d;\n}\n\n\/* Highlight selected steps *\/\n.wa11y-step.selected .wa11y-step-circle {\n  background: #F473B9;\n}\n<\/style>\n\n<div class=\"wa11y-timeline-wrapper\">\n  <div class=\"wa11y-line-progress\"><\/div>\n  <div class=\"wa11y-line-future\"><\/div>\n\n  <div class=\"wa11y-timeline-bar\">\n    <div class=\"wa11y-step selected\">\n      <div class=\"wa11y-step-circle\">1<\/div>\n      <div class=\"wa11y-step-label\">In\u00edcio<\/div>\n    <\/div>\n    <div class=\"wa11y-step selected\">\n      <div class=\"wa11y-step-circle\">2<\/div>\n      <div class=\"wa11y-step-label\">Em andamento<\/div>\n    <\/div>\n    <div class=\"wa11y-step\">\n      <div class=\"wa11y-step-circle\">3<\/div>\n      <div class=\"wa11y-step-label\">Feito<\/div>\n    <\/div>\n  <\/div>\n<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-512a969 e-con-full e-flex elementor-invisible e-con e-child\" data-id=\"512a969\" data-element_type=\"container\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;,&quot;animation&quot;:&quot;fadeIn&quot;}\">\n\t\t\t\t<div class=\"elementor-element elementor-element-858b2cd elementor-widget__width-inherit elementor-widget elementor-widget-heading\" data-id=\"858b2cd\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h1 class=\"elementor-heading-title elementor-size-default\">Oi Claudia \ud83d\udc4b <br>\nBem-vindo ao M\u00f3dulo 2<\/h1>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-5ed6f87 elementor-widget elementor-widget-heading\" data-id=\"5ed6f87\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">M\u00e9todos de pesquisa do usu\u00e1rio<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-03e8e3b elementor-widget elementor-widget-text-editor\" data-id=\"03e8e3b\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<div class=\"welcome-section\"><p class=\"welcome-description\">Este m\u00f3dulo foi projetado especificamente para seu estilo de aprendizagem no modo de foco. Voc\u00ea explorar\u00e1 os m\u00e9todos de pesquisa de usu\u00e1rios por meio de blocos de tamanho reduzido, acompanhamento de progresso gamificado e vit\u00f3rias r\u00e1pidas que criam impulso.<\/p><\/div>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-fda2874 elementor-widget elementor-widget-text-editor\" data-id=\"fda2874\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<div class=\"welcome-section\"><p><span class=\"duration\">Tempo estimado: 8 a 12 minutos<br \/><\/span><span class=\"format\">Formato: Blocos de microaprendizagem + Sprint Badge<\/span><\/p><\/div>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-665c593 elementor-widget elementor-widget-heading\" data-id=\"665c593\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h3 class=\"elementor-heading-title elementor-size-default\">Li\u00e7\u00e3o de \u00e1udio: Entendendo os m\u00e9todos de pesquisa do usu\u00e1rio<\/h3>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-5a2fcd8 elementor-widget-divider--view-line elementor-widget elementor-widget-divider\" data-id=\"5a2fcd8\" data-element_type=\"widget\" data-widget_type=\"divider.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"elementor-divider\">\n\t\t\t<span class=\"elementor-divider-separator\">\n\t\t\t\t\t\t<\/span>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-550088d e-con-full e-flex elementor-invisible e-con e-child\" data-id=\"550088d\" data-element_type=\"container\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;,&quot;animation&quot;:&quot;fadeIn&quot;}\">\n\t\t\t\t<div class=\"elementor-element elementor-element-b24a3b7 elementor-widget elementor-widget-heading\" data-id=\"b24a3b7\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">Introdu\u00e7\u00e3o aos m\u00e9todos de pesquisa do usu\u00e1rio<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-8860b4d elementor-widget elementor-widget-text-editor\" data-id=\"8860b4d\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<div class=\"welcome-section\"><p class=\"welcome-description\">Uma vis\u00e3o geral abrangente dos principais m\u00e9todos de pesquisa de usu\u00e1rios, incluindo entrevistas, pesquisas, testes de usabilidade e estudos de observa\u00e7\u00e3o.<\/p><\/div>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-ecb56da elementor-widget__width-inherit elementor-widget elementor-widget-html\" data-id=\"ecb56da\" data-element_type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<style>\n.wa11y-audio-wrapper {\n  font-family: inherit;\n  background: #fff8f3;\n  border: 2px solid #842E7E;\n  border-radius: 16px;\n  padding: 20px;\n  width: 100%;\n  box-shadow: 0 4px 10px rgba(132, 46, 126, 0.1);\n  box-sizing: border-box;\n}\n\n.wa11y-audio-controls {\n  display: flex;\n  flex-direction: column;\n  gap: 16px;\n  width: 100%;\n}\n\n.wa11y-audio-controls audio {\n  width: 100% !important;\n  max-width: 100%;\n  outline: none;\n  border-radius: 8px;\n  display: block;\n}\n\n.wa11y-speed-label {\n  font-weight: 600;\n  margin-bottom: 4px;\n  color: #2d2d2d;\n}\n\n.wa11y-speed-buttons {\n  display: flex;\n  gap: 10px;\n  flex-wrap: wrap;\n  width: 100%;\n}\n\n.wa11y-speed-buttons button {\n  flex: 1 1 auto;\n  min-width: 80px;\n  padding: 6px 14px;\n  border: 2px solid #842E7E;\n  background-color: white;\n  color: #842E7E;\n  border-radius: 25px;\n  font-weight: 600;\n  cursor: pointer;\n  transition: all 0.3s ease;\n  text-align: center;\n}\n\n.wa11y-speed-buttons button:hover,\n.wa11y-speed-buttons button.active {\n  background-color: #F473B9;\n  color: white;\n  border-color: #842E7E;\n}\n<\/style>\n\n<div class=\"wa11y-audio-wrapper\">\n  <div class=\"wa11y-audio-controls\">\n    <label for=\"wa11y-audio\">Ou\u00e7a este exemplo:<\/label>\n    <audio id=\"wa11y-audio\" controls>\n      <source src=\"https:\/\/wa11y.io\/wp-content\/uploads\/2025\/05\/Fly-Me-To-The-Moon-_Remastered_.mp3\" type=\"audio\/mpeg\">\n      Seu navegador n\u00e3o suporta o elemento de \u00e1udio.\n    <\/audio>\n\n    <div role=\"group\" aria-labelledby=\"speed-control-label\">\n      <div id=\"speed-control-label\" class=\"wa11y-speed-label\">Velocidade de reprodu\u00e7\u00e3o:<\/div>\n      <div class=\"wa11y-speed-buttons\">\n        <button data-speed=\"0.75\" aria-label=\"Defina a velocidade de reprodu\u00e7\u00e3o para 0,75 vezes\" aria-pressed=\"false\">0.75\u00d7<\/button>\n        <button data-speed=\"1\" class=\"active\" aria-label=\"Definir a velocidade de reprodu\u00e7\u00e3o como normal\" aria-pressed=\"true\">1\u00d7<\/button>\n        <button data-speed=\"1.25\" aria-label=\"Defina a velocidade de reprodu\u00e7\u00e3o para 1,25 vezes\" aria-pressed=\"false\">1.25\u00d7<\/button>\n        <button data-speed=\"1.5\" aria-label=\"Defina a velocidade de reprodu\u00e7\u00e3o para 1,5 vezes\" aria-pressed=\"false\">1.5\u00d7<\/button>\n      <\/div>\n    <\/div>\n  <\/div>\n<\/div>\n\n\n\n<script>\n  const audio = document.getElementById('wa11y-audio');\n  const speedButtons = document.querySelectorAll('.wa11y-speed-buttons button');\n\n  speedButtons.forEach(button => {\n    button.addEventListener('click', () => {\n      const speed = parseFloat(button.dataset.speed);\n      audio.playbackRate = speed;\n\n      speedButtons.forEach(btn => {\n        btn.classList.remove('active');\n        btn.setAttribute('aria-pressed', 'false');\n      });\n\n      button.classList.add('active');\n      button.setAttribute('aria-pressed', 'true');\n    });\n  });\n<\/script>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-999945f elementor-widget elementor-widget-n-accordion\" data-id=\"999945f\" data-element_type=\"widget\" data-settings=\"{&quot;default_state&quot;:&quot;all_collapsed&quot;,&quot;max_items_expended&quot;:&quot;one&quot;,&quot;n_accordion_animation_duration&quot;:{&quot;unit&quot;:&quot;ms&quot;,&quot;size&quot;:400,&quot;sizes&quot;:[]}}\" data-widget_type=\"nested-accordion.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"e-n-accordion\" aria-label=\"Acorde\u00e3o. Abra links com Enter ou Espa\u00e7o, feche com Escape e navegue com as setas\">\n\t\t\t\t\t\t<details id=\"e-n-accordion-item-1610\" class=\"e-n-accordion-item\" >\n\t\t\t\t<summary class=\"e-n-accordion-item-title\" data-accordion-index=\"1\" tabindex=\"0\" aria-expanded=\"false\" aria-controls=\"e-n-accordion-item-1610\" >\n\t\t\t\t\t<span class='e-n-accordion-item-title-header'><div class=\"e-n-accordion-item-title-text\"> Mostrar transcri\u00e7\u00e3o completa <\/div><\/span>\n\t\t\t\t\t\t\t<span class='e-n-accordion-item-title-icon'>\n\t\t\t<span class='e-opened' ><svg aria-hidden=\"true\" class=\"e-font-icon-svg e-fas-minus\" viewbox=\"0 0 448 512\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"><path d=\"M416 208H32c-17.67 0-32 14.33-32 32v32c0 17.67 14.33 32 32 32h384c17.67 0 32-14.33 32-32v-32c0-17.67-14.33-32-32-32z\"><\/path><\/svg><\/span>\n\t\t\t<span class='e-closed'><svg aria-hidden=\"true\" class=\"e-font-icon-svg e-fas-plus\" viewbox=\"0 0 448 512\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"><path d=\"M416 208H272V64c0-17.67-14.33-32-32-32h-32c-17.67 0-32 14.33-32 32v144H32c-17.67 0-32 14.33-32 32v32c0 17.67 14.33 32 32 32h144v144c0 17.67 14.33 32 32 32h32c17.67 0 32-14.33 32-32V304h144c17.67 0 32-14.33 32-32v-32c0-17.67-14.33-32-32-32z\"><\/path><\/svg><\/span>\n\t\t<\/span>\n\n\t\t\t\t\t\t<\/summary>\n\t\t\t\t<div role=\"region\" aria-labelledby=\"e-n-accordion-item-1610\" class=\"elementor-element elementor-element-533c524 e-con-full e-flex e-con e-child\" data-id=\"533c524\" data-element_type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-b6176af elementor-widget elementor-widget-text-editor\" data-id=\"b6176af\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<h3><strong>Transcri\u00e7\u00e3o completa: Introdu\u00e7\u00e3o aos m\u00e9todos de pesquisa do usu\u00e1rio<\/strong><\/h3><div class=\"transcript-text\"><p><strong>Bem-vindo ao M\u00f3dulo 2: M\u00e9todos de pesquisa do usu\u00e1rio.<\/strong><\/p><p>Hoje, exploraremos os m\u00e9todos fundamentais que os pesquisadores de UX usam para entender os usu\u00e1rios, suas necessidades e seus comportamentos. A pesquisa de usu\u00e1rios \u00e9 a base de um \u00f3timo design - ela nos ajuda a tomar decis\u00f5es informadas em vez de suposi\u00e7\u00f5es.<\/p><p><strong>M\u00e9todo 1: Entrevistas com usu\u00e1rios<\/strong><br \/>As entrevistas com usu\u00e1rios s\u00e3o conversas individuais com os usu\u00e1rios para entender suas experi\u00eancias, motiva\u00e7\u00f5es e pontos problem\u00e1ticos. Elas s\u00e3o qualitativas, o que nos permite aprofundar o \"porqu\u00ea\" por tr\u00e1s dos comportamentos dos usu\u00e1rios. As pr\u00e1ticas recomendadas incluem a prepara\u00e7\u00e3o de perguntas abertas, a cria\u00e7\u00e3o de um ambiente confort\u00e1vel e a escuta ativa sem conduzir o participante.<\/p><p><strong>M\u00e9todo 2: Pesquisas e question\u00e1rios<\/strong><br \/>As pesquisas nos ajudam a coletar dados quantitativos de grupos maiores. Elas s\u00e3o excelentes para entender tend\u00eancias, prefer\u00eancias e dados demogr\u00e1ficos. Pesquisas bem elaboradas usam perguntas claras e imparciais e escalas apropriadas para medir as atitudes e os comportamentos dos usu\u00e1rios.<\/p><p><strong>M\u00e9todo 3: teste de usabilidade<\/strong><br \/>O teste de usabilidade envolve a observa\u00e7\u00e3o dos usu\u00e1rios enquanto eles tentam concluir tarefas com o seu produto. Esse m\u00e9todo revela onde os usu\u00e1rios t\u00eam dificuldades, o que os confunde e como eles interagem naturalmente com as interfaces. \u00c9 de grande valia para identificar problemas de usabilidade antes do lan\u00e7amento.<\/p><p><strong>M\u00e9todo 4: Estudos observacionais<\/strong><br \/>\u00c0s vezes chamada de pesquisa etnogr\u00e1fica, ela envolve a observa\u00e7\u00e3o dos usu\u00e1rios em seu ambiente natural. Isso nos ajuda a entender o contexto, os fluxos de trabalho e as restri\u00e7\u00f5es do mundo real que talvez n\u00e3o surjam em cen\u00e1rios de testes artificiais.<\/p><p><strong>Escolhendo o m\u00e9todo correto<\/strong><br \/>O segredo \u00e9 selecionar m\u00e9todos que se alinhem \u00e0s suas perguntas de pesquisa. Precisa entender as motiva\u00e7\u00f5es? Tente fazer entrevistas. Deseja medir a satisfa\u00e7\u00e3o de uma grande base de usu\u00e1rios? Use pesquisas. Est\u00e1 testando um novo recurso? O teste de usabilidade \u00e9 seu amigo.<\/p><p>Lembre-se de que uma excelente pesquisa de usu\u00e1rios combina v\u00e1rios m\u00e9todos para criar um quadro completo dos seus usu\u00e1rios. Em nossa pr\u00f3xima atividade, voc\u00ea refletir\u00e1 sobre como esses m\u00e9todos podem ser aplicados a cen\u00e1rios do mundo real.<\/p><\/div>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/details>\n\t\t\t\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-b1a3fca e-con-full e-flex elementor-invisible e-con e-child\" data-id=\"b1a3fca\" data-element_type=\"container\" data-settings=\"{&quot;animation&quot;:&quot;fadeInUp&quot;}\">\n\t\t<div class=\"elementor-element elementor-element-820f6d0 e-con-full e-flex e-con e-child\" data-id=\"820f6d0\" data-element_type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-59cc3ed elementor-widget elementor-widget-heading\" data-id=\"59cc3ed\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h3 class=\"elementor-heading-title elementor-size-default\">Atividade de reflex\u00e3o<\/h3>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-3f52fdc elementor-widget-divider--view-line elementor-widget elementor-widget-divider\" data-id=\"3f52fdc\" data-element_type=\"widget\" data-widget_type=\"divider.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"elementor-divider\">\n\t\t\t<span class=\"elementor-divider-separator\">\n\t\t\t\t\t\t<\/span>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-8de80dd e-con-full e-flex elementor-invisible e-con e-child\" data-id=\"8de80dd\" data-element_type=\"container\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;,&quot;animation&quot;:&quot;fadeIn&quot;,&quot;animation_mobile&quot;:&quot;none&quot;}\">\n\t\t\t\t<div class=\"elementor-element elementor-element-d6508ec elementor-widget elementor-widget-heading\" data-id=\"d6508ec\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h3 class=\"elementor-heading-title elementor-size-default\">Em suas pr\u00f3prias palavras, como voc\u00ea explicaria as entrevistas com usu\u00e1rios para algu\u00e9m?<\/h3>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-02ce98b elementor-widget elementor-widget-text-editor\" data-id=\"02ce98b\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<div class=\"welcome-section\"><p class=\"welcome-description\">Reserve um momento para processar o que voc\u00ea aprendeu. Considere a finalidade, o processo e os benef\u00edcios das entrevistas com usu\u00e1rios. Voc\u00ea pode digitar sua resposta ou usar a convers\u00e3o de voz em texto, se dispon\u00edvel em seu dispositivo.<\/p><\/div>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-2548b3e elementor-widget elementor-widget-heading\" data-id=\"2548b3e\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h3 class=\"elementor-heading-title elementor-size-default\">Sua reflex\u00e3o (m\u00ednimo de 50 palavras):<\/h3>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-fc4e31b elementor-widget__width-inherit elementor-widget elementor-widget-html\" data-id=\"fc4e31b\" data-element_type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<style>\n.wa11y-reflection-meta {\n  display: flex;\n  justify-content: space-between;\n  font-size: 13px;\n  color: #2d2d2d;\n  margin-top: 4px;\n  flex-wrap: wrap;\n}\n<\/style>\n<textarea \n  class=\"wa11y-textarea\" \n  rows=\"5\" \n  placeholder=\"Descreva quaisquer acomoda\u00e7\u00f5es que voc\u00ea possa precisar.\">\n<\/textarea>\n<div class=\"wa11y-reflection-meta\">\n  <div>Dica: Explique como se estivesse ensinando um amigo<\/div>\n  <div id=\"char-counter\">0 caracteres<\/div>\n<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-c0be143 elementor-widget__width-inherit elementor-widget elementor-widget-html\" data-id=\"c0be143\" data-element_type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<style>\n.wa11y-record-container {\n  margin-top: 10px;\n  font-family: inherit;\n}\n\n.wa11y-record-buttons {\n  display: flex;\n  gap: 10px;\n  flex-wrap: wrap;\n  align-items: center;\n  margin-top: 8px;\n}\n\n.wa11y-record-button {\n  background-color: white;\n  border: 2px solid #842E7E;\n  border-radius: 25px;\n  padding: 6px 14px;\n  color: #842E7E;\n  font-weight: 600;\n  cursor: pointer;\n  transition: all 0.3s ease;\n}\n\n.wa11y-record-button:hover {\n  background-color: #F473B9;\n  color: white;\n}\n\n.wa11y-recording-indicator {\n  font-size: 14px;\n  color: #842E7E;\n  font-weight: bold;\n  display: none;\n}\n\n.wa11y-recording-indicator.active {\n  display: inline;\n}\n<\/style>\n\n<div class=\"wa11y-record-container\">\n  <div><strong>\ud83c\udf99\ufe0f Prefere falar sua resposta?<\/strong><\/div>\n  <div class=\"wa11y-record-buttons\">\n    <button class=\"wa11y-record-button\" id=\"start-record\">Iniciar a grava\u00e7\u00e3o<\/button>\n    <button class=\"wa11y-record-button\" id=\"stop-record\" disabled>Parar<\/button>\n    <button class=\"wa11y-record-button\" id=\"reset-record\" style=\"display: none;\">Regrava\u00e7\u00e3o<\/button>\n    <span id=\"recording-indicator\" class=\"wa11y-recording-indicator\">\ud83d\udd34 Grava\u00e7\u00e3o...<\/span>\n  <\/div>\n<\/div>\n\n<script>\n  const startBtn = document.getElementById('start-record');\n  const stopBtn = document.getElementById('stop-record');\n  const resetBtn = document.getElementById('reset-record');\n  const indicator = document.getElementById('recording-indicator');\n  const textarea = document.querySelector('.wa11y-textarea');\n\n  startBtn.addEventListener('click', () => {\n    startBtn.disabled = true;\n    stopBtn.disabled = false;\n    indicator.classList.add('active');\n    textarea.value = '[Simulated audio reflection is being recorded...]';\n  });\n\n  stopBtn.addEventListener('click', () => {\n    startBtn.disabled = true;\n    stopBtn.disabled = true;\n    indicator.classList.remove('active');\n    resetBtn.style.display = 'inline-block';\n    textarea.value = '[Audio reflection recorded \u2013 simulated]';\n  });\n\n  resetBtn.addEventListener('click', () => {\n    startBtn.disabled = false;\n    stopBtn.disabled = true;\n    resetBtn.style.display = 'none';\n    textarea.value = '';\n  });\n<\/script>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-f805f98 e-grid e-con-full e-con e-child\" data-id=\"f805f98\" data-element_type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-2fe0802 elementor-align-left elementor-widget-mobile__width-inherit elementor-mobile-align-center elementor-widget elementor-widget-button\" data-id=\"2fe0802\" data-element_type=\"widget\" data-widget_type=\"button.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<div class=\"elementor-button-wrapper\">\n\t\t\t\t\t<a class=\"elementor-button elementor-button-link elementor-size-sm\" href=\"#\">\n\t\t\t\t\t\t<span class=\"elementor-button-content-wrapper\">\n\t\t\t\t\t\t\t\t\t<span class=\"elementor-button-text\">Salvar reflex\u00e3o<\/span>\n\t\t\t\t\t<\/span>\n\t\t\t\t\t<\/a>\n\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-e6e3e66 elementor-align-left elementor-widget-mobile__width-inherit elementor-mobile-align-center elementor-widget elementor-widget-button\" data-id=\"e6e3e66\" data-element_type=\"widget\" data-widget_type=\"button.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<div class=\"elementor-button-wrapper\">\n\t\t\t\t\t<a class=\"elementor-button elementor-button-link elementor-size-sm\" href=\"#\">\n\t\t\t\t\t\t<span class=\"elementor-button-content-wrapper\">\n\t\t\t\t\t\t\t\t\t<span class=\"elementor-button-text\">Continuar no question\u00e1rio<\/span>\n\t\t\t\t\t<\/span>\n\t\t\t\t\t<\/a>\n\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>","protected":false},"excerpt":{"rendered":"<p>\ud83c\udfaf Focus Mode Learning Progress 1 Start 2 In Progress 3 Done Hi Marcus \ud83d\udc4b Welcome to Module 2: User Research Methods This module has been designed specifically for your focus mode learning style. You&#8217;ll explore user research methods through bite-sized blocks, gamified progress tracking, and quick wins that build momentum. Target time: 8-12 minutes [&hellip;]<\/p>","protected":false},"author":1,"featured_media":0,"parent":2348,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"give_campaign_id":0,"footnotes":""},"class_list":["post-3242","page","type-page","status-publish","hentry"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v26.3 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Claudia Module - wA11y Academy<\/title>\n<meta name=\"description\" content=\"wA11y\u2122 offers inclusive, accessible tech education for women from all walks of life. Learn UX Design, Web3, Accessibility, and more in a flexible, adaptive learning platform.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/staging.wa11y.io\/pt\/prototype\/claudia-focus-mode\/\" \/>\n<meta property=\"og:locale\" content=\"pt_BR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Claudia Module - wA11y Academy\" \/>\n<meta property=\"og:description\" content=\"wA11y\u2122 offers inclusive, accessible tech education for women from all walks of life. Learn UX Design, Web3, Accessibility, and more in a flexible, adaptive learning platform.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/staging.wa11y.io\/pt\/prototype\/claudia-focus-mode\/\" \/>\n<meta property=\"og:site_name\" content=\"wA11y Academy\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/wA11y.io\" \/>\n<meta property=\"article:modified_time\" content=\"2025-07-21T17:31:38+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/staging.wa11y.io\/wp-content\/uploads\/2025\/04\/site-featured.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1200\" \/>\n\t<meta property=\"og:image:height\" content=\"631\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:site\" content=\"@wa11y_io\" \/>\n<meta name=\"twitter:label1\" content=\"Est. tempo de leitura\" \/>\n\t<meta name=\"twitter:data1\" content=\"5 minutos\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/staging.wa11y.io\/prototype\/claudia-focus-mode\/\",\"url\":\"https:\/\/staging.wa11y.io\/prototype\/claudia-focus-mode\/\",\"name\":\"Claudia Module - wA11y Academy\",\"isPartOf\":{\"@id\":\"https:\/\/staging.wa11y.io\/#website\"},\"datePublished\":\"2025-06-01T02:32:30+00:00\",\"dateModified\":\"2025-07-21T17:31:38+00:00\",\"description\":\"wA11y\u2122 offers inclusive, accessible tech education for women from all walks of life. Learn UX Design, Web3, Accessibility, and more in a flexible, adaptive learning platform.\",\"breadcrumb\":{\"@id\":\"https:\/\/staging.wa11y.io\/prototype\/claudia-focus-mode\/#breadcrumb\"},\"inLanguage\":\"pt-BR\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/staging.wa11y.io\/prototype\/claudia-focus-mode\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/staging.wa11y.io\/prototype\/claudia-focus-mode\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/staging.wa11y.io\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Prototype\",\"item\":\"https:\/\/staging.wa11y.io\/prototype\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Claudia Module\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/staging.wa11y.io\/#website\",\"url\":\"https:\/\/staging.wa11y.io\/\",\"name\":\"wA11y\u2122 \u2013 Accessible Tech Education for All Women\",\"description\":\"Accessible, inclusive, and adaptive tech education.\",\"publisher\":{\"@id\":\"https:\/\/staging.wa11y.io\/#organization\"},\"alternateName\":\"wA11y Academy\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/staging.wa11y.io\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"pt-BR\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/staging.wa11y.io\/#organization\",\"name\":\"wA11y Academy\",\"url\":\"https:\/\/staging.wa11y.io\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"pt-BR\",\"@id\":\"https:\/\/staging.wa11y.io\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/staging.wa11y.io\/wp-content\/uploads\/2025\/05\/cropped-cropped-logo-wa11y-url-1.png\",\"contentUrl\":\"https:\/\/staging.wa11y.io\/wp-content\/uploads\/2025\/05\/cropped-cropped-logo-wa11y-url-1.png\",\"width\":836,\"height\":239,\"caption\":\"wA11y Academy\"},\"image\":{\"@id\":\"https:\/\/staging.wa11y.io\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/wA11y.io\",\"https:\/\/x.com\/wa11y_io\",\"https:\/\/www.instagram.com\/wa11y.io\/\",\"https:\/\/www.linkedin.com\/company\/wa11y\"]}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"M\u00f3dulo Claudia - wA11y Academy","description":"O wA11y\u2122 oferece educa\u00e7\u00e3o tecnol\u00f3gica inclusiva e acess\u00edvel para mulheres de todas as esferas da vida. Aprenda UX Design, Web3, Acessibilidade e muito mais em uma plataforma de aprendizagem flex\u00edvel e adapt\u00e1vel.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/staging.wa11y.io\/pt\/prototype\/claudia-focus-mode\/","og_locale":"pt_BR","og_type":"article","og_title":"Claudia Module - wA11y Academy","og_description":"wA11y\u2122 offers inclusive, accessible tech education for women from all walks of life. Learn UX Design, Web3, Accessibility, and more in a flexible, adaptive learning platform.","og_url":"https:\/\/staging.wa11y.io\/pt\/prototype\/claudia-focus-mode\/","og_site_name":"wA11y Academy","article_publisher":"https:\/\/www.facebook.com\/wA11y.io","article_modified_time":"2025-07-21T17:31:38+00:00","og_image":[{"width":1200,"height":631,"url":"https:\/\/staging.wa11y.io\/wp-content\/uploads\/2025\/04\/site-featured.png","type":"image\/png"}],"twitter_card":"summary_large_image","twitter_site":"@wa11y_io","twitter_misc":{"Est. tempo de leitura":"5 minutos"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/staging.wa11y.io\/prototype\/claudia-focus-mode\/","url":"https:\/\/staging.wa11y.io\/prototype\/claudia-focus-mode\/","name":"M\u00f3dulo Claudia - wA11y Academy","isPartOf":{"@id":"https:\/\/staging.wa11y.io\/#website"},"datePublished":"2025-06-01T02:32:30+00:00","dateModified":"2025-07-21T17:31:38+00:00","description":"O wA11y\u2122 oferece educa\u00e7\u00e3o tecnol\u00f3gica inclusiva e acess\u00edvel para mulheres de todas as esferas da vida. Aprenda UX Design, Web3, Acessibilidade e muito mais em uma plataforma de aprendizagem flex\u00edvel e adapt\u00e1vel.","breadcrumb":{"@id":"https:\/\/staging.wa11y.io\/prototype\/claudia-focus-mode\/#breadcrumb"},"inLanguage":"pt-BR","potentialAction":[{"@type":"ReadAction","target":["https:\/\/staging.wa11y.io\/prototype\/claudia-focus-mode\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/staging.wa11y.io\/prototype\/claudia-focus-mode\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/staging.wa11y.io\/"},{"@type":"ListItem","position":2,"name":"Prototype","item":"https:\/\/staging.wa11y.io\/prototype\/"},{"@type":"ListItem","position":3,"name":"Claudia Module"}]},{"@type":"WebSite","@id":"https:\/\/staging.wa11y.io\/#website","url":"https:\/\/staging.wa11y.io\/","name":"wA11y\u2122 - Educa\u00e7\u00e3o tecnol\u00f3gica acess\u00edvel para todas as mulheres","description":"Educa\u00e7\u00e3o tecnol\u00f3gica acess\u00edvel, inclusiva e adapt\u00e1vel.","publisher":{"@id":"https:\/\/staging.wa11y.io\/#organization"},"alternateName":"wA11y Academy","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/staging.wa11y.io\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"pt-BR"},{"@type":"Organization","@id":"https:\/\/staging.wa11y.io\/#organization","name":"Academia wA11y","url":"https:\/\/staging.wa11y.io\/","logo":{"@type":"ImageObject","inLanguage":"pt-BR","@id":"https:\/\/staging.wa11y.io\/#\/schema\/logo\/image\/","url":"https:\/\/staging.wa11y.io\/wp-content\/uploads\/2025\/05\/cropped-cropped-logo-wa11y-url-1.png","contentUrl":"https:\/\/staging.wa11y.io\/wp-content\/uploads\/2025\/05\/cropped-cropped-logo-wa11y-url-1.png","width":836,"height":239,"caption":"wA11y Academy"},"image":{"@id":"https:\/\/staging.wa11y.io\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/wA11y.io","https:\/\/x.com\/wa11y_io","https:\/\/www.instagram.com\/wa11y.io\/","https:\/\/www.linkedin.com\/company\/wa11y"]}]}},"campaignId":"","_links":{"self":[{"href":"https:\/\/staging.wa11y.io\/pt\/wp-json\/wp\/v2\/pages\/3242","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/staging.wa11y.io\/pt\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/staging.wa11y.io\/pt\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/staging.wa11y.io\/pt\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/staging.wa11y.io\/pt\/wp-json\/wp\/v2\/comments?post=3242"}],"version-history":[{"count":63,"href":"https:\/\/staging.wa11y.io\/pt\/wp-json\/wp\/v2\/pages\/3242\/revisions"}],"predecessor-version":[{"id":4545,"href":"https:\/\/staging.wa11y.io\/pt\/wp-json\/wp\/v2\/pages\/3242\/revisions\/4545"}],"up":[{"embeddable":true,"href":"https:\/\/staging.wa11y.io\/pt\/wp-json\/wp\/v2\/pages\/2348"}],"wp:attachment":[{"href":"https:\/\/staging.wa11y.io\/pt\/wp-json\/wp\/v2\/media?parent=3242"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}