wagtail-enap-designsystem 1.2.1.170__py3-none-any.whl → 1.2.1.172__py3-none-any.whl

enap_designsystem/templates/enap_designsystem/pages/quiz_rota_page.html

@@ -0,0 +1,922 @@
+
+{% extends "enap_designsystem/base.html" %}
+{% load static %}
+{% load wagtailcore_tags wagtailimages_tags %}
+
+{% block extra_css %}
+<style>
+    /* Estilos do Quiz */
+    .quiz-container {
+        max-width: 1200px;
+        margin: 0 auto;
+        padding: 40px 20px;
+    }
+    
+    .quiz-header {
+        text-align: center;
+        margin-bottom: 60px;
+    }
+    
+    .quiz-header h1 {
+        font-size: 2.5rem;
+        color: #0066CC;
+        margin-bottom: 20px;
+    }
+    
+    .quiz-progress {
+        max-width: 600px;
+        margin: 0 auto 40px;
+    }
+    
+    .progress-bar {
+        height: 8px;
+        background: #e0e0e0;
+        border-radius: 10px;
+        overflow: hidden;
+        margin-bottom: 10px;
+    }
+    
+    .progress-fill {
+        height: 100%;
+        background: linear-gradient(90deg, #0066CC, #00A3E0);
+        transition: width 0.3s ease;
+    }
+    
+    .progress-text {
+        text-align: center;
+        display: block;
+        color: #666;
+        font-size: 14px;
+    }
+    
+    .pergunta-card {
+        background: white;
+        border-radius: 12px;
+        padding: 40px;
+        box-shadow: 0 4px 20px rgba(0,0,0,0.08);
+        margin-bottom: 30px;
+        animation: fadeIn 0.5s ease;
+    }
+    
+    @keyframes fadeIn {
+        from {
+            opacity: 0;
+            transform: translateY(20px);
+        }
+        to {
+            opacity: 1;
+            transform: translateY(0);
+        }
+    }
+    
+    .pergunta-texto {
+        font-size: 1.8rem;
+        color: #333;
+        margin-bottom: 10px;
+        font-weight: 600;
+    }
+    
+    .pergunta-ajuda {
+        color: #666;
+        font-size: 1rem;
+        margin-bottom: 30px;
+    }
+    
+    .opcoes-grid {
+        display: grid;
+        grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
+        gap: 20px;
+        margin-top: 30px;
+    }
+    
+    .opcao-card {
+        background: white;
+        border: 2px solid #e0e0e0;
+        border-radius: 8px;
+        padding: 24px;
+        cursor: pointer;
+        transition: all 0.3s ease;
+        text-align: left;
+        position: relative;
+        overflow: hidden;
+    }
+    
+    .opcao-card:hover {
+        border-color: #0066CC;
+        box-shadow: 0 6px 20px rgba(0,102,204,0.15);
+        transform: translateY(-4px);
+    }
+    
+    .opcao-card.selecionado {
+        border-color: #0066CC;
+        background: #f0f7ff;
+    }
+    
+    .opcao-card i {
+        font-size: 2rem;
+        color: #0066CC;
+        margin-bottom: 12px;
+        display: block;
+    }
+    
+    .opcao-card h3 {
+        font-size: 1.2rem;
+        color: #333;
+        margin: 0 0 8px 0;
+    }
+    
+    .opcao-card p {
+        color: #666;
+        font-size: 0.9rem;
+        margin: 0;
+        line-height: 1.5;
+    }
+    
+    .btn-selecionar {
+        display: inline-block;
+        margin-top: 12px;
+        color: #0066CC;
+        font-weight: 600;
+        font-size: 0.9rem;
+    }
+    
+    .escolhas-resumo {
+        background: #f8f9fa;
+        border-left: 4px solid #0066CC;
+        padding: 20px;
+        border-radius: 8px;
+        margin-top: 30px;
+    }
+    
+    .escolhas-resumo h4 {
+        margin: 0 0 15px 0;
+        color: #333;
+    }
+    
+    .escolhas-resumo ul {
+        list-style: none;
+        padding: 0;
+        margin: 0;
+    }
+    
+    .escolhas-resumo li {
+        padding: 8px 0;
+        border-bottom: 1px solid #e0e0e0;
+    }
+    
+    .escolhas-resumo li:last-child {
+        border-bottom: none;
+    }
+    
+    .escolhas-resumo strong {
+        color: #0066CC;
+        text-transform: capitalize;
+    }
+    
+    .btn-recomecar {
+        display: inline-block;
+        padding: 10px 20px;
+        background: #6c757d;
+        color: white;
+        border: none;
+        border-radius: 6px;
+        cursor: pointer;
+        text-decoration: none;
+        transition: background 0.3s;
+        margin-top: 20px;
+    }
+    
+    .btn-recomecar:hover {
+        background: #5a6268;
+    }
+    
+    /* Estilos do Resultado */
+    .resultado-rotas {
+        padding: 40px 0;
+    }
+    
+    .resultado-header {
+        text-align: center;
+        margin-bottom: 40px;
+    }
+    
+    .resultado-header h1 {
+        color: #0066CC;
+        font-size: 2.5rem;
+        margin-bottom: 20px;
+    }
+    
+    .badges-respostas {
+        display: flex;
+        gap: 10px;
+        justify-content: center;
+        flex-wrap: wrap;
+        list-style: none;
+        padding: 0;
+        margin: 20px 0;
+    }
+    
+    .badge {
+        background: #0066CC;
+        color: white;
+        padding: 10px 20px;
+        border-radius: 20px;
+        font-size: 14px;
+        font-weight: 500;
+    }
+    
+    .acoes-resultado {
+        display: flex;
+        gap: 20px;
+        justify-content: center;
+        margin: 40px 0;
+        flex-wrap: wrap;
+    }
+    
+    .btn {
+        display: inline-block;
+        padding: 14px 28px;
+        border-radius: 8px;
+        text-decoration: none;
+        font-weight: 600;
+        transition: all 0.3s;
+        border: none;
+        cursor: pointer;
+        font-size: 16px;
+    }
+    
+    .btn-primary {
+        background: #0066CC;
+        color: white;
+    }
+    
+    .btn-primary:hover {
+        background: #0052a3;
+        transform: translateY(-2px);
+        box-shadow: 0 4px 12px rgba(0,102,204,0.3);
+    }
+    
+    .btn-secondary {
+        background: #6c757d;
+        color: white;
+    }
+    
+    .btn-secondary:hover {
+        background: #5a6268;
+    }
+    
+    .btn-lg {
+        padding: 16px 32px;
+        font-size: 18px;
+    }
+    
+    .capsulas-grid {
+        display: grid;
+        grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
+        gap: 30px;
+        margin-top: 30px;
+    }
+    
+    .capsula-card {
+        border: 2px solid #e0e0e0;
+        border-radius: 12px;
+        padding: 24px;
+        transition: all 0.3s;
+        background: white;
+    }
+    
+    .capsula-card:hover {
+        box-shadow: 0 6px 20px rgba(0,0,0,0.1);
+        border-color: #0066CC;
+        transform: translateY(-4px);
+    }
+    
+    .capsula-card.obrigatorio {
+        border-left: 6px solid #dc3545;
+    }
+    
+    .capsula-card.recomendado {
+        border-left: 6px solid #28a745;
+    }
+    
+    .badge-prioridade {
+        display: inline-block;
+        padding: 6px 12px;
+        border-radius: 4px;
+        font-size: 12px;
+        font-weight: bold;
+        text-transform: uppercase;
+        margin-bottom: 12px;
+    }
+    
+    .badge-obrigatorio {
+        background: #dc3545;
+        color: white;
+    }
+    
+    .badge-recomendado {
+        background: #28a745;
+        color: white;
+    }
+    
+    .capsula-card h3 {
+        margin: 12px 0;
+        color: #333;
+        font-size: 1.3rem;
+    }
+    
+    .capsula-card h3 a {
+        text-decoration: none;
+        color: inherit;
+        transition: color 0.3s;
+    }
+    
+    .capsula-card h3 a:hover {
+        color: #0066CC;
+    }
+    
+    .capsula-resumo {
+        color: #666;
+        line-height: 1.6;
+        margin: 12px 0;
+    }
+    
+    .capsula-tags {
+        display: flex;
+        gap: 8px;
+        flex-wrap: wrap;
+        margin: 12px 0;
+    }
+    
+    .tag {
+        background: #f0f0f0;
+        padding: 4px 10px;
+        border-radius: 4px;
+        font-size: 12px;
+        color: #666;
+    }
+    
+    .btn-ler-capsula {
+        display: inline-block;
+        margin-top: 12px;
+        color: #0066CC;
+        text-decoration: none;
+        font-weight: 600;
+        transition: all 0.3s;
+    }
+    
+    .btn-ler-capsula:hover {
+        color: #0052a3;
+        text-decoration: underline;
+    }
+    
+    .sem-resultados {
+        text-align: center;
+        padding: 60px 20px;
+        background: #f8f9fa;
+        border-radius: 12px;
+        margin-top: 30px;
+    }
+    
+    .sem-resultados p {
+        font-size: 18px;
+        color: #666;
+        margin-bottom: 20px;
+    }
+    
+    /* CSS para impressão */
+    @media print {
+        @page {
+            margin: 2cm;
+            size: A4;
+        }
+        
+        .acoes-resultado,
+        nav,
+        footer,
+        .btn,
+        .quiz-progress,
+        .btn-recomecar {
+            display: none !important;
+        }
+        
+        .capsulas-grid {
+            display: block;
+        }
+        
+        .capsula-card {
+            page-break-inside: avoid;
+            border: 2px solid #333;
+            padding: 20px;
+            margin-bottom: 30px;
+        }
+        
+        * {
+            -webkit-print-color-adjust: exact !important;
+            print-color-adjust: exact !important;
+        }
+        
+        .badge-prioridade {
+            border: 2px solid #000;
+        }
+        
+        .resultado-header h1 {
+            font-size: 24pt;
+            margin-bottom: 20pt;
+        }
+        
+        a {
+            color: #000;
+            text-decoration: none;
+        }
+        
+        a[href]:after {
+            content: " (" attr(href) ")";
+            font-size: 10pt;
+            color: #666;
+        }
+    }
+</style>
+{% endblock %}
+
+{% block title %}
+    <title>{{ page.page_title }}</title>
+{% endblock %}
+
+{%block govnavbar %}
+    <div style="background-color: #071E41;">
+        <div class="menu">
+            <div class="logo">
+                <img style="width: 51px; height: 18px;" src="{% static 'enap_designsystem/icons/logo-white.png' %}" alt="Passar pro lado esquerdo" alt="Logo GovBR" height="40">
+            </div>
+            <a href="https://www.gov.br/secom/pt-br/acesso-a-informacao/comunicabr">Comunica BR</a>
+            <div class="separator"></div>
+            <a href="https://www.gov.br/acessoainformacao/pt-br">Acesso à informação</a>
+            <div class="separator"></div>
+            <a href="https://www.gov.br/pt-br/participacao-social/">Participe</a>
+            <div class="separator"></div>
+            <a href="https://www4.planalto.gov.br/legislacao/">Legislação</a>
+            <div class="separator"></div>
+            <a href="https://www.gov.br/pt-br/orgaos-do-governo">Órgãos do Governo</a>
+        </div>
+    </div>
+{% endblock %}
+
+
+{% block navbar %}
+    {% if page.navbar %}
+        {% include "enap_designsystem/blocks/navbar/navbar_block.html" with navbar=page.navbar %}
+    {% else %}
+        <p style="color: red;">DEBUG: Nenhuma Navbar foi definida.</p>
+    {% endif %}
+{% endblock %}
+
+{% block content %}
+
+{% if e_resultado %}
+    {# ========================================== #}
+    {# PÁGINA DE RESULTADO #}
+    {# ========================================== #}
+    
+    <div class="resultado-rotas">
+        <div class="container">
+            
+            <header class="resultado-header">
+                <h1>✅ Suas Recomendações Personalizadas</h1>
+                
+                <div class="resumo-respostas">
+                    <h3>Com base no seu perfil:</h3>
+                    <ul class="badges-respostas">
+                        {% for chave, resposta in respostas.items %}
+                            <li class="badge">
+                                {{ resposta.texto }}
+                            </li>
+                        {% endfor %}
+                    </ul>
+                </div>
+                
+                {% if page.texto_resultado %}
+                    <div class="texto-resultado">
+                        {{ page.texto_resultado|richtext }}
+                    </div>
+                {% endif %}
+            </header>
+            
+            {# Ações #}
+            <div class="acoes-resultado">
+                <button onclick="window.print()" class="btn btn-primary btn-lg">
+                    📄 Salvar / Imprimir como PDF
+                </button>
+                
+                <a href="{{ page.url }}" class="btn btn-secondary">
+                    🔄 Fazer novo quiz
+                </a>
+            </div>
+            
+            {# Grid de cápsulas #}
+            <section class="capsulas-recomendadas">
+                <h2 style="text-align: center; margin-bottom: 30px;">
+                    Encontramos {{ total_capsulas }} 
+                    {% if total_capsulas == 1 %}cápsula{% else %}cápsulas{% endif %}
+                    para você
+                </h2>
+                
+                {% if capsulas_recomendadas %}
+                    <div class="capsulas-grid">
+                        {% for capsula in capsulas_recomendadas %}
+                            <article class="capsula-card {% if capsula.prioridade == 'obrigatorio' %}obrigatorio{% else %}recomendado{% endif %}">
+                                
+                                <span class="badge-prioridade {% if capsula.prioridade == 'obrigatorio' %}badge-obrigatorio{% else %}badge-recomendado{% endif %}">
+                                    {% if capsula.prioridade == 'obrigatorio' %}
+                                        ⚠️ Obrigatório
+                                    {% else %}
+                                        ✨ Recomendado
+                                    {% endif %}
+                                </span>
+                                
+                                <h3>
+                                    <a href="{{ capsula.url }}">{{ capsula.title }}</a>
+                                </h3>
+                                
+                                {% if capsula.resumo_card %}
+                                    <p class="capsula-resumo">
+                                        {{ capsula.resumo_card }}
+                                    </p>
+                                {% endif %}
+                                
+                                {% if capsula.tipos_deficiencia %}
+                                    <div class="capsula-tags">
+                                        {% for tipo in capsula.tipos_deficiencia %}
+                                            <span class="tag">{{ tipo }}</span>
+                                        {% endfor %}
+                                    </div>
+                                {% endif %}
+                                
+                                <a href="{{ capsula.url }}" class="btn-ler-capsula">
+                                    Ler cápsula completa →
+                                </a>
+                            </article>
+                        {% endfor %}
+                    </div>
+                {% else %}
+                    <div class="sem-resultados">
+                        <p>Não encontramos cápsulas específicas para este perfil ainda.</p>
+                        <a href="{{ page.url }}" class="btn btn-primary">Tentar novamente</a>
+                    </div>
+                {% endif %}
+            </section>
+            
+        </div>
+    </div>
+
+{% else %}
+    {# ========================================== #}
+    {# QUIZ INTERATIVO - PERGUNTAS FIXAS #}
+    {# ========================================== #}
+    
+    <div class="quiz-container">
+        
+        <header class="quiz-header">
+            <h1>{{ page.title }}</h1>
+            {% if page.introducao %}
+                {{ page.introducao|richtext }}
+            {% endif %}
+        </header>
+        
+        {# Barra de progresso #}
+        <div class="quiz-progress">
+            <div class="progress-bar">
+                <div class="progress-fill" id="progressFill" style="width: 33%"></div>
+            </div>
+            <span class="progress-text" id="progressText">Pergunta 1 de 3</span>
+        </div>
+        
+        {# Área das perguntas (dinâmica via JS) #}
+        <div id="quizArea">
+            
+            {# ========================================== #}
+            {# PERGUNTA 1: PERFIL PROFISSIONAL #}
+            {# ========================================== #}
+            <div class="pergunta-card" id="pergunta1" style="display: block;">
+                <h2 class="pergunta-texto">Qual é o seu perfil profissional?</h2>
+                <p class="pergunta-ajuda">Selecione a opção que melhor descreve sua função principal</p>
+                
+                <div class="opcoes-grid">
+                    <button class="opcao-card" onclick="responderPergunta1('designer_instrucional', 'Designer Instrucional')">
+                        <i>🎨</i>
+                        <h3>Designer Instrucional</h3>
+                        <p>Responsável por criar e estruturar conteúdos educacionais</p>
+                        <span class="btn-selecionar">Selecionar →</span>
+                    </button>
+                    
+                    <button class="opcao-card" onclick="responderPergunta1('designer_grafico', 'Designer Gráfico')">
+                        <i>🖼️</i>
+                        <h3>Designer Gráfico</h3>
+                        <p>Responsável pela criação de elementos visuais</p>
+                        <span class="btn-selecionar">Selecionar →</span>
+                    </button>
+                    
+                    <button class="opcao-card" onclick="responderPergunta1('docente', 'Docente')">
+                        <i>👨‍🏫</i>
+                        <h3>Docente</h3>
+                        <p>Professor(a) que ministra aulas e eventos educacionais</p>
+                        <span class="btn-selecionar">Selecionar →</span>
+                    </button>
+                    
+                    <button class="opcao-card" onclick="responderPergunta1('implementador_web', 'Implementador Web', true)">
+                        <i>💻</i>
+                        <h3>Implementador Web</h3>
+                        <p>Desenvolvedor responsável por implementar sistemas e plataformas</p>
+                        <span class="btn-selecionar">Selecionar →</span>
+                    </button>
+                    
+                    <button class="opcao-card" onclick="responderPergunta1('editor_video', 'Editor de Vídeo', true)">
+                        <i>🎬</i>
+                        <h3>Editor de Vídeo</h3>
+                        <p>Responsável pela edição e produção de conteúdos audiovisuais</p>
+                        <span class="btn-selecionar">Selecionar →</span>
+                    </button>
+                    
+                    <button class="opcao-card" onclick="responderPergunta1('curador_conteudo', 'Curador de Conteúdo')">
+                        <i>📁</i>
+                        <h3>Curador de Conteúdo</h3>
+                        <p>Responsável por selecionar e organizar conteúdos</p>
+                        <span class="btn-selecionar">Selecionar →</span>
+                    </button>
+                    
+                    <button class="opcao-card" onclick="responderPergunta1('conteudista', 'Conteudista')">
+                        <i>✍️</i>
+                        <h3>Conteudista</h3>
+                        <p>Responsável por criar textos e materiais didáticos</p>
+                        <span class="btn-selecionar">Selecionar →</span>
+                    </button>
+                </div>
+            </div>
+            
+            {# ========================================== #}
+            {# PERGUNTA 2a: TIPO DE RECURSO #}
+            {# ========================================== #}
+            <div class="pergunta-card" id="pergunta2a" style="display: none;">
+                <h2 class="pergunta-texto">Com qual tipo de recurso você trabalha?</h2>
+                <p class="pergunta-ajuda">Escolha o tipo de material que você mais produz ou edita</p>
+                
+                <div class="opcoes-grid">
+                    <button class="opcao-card" onclick="responderPergunta2a('imagem', 'Imagem')">
+                        <i>🖼️</i>
+                        <h3>Imagem</h3>
+                        <p>Fotos, ilustrações e gráficos</p>
+                        <span class="btn-selecionar">Selecionar →</span>
+                    </button>
+                    
+                    <button class="opcao-card" onclick="responderPergunta2a('video', 'Vídeo')">
+                        <i>▶️</i>
+                        <h3>Vídeo</h3>
+                        <p>Conteúdos em vídeo</p>
+                        <span class="btn-selecionar">Selecionar →</span>
+                    </button>
+                    
+                    <button class="opcao-card" onclick="responderPergunta2a('tabela', 'Tabela')">
+                        <i>📊</i>
+                        <h3>Tabela</h3>
+                        <p>Dados tabulados e planilhas</p>
+                        <span class="btn-selecionar">Selecionar →</span>
+                    </button>
+                    
+                    <button class="opcao-card" onclick="responderPergunta2a('grafico', 'Gráfico')">
+                        <i>📈</i>
+                        <h3>Gráfico</h3>
+                        <p>Visualizações de dados</p>
+                        <span class="btn-selecionar">Selecionar →</span>
+                    </button>
+                    
+                    <button class="opcao-card" onclick="responderPergunta2a('texto', 'Texto')">
+                        <i>📝</i>
+                        <h3>Texto</h3>
+                        <p>Documentos e materiais escritos</p>
+                        <span class="btn-selecionar">Selecionar →</span>
+                    </button>
+                    
+                    <button class="opcao-card" onclick="responderPergunta2a('audio', 'Áudio')">
+                        <i>🎧</i>
+                        <h3>Áudio</h3>
+                        <p>Podcasts e materiais sonoros</p>
+                        <span class="btn-selecionar">Selecionar →</span>
+                    </button>
+                    
+                    <button class="opcao-card" onclick="responderPergunta2a('botao', 'Botão/Interface')">
+                        <i>🖱️</i>
+                        <h3>Botão/Interface</h3>
+                        <p>Elementos de interface</p>
+                        <span class="btn-selecionar">Selecionar →</span>
+                    </button>
+                    
+                    <button class="opcao-card" onclick="responderPergunta2a('hiperlink', 'Hiperlink')">
+                        <i>🔗</i>
+                        <h3>Hiperlink</h3>
+                        <p>Links e navegação</p>
+                        <span class="btn-selecionar">Selecionar →</span>
+                    </button>
+                    
+                    <button class="opcao-card" onclick="responderPergunta2a('videoconferencia', 'Videoconferência')">
+                        <i>📹</i>
+                        <h3>Videoconferência</h3>
+                        <p>Reuniões e aulas online</p>
+                        <span class="btn-selecionar">Selecionar →</span>
+                    </button>
+                </div>
+            </div>
+            
+            {# ========================================== #}
+            {# PERGUNTA 2b: FORMATO DE AÇÃO #}
+            {# ========================================== #}
+            <div class="pergunta-card" id="pergunta2b" style="display: none;">
+                <h2 class="pergunta-texto">Qual formato de ação de desenvolvimento você trabalha?</h2>
+                <p class="pergunta-ajuda">Selecione a modalidade de ensino com a qual você trabalha</p>
+                
+                <div class="opcoes-grid">
+                    <button class="opcao-card" onclick="responderPergunta2b('distancia_sincrono', 'A distância síncrono')">
+                        <i>💻</i>
+                        <h3>A distância síncrono</h3>
+                        <p>Aulas e eventos online em tempo real</p>
+                        <span class="btn-selecionar">Selecionar →</span>
+                    </button>
+                    
+                    <button class="opcao-card" onclick="responderPergunta2b('distancia_assincrono', 'A distância assíncrono')">
+                        <i>📚</i>
+                        <h3>A distância assíncrono</h3>
+                        <p>Conteúdos que os alunos acessam quando quiserem</p>
+                        <span class="btn-selecionar">Selecionar →</span>
+                    </button>
+                    
+                    <button class="opcao-card" onclick="responderPergunta2b('presencial', 'Presencial')">
+                        <i>🏫</i>
+                        <h3>Presencial</h3>
+                        <p>Aulas e eventos presenciais</p>
+                        <span class="btn-selecionar">Selecionar →</span>
+                    </button>
+                    
+                    <button class="opcao-card" onclick="responderPergunta2b('semipresencial', 'Semipresencial')">
+                        <i>🔀</i>
+                        <h3>Semipresencial</h3>
+                        <p>Combinação de presencial e online</p>
+                        <span class="btn-selecionar">Selecionar →</span>
+                    </button>
+                </div>
+            </div>
+            
+        </div>
+        
+        {# Resumo das escolhas #}
+        <aside class="escolhas-resumo" id="escolhasResumo" style="display: none;">
+            <h4>Suas escolhas:</h4>
+            <ul id="listaEscolhas"></ul>
+        </aside>
+        
+        <a href="{{ page.url }}" class="btn-recomecar" style="display: none;" id="btnRecomecar">
+            ← Recomeçar
+        </a>
+        
+    </div>
+
+{% endif %}
+<script>
+    // ==========================================
+    // JAVASCRIPT SIMPLIFICADO - USA URL PARAMS
+    // ==========================================
+    
+    let respostas = {};
+    
+    // Função para construir URL com parâmetros
+    function construirUrlResultado() {
+        let params = new URLSearchParams();
+        
+        if (respostas.perfil_profissional) {
+            params.append('perfil', respostas.perfil_profissional.valor);
+            params.append('perfil_texto', respostas.perfil_profissional.texto);
+        }
+        
+        if (respostas.tipo_recurso) {
+            params.append('recurso', respostas.tipo_recurso.valor);
+            params.append('recurso_texto', respostas.tipo_recurso.texto);
+        }
+        
+        if (respostas.formato_acao) {
+            params.append('formato', respostas.formato_acao.valor);
+            params.append('formato_texto', respostas.formato_acao.texto);
+        }
+        
+        params.append('resultado', '1');
+        
+        return '{{ page.url }}?' + params.toString();
+    }
+    
+    // Função para atualizar progresso
+    function atualizarProgresso(atual, total) {
+        const percentual = (atual / total) * 100;
+        document.getElementById('progressFill').style.width = percentual + '%';
+        document.getElementById('progressText').textContent = `Pergunta ${atual} de ${total}`;
+    }
+    
+    // Função para mostrar resumo
+    function atualizarResumo() {
+        const resumo = document.getElementById('escolhasResumo');
+        const lista = document.getElementById('listaEscolhas');
+        const btnRecomecar = document.getElementById('btnRecomecar');
+        
+        lista.innerHTML = '';
+        
+        if (Object.keys(respostas).length > 0) {
+            for (let [chave, resposta] of Object.entries(respostas)) {
+                const li = document.createElement('li');
+                const chaveFormatada = chave.replace(/_/g, ' ').replace(/\b\w/g, l => l.toUpperCase());
+                li.innerHTML = `<strong>${chaveFormatada}:</strong> ${resposta.texto}`;
+                lista.appendChild(li);
+            }
+            resumo.style.display = 'block';
+            btnRecomecar.style.display = 'inline-block';
+        }
+    }
+    
+    // ==========================================
+    // RESPONDER PERGUNTA 1: PERFIL PROFISSIONAL
+    // ==========================================
+    function responderPergunta1(valor, texto, irParaResultado = false) {
+        // Salvar resposta
+        respostas['perfil_profissional'] = {
+            valor: valor,
+            texto: texto
+        };
+        
+        // Animar seleção
+        event.target.closest('.opcao-card').classList.add('selecionado');
+        
+        setTimeout(() => {
+            // Ocultar pergunta 1
+            document.getElementById('pergunta1').style.display = 'none';
+            
+            atualizarResumo();
+            
+            if (irParaResultado) {
+                // Implementador Web ou Editor de Vídeo - vai direto
+                window.location.href = construirUrlResultado();
+            } else if (valor === 'docente') {
+                // Docente vai para pergunta 2b (Formato de Ação)
+                atualizarProgresso(2, 2);
+                document.getElementById('pergunta2b').style.display = 'block';
+            } else {
+                // Designer Instrucional, Designer Gráfico, Curador, Conteudista
+                // vão para pergunta 2a (Tipo de Recurso)
+                atualizarProgresso(2, 2);
+                document.getElementById('pergunta2a').style.display = 'block';
+            }
+        }, 300);
+    }
+    
+    // ==========================================
+    // RESPONDER PERGUNTA 2a: TIPO DE RECURSO
+    // ==========================================
+    function responderPergunta2a(valor, texto) {
+        // Salvar resposta
+        respostas['tipo_recurso'] = {
+            valor: valor,
+            texto: texto
+        };
+        
+        // Animar seleção
+        event.target.closest('.opcao-card').classList.add('selecionado');
+        
+        setTimeout(() => {
+            atualizarResumo();
+            
+            // Ir para resultado
+            window.location.href = construirUrlResultado();
+        }, 300);
+    }
+    
+    // ==========================================
+    // RESPONDER PERGUNTA 2b: FORMATO DE AÇÃO
+    // ==========================================
+    function responderPergunta2b(valor, texto) {
+        // Salvar resposta
+        respostas['formato_acao'] = {
+            valor: valor,
+            texto: texto
+        };
+        
+        // Animar seleção
+        event.target.closest('.opcao-card').classList.add('selecionado');
+        
+        setTimeout(() => {
+            atualizarResumo();
+            
+            // Ir para resultado
+            window.location.href = construirUrlResultado();
+        }, 300);
+    }
+    
+    // Inicialização
+    document.addEventListener('DOMContentLoaded', function() {
+        atualizarProgresso(1, 2);
+    });
+</script>
+{% endblock %}