Spaces:

danielclopes
/

eva-calculator

Running

App Files Files Community

danielclopes commited on Jun 8, 2025

Commit

dfdce9f

verified ·

1 Parent(s): 5fdd5fb

<!DOCTYPE html> <html lang="pt-BR"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>NeuroAvalia - Identificação de Neurodivergência</title> <script src="https://cdn.tailwindcss.com"></script> <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap" rel="stylesheet"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> <style> body { font-family: 'Poppins', sans-serif; background-color: #f8f9fa; } .progress-bar { transition: width 0.5s ease-in-out; } .option:hover { transform: translateY(-2px); box-shadow: 0 6px 12px rgba(0, 0, 0, 0.1); } .result-chart { height: 300px; } </style> </head> <body class="min-h-screen bg-gradient-to-b from-indigo-50 to-blue-50"> <div class="container mx-auto px-4 py-8 max-w-6xl">  <header class="text-center mb-10"> <h1 class="text-4xl md:text-5xl font-bold text-indigo-800 mb-4">NeuroAvalia</h1> <p class="text-lg md:text-xl text-gray-700 max-w-3xl mx-auto"> Ferramenta baseada em pesquisas científicas para identificar sinais de neurodivergência e altas habilidades </p> <div class="w-24 h-1.5 bg-indigo-500 mx-auto mt-4 rounded-full"></div> </header>  <div id="welcome-card" class="bg-white rounded-xl shadow-lg p-6 mb-8 transition-all duration-300"> <div class="flex flex-col md:flex-row items-center gap-6"> <div class="flex-shrink-0 mb-4 md:mb-0"> <div class="w-24 h-24 md:w-32 md:h-32 rounded-full bg-indigo-100 flex items-center justify-center"> <i class="fas fa-brain text-4xl md:text-5xl text-indigo-600"></i> </div> </div> <div> <h2 class="text-2xl font-semibold text-gray-800 mb-3">Sobre esta avaliação</h2> <p class="text-gray-600 mb-4"> Este questionário foi desenvolvido com base nos principais estudos mundiais sobre neurodivergência e altas habilidades. As perguntas abrangem diversas áreas cognitivas, emocionais e sensoriais. </p> <p class="text-gray-600 mb-6"> Ao final, você receberá um relatório detalhado com sua pontuação e orientações sobre os próximos passos, caso sejam necessários. </p> <button onclick="startAssessment()" class="bg-indigo-600 hover:bg-indigo-700 text-white font-medium py-3 px-6 rounded-lg transition duration-300 transform hover:scale-105 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-opacity-50"> Iniciar Avaliação </button> </div> </div> </div>  <div id="assessment-container" class="hidden bg-white rounded-xl shadow-lg p-6 mb-8">  <div class="mb-8"> <div class="flex justify-between mb-2"> <span class="text-sm font-medium text-indigo-700">Progresso</span> <span id="progress-percentage" class="text-sm font-medium text-indigo-700">0%</span> </div> <div class="w-full bg-gray-200 rounded-full h-2.5"> <div id="progress-bar" class="progress-bar bg-indigo-600 h-2.5 rounded-full" style="width: 0%"></div> </div> </div>  <div id="question-container">  </div>  <div class="flex justify-between mt-10"> <button id="prev-btn" onclick="prevQuestion()" class="hidden bg-gray-200 hover:bg-gray-300 text-gray-800 font-medium py-2 px-6 rounded-lg transition duration-300 focus:outline-none focus:ring-2 focus:ring-gray-400 focus:ring-opacity-50"> <i class="fas fa-arrow-left mr-2"></i> Anterior </button> <button id="next-btn" onclick="nextQuestion()" class="ml-auto bg-indigo-600 hover:bg-indigo-700 text-white font-medium py-2 px-6 rounded-lg transition duration-300 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-opacity-50"> Próxima <i class="fas fa-arrow-right ml-2"></i> </button> <button id="submit-btn" onclick="submitAssessment()" class="hidden bg-green-600 hover:bg-green-700 text-white font-medium py-2 px-6 rounded-lg transition duration-300 focus:outline-none focus:ring-2 focus:ring-green-500 focus:ring-opacity-50"> Finalizar <i class="fas fa-check ml-2"></i> </button> </div> </div>  <div id="results-container" class="hidden bg-white rounded-xl shadow-lg p-6"> <div class="text-center mb-8"> <div class="inline-block p-4 bg-indigo-100 rounded-full mb-4"> <i class="fas fa-chart-bar text-4xl text-indigo-600"></i> </div> <h2 class="text-3xl font-bold text-gray-800 mb-2">Seu Resultado</h2> <p class="text-gray-600 max-w-2xl mx-auto"> Veja abaixo sua pontuação e interpretação baseada em pesquisas científicas sobre neurodivergência. </p> </div>  <div class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-10"> <div class="bg-blue-50 rounded-xl p-6 text-center"> <div class="text-4xl font-bold text-blue-700 mb-2" id="cognitive-score">0</div> <div class="text-lg font-medium text-blue-800 mb-2">Cognitivo</div> <div class="h-1.5 bg-blue-200 rounded-full mb-3"> <div class="h-1.5 bg-blue-600 rounded-full" id="cognitive-bar" style="width: 0%"></div> </div> <p class="text-sm text-blue-900 opacity-80">Processamento de informações e padrões de pensamento</p> </div> <div class="bg-purple-50 rounded-xl p-6 text-center"> <div class="text-4xl font-bold text-purple-700 mb-2" id="emotional-score">0</div> <div class="text-lg font-medium text-purple-800 mb-2">Emocional</div> <div class="h-1.5 bg-purple-200 rounded-full mb-3"> <div class="h-1.5 bg-purple-600 rounded-full" id="emotional-bar" style="width: 0%"></div> </div> <p class="text-sm text-purple-900 opacity-80">Regulação emocional e intensidade de sentimentos</p> </div> <div class="bg-green-50 rounded-xl p-6 text-center"> <div class="text-4xl font-bold text-green-700 mb-2" id="sensory-score">0</div> <div class="text-lg font-medium text-green-800 mb-2">Sensorial</div> <div class="h-1.5 bg-green-200 rounded-full mb-3"> <div class="h-1.5 bg-green-600 rounded-full" id="sensory-bar" style="width: 0%"></div> </div> <p class="text-sm text-green-900 opacity-80">Sensibilidade a estímulos do ambiente</p> </div> </div>  <div class="bg-gray-50 rounded-xl p-6 mb-8"> <h3 class="text-xl font-semibold text-gray-800 mb-4">Análise Detalhada</h3> <p class="text-gray-700 mb-6" id="detailed-analysis">  </p> <h4 class="text-lg font-medium text-gray-800 mb-3">Áreas com maior pontuação:</h4> <div id="strengths-list" class="grid grid-cols-1 md:grid-cols-2 gap-3 mb-6">  </div> <div class="alert bg-indigo-50 border-l-4 border-indigo-500 p-4 rounded mb-6"> <div class="flex"> <div class="flex-shrink-0 text-indigo-500"> <i class="fas fa-info-circle"></i> </div> <div class="ml-3"> <p class="text-sm text-indigo-700"> <strong>Nota:</strong> Esta avaliação não substitui um diagnóstico profissional. Se os resultados indicarem alta probabilidade de neurodivergência, recomendamos consultar um especialista. </p> </div> </div> </div> </div>  <div class="mb-8"> <h3 class="text-xl font-semibold text-gray-800 mb-4">Recursos e Próximos Passos</h3> <div class="grid grid-cols-1 md:grid-cols-2 gap-4"> <div class="flex items-start p-4 bg-white border border-gray-200 rounded-lg shadow-sm hover:shadow-md transition"> <div class="flex-shrink-0 mt-1 mr-4 text-blue-500"> <i class="fas fa-book-open"></i> </div> <div> <h4 class="font-medium text-gray-800">Leituras recomendadas</h4> <p class="text-sm text-gray-600">Materiais científicos sobre neurodivergência e altas habilidades</p> </div> </div> <div class="flex items-start p-4 bg-white border border-gray-200 rounded-lg shadow-sm hover:shadow-md transition"> <div class="flex-shrink-0 mt-1 mr-4 text-purple-500"> <i class="fas fa-user-md"></i> </div> <div> <h4 class="font-medium text-gray-800">Profissionais especializados</h4> <p class="text-sm text-gray-600">Encontre especialistas em sua região para avaliação detalhada</p> </div> </div> </div> </div> <div class="text-center"> <button onclick="restartAssessment()" class="bg-indigo-600 hover:bg-indigo-700 text-white font-medium py-2 px-6 rounded-lg transition duration-300 transform hover:scale-105 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-opacity-50 inline-flex items-center"> <i class="fas fa-redo mr-2"></i> Refazer Teste </button> </div> </div> </div> <footer class="bg-white py-6 mt-12 border-t border-gray-200"> <div class="container mx-auto px-4 text-center text-gray-600 text-sm"> <p>© 2023 NeuroAvalia. Baseado em pesquisas científicas sobre neurodivergência e altas habilidades.</p> <p class="mt-2">Este instrumento não substitui avaliação profissional.</p> </div> </footer> <script> // Questions database const questions = [ { id: 1, category: 'cognitive', text: "Com que frequência você percebe padrões, conexões ou relações que outras pessoas não percebem?", options: [ { text: "Raramente ou nunca", score: 1 }, { text: "Ocasionalmente", score: 2 }, { text: "Frequentemente", score: 4 }, { text: "Quase sempre", score: 5 } ] }, { id: 16, category: 'cognitive', text: "Você tem facilidade para aprender conceitos complexos rapidamente?", options: [ { text: "Tenho dificuldade", score: 1 }, { text: "Às vezes", score: 3 }, { text: "Com frequência", score: 4 }, { text: "Sim, quase sempre", score: 5 } ] }, { id: 17, category: 'cognitive', text: "Você se frustra quando outros não acompanham seu raciocínio?", options: [ { text: "Nunca", score: 1 }, { text: "Raramente", score: 2 }, { text: "Às vezes", score: 4 }, { text: "Frequentemente", score: 5 } ] }, { id: 2, category: 'cognitive', text: "Você tem curiosidade intensa sobre vários tópicos diferentes?", options: [ { text: "Não especialmente", score: 1 }, { text: "Tenho algumas áreas de interesse", score: 3 }, { text: "Sim, sobre vários assuntos", score: 4 }, { text: "Sim, sobre muitos assuntos e com grande intensidade", score: 5 } ] }, { id: 3, category: 'emotional', text: "Você já foi descrito como muito intenso(a) emocionalmente?", options: [ { text: "Nunca", score: 1 }, { text: "Raramente", score: 2 }, { text: "Às vezes", score: 3 }, { text: "Frequentemente", score: 4 }, { text: "Sempre ou quase sempre", score: 5 } ] }, { id: 4, category: 'emotional', text: "Com que frequência você sente emoções com extrema intensidade (alegria, tristeza, raiva, etc.)?", options: [ { text: "Quase nunca", score: 1 }, { text: "De vez em quando", score: 2 }, { text: "Regularmente", score: 3 }, { text: "Frequentemente", score: 4 }, { text: "Quase sempre", score: 5 } ] }, { id: 5, category: 'sensory', text: "Você é particularmente sensível a sons, luzes, texturas ou cheiros que não parecem incomodar outras pessoas?", options: [ { text: "Nunca", score: 1 }, { text: "Raramente", score: 2 }, { text: "Às vezes", score: 3 }, { text: "Frequentemente", score: 4 }, { text: "Sempre ou quase sempre", score: 5 } ] }, { id: 6, category: 'sensory', text: "Você fica sobrecarregado(a) em ambientes com muita estimulação sensorial (como shoppings, festas, locais barulhentos)?", options: [ { text: "Nunca", score: 1 }, { text: "Raramente", score: 2 }, { text: "Às vezes", score: 3 }, { text: "Frequentemente", score: 4 }, { text: "Sempre ou quase sempre", score: 5 } ] }, { id: 7, category: 'cognitive', text: "Você pensa principalmente em imagens ou padrões em vez de palavras?", options: [ { text: "Quase nunca", score: 1 }, { text: "Ocasionalmente", score: 2 }, { text: "Regularmente", score: 3 }, { text: "Frequentemente", score: 4 }, { text: "Quase sempre", score: 5 } ] }, { id: 8, category: 'emotional', text: "Você tem forte empatia e pode sentir o que os outros estão sentindo?", options: [ { text: "Não especialmente", score: 1 }, { text: "Às vezes", score: 3 }, { text: "Frequentemente", score: 4 }, { text: "Muito intensamente, às vezes é avassalador", score: 5 } ] }, { id: 9, category: 'cognitive', text: "Você aprende melhor quando pode explorar um tópico profundamente em vez de seguir uma estrutura pré-definida?", options: [ { text: "Prefiro seguir a estrutura definida", score: 1 }, { text: "Às vezes gosto de explorar", score: 3 }, { text: "Geralmente prefiro explorar por conta própria", score: 4 }, { text: "Sempre aprendo melhor explorando profundamente", score: 5 } ] }, { id: 10, category: 'sensory', text: "Você tem reações físicas intensas (como náusea ou dor) a certos estímulos sensoriais?", options: [ { text: "Nunca", score: 1 }, { text: "Raramente", score: 2 }, { text: "Às vezes", score: 3 }, { text: "Frequentemente", score: 4 }, { text: "Sempre ou quase sempre", score: 5 } ] }, { id: 11, category: 'cognitive', text: "Com que frequência você se envolve em pensamento divergente (várias ideias ou soluções para um problema)?", options: [ { text: "Raramente", score: 1 }, { text: "Ocasionalmente", score: 2 }, { text: "Regularmente", score: 3 }, { text: "Frequentemente", score: 4 }, { text: "Quase sempre", score: 5 } ] }, { id: 12, category: 'emotional', text: "Você já sentiu que suas emoções são mais intensas do que as das pessoas ao seu redor?", options: [ { text: "Nunca", score: 1 }, { text: "Raramente", score: 2 }, { text: "Às vezes", score: 3 }, { text: "Frequentemente", score: 4 }, { text: "Sempre ou quase sempre", score: 5 } ] }, { id: 13, category: 'sensory', text: "Você tem preferências muito específicas por certos tipos de tecidos, sabores ou sons?", options: [ { text: "Nenhuma preferência especial", score: 1 }, { text: "Algumas pequenas preferências", score: 2 }, { text: "Algumas preferências marcantes", score: 3 }, { text: "Muitas preferências fortes", score: 4 }, { text: "Prefiroências muito específicas e intensas", score: 5 } ] }, { id: 14, category: 'cognitive', text: "Você tende a pensar de maneira não linear (saltando entre ideias em vez de seguir uma sequência lógica)?", options: [ { text: "Quase nunca", score: 1 }, { text: "Ocasionalmente", score: 2 }, { text: "Regularmente", score: 3 }, { text: "Frequentemente", score: 4 }, { text: "Quase sempre", score: 5 } ] }, { id: 15, category: 'emotional', text: "Você tem dificuldade em regular suas emoções (calmar-se quando está agitado ou animar-se quando está desanimado)?", options: [ { text: "Nunca", score: 1 }, { text: "Raramente", score: 2 }, { text: "Às vezes", score: 3 }, { text: "Frequentemente", score: 4 }, { text: "Sempre ou quase sempre", score: 5 } ] }, { id: 18, category: 'emotional', text: "Você se envolve emocionalmente com personagens de livros/filmes como se fossem reais?", options: [ { text: "Quase nunca", score: 1 }, { text: "Raramente", score: 2 }, { text: "Às vezes", score: 3 }, { text: "Frequentemente", score: 4 }, { text: "Quase sempre", score: 5 } ] }, { id: 19, category: 'sensory', text: "Você evita certas atividades devido à sensibilidade sensorial?", options: [ { text: "Nunca", score: 1 }, { text: "Raramente", score: 2 }, { text: "Às vezes", score: 4 }, { text: "Frequentemente", score: 5 } ] }, { id: 20, category: 'sensory', text: "Você tem reações físicas intensas a certos alimentos (textura, temperatura, sabor)?", options: [ { text: "Nunca", score: 1 }, { text: "1-2 alimentos", score: 2 }, { text: "3-5 alimentos", score: 3 }, { text: "6-10 alimentos", score: 4 }, { text: "Mais de 10 alimentos", score: 5 } ] } ]; // Comparative data for results (percentiles) const comparativeData = { cognitive: { 10: 20, 20: 30, 30: 45, 40: 55, 50: 65, 60: 72, 70: 79, 80: 85, 90: 90, 95: 95 }, emotional: { 10: 25, 20: 35, 30: 45, 40: 55, 50: 62, 60: 69, 70: 75, 80: 81, 90: 88, 95: 93 }, sensory: { 10: 15, 20: 30, 30: 42, 40: 52, 50: 60, 60: 68, 70: 74, 80: 80, 90: 87, 95: 94 } }; // Assessment state let currentQuestionIndex = 0; let answers = []; let scores = { cognitive: 0, emotional: 0, sensory: 0 }; // DOM elements const welcomeCard = document.getElementById('welcome-card'); const assessmentContainer = document.getElementById('assessment-container'); const questionContainer = document.getElementById('question-container'); const resultsContainer = document.getElementById('results-container'); const progressBar = document.getElementById('progress-bar'); const progressPercentage = document.getElementById('progress-percentage'); const prevBtn = document.getElementById('prev-btn'); const nextBtn = document.getElementById('next-btn'); const submitBtn = document.getElementById('submit-btn'); // Current position in assessment currentQuestionIndex = 0; // Start the assessment function startAssessment() { welcomeCard.classList.add('hidden'); assessmentContainer.classList.remove('hidden'); showQuestion(currentQuestionIndex); updateProgress(); } // Show a specific question function showQuestion(index) { // Reset question container questionContainer.innerHTML = ''; // Get current question const question = questions[index]; // Create question element const questionElement = document.createElement('div'); questionElement.className = 'question mb-8'; // Add question text const questionText = document.createElement('h3'); questionText.className = 'text-xl font-semibold text-gray-800 mb-6'; questionText.textContent = question.text; questionElement.appendChild(questionText); // Add options const optionsContainer = document.createElement('div'); optionsContainer.className = 'space-y-3'; question.options.forEach((option, optionIndex) => { const optionElement = document.createElement('div'); optionElement.className = 'option cursor-pointer bg-gray-50 hover:bg-indigo-50 border border-gray-200 rounded-lg p-4 transition duration-300'; optionElement.innerHTML = ` <div class="flex items-center"> <div class="w-5 h-5 rounded-full border border-gray-300 mr-3 flex-shrink-0 option-radio ${answers[index] === optionIndex ? 'bg-indigo-500 border-indigo-500' : ''}"></div> <div>${option.text}</div> </div> `; // Add click event to select option optionElement.addEventListener('click', () => { // Deselect all options document.querySelectorAll('.option-radio').forEach(radio => { radio.className = 'w-5 h-5 rounded-full border border-gray-300 mr-3 flex-shrink-0 option-radio'; }); // Select clicked option const radio = optionElement.querySelector('.option-radio'); radio.className = 'w-5 h-5 rounded-full border border-indigo-500 bg-indigo-500 mr-3 flex-shrink-0 option-radio'; // Store answer answers[index] = optionIndex; // Enable next/submit button if (index === questions.length - 1) { nextBtn.classList.add('hidden'); submitBtn.classList.remove('hidden'); } }); // If this option was previously selected, mark it if (answers[index] === optionIndex) { const radio = optionElement.querySelector('.option-radio'); radio.className = 'w-5 h-5 rounded-full border border-indigo-500 bg-indigo-500 mr-3 flex-shrink-0 option-radio'; // Make sure submit button is visible on last question if answered if (index === questions.length - 1) { nextBtn.classList.add('hidden'); submitBtn.classList.remove('hidden'); } } optionsContainer.appendChild(optionElement); }); questionElement.appendChild(optionsContainer); questionContainer.appendChild(questionElement); // Update navigation buttons prevBtn.classList.toggle('hidden', index === 0); } // Go to next question function nextQuestion() { if (answers[currentQuestionIndex] === undefined) { alert('Por favor, selecione uma resposta antes de continuar.'); return; } currentQuestionIndex++; showQuestion(currentQuestionIndex); updateProgress(); } // Go to previous question function prevQuestion() { currentQuestionIndex--; showQuestion(currentQuestionIndex); updateProgress(); } // Update progress bar function updateProgress() { const progress = ((currentQuestionIndex + 1) / questions.length) * 100; progressBar.style.width = `${progress}%`; progressPercentage.textContent = `${Math.round(progress)}%`; } // Submit assessment and show results function submitAssessment() { if (answers[currentQuestionIndex] === undefined) { alert('Por favor, selecione uma resposta antes de finalizar.'); return; } calculateScores(); showResults(); assessmentContainer.classList.add('hidden'); resultsContainer.classList.remove('hidden'); } // Calculate scores from answers function calculateScores() { // Reset scores scores = { cognitive: 0, emotional: 0, sensory: 0 }; // Count questions per category to calculate averages later const counts = { cognitive: 0, emotional: 0, sensory: 0 }; // Sum scores for each category questions.forEach((question, index) => { if (answers[index] !== undefined) { const selectedOption = question.options[answers[index]]; scores[question.category] += selectedOption.score; counts[question.category]++; } }); // Calculate average scores (percentage of max possible score) ['cognitive', 'emotional', 'sensory'].forEach(category => { if (counts[category] > 0) { const maxPossible = counts[category] * 5; scores[category] = Math.round((scores[category] / maxPossible) * 100); } }); } // Show results page function showResults() { // Update score displays document.getElementById('cognitive-score').textContent = scores.cognitive; document.getElementById('emotional-score').textContent = scores.emotional; document.getElementById('sensory-score').textContent = scores.sensory; // Update progress bars document.getElementById('cognitive-bar').style.width = `${scores.cognitive}%`; document.getElementById('emotional-bar').style.width = `${scores.emotional}%`; document.getElementById('sensory-bar').style.width = `${scores.sensory}%`; // Generate analysis text const analysis = generateAnalysis(); document.getElementById('detailed-analysis').innerHTML = analysis.text; // Add strengths const strengthsList = document.getElementById('strengths-list'); strengthsList.innerHTML = ''; analysis.strengths.forEach(strength => { const strengthItem = document.createElement('div'); strengthItem.className = 'flex items-start'; strengthItem.innerHTML = ` <div class="flex-shrink-0 mt-1 mr-3 text-green-500"> <i class="fas fa-check-circle"></i> </div> <div> <h5 class="font-medium text-gray-800">${strength.title}</h5> <p class="text-sm text-gray-600">${strength.description}</p> </div> `; strengthsList.appendChild(strengthItem); }); } // Generate analysis based on scores function generateAnalysis() { const cognitiveLevel = getLevel(scores.cognitive); const emotionalLevel = getLevel(scores.emotional); const sensoryLevel = getLevel(scores.sensory); // Calculate percentiles const cognitivePercentile = getPercentile('cognitive', scores.cognitive); const emotionalPercentile = getPercentile('emotional', scores.emotional); const sensoryPercentile = getPercentile('sensory', scores.sensory); // Determine overall assessment with comparison data let overallScore = Math.round((scores.cognitive + scores.emotional + scores.sensory) / 3); const overallPercentile = Math.round((cognitivePercentile + emotionalPercentile + sensoryPercentile) / 3); let overallAssessment = ''; if (overallPercentile <= 30) { overallAssessment = `Seus resultados (percentil ${overallPercentile}) sugerem padrões predominantemente neurotípicos, com poucos indícios de neurodivergência. Você está entre os ${100-overallPercentile}% menos neurodivergentes da população.`; } else if (overallPercentile <= 60) { overallAssessment = `Seus resultados (percentil ${overallPercentile}) mostram algumas características neurodivergentes em intensidade moderada. Você está entre os ${60-overallPercentile}% da população com traços leves ou mistos.`; } else if (overallPercentile <= 85) { overallAssessment = `Seus resultados (percentil ${overallPercentile}) indicam um perfil significativamente neurodivergente. Isso coloca você entre os ${100-overallPercentile}% mais neurodivergentes da população.`; } else { overallAssessment = `Seus resultados (percentil ${overallPercentile}) mostram um perfil altamente neurodivergente. Você está entre os ${100-overallPercentile}% mais neurodivergentes da população, com padrões intensos e marcantes.`; } // Create strengths list const strengths = []; if (scores.cognitive >= 70) { strengths.push({ title: 'Pensamento complexo', description: 'Você demonstra forte capacidade de perceber padrões, conexões e pensar de maneiras não convencionais.' }); } if (scores.emotional >= 70) { strengths.push({ title: 'Intensidade emocional', description: 'Sua profundidade emocional pode representar uma rica vida interior e alta empatia.' }); } if (scores.sensory >= 70) { strengths.push({ title: 'Percepção sensorial', description: 'Sua sensibilidade sensorial pode indicar uma percepção mais fina e detalhada do ambiente.' }); } return { text: ` <div class="mb-6 p-4 bg-blue-50 rounded-lg"> <h4 class="font-bold text-lg text-blue-800 mb-2">Resumo Geral</h4> <p class="mb-4">${overallAssessment}</p> <div class="flex flex-wrap gap-4"> <div class="bg-white p-3 rounded-lg shadow-sm w-full md:w-auto"> <div class="text-sm text-gray-600">Percentil Total</div> <div class="text-2xl font-bold text-blue-700">${overallPercentile}</div> <div class="text-xs text-gray-500">(maior = mais neurodivergente)</div> </div> </div> </div> <h4 class="font-bold text-lg text-gray-800 mb-3">Detalhes por Área</h4> <div class="grid grid-cols-1 md:grid-cols-3 gap-4 mb-6"> <div class="bg-white p-4 rounded-lg shadow-sm"> <h5 class="font-bold text-blue-800 mb-2">Cognitivo <span class="text-sm">(${scores.cognitive}%)</span></h5> <div class="h-2 bg-gray-200 rounded-full mb-2"> <div class="h-2 bg-blue-600 rounded-full" style="width: ${scores.cognitive}%"></div> </div> <div class="text-sm mb-1">Nível: <strong>${cognitiveLevel}</strong></div> <div class="text-xs text-gray-600">Percentil ${cognitivePercentile} - ${getPercentileInterpretation(cognitivePercentile)}</div> </div> <div class="bg-white p-4 rounded-lg shadow-sm"> <h5 class="font-bold text-purple-800 mb-2">Emocional <span class="text-sm">(${scores.emotional}%)</span></h5> <div class="h-2 bg-gray-200 rounded-full mb-2"> <div class="h-2 bg-purple-600 rounded-full" style="width: ${scores.emotional}%"></div> </div> <div class="text-sm mb-1">Nível: <strong>${emotionalLevel}</strong></div> <div class="text-xs text-gray-600">Percentil ${emotionalPercentile} - ${getPercentileInterpretation(emotionalPercentile)}</div> </div> <div class="bg-white p-4 rounded-lg shadow-sm"> <h5 class="font-bold text-green-800 mb-2">Sensorial <span class="text-sm">(${scores.sensory}%)</span></h5> <div class="h-2 bg-gray-200 rounded-full mb-2"> <div class="h-2 bg-green-600 rounded-full" style="width: ${scores.sensory}%"></div> </div> <div class="text-sm mb-1">Nível: <strong>${sensoryLevel}</strong></div> <div class="text-xs text-gray-600">Percentil ${sensoryPercentile} - ${getPercentileInterpretation(sensoryPercentile)}</div> </div> </div> `, strengths }; } // Get descriptive level based on score function getLevel(score) { if (score <= 25) return 'Muito Baixo'; if (score <= 40) return 'Baixo'; if (score <= 60) return 'Moderado'; if (score <= 75) return 'Alto'; return 'Muito Alto'; } // Get percentile based on comparative data function getPercentile(category, score) { const data = comparativeData[category]; for (let percentile = 95; percentile >= 10; percentile -= 5) { if (score >= data[percentile]) return percentile; } return 5; } // Get interpretation of percentile function getPercentileInterpretation(percentile) { if (percentile <= 15) return 'Baixa neurodivergência'; if (percentile <= 40) return 'Neurotípico com alguns traços'; if (percentile <= 60) return 'Perfil misto'; if (percentile <= 80) return 'Neurodivergente significativo'; if (percentile <= 90) return 'Altamente neurodivergente'; return 'Extremamente neurodivergente'; } // Restart assessment function restartAssessment() { currentQuestionIndex = 0; answers = []; resultsContainer.classList.add('hidden'); welcomeCard.classList.remove('hidden'); } </script> </body> </html> - Follow Up Deployment

Browse files

Files changed (2) hide show

index.html +906 -437
prompts.txt +4 -1

index.html CHANGED Viewed

@@ -3,499 +3,968 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>EVA CALCULATOR - Jogo de Matemática Divertido</title>
     <script src="https://cdn.tailwindcss.com"></script>
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
-    <script>
-        tailwind.config = {
-            theme: {
-                extend: {
-                    colors: {
-                        evaPink: '#FF9FF3',
-                        evaBlue: '#48DBFB',
-                        evaYellow: '#FFEC59',
-                        evaPurple: '#C56CF0',
-                        evaGreen: '#1DD1A1',
-                    }
-                }
-            }
-        }
-    </script>
     <style>
-        @import url('https://fonts.googleapis.com/css2?family=Comic+Neue:wght@400;700&display=swap');
         body {
-            font-family: 'Comic Neue', cursive;
-            background-image: linear-gradient(to bottom right, #FF9FF3, #48DBFB);
-            min-height: 100vh;
-            overflow-x: hidden;
         }
-        @media (max-width: 640px) {
-            .text-4xl {
-                font-size: 2.25rem;
-            }
-            .text-6xl {
-                font-size: 3rem;
-            }
-            .p-6 {
-                padding: 1rem;
-            }
-            .md\\:p-8 {
-                padding: 1.5rem;
-            }
-            #question {
-                font-size: 2.5rem;
-                margin: 1.5rem 0;
-            }
-            #answerInput {
-                width: 80%;
-                font-size: 1.25rem;
-            }
-            #btnCheck, #btnSkip {
-                padding: 0.75rem;
-                font-size: 0.875rem;
-            }
-            .difficulty-btn {
-                padding: 0.5rem 1rem;
-                font-size: 0.75rem;
-            }
         }
-        .bounce {
-            animation: bounce 0.5s infinite alternate;
         }
-        @keyframes bounce {
-            from { transform: translateY(0); }
-            to { transform: translateY(-10px); }
         }
-        .pulse {
-            animation: pulse 2s infinite;
         }
-        @keyframes pulse {
-            0% { transform: scale(1); }
-            50% { transform: scale(1.05); }
-            100% { transform: scale(1); }
         }
-        .confetti {
-            position: absolute;
-            width: 10px;
-            height: 10px;
-            background-color: #f00;
-            opacity: 0;
         }
     </style>
 </head>
-<body class="flex flex-col items-center justify-center p-4">
-    <div class="w-full max-w-3xl bg-white/80 backdrop-blur-md rounded-3xl shadow-xl overflow-hidden mx-2">
-        <!-- Header -->
-        <div class="bg-gradient-to-r from-evaPink to-evaPurple p-6 text-center">
-            <h1 class="text-4xl md:text-5xl font-bold text-white drop-shadow-lg flex items-center justify-center gap-3">
-                <i class="fas fa-robot bounce text-evaYellow"></i>
-                EVA CALCULATOR
-                <i class="fas fa-calculator bounce text-evaYellow"></i>
-            </h1>
-            <p class="text-white/90 mt-2">Aprenda matemática brincando!</p>
         </div>
-        <!-- Game Area -->
-        <div class="p-6 md:p-8">
-            <!-- Difficulty Selector -->
-            <div class="mb-8 text-center">
-                <h3 class="text-lg font-semibold text-gray-700 mb-3">Nível de Dificuldade:</h3>
-                <div class="flex flex-wrap gap-3 justify-center">
-                    <button data-level="easy" class="difficulty-btn bg-green-500 hover:bg-green-600 text-white px-4 py-2 rounded-full text-sm font-medium">
-                        <i class="fas fa-baby mr-1"></i> Fácil
                     </button>
-                    <button data-level="medium" class="difficulty-btn bg-yellow-500 hover:bg-yellow-600 text-white px-4 py-2 rounded-full text-sm font-medium">
-                        <i class="fas fa-child mr-1"></i> Médio
                     </button>
-                    <button data-level="hard" class="difficulty-btn bg-red-500 hover:bg-red-600 text-white px-4 py-2 rounded-full text-sm font-medium">
-                        <i class="fas fa-user-graduate mr-1"></i> Difícil
                     </button>
                 </div>
             </div>
-            <!-- Game Display -->
-            <div id="gameDisplay" class="hidden bg-white p-6 rounded-xl shadow-md mb-8 text-center border-2 border-evaYellow/50">
-                <div class="flex justify-between items-center mb-6">
-                    <div class="text-evaPurple font-bold">
-                        <i class="fas fa-star mr-1"></i>
-                        Pontos: <span id="score">0</span>
                     </div>
-                    <div class="text-evaBlue font-bold">
-                        <i class="fas fa-clock mr-1"></i>
-                        Tempo: <span id="time">60</span>s
                     </div>
                 </div>
-                <div id="question" class="text-3xl md:text-6xl font-bold my-4 md:my-8 text-evaPurple pulse px-2">
-                    5 + 3 = ?
                 </div>
-                <div class="flex flex-wrap gap-3 justify-center mb-6">
-                    <button class="answer-btn bg-evaGreen hover:bg-evaGreen/80 text-white text-2xl font-bold w-16 h-16 rounded-full transition-all transform hover:scale-110">
-                        7
-                    </button>
                 </div>
-                <div class="mb-4">
-                    <input id="answerInput" type="number" class="border-2 border-evaBlue rounded-full px-4 py-2 text-center text-xl focus:outline-none focus:ring-2 focus:ring-evaBlue w-full max-w-xs" placeholder="Digite a resposta">
                 </div>
-                <div class="flex justify-center gap-4">
-                    <button id="btnCheck" class="bg-evaBlue hover:bg-evaBlue/90 text-white font-bold py-3 px-6 rounded-full transition-all transform hover:scale-105">
-                        <i class="fas fa-check mr-2"></i> Verificar
-                    </button>
-                    <button id="btnSkip" class="bg-gray-500 hover:bg-gray-600 text-white font-bold py-3 px-6 rounded-full transition-all transform hover:scale-105">
-                        <i class="fas fa-forward mr-2"></i> Pular
-                    </button>
                 </div>
-            </div>
-            <!-- Start Screen -->
-            <div id="startScreen" class="text-center py-12">
-                <div class="max-w-md mx-auto">
-                    <div class="text-9xl mb-6 text-evaYellow">
-                        <i class="fas fa-calculator"></i>
                     </div>
-                    <h2 class="text-3xl font-bold text-evaPurple mb-4">Vamos aprender matemática!</h2>
-                    <p class="text-gray-600 mb-8">Escolha uma operação e um nível de dificuldade para começar a jogar.</p>
-                    <button id="btnStart" class="bg-evaPink hover:bg-evaPink/90 text-white font-bold py-4 px-8 rounded-full text-xl transition-all transform hover:scale-105">
-                        <i class="fas fa-play mr-2"></i> Começar o Jogo
-                    </button>
                 </div>
             </div>
-            <!-- Results Screen -->
-            <div id="resultsScreen" class="hidden text-center py-12">
-                <div class="max-w-md mx-auto">
-                    <div class="text-9xl mb-6 text-evaGreen">
-                        <i class="fas fa-trophy"></i>
-                    </div>
-                    <h2 class="text-3xl font-bold text-evaPurple mb-4">Parabéns!</h2>
-                    <div class="text-5xl font-bold text-evaPink mb-6" id="finalScore">20 pontos</div>
-                    <p class="text-gray-600 mb-8">Você respondeu <span id="correctAnswers" class="font-bold">5</span> de <span id="totalQuestions" class="font-bold">10</span> perguntas corretamente!</p>
-                    <button id="btnPlayAgain" class="bg-evaBlue hover:bg-evaBlue/90 text-white font-bold py-4 px-8 rounded-full text-xl transition-all transform hover:scale-105">
-                        <i class="fas fa-redo mr-2"></i> Jogar Novamente
-                    </button>
                 </div>
             </div>
         </div>
-        <!-- Footer -->
-        <div class="bg-gradient-to-r from-evaPurple to-evaPink p-4 text-center text-white/90 text-sm">
-            Criado com ❤️ para crianças aprenderem matemática divertida
         </div>
     </div>
-    <!-- Audio elements -->
-    <audio id="correctSound" src="https://assets.mixkit.co/sfx/preview/mixkit-correct-answer-tone-2870.mp3" preload="auto"></audio>
-    <audio id="wrongSound" src="https://assets.mixkit.co/sfx/preview/mixkit-wrong-answer-fail-notification-946.mp3" preload="auto"></audio>
-    <audio id="gameSound" src="https://assets.mixkit.co/sfx/preview/mixkit-game-show-suspense-waiting-668.mp3" loop preload="auto"></audio>
-    <audio id="winSound" src="https://assets.mixkit.co/sfx/preview/mixkit-winning-chimes-2015.mp3" preload="auto"></audio>
     <script>
-        // Game state
-        let gameState = {
-            operation: null,
-            operationMode: null, // 'single' or 'mixed'
-            difficulty: 'easy',
-            score: 0,
-            timeLeft: 30,
-            timer: null,
-            correctAnswers: 0,
-            totalQuestions: 0,
-            currentQuestion: null
         };
         // DOM elements
-        const elements = {
-            startScreen: document.getElementById('startScreen'),
-            gameDisplay: document.getElementById('gameDisplay'),
-            resultsScreen: document.getElementById('resultsScreen'),
-            question: document.getElementById('question'),
-            score: document.getElementById('score'),
-            time: document.getElementById('time'),
-            answerInput: document.getElementById('answerInput'),
-            finalScore: document.getElementById('finalScore'),
-            correctAnswers: document.getElementById('correctAnswers'),
-            totalQuestions: document.getElementById('totalQuestions'),
-            // Buttons
-            btnStart: document.getElementById('btnStart'),
-            btnCheck: document.getElementById('btnCheck'),
-            btnSkip: document.getElementById('btnSkip'),
-            btnPlayAgain: document.getElementById('btnPlayAgain'),
-            // Sounds
-            correctSound: document.getElementById('correctSound'),
-            wrongSound: document.getElementById('wrongSound'),
-            gameSound: document.getElementById('gameSound'),
-            winSound: document.getElementById('winSound')
-        };
-        // Helper functions
-        function getRandomNumber(min, max) {
-            return Math.floor(Math.random() * (max - min + 1)) + min;
         }
-        function generateQuestion() {
-            let num1, num2, answer, questionText;
-            let operationToUse = gameState.operation;
-            if (gameState.operationMode === 'mixed') {
-                // Randomly select an operation when in mixed mode
-                const operations = ['add', 'sub', 'mul', 'div'];
-                operationToUse = operations[Math.floor(Math.random() * operations.length)];
-            }
-            switch(operationToUse) {
-                case 'add':
-                    num1 = getRandomNumber(1, gameState.difficulty === 'easy' ? 10 : gameState.difficulty === 'medium' ? 20 : 50);
-                    num2 = getRandomNumber(1, gameState.difficulty === 'easy' ? 10 : gameState.difficulty === 'medium' ? 20 : 50);
-                    answer = num1 + num2;
-                    questionText = `${num1} + ${num2} = ?`;
-                    break;
-                case 'sub':
-                    num1 = getRandomNumber(1, gameState.difficulty === 'easy' ? 10 : gameState.difficulty === 'medium' ? 20 : 50);
-                    num2 = getRandomNumber(1, num1);
-                    answer = num1 - num2;
-                    questionText = `${num1} - ${num2} = ?`;
-                    break;
-                case 'mul':
-                    num1 = getRandomNumber(1, gameState.difficulty === 'easy' ? 5 : gameState.difficulty === 'medium' ? 10 : 12);
-                    num2 = getRandomNumber(1, gameState.difficulty === 'easy' ? 5 : gameState.difficulty === 'medium' ? 10 : 12);
-                    answer = num1 * num2;
-                    questionText = `${num1} × ${num2} = ?`;
-                    break;
-                case 'div':
-                    num2 = getRandomNumber(1, gameState.difficulty === 'easy' ? 5 : gameState.difficulty === 'medium' ? 10 : 12);
-                    answer = getRandomNumber(1, gameState.difficulty === 'easy' ? 5 : gameState.difficulty === 'medium' ? 10 : 12);
-                    num1 = num2 * answer;
-                    questionText = `${num1} ÷ ${num2} = ?`;
-                    break;
-            }
-            gameState.currentQuestion = { answer, questionText };
-            elements.question.textContent = questionText;
-            elements.answerInput.value = '';
-            elements.answerInput.focus();
-            // For multiple choice (uncomment if you want to add multiple choice answers)
-            // generateAnswerButtons(answer);
         }
-        // Uncomment this function if you want to add multiple choice answers
-        /*
-        function generateAnswerButtons(correctAnswer) {
-            const buttonsContainer = document.querySelector('#gameDisplay .justify-center');
-            buttonsContainer.innerHTML = '';
-            const answers = [correctAnswer];
-            // Generate 3 wrong answers
-            while(answers.length < 4) {
-                let wrongAnswer;
-                if(gameState.operation === 'add' || gameState.operation === 'mul') {
-                    wrongAnswer = correctAnswer + getRandomNumber(-3, 3);
-                } else {
-                    wrongAnswer = correctAnswer + getRandomNumber(-2, 2);
-                }
-                // Make sure wrong answer isn't correct and is positive
-                if(wrongAnswer !== correctAnswer && wrongAnswer > 0 && !answers.includes(wrongAnswer)) {
-                    answers.push(wrongAnswer);
-                }
             }
-            // Shuffle answers
-            answers.sort(() => Math.random() - 0.5);
-            // Create buttons
-            answers.forEach(answer => {
-                const button = document.createElement('button');
-                button.className = 'answer-btn bg-evaGreen hover:bg-evaGreen/80 text-white text-2xl font-bold w-16 h-16 rounded-full transition-all transform hover:scale-110';
-                button.textContent = answer;
-                button.addEventListener('click', function() {
-                    checkAnswer(parseInt(answer));
                 });
-                buttonsContainer.appendChild(button);
             });
         }
-        */
-        function checkAnswer(answer = null) {
-            const userAnswer = answer !== null ? answer : parseInt(elements.answerInput.value);
-            if(isNaN(userAnswer)) {
-                alert("Por favor, digite um número válido!");
                 return;
             }
-            gameState.totalQuestions++;
-            if(userAnswer === gameState.currentQuestion.answer) {
-                // Correct answer
-                const pointsToAdd = gameState.difficulty === 'easy' ? 1 : gameState.difficulty === 'medium' ? 2 : 3;
-                gameState.score += pointsToAdd;
-                gameState.correctAnswers++;
-                elements.score.textContent = gameState.score;
-                elements.correctSound.play();
-                showConfetti();
-                shakeElement(elements.question, 'correct');
-            } else {
-                // Wrong answer
-                elements.wrongSound.play();
-                shakeElement(elements.question, 'wrong');
             }
-            generateQuestion();
         }
-        function startTimer() {
-            clearInterval(gameState.timer);
-            gameState.timeLeft = 60;
-            elements.time.textContent = gameState.timeLeft;
-            gameState.timer = setInterval(() => {
-                gameState.timeLeft--;
-                elements.time.textContent = gameState.timeLeft;
-                if(gameState.timeLeft <= 0) {
-                    endGame();
                 }
-            }, 1000);
-        }
-        function startGame() {
-            // Always use mixed operations
-            gameState.operationMode = 'mixed';
-            gameState.operation = null;
-            // Reset game state
-            gameState.score = 0;
-            gameState.correctAnswers = 0;
-            gameState.totalQuestions = 0;
-            // Update UI
-            elements.score.textContent = gameState.score;
-            elements.startScreen.classList.add('hidden');
-            elements.gameDisplay.classList.remove('hidden');
-            elements.resultsScreen.classList.add('hidden');
-            // Play game sound
-            elements.gameSound.play();
-            // Start timer
-            startTimer();
-            // Generate first question
-            generateQuestion();
         }
-        function endGame() {
-            clearInterval(gameState.timer);
-            // Update results screen
-            elements.finalScore.textContent = `${gameState.score} pontos`;
-            elements.correctAnswers.textContent = gameState.correctAnswers;
-            elements.totalQuestions.textContent = gameState.totalQuestions;
-            // Show results
-            elements.gameDisplay.classList.add('hidden');
-            elements.resultsScreen.classList.remove('hidden');
-            // Play sounds
-            elements.gameSound.pause();
-            elements.gameSound.currentTime = 0;
-            elements.winSound.play();
         }
-        function showConfetti() {
-            for(let i = 0; i < 50; i++) {
-                const confetti = document.createElement('div');
-                confetti.className = 'confetti';
-                confetti.style.left = Math.random() * 100 + 'vw';
-                confetti.style.backgroundColor = `hsl(${Math.random() * 360}, 100%, 50%)`;
-                confetti.style.transform = `rotate(${Math.random() * 360}deg)`;
-                document.body.appendChild(confetti);
-                // Animation
-                setTimeout(() => {
-                    confetti.style.opacity = 1;
-                    confetti.style.top = Math.random() * 100 + 'vh';
-                    confetti.style.left = (parseFloat(confetti.style.left) + Math.random() * 20 - 10) + 'vw';
-                    confetti.style.width = (Math.random() * 10 + 5) + 'px';
-                    confetti.style.height = (Math.random() * 10 + 5) + 'px';
-                }, 1);
-                // Remove after animation
-                setTimeout(() => {
-                    confetti.remove();
-                }, 1000);
-            }
         }
-        function shakeElement(element, type) {
-            element.classList.add('animate-[shake_0.5s_ease-in-out]');
-            if(type === 'correct') {
-                element.classList.add('text-evaGreen');
-            } else {
-                element.classList.add('text-red-500');
-            }
-            setTimeout(() => {
-                element.classList.remove('animate-[shake_0.5s_ease-in-out]');
-                if(type === 'correct') {
-                    element.classList.remove('text-evaGreen');
                 } else {
-                    element.classList.remove('text-red-500');
                 }
-                element.classList.add('text-evaPurple');
-            }, 500);
         }
-        // Event Listeners
-        elements.btnStart.addEventListener('click', startGame);
-        elements.btnPlayAgain.addEventListener('click', startGame);
-        elements.btnCheck.addEventListener('click', () => checkAnswer());
-        elements.answerInput.addEventListener('keypress', (e) => {
-            if(e.key === 'Enter') {
-                checkAnswer();
             }
-        });
-        elements.btnSkip.addEventListener('click', generateQuestion);
-        // Difficulty buttons
-        document.querySelectorAll('.difficulty-btn').forEach(btn => {
-            btn.addEventListener('click', function() {
-                gameState.difficulty = this.dataset.level;
-                document.querySelectorAll('.difficulty-btn').forEach(b => {
-                    b.classList.remove('ring-4');
                 });
-                this.classList.add('ring-4');
-                if(this.dataset.level === 'easy') {
-                    this.classList.add('ring-green-500/50');
-                } else if(this.dataset.level === 'medium') {
-                    this.classList.add('ring-yellow-500/50');
-                } else {
-                    this.classList.add('ring-red-500/50');
-                }
-            });
-        });
-        // Set easy as default difficulty
-        document.querySelector('[data-level="easy"]').classList.add('ring-4', 'ring-green-500/50');
     </script>
 <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=danielclopes/eva-calculator" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
 </html>

 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>NeuroAvalia - Identificação de Neurodivergência</title>
     <script src="https://cdn.tailwindcss.com"></script>
+    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap" rel="stylesheet">
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
     <style>
         body {
+            font-family: 'Poppins', sans-serif;
+            background-color: #f8f9fa;
         }
+        .progress-bar {
+            transition: width 0.5s ease-in-out;
+        }
+        .option:hover {
+            transform: translateY(-2px);
+            box-shadow: 0 6px 12px rgba(0, 0, 0, 0.1);
         }
+        .result-chart {
+            height: 300px;
         }
+        .gradient-text {
+            background: linear-gradient(90deg, #4f46e5, #8b5cf6);
+            -webkit-background-clip: text;
+            background-clip: text;
+            color: transparent;
         }
+        .neuro-pattern {
+            background-image: radial-gradient(circle, rgba(99, 102, 241, 0.1) 1px, transparent 1px);
+            background-size: 20px 20px;
         }
+        .category-card {
+            transition: all 0.3s ease;
         }
+        .category-card:hover {
+            transform: translateY(-5px);
+            box-shadow: 0 10px 25px rgba(79, 70, 229, 0.2);
         }
     </style>
 </head>
+<body class="min-h-screen bg-gradient-to-b from-indigo-50 to-blue-50 neuro-pattern">
+    <div class="container mx-auto px-4 py-8 max-w-6xl">
+        <!-- Floating Action Button -->
+        <div class="fixed bottom-6 right-6 z-50">
+            <button id="help-btn" class="w-14 h-14 rounded-full bg-indigo-600 shadow-lg text-white flex items-center justify-center hover:bg-indigo-700 transition-all duration-300 transform hover:scale-110 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2">
+                <i class="fas fa-question text-xl"></i>
+            </button>
         </div>
+        <!-- Header Section -->
+        <header class="text-center mb-10">
+            <div class="inline-block p-3 bg-indigo-100 rounded-lg mb-6">
+                <i class="fas fa-brain text-3xl text-indigo-600"></i>
+            </div>
+            <h1 class="text-4xl md:text-5xl font-bold gradient-text mb-4">NeuroAvalia</h1>
+            <p class="text-lg md:text-xl text-gray-700 max-w-3xl mx-auto">
+                Ferramenta científica para identificação de neurodivergência e altas habilidades
+            </p>
+            <div class="w-24 h-1.5 bg-gradient-to-r from-indigo-500 to-purple-500 mx-auto mt-4 rounded-full"></div>
+        </header>
+        <!-- Welcome Card -->
+        <div id="welcome-card" class="bg-white rounded-2xl shadow-xl p-6 md:p-8 mb-8 transition-all duration-500 transform hover:shadow-2xl">
+            <div class="flex flex-col md:flex-row items-center gap-6 md:gap-8">
+                <div class="flex-shrink-0 mb-4 md:mb-0">
+                    <div class="w-24 h-24 md:w-32 md:h-32 rounded-full bg-gradient-to-br from-indigo-100 to-purple-100 flex items-center justify-center shadow-inner">
+                        <i class="fas fa-brain text-4xl md:text-5xl text-indigo-600"></i>
+                    </div>
+                </div>
+                <div class="flex-1">
+                    <h2 class="text-2xl font-semibold text-gray-800 mb-3">Sobre esta avaliação</h2>
+                    <p class="text-gray-600 mb *-4">
+                        O <span class="font-medium text-indigo-600">NeuroAvalia</span> é um instrumento desenvolvido com base nas principais pesquisas científicas sobre neurodivergência, incluindo características de autismo, TDAH, altas habilidades e outras formas de neurodiversidade.
+                    </p>
+                    <div class="bg-indigo-50 border border-indigo-100 rounded-lg p-4 mb-4">
+                        <div class="flex items-start">
+                            <div class="flex-shrink-0 mt-0.5 mr-3 text-indigo-500">
+                                <i class="fas fa-flask"></i>
+                            </div>
+                            <div>
+                                <h4 class="font-medium text-indigo-800 mb-1">Base Científica</h4>
+                                <p class="text-sm text-indigo-700">Baseado em critérios do DSM-5, CID-11 e pesquisas atuais sobre neurodiversidade</p>
+                            </div>
+                        </div>
+                    </div>
+                    <button onclick="startAssessment()" class="w-full md:w-auto bg-gradient-to-r from-indigo-600 to-purple-600 hover:from-indigo-700 hover:to-purple-700 text-white font-medium py-3 px-8 rounded-lg transition duration-300 transform hover:scale-105 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-opacity-50 shadow-md hover:shadow-lg">
+                        <i class="fas fa-play mr-2"></i> Iniciar Avaliação
                     </button>
+                </div>
+            </div>
+        </div>
+        <!-- Assessment Container -->
+        <div id="assessment-container" class="hidden bg-white rounded-2xl shadow-xl p-6 md:p-8 mb-8">
+            <!-- Progress Bar -->
+            <div class="mb-8">
+                <div class="flex justify-between mb-2">
+                    <span class="text-sm font-medium text-indigo-700">Progresso</span>
+                    <span id="progress-percentage" class="text-sm font-medium text-indigo-700">0%</span>
+                </div>
+                <div class="w-full bg-gray-200 rounded-full h-2.5 overflow-hidden">
+                    <div id="progress-bar" class="progress-bar bg-gradient-to-r from-indigo-500 to-purple-500 h-2.5 rounded-full" style="width: 0%"></div>
+                </div>
+            </div>
+            <!-- Question Container -->
+            <div id="question-container">
+                <!-- Questions will be inserted here dynamically -->
+            </div>
+            <!-- Navigation Buttons -->
+            <div class="flex justify-between mt-10">
+                <button id="prev-btn" onclick="prevQuestion()" class="hidden bg-gray-200 hover:bg-gray-300 text-gray-800 font-medium py-2 px-6 rounded-lg transition duration-300 focus:outline-none focus:ring-2 focus:ring-gray-400 focus:ring-opacity-50">
+                    <i class="fas fa-arrow-left mr-2"></i> Anterior
+                </button>
+                <div class="ml-auto flex gap-3">
+                    <button id="next-btn" onclick="nextQuestion()" class="bg-indigo-600 hover:bg-indigo-700 text-white font-medium py-2 px-6 rounded-lg transition duration-300 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-opacity-50 shadow-sm">
+                        Próxima <i class="fas fa-arrow-right ml-2"></i>
                     </button>
+                    <button id="submit-btn" onclick="submitAssessment()" class="hidden bg-gradient-to-r from-green-600 to-teal-500 hover:from-green-700 hover:to-teal-600 text-white font-medium py-2 px-6 rounded-lg transition duration-300 focus:outline-none focus:ring-2 focus:ring-green-500 focus:ring-opacity-50 shadow-sm">
+                        Finalizar <i class="fas fa-check ml-2"></i>
                     </button>
                 </div>
             </div>
+        </div>
+        <!-- Results Container -->
+        <div id="results-container" class="hidden bg-white rounded-2xl shadow-xl p-6 md:p-8">
+            <div class="text-center mb-10">
+                <div class="inline-block p-5 bg-gradient-to-br from-indigo-100 to-purple-100 rounded-full mb-6 shadow-md">
+                    <i class="fas fa-chart-pie text-4xl bg-gradient-to-r from-indigo-600 to-purple-600 bg-clip-text text-transparent"></i>
+                </div>
+                <h2 class="text-3xl font-bold gradient-text mb-3">Seu Resultado</h2>
+                <p class="text-gray-600 max-w-2xl mx-auto">
+                    Baseado nas suas respostas, este é seu perfil de neurodivergência com comparações estatísticas
+                </p>
+                <div class="w-16 h-1 bg-gradient-to-r from-indigo-500 to-purple-500 mx-auto mt-4 rounded-full"></div>
+            </div>
+            <!-- Score Summary -->
+            <div class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-10">
+                <div class="category-card bg-blue-50 rounded-xl p-6 text-center border border-blue-100">
+                    <div class="inline-block p-3 bg-blue-100 rounded-full mb-3">
+                        <i class="fas fa-lightbulb text-xl text-blue-600"></i>
+                    </div>
+                    <div class="text-4xl font-bold text-blue-700 mb-2" id="cognitive-score">0</div>
+                    <div class="text-lg font-medium text-blue-800 mb-3">Cognitivo</div>
+                    <div class="h-2 bg-blue-200 rounded-full mb-4 w-3/4 mx-auto">
+                        <div class="h-2 bg-blue-600 rounded-full" id="cognitive-bar" style="width: 0%"></div>
                     </div>
+                    <p class="text-sm text-blue-900 opacity-80">Processamento de informações e padrões de pensamento</p>
+                </div>
+                <div class="category-card bg-purple-50 rounded-xl p-6 text-center border border-purple-100">
+                    <div class="inline-block p-3 bg-purple-100 rounded-full mb-3">
+                        <i class="fas fa-heart text-xl text-purple-600"></i>
+                    </div>
+                    <div class="text-4xl font-bold text-purple-700 mb-2" id="emotional-score">0</div>
+                    <div class="text-lg font-medium text-purple-800 mb-3">Emocional</div>
+                    <div class="h-2 bg-purple-200 rounded-full mb-4 w-3/4 mx-auto">
+                        <div class="h-2 bg-purple-600 rounded-full" id="emotional-bar" style="width: 0%"></div>
                     </div>
+                    <p class="text-sm text-purple-900 opacity-80">Regulação emocional e intensidade de sentimentos</p>
                 </div>
+                <div class="category-card bg-green-50 rounded-xl p-6 text-center border border-green-100">
+                    <div class="inline-block p-3 bg-green-100 rounded-full mb-3">
+                        <i class="fas fa-hand-sparkles text-xl text-green-600"></i>
+                    </div>
+                    <div class="text-4xl font-bold text-green-700 mb-2" id="sensory-score">0</div>
+                    <div class="text-lg font-medium text-green-800 mb-3">Sensorial</div>
+                    <div class="h-2 bg-green-200 rounded-full mb-4 w-3/4 mx-auto">
+                        <div class="h-2 bg-green-600 rounded-full" id="sensory-bar" style="width: 0%"></div>
+                    </div>
+                    <p class="text-sm text-green-900 opacity-80">Sensibilidade a estímulos do ambiente</p>
                 </div>
+            </div>
+            <!-- Detailed Analysis -->
+            <div class="bg-gray-50 rounded-2xl p-6 mb-10 border border-gray-200">
+                <div class="flex items-center mb-5">
+                    <div class="w-6 h-6 rounded-full bg-indigo-600 flex items-center justify-center mr-3">
+                        <i class="fas fa-chart-line text-white text-xs"></i>
+                    </div>
+                    <h3 class="text-xl font-semibold text-gray-800">Análise Detalhada</h3>
                 </div>
+                <div class="space-y-4">
+                    <p class="text-gray-700" id="detailed-analysis">
+                        <!-- Analysis will be inserted here -->
+                    </p>
                 </div>
+                <div class="mt-8">
+                    <h4 class="text-lg font-medium text-gray-800 mb-4 flex items-center">
+                        <i class="fas fa-star text-yellow-500 mr-2"></i> Áreas com maior pontuação
+                    </h4>
+                    <div id="strengths-list" class="grid grid-cols-1 md:grid-cols-2 gap-4">
+                        <!-- Strengths will be inserted here -->
+                    </div>
                 </div>
+                <div class="mt-8 bg-indigo-50 border-l-4 border-indigo-500 p-4 rounded-lg">
+                    <div class="flex">
+                        <div class="flex-shrink-0 text-indigo-500 mt-0.5">
+                            <i class="fas fa-info-circle"></i>
+                        </div>
+                        <div class="ml-3">
+                            <h4 class="text-sm font-medium text-indigo-800">Importante</h4>
+                            <p class="text-sm text-indigo-700 mt-1">
+                                Esta avaliação não substitui um diagnóstico profissional. Se os resultados indicarem alta probabilidade de neurodivergência, recomendamos consultar um especialista para avaliação completa.
+                            </p>
+                        </div>
                     </div>
                 </div>
             </div>
+            <!-- Resources Section -->
+            <div class="mb-8">
+                <h3 class="text-xl font-semibold text-gray-800 mb-6 flex items-center">
+                    <i class="fas fa-book-open text-indigo-600 mr-3"></i> Recursos e Próximos Passos
+                </h3>
+                <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
+                    <a href="#" class="flex items-start p-4 bg-white border border-gray-200 rounded-xl hover:shadow-md transition hover:border-indigo-300 group">
+                        <div class="flex-shrink-0 p-3 bg-indigo-100 rounded-lg text-indigo-600 mr-4 group-hover:bg-indigo-200 transition">
+                            <i class="fas fa-book"></i>
+                        </div>
+                        <div>
+                            <h4 class="font-medium text-gray-800 mb-1 group-hover:text-indigo-600 transition">Leituras recomendadas</h4>
+                            <p class="text-sm text-gray-600">Materiais científicos sobre neurodivergência e altas habilidades</p>
+                        </div>
+                    </a>
+                    <a href="#" class="flex items-start p-4 bg-white border border-gray-200 rounded-xl hover:shadow-md transition hover:border-indigo-300 group">
+                        <div class="flex-shrink-0 p-3 bg-blue-100 rounded-lg text-blue-600 mr-4 group-hover:bg-blue-200 transition">
+                            <i class="fas fa-user-md"></i>
+                        </div>
+                        <div>
+                            <h4 class="font-medium text-gray-800 mb-1 group-hover:text-indigo-600 transition">Profissionais especializados</h4>
+                            <p class="text-sm text-gray-600">Encontre especialistas em sua região para avaliação detalhada</p>
+                        </div>
+                    </a>
+                    <a href="#" class="flex items-start p-4 bg-white border border-gray-200 rounded-xl hover:shadow-md transition hover:border-indigo-300 group">
+                        <div class="flex-shrink-0 p-3 bg-purple-100 rounded-lg text-purple-600 mr-4 group-hover:bg-purple-200 transition">
+                            <i class="fas fa-users"></i>
+                        </div>
+                        <div>
+                            <h4 class="font-medium text-gray-800 mb-1 group-hover:text-indigo-600 transition">Comunidades de apoio</h4>
+                            <p class="text-sm text-gray-600">Conecte-se com outras pessoas neurodivergentes</p>
+                        </div>
+                    </a>
+                    <a href="#" class="flex items-start p-4 bg-white border border-gray-200 rounded-xl hover:shadow-md transition hover:border-indigo-300 group">
+                        <div class="flex-shrink-0 p-3 bg-green-100 rounded-lg text-green-600 mr-4 group-hover:bg-green-200 transition">
+                            <i class="fas fa-tools"></i>
+                        </div>
+                        <div>
+                            <h4 class="font-medium text-gray-800 mb-1 group-hover:text-indigo-600 transition">Estratégias adaptativas</h4>
+                            <p class="text-sm text-gray-600">Técnicas para lidar com sensibilidades neurodivergentes</p>
+                        </div>
+                    </a>
                 </div>
             </div>
+            <div class="text-center">
+                <button onclick="restartAssessment()" class="bg-gradient-to-r from-indigo-600 to-purple-600 hover:from-indigo-700 hover:to-purple-700 text-white font-medium py-2.5 px-8 rounded-lg transition duration-300 transform hover:scale-105 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-opacity-50 shadow-md hover:shadow-lg inline-flex items-center">
+                    <i class="fas fa-redo mr-2"></i> Refazer Teste
+                </button>
+            </div>
+        </div>
+    </div>
+    <footer class="bg-white py-8 mt-12 border-t border-gray-200">
+        <div class="container mx-auto px-4">
+            <div class="text-center">
+                <img src="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNDAiIGhlaWdodD0iNDAiIHZpZXdCb3g9IjAgMCA0MCA0MCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTIwIDBDOC45NTQgMCAwIDguOTU0IDAgMjBDMCAzMS4wNDYgOC45NTQgNDAgMjAgNDBDMzEuMDQ2IDQwIDQwIDMxLjA0NiA0MCAyMEM0MCA4Ljk1NCAzMS4wNDYgMCAyMCAwWiIgZmlsbD0idXJsKCNwYWludDBfbGluZWFyKSIvPgo8cGF0aCBkPSJNMTYuMzgxIDE0LjI4NEMxNS4yIDExLjM2NiAxMy4wODIgMTAgMTAgMTBDNS41ODE3IDEwIDIgMTMuNTgyIDIgMThDMiAyMi40MTggNS41ODE3IDI2IDEwIDI2QzEzLjA4MiAyNiAxNS4yIDI0LjYzNCAxNi4zODEgMjEuNzE2TDMwIDE4TDE2LjM4MSAxNC4yODRaIiBmaWxsPSJ3aGl0ZSIvPgo8ZGVmcz4KPGxpbmVhckdyYWRpZW50IGlkPSJwYWludDBfbGluZWFyIiB4MT0iMjAiIHkxPSIwIiB4Mj0iMjAiIHkyPSI0MCIgZ3JhZGllbnRVbml0cz0idXNlclNwYWNlT25Vc2UiPgo8c3RvcCBzdG9wLWNvbG9yPSIjNEY0NkU1Ii8+CjxzdG9wIG9mZnNldD0iMSIgc3RvcC1jb2xvcj0iIzhCNUNGNiIvPgo8L2xpbmVhckdyYWRpZW50Pgo8L2RlZnM+Cjwvc3ZnPg==" alt="NeuroAvalia Logo" class="h-10 w-10 mx-auto mb-4">
+                <p class="text-gray-600 text-sm">© 2023 NeuroAvalia. Baseado em pesquisas científicas sobre neurodivergência e altas habilidades.</p>
+                <p class="text-gray-500 text-xs mt-2">Este instrumento não substitui avaliação profissional.</p>
+            </div>
         </div>
+    </footer>
+    <!-- Help Modal -->
+    <div id="help-modal" class="hidden fixed inset-0 bg-gray-600 bg-opacity-50 flex items-center justify-center z-50 px-4">
+        <div class="bg-white rounded-xl shadow-2xl max-w-md w-full p-6">
+            <div class="flex justify-between items-center mb-4">
+                <h3 class="text-xl font-bold text-gray-800">
+                    <i class="fas fa-info-circle text-indigo-600 mr-2"></i> Ajuda
+                </h3>
+                <button onclick="toggleHelpModal()" class="text-gray-400 hover:text-gray-600 focus:outline-none">
+                    <i class="fas fa-times"></i>
+                </button>
+            </div>
+            <div class="space-y-4 text-gray-600">
+                <p>Esta avaliação contém 20 perguntas cuidadosamente selecionadas para identificar traços de neurodivergência em três áreas principais: cognitiva, emocional e sensorial.</p>
+                <div class="bg-indigo-50 p-4 rounded-lg">
+                    <h4 class="font-medium text-indigo-800 mb-2">Como responder:</h4>
+                    <ul class="list-disc pl-5 space-y-1">
+                        <li>Selecione a opção que mais se aproxima da sua experiência</li>
+                        <li>Não há respostas certas ou erradas</li>
+                        <li>Responda com base no que é verdadeiro para você na maior parte do tempo</li>
+                    </ul>
+                </div>
+                <p>Ao final, você receberá um relatório personalizado com suas pontuações e interpretações baseadas em dados científicos.</p>
+            </div>
+            <button onclick="toggleHelpModal()" class="mt-6 w-full bg-indigo-600 hover:bg-indigo-700 text-white font-medium py-2 px-4 rounded-lg transition duration-300 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-opacity-50">
+                Entendi
+            </button>
         </div>
     </div>
     <script>
+        // Questions database
+        const questions = [
+            {
+                id: 1,
+                category: 'cognitive',
+                text: "Com que frequência você percebe padrões, conexões ou relações que outras pessoas não percebem?",
+                options: [
+                    { text: "Raramente ou nunca", score: 1 },
+                    { text: "Ocasionalmente", score: 2 },
+                    { text: "Frequentemente", score: 4 },
+                    { text: "Quase sempre", score: 5 }
+                ]
+            },
+            {
+                id: 16,
+                category: 'cognitive',
+                text: "Você tem facilidade para aprender conceitos complexos rapidamente?",
+                options: [
+                    { text: "Tenho dificuldade", score: 1 },
+                    { text: "Às vezes", score: 3 },
+                    { text: "Com frequência", score: 4 },
+                    { text: "Sim, quase sempre", score: 5 }
+                ]
+            },
+            {
+                id: 17,
+                category: 'cognitive',
+                text: "Você se frustra quando outros não acompanham seu raciocínio?",
+                options: [
+                    { text: "Nunca", score: 1 },
+                    { text: "Raramente", score: 2 },
+                    { text: "Às vezes", score: 4 },
+                    { text: "Frequentemente", score: 5 }
+                ]
+            },
+            {
+                id: 2,
+                category: 'cognitive',
+                text: "Você tem curiosidade intensa sobre vários tópicos diferentes?",
+                options: [
+                    { text: "Não especialmente", score: 1 },
+                    { text: "Tenho algumas áreas de interesse", score: 3 },
+                    { text: "Sim, sobre vários assuntos", score: 4 },
+                    { text: "Sim, sobre muitos assuntos e com grande intensidade", score: 5 }
+                ]
+            },
+            {
+                id: 3,
+                category: 'emotional',
+                text: "Você já foi descrito como muito intenso(a) emocionalmente?",
+                options: [
+                    { text: "Nunca", score: 1 },
+                    { text: "Raramente", score: 2 },
+                    { text: "Às vezes", score: 3 },
+                    { text: "Frequentemente", score: 4 },
+                    { text: "Sempre ou quase sempre", score: 5 }
+                ]
+            },
+            {
+                id: 4,
+                category: 'emotional',
+                text: "Com que frequência você sente emoções com extrema intensidade (alegria, tristeza, raiva, etc.)?",
+                options: [
+                    { text: "Quase nunca", score: 1 },
+                    { text: "De vez em quando", score: 2 },
+                    { text: "Regularmente", score: 3 },
+                    { text: "Frequentemente", score: 4 },
+                    { text: "Quase sempre", score: 5 }
+                ]
+            },
+            {
+                id: 5,
+                category: 'sensory',
+                text: "Você é particularmente sensível a sons, luzes, texturas ou cheiros que não parecem incomodar outras pessoas?",
+                options: [
+                    { text: "Nunca", score: 1 },
+                    { text: "Raramente", score: 2 },
+                    { text: "Às vezes", score: 3 },
+                    { text: "Frequentemente", score: 4 },
+                    { text: "Sempre ou quase sempre", score: 5 }
+                ]
+            },
+            {
+                id: 6,
+                category: 'sensory',
+                text: "Você fica sobrecarregado(a) em ambientes com muita estimulação sensorial (como shoppings, festas, locais barulhentos)?",
+                options: [
+                    { text: "Nunca", score: 1 },
+                    { text: "Raramente", score: 2 },
+                    { text: "Às vezes", score: 3 },
+                    { text: "Frequentemente", score: 4 },
+                    { text: "Sempre ou quase sempre", score: 5 }
+                ]
+            },
+            {
+                id: 7,
+                category: 'cognitive',
+                text: "Você pensa principalmente em imagens ou padrões em vez de palavras?",
+                options: [
+                    { text: "Quase nunca", score: 1 },
+                    { text: "Ocasionalmente", score: 2 },
+                    { text: "Regularmente", score: 3 },
+                    { text: "Frequentemente", score: 4 },
+                    { text: "Quase sempre", score: 5 }
+                ]
+            },
+            {
+                id: 8,
+                category: 'emotional',
+                text: "Você tem forte empatia e pode sentir o que os outros estão sentindo?",
+                options: [
+                    { text: "Não especialmente", score: 1 },
+                    { text: "Às vezes", score: 3 },
+                    { text: "Frequentemente", score: 4 },
+                    { text: "Muito intensamente, às vezes é avassalador", score: 5 }
+                ]
+            },
+            {
+                id: 9,
+                category: 'cognitive',
+                text: "Você aprende melhor quando pode explorar um tópico profundamente em vez de seguir uma estrutura pré-definida?",
+                options: [
+                    { text: "Prefiro seguir a estrutura definida", score: 1 },
+                    { text: "Às vezes gosto de explorar", score: 3 },
+                    { text: "Geralmente prefiro explorar por conta própria", score: 4 },
+                    { text: "Sempre aprendo melhor explorando profundamente", score: 5 }
+                ]
+            },
+            {
+                id: 10,
+                category: 'sensory',
+                text: "Você tem reações físicas intensas (como náusea ou dolor) a certos estímulos sensoriais?",
+                options: [
+                    { text: "Nunca", score: 1 },
+                    { text: "Raramente", score: 2 },
+                    { text: "Às vezes", score: 3 },
+                    { text: "Frequentemente", score: 4 },
+                    { text: "Sempre ou quase sempre", score: 5 }
+                ]
+            },
+            {
+                id: 11,
+                category: 'cognitive',
+                text: "Com que frequência você se envolve em pensamento divergente (várias idéias ou soluções para um problema)?",
+                options: [
+                    { text: "Raramente", score: 1 },
+                    { text: "Ocasionalmente", score: 2 },
+                    { text: "Regularmente", score: 3 },
+                    { text: "Frequentemente", score: 4 },
+                    { text: "Quase sempre", score: 5 }
+                ]
+            },
+            {
+                id: 12,
+                category: 'emotional',
+                text: "Você já sentiu que suas emoções são mais intensas do que as das pessoas ao seu redor?",
+                options: [
+                    { text: "Nunca", score: 1 },
+                    { text: "Raramente", score: 2 },
+                    { text: "Às vezes", score: 3 },
+                    { text: "Frequentemente", score: 4 },
+                    { text: "Sempre ou quase sempre", score: 5 }
+                ]
+            },
+            {
+                id: 13,
+                category: 'sensory',
+                text: "Você tem preferências muito específicas por certos tipos de tecidos, sabores ou sons?",
+                options: [
+                    { text: "Nenhuma preferência especial", score: 1 },
+                    { text: "Algumas pequenas preferências", score: 2 },
+                    { text: "Algumas preferências marcantes", score: 3 },
+                    { text: "Muitas preferências fortes", score: 4 },
+                    { text: "Preferências muito específicas e intensas", score: 5 }
+                ]
+            },
+            {
+                id: 14,
+                category: 'cognitive',
+                text: "Você tende a pensar de maneira não linear (saltando entre idéias em vez de seguir uma sequência lógica)?",
+                options: [
+                    { text: "Quase nunca", score: 1 },
+                    { text: "Ocasionalmente", score: 2 },
+                    { text: "Regularmente", score: 3 },
+                    { text: "Frequentemente", score: 4 },
+                    { text: "Quase sempre", score: 5 }
+                ]
+            },
+            {
+                id: 15,
+                category: 'emotional',
+                text: "Você tem dificuldade em regular suas emoções (calmar-se quando está agitado ou animar-se quando está desanimado)?",
+                options: [
+                    { text: "Nunca", score: 1 },
+                    { text: "Raramente", score: 2 },
+                    { text: "Às vezes", score: 3 },
+                    { text: "Frequentemente", score: 4 },
+                    { text: "Sempre ou quase sempre", score: 5 }
+                ]
+            },
+            {
+                id: 18,
+                category: 'emotional',
+                text: "Você se envolve emocionalmente com personagens de livros/filmes como se fossem reais?",
+                options: [
+                    { text: "Quase nunca", score: 1 },
+                    { text: "Raramente", score: 2 },
+                    { text: "Às vezes", score: 3 },
+                    { text: "Frequentemente", score: 4 },
+                    { text: "Quase sempre", score: 5 }
+                ]
+            },
+            {
+                id: 19,
+                category: 'sensory',
+                text: "Você evita certas atividades devido à sensibilidade sensorial?",
+                options: [
+                    { text: "Nunca", score: 1 },
+                    { text: "Raramente", score: 2 },
+                    { text: "Às vezes", score: 4 },
+                    { text: "Frequentemente", score: 5 }
+                ]
+            },
+            {
+                id: 20,
+                category: 'sensory',
+                text: "Você tem reações físicas intensas a certos alimentos (textura, temperatura, sabor)?",
+                options: [
+                    { text: "Nunca", score: 1 },
+                    { text: "1-2 alimentos", score: 2 },
+                    { text: "3-5 alimentos", score: 3 },
+                    { text: "6-10 alimentos", score: 4 },
+                    { text: "Mais de 10 alimentos", score: 5 }
+                ]
+            }
+        ];
+        // Comparative data for results (percentiles)
+        const comparativeData = {
+            cognitive: {
+                10: 20, 20: 30, 30: 45, 40: 55, 50: 65,
+                60: 72, 70: 79, 80: 85, 90: 90, 95: 95
+            },
+            emotional: {
+                10: 25, 20: 35, 30: 45, 40: 55, 50: 62,
+                60: 69, 70: 75, 80: 81, 90: 88, 95: 93
+            },
+            sensory: {
+                10: 15, 20: 30, 30: 42, 40: 52, 50: 60,
+                60: 68, 70: 74, 80: 80, 90: 87, 95: 94
+            }
         };
+        // Assessment state
+        let currentQuestionIndex = 0;
+        let answers = [];
+        let scores = { cognitive: 0, emotional: 0, sensory: 0 };
         // DOM elements
+        const welcomeCard = document.getElementById('welcome-card');
+        const assessmentContainer = document.getElementById('assessment-container');
+        const questionContainer = document.getElementById('question-container');
+        const resultsContainer = document.getElementById('results-container');
+        const progressBar = document.getElementById('progress-bar');
+        const progressPercentage = document.getElementById('progress-percentage');
+        const prevBtn = document.getElementById('prev-btn');
+        const nextBtn = document.getElementById('next-btn');
+        const submitBtn = document.getElementById('submit-btn');
+        const helpBtn = document.getElementById('help-btn');
+        const helpModal = document.getElementById('help-modal');
+        // Toggle help modal
+        function toggleHelpModal() {
+            helpModal.classList.toggle('hidden');
         }
+        // Event listeners
+        helpBtn.addEventListener('click', toggleHelpModal);
+        // Start the assessment
+        function startAssessment() {
+            welcomeCard.classList.add('hidden');
+            assessmentContainer.classList.remove('hidden');
+            showQuestion(currentQuestionIndex);
+            updateProgress();
+            window.scrollTo({ top: 0, behavior: 'smooth' });
         }
+        // Show a specific question
+        function showQuestion(index) {
+            // Reset question container
+            questionContainer.innerHTML = '';
+            // Get current question
+            const question = questions[index];
+            // Create question element
+            const questionElement = document.createElement('div');
+            questionElement.className = 'question mb-8 animate-fade-in';
+            questionElement.style.animation = 'fadeIn 0.3s ease-out';
+            // Add question text
+            const questionText = document.createElement('h3');
+            questionText.className = 'text-xl md:text-2xl font-semibold text-gray-800 mb-6';
+            questionText.textContent = `${index + 1}. ${question.text}`;
+            questionElement.appendChild(questionText);
+            // Add category indicator
+            const categoryLabel = document.createElement('div');
+            categoryLabel.className = 'inline-block text-xs font-medium px-2 py-1 rounded mb-3 ';
+            if (question.category === 'cognitive') {
+                categoryLabel.className += 'bg-blue-100 text-blue-800';
+                categoryLabel.innerHTML = '<i class="fas fa-brain mr-1"></i> Cognitivo';
+            } else if (question.category === 'emotional') {
+                categoryLabel.className += 'bg-purple-100 text-purple-800';
+                categoryLabel.innerHTML = '<i class="fas fa-heart mr-1"></i> Emocional';
+            } else {
+                categoryLabel.className += 'bg-green-100 text-green-800';
+                categoryLabel.innerHTML = '<i class="fas fa-hand-sparkles mr-1"></i> Sensorial';
             }
+            questionText.insertBefore(categoryLabel, questionText.firstChild);
+            // Add options
+            const optionsContainer = document.createElement('div');
+            optionsContainer.className = 'space-y-3';
+            question.options.forEach((option, optionIndex) => {
+                const optionElement = document.createElement('div');
+                optionElement.className = `option cursor-pointer bg-white hover:bg-indigo-50 border ${answers[index] === optionIndex ? 'border-indigo-300 bg-indigo-50' : 'border-gray-200'} rounded-lg p-4 transition duration-300 group`;
+                optionElement.innerHTML = `
+                    <div class="flex items-center">
+                        <div class="w-5 h-5 rounded-full border ${answers[index] === optionIndex ? 'border-indigo-500 bg-indigo-500' : 'border-gray-300 group-hover:border-indigo-300'} mr-3 flex-shrink-0 flex items-center justify-center transition">
+                            ${answers[index] === optionIndex ? '<i class="fas fa-check text-white text-xs"></i>' : ''}
+                        </div>
+                        <div class="text-gray-700 group-hover:text-indigo-700 transition">${option.text}</div>
+                    </div>
+                `;
+                // Add click event to select option
+                optionElement.addEventListener('click', () => {
+                    // Store answer
+                    answers[index] = optionIndex;
+                    // Re-render options to show selection
+                    showQuestion(index);
+                    // Enable next/submit button
+                    if (index === questions.length - 1) {
+                        nextBtn.classList.add('hidden');
+                        submitBtn.classList.remove('hidden');
+                    }
                 });
+                optionsContainer.appendChild(optionElement);
             });
+            questionElement.appendChild(optionsContainer);
+            questionContainer.appendChild(questionElement);
+            // Update navigation buttons
+            prevBtn.classList.toggle('hidden', index === 0);
         }
+        // Go to next question
+        function nextQuestion() {
+            if (answers[currentQuestionIndex] === undefined) {
+                alert('Por favor, selecione uma resposta antes de continuar.');
                 return;
             }
+            currentQuestionIndex++;
+            showQuestion(currentQuestionIndex);
+            updateProgress();
+            window.scrollTo({ top: 0, behavior: 'smooth' });
+        }
+        // Go to previous question
+        function prevQuestion() {
+            currentQuestionIndex--;
+            showQuestion(currentQuestionIndex);
+            updateProgress();
+            window.scrollTo({ top: 0, behavior: 'smooth' });
+        }
+        // Update progress bar
+        function updateProgress() {
+            const progress = ((currentQuestionIndex + 1) / questions.length) * 100;
+            progressBar.style.width = `${progress}%`;
+            progressPercentage.textContent = `${Math.round(progress)}%`;
+        }
+        // Submit assessment and show results
+        function submitAssessment() {
+            if (answers[currentQuestionIndex] === undefined) {
+                alert('Por favor, selecione uma resposta antes de finalizar.');
+                return;
             }
+            calculateScores();
+            showResults();
+            assessmentContainer.classList.add('hidden');
+            resultsContainer.classList.remove('hidden');
+            window.scrollTo({ top: 0, behavior: 'smooth' });
         }
+        // Calculate scores from answers
+        function calculateScores() {
+            // Reset scores
+            scores = { cognitive: 0, emotional: 0, sensory: 0 };
+            // Count questions per category to calculate averages later
+            const counts = { cognitive: 0, emotional: 0, sensory: 0 };
+            // Sum scores for each category
+            questions.forEach((question, index) => {
+                if (answers[index] !== undefined) {
+                    const selectedOption = question.options[answers[index]];
+                    scores[question.category] += selectedOption.score;
+                    counts[question.category]++;
                 }
+            });
+            // Calculate average scores (percentage of max possible score)
+            ['cognitive', 'emotional', 'sensory'].forEach(category => {
+                if (counts[category] > 0) {
+                    const maxPossible = counts[category] * 5;
+                    scores[category] = Math.round((scores[category] / maxPossible) * 100);
+                }
+            });
         }
+        // Show results page
+        function showResults() {
+            // Update score displays with animation
+            animateValue('cognitive-score', 0, scores.cognitive, 1000);
+            animateValue('emotional-score', 0, scores.emotional, 1000);
+            animateValue('sensory-score', 0, scores.sensory, 1000);
+            // Update progress bars with animation
+            animateProgressBar('cognitive-bar', scores.cognitive);
+            animateProgressBar('emotional-bar', scores.emotional);
+            animateProgressBar('sensory-bar', scores.sensory);
+            // Generate analysis text
+            const analysis = generateAnalysis();
+            document.getElementById('detailed-analysis').innerHTML = analysis.text;
+            // Add strengths
+            const strengthsList = document.getElementById('strengths-list');
+            strengthsList.innerHTML = '';
+            analysis.strengths.forEach(strength => {
+                const strengthItem = document.createElement('div');
+                strengthItem.className = 'flex items-start p-4 bg-white border border-gray-200 rounded-lg hover:shadow-md transition';
+                strengthItem.innerHTML = `
+                    <div class="flex-shrink-0 p-3 ${strength.color} rounded-lg text-white mr-4">
+                        <i class="fas ${strength.icon}"></i>
+                    </div>
+                    <div>
+                        <h5 class="font-medium text-gray-800 mb-1">${strength.title}</h5>
+                        <p class="text-sm text-gray-600">${strength.description}</p>
+                    </div>
+                `;
+                strengthsList.appendChild(strengthItem);
+            });
         }
+        // Animate number counting up
+        function animateValue(id, start, end, duration) {
+            const obj = document.getElementById(id);
+            let startTimestamp = null;
+            const step = (timestamp) => {
+                if (!startTimestamp) startTimestamp = timestamp;
+                const progress = Math.min((timestamp - startTimestamp) / duration, 1);
+                obj.innerHTML = Math.floor(progress * (end - start) + start);
+                if (progress < 1) {
+                    window.requestAnimationFrame(step);
+                }
+            };
+            window.requestAnimationFrame(step);
         }
+        // Animate progress bar filling
+        function animateProgressBar(id, finalWidth) {
+            const element = document.getElementById(id);
+            let width = 0;
+            const interval = setInterval(() => {
+                if (width >= finalWidth) {
+                    clearInterval(interval);
                 } else {
+                    width++;
+                    element.style.width = width + '%';
                 }
+            }, 10);
         }
+        // Generate analysis based on scores
+        function generateAnalysis() {
+            const cognitiveLevel = getLevel(scores.cognitive);
+            const emotionalLevel = getLevel(scores.emotional);
+            const sensoryLevel = getLevel(scores.sensory);
+            // Calculate percentiles
+            const cognitivePercentile = getPercentile('cognitive', scores.cognitive);
+            const emotionalPercentile = getPercentile('emotional', scores.emotional);
+            const sensoryPercentile = getPercentile('sensory', scores.sensory);
+            // Determine overall assessment with comparison data
+            let overallScore = Math.round((scores.cognitive + scores.emotional + scores.sensory) / 3);
+            const overallPercentile = Math.round((cognitivePercentile + emotionalPercentile + sensoryPercentile) / 3);
+            let overallAssessment = '';
+            if (overallPercentile <= 30) {
+                overallAssessment = `Seus resultados (percentil ${overallPercentile}) sugerem padrões predominantemente neurotípicos, com poucos indícios de neurodivergência. Você está entre os ${100-overallPercentile}% menos neurodivergentes da população.`;
+            } else if (overallPercentile <= 60) {
+                overallAssessment = `Seus resultados (percentil ${overallPercentile}) mostram algumas características neurodivergentes em intensidade moderada. Você está entre os ${60-overallPercentile}% da população com traços leves ou mistos.`;
+            } else if (overallPercentile <= 85) {
+                overallAssessment = `Seus resultados (percentil ${overallPercentile}) indicam um perfil significativamente neurodivergente. Isso coloca você entre os ${100-overallPercentile}% mais neurodivergentes da população.`;
+            } else {
+                overallAssessment = `Seus resultados (percentil ${overallPercentile}) mostram um perfil altamente neurodivergente. Você está entre os ${100-overallPercentile}% mais neurodivergentes da população, com padrões intensos e marcantes.`;
             }
+            // Create strengths list with appropriate icons and colors
+            const strengths = [];
+            if (scores.cognitive >= 70) {
+                strengths.push({
+                    title: 'Pensamento complexo',
+                    description: 'Você demonstra forte capacidade de perceber padrões, conexões e pensar de maneiras não convencionais, característica comum em neurodivergências como autismo e TDAH.',
+                    icon: 'fa-lightbulb',
+                    color: 'bg-blue-500'
                 });
+            }
+            if (scores.emotional >= 70) {
+                strengths.push({
+                    title: 'Intensidade emocional',
+                    description: 'Sua profundidade emocional pode representar uma rica vida interior e alta empatia, traços associados a diversas formas de neurodivergência.',
+                    icon: 'fa-heart',
+                    color: 'bg-purple-500'
+                });
+            }
+            if (scores.sensory >= 70) {
+                strengths.push({
+                    title: 'Percepção sensorial',
+                    description: 'Sua sensibilidade sensorial pode indicar uma percepção mais fina e detalhada do ambiente, comum em muitas condições neurodivergentes.',
+                    icon: 'fa-hand-sparkles',
+                    color: 'bg-green-500'
+                });
+            }
+            return {
+                text: `
+                    <div class="mb-6 p-4 bg-gradient-to-r from-indigo-50 to-blue-50 rounded-xl border border-indigo-100">
+                        <h4 class="font-bold text-lg text-indigo-800 mb-2">Resumo Geral</h4>
+                        <p class="mb-4">${overallAssessment}</p>
+                        <div class="flex flex-wrap gap-4">
+                            <div class="bg-white p-3 rounded-lg shadow-sm w-full md:w-auto">
+                                <div class="text-sm text-gray-600 flex items-center">
+                                    <i class="fas fa-chart-line text-indigo-500 mr-2"></i> Percentil Total
+                                </div>
+                                <div class="text-2xl font-bold text-indigo-700">${overallPercentile}</div>
+                                <div class="text-xs text-gray-500">(maior = mais neurodivergente)</div>
+                            </div>
+                        </div>
+                    </div>
+                    <h4 class="font-bold text-lg text-gray-800 mb-3">Detalhes por Área</h4>
+                    <div class="grid grid-cols-1 md:grid-cols-3 gap-4 mb-6">
+                        <div class="bg-white p-4 rounded-lg shadow-sm border border-gray-200">
+                            <h5 class="font-bold text-blue-800 mb-2 flex items-center">
+                                <i class="fas fa-brain mr-2"></i> Cognitivo <span class="text-sm ml-auto">${scores.cognitive}%</span>
+                            </h5>
+                            <div class="h-2 bg-gray-200 rounded-full mb-2">
+                                <div class="h-2 bg-blue-600 rounded-full" style="width: ${scores.cognitive}%"></div>
+                            </div>
+                            <div class="text-sm mb-1">Nível: <strong>${cognitiveLevel}</strong></div>
+                            <div class="text-xs text-gray-600">Percentil ${cognitivePercentile} - ${getPercentileInterpretation(cognitivePercentile)}</div>
+                            <p class="text-xs text-gray-500 mt-2">Inclui pensamento padrão, aprendizagem e processamento de informações.</p>
+                        </div>
+                        <div class="bg-white p-4 rounded-lg shadow-sm border border-gray-200">
+                            <h5 class="font-bold text-purple-800 mb-2 flex items-center">
+                                <i class="fas fa-heart mr-2"></i> Emocional <span class="text-sm ml-auto">${scores.emotional}%</span>
+                            </h5>
+                            <div class="h-2 bg-gray-200 rounded-full mb-2">
+                                <div class="h-2 bg-purple-600 rounded-full" style="width: ${scores.emotional}%"></div>
+                            </div>
+                            <div class="text-sm mb-1">Nível: <strong>${emotionalLevel}</strong></div>
+                            <div class="text-xs text-gray-600">Percentil ${emotionalPercentile} - ${getPercentileInterpretation(emotionalPercentile)}</div>
+                            <p class="text-xs text-gray-500 mt-2">Inclui intensidade emocional, empatia e regulação de sentimentos.</p>
+                        </div>
+                        <div class="bg-white p-4 rounded-lg shadow-sm border border-gray-200">
+                            <h5 class="font-bold text-green-800 mb-2 flex items-center">
+                                <i class="fas fa-hand-sparkles mr-2"></i> Sensorial <span class="text-sm ml-auto">${scores.sensory}%</span>
+                            </h5>
+                            <div class="h-2 bg-gray-200 rounded-full mb-2">
+                                <div class="h-2 bg-green-600 rounded-full" style="width: ${scores.sensory}%"></div>
+                            </div>
+                            <div class="text-sm mb-1">Nível: <strong>${sensoryLevel}</strong></div>
+                            <div class="text-xs text-gray-600">Percentil ${sensoryPercentile} - ${getPercentileInterpretation(sensoryPercentile)}</div>
+                            <p class="text-xs text-gray-500 mt-2">Inclui resposta a estímulos sensoriais e preferências específicas.</p>
+                        </div>
+                    </div>
+                    <div class="bg-white border border-gray-200 rounded-xl p-4 mb-6">
+                        <h4 class="font-medium text-gray-800 mb-3 flex items-center">
+                            <i class="fas fa-search-plus text-indigo-600 mr-2"></i> Interpretação dos Resultados
+                        </h4>
+                        <ul class="list-disc pl-5 space-y-2 text-gray-700">
+                            <li><strong>0-40%:</strong> Características predominantemente neurotípicas</li>
+                            <li><strong>40-70%:</strong> Traços moderados de neurodivergência</li>
+                            <li><strong>70-85%:</strong> Perfil neurodivergente significativo</li>
+                            <li><strong>85-100%:</strong> Alto grau de neurodivergência</li>
+                        </ul>
+                    </div>
+                `,
+                strengths
+            };
+        }
+        // Get descriptive level based on score
+        function getLevel(score) {
+            if (score <= 25) return 'Muito Baixo';
+            if (score <= 40) return 'Baixo';
+            if (score <= 60) return 'Moderado';
+            if (score <= 75) return 'Alto';
+            return 'Muito Alto';
+        }
+        // Get percentile based on comparative data
+        function getPercentile(category, score) {
+            const data = comparativeData[category];
+            for (let percentile = 95; percentile >= 10; percentile -= 5) {
+                if (score >= data[percentile]) return percentile;
+            }
+            return 5;
+        }
+        // Get interpretation of percentile
+        function getPercentileInterpretation(percentile) {
+            if (percentile <= 15) return 'Baixa neurodivergência';
+            if (percentile <= 40) return 'Neurotípico com alguns traços';
+            if (percentile <= 60) return 'Perfil misto';
+            if (percentile <= 80) return 'Neurodivergente significativo';
+            if (percentile <= 90) return 'Altamente neurodivergente';
+            return 'Extremamente neurodivergente';
+        }
+        // Restart assessment
+        function restartAssessment() {
+            currentQuestionIndex = 0;
+            answers = [];
+            resultsContainer.classList.add('hidden');
+            welcomeCard.classList.remove('hidden');
+            window.scrollTo({ top: 0, behavior: 'smooth' });
+        }
     </script>
 <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=danielclopes/eva-calculator" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
 </html>

prompts.txt CHANGED Viewed

@@ -1,4 +1,7 @@
 não esta aceitando a opção todas
 não está sendo possivel selecionar a operação matemática
 retire as abas de operações matematicas e deixe elas randomicas 100%
-deixe 100% responsivo para celulares. e aumente a sessão para 1 minuto

 não esta aceitando a opção todas
 não está sendo possivel selecionar a operação matemática
 retire as abas de operações matematicas e deixe elas randomicas 100%
+deixe 100% responsivo para celulares. e aumente a sessão para 1 minuto
+baseado em todos os melhores estudos do mundo sobre altas habilidades.crie um site que ajude a identificar o nivel de neurodivergencia que que estiver respondendo o questionario tem. de pontuações e relatórios de avaliação ao final do teste. deve ser altamente responsivo para celulares.
+poderia aumentar o numero de perguntas e explorar ainda mais o relatório?  coloque niveis de comparação para quem ler o resultado entender quão descolado está!
+<!DOCTYPE html> <html lang="pt-BR"> <head>     <meta charset="UTF-8">     <meta name="viewport" content="width=device-width, initial-scale=1.0">     <title>NeuroAvalia - Identificação de Neurodivergência</title>     <script src="https://cdn.tailwindcss.com"></script>     <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap" rel="stylesheet">     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">     <style>         body {             font-family: 'Poppins', sans-serif;             background-color: #f8f9fa;         }         .progress-bar {             transition: width 0.5s ease-in-out;         }         .option:hover {             transform: translateY(-2px);             box-shadow: 0 6px 12px rgba(0, 0, 0, 0.1);         }         .result-chart {             height: 300px;         }     </style> </head> <body class="min-h-screen bg-gradient-to-b from-indigo-50 to-blue-50">     <div class="container mx-auto px-4 py-8 max-w-6xl">         <!-- Header Section -->         <header class="text-center mb-10">             <h1 class="text-4xl md:text-5xl font-bold text-indigo-800 mb-4">NeuroAvalia</h1>             <p class="text-lg md:text-xl text-gray-700 max-w-3xl mx-auto">                 Ferramenta baseada em pesquisas científicas para identificar sinais de neurodivergência e altas habilidades             </p>             <div class="w-24 h-1.5 bg-indigo-500 mx-auto mt-4 rounded-full"></div>         </header>          <!-- Welcome Card -->         <div id="welcome-card" class="bg-white rounded-xl shadow-lg p-6 mb-8 transition-all duration-300">             <div class="flex flex-col md:flex-row items-center gap-6">                 <div class="flex-shrink-0 mb-4 md:mb-0">                     <div class="w-24 h-24 md:w-32 md:h-32 rounded-full bg-indigo-100 flex items-center justify-center">                         <i class="fas fa-brain text-4xl md:text-5xl text-indigo-600"></i>                     </div>                 </div>                 <div>                     <h2 class="text-2xl font-semibold text-gray-800 mb-3">Sobre esta avaliação</h2>                     <p class="text-gray-600 mb-4">                         Este questionário foi desenvolvido com base nos principais estudos mundiais sobre neurodivergência e altas habilidades.                          As perguntas abrangem diversas áreas cognitivas, emocionais e sensoriais.                     </p>                     <p class="text-gray-600 mb-6">                         Ao final, você receberá um relatório detalhado com sua pontuação e orientações sobre os próximos passos, caso sejam necessários.                     </p>                     <button onclick="startAssessment()" class="bg-indigo-600 hover:bg-indigo-700 text-white font-medium py-3 px-6 rounded-lg transition duration-300 transform hover:scale-105 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-opacity-50">                         Iniciar Avaliação                     </button>                 </div>             </div>         </div>          <!-- Assessment Container -->         <div id="assessment-container" class="hidden bg-white rounded-xl shadow-lg p-6 mb-8">             <!-- Progress Bar -->             <div class="mb-8">                 <div class="flex justify-between mb-2">                     <span class="text-sm font-medium text-indigo-700">Progresso</span>                     <span id="progress-percentage" class="text-sm font-medium text-indigo-700">0%</span>                 </div>                 <div class="w-full bg-gray-200 rounded-full h-2.5">                     <div id="progress-bar" class="progress-bar bg-indigo-600 h-2.5 rounded-full" style="width: 0%"></div>                 </div>             </div>              <!-- Question Container -->             <div id="question-container">                 <!-- Questions will be inserted here dynamically -->             </div>              <!-- Navigation Buttons -->             <div class="flex justify-between mt-10">                 <button id="prev-btn" onclick="prevQuestion()" class="hidden bg-gray-200 hover:bg-gray-300 text-gray-800 font-medium py-2 px-6 rounded-lg transition duration-300 focus:outline-none focus:ring-2 focus:ring-gray-400 focus:ring-opacity-50">                     <i class="fas fa-arrow-left mr-2"></i> Anterior                 </button>                 <button id="next-btn" onclick="nextQuestion()" class="ml-auto bg-indigo-600 hover:bg-indigo-700 text-white font-medium py-2 px-6 rounded-lg transition duration-300 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-opacity-50">                     Próxima <i class="fas fa-arrow-right ml-2"></i>                 </button>                 <button id="submit-btn" onclick="submitAssessment()" class="hidden bg-green-600 hover:bg-green-700 text-white font-medium py-2 px-6 rounded-lg transition duration-300 focus:outline-none focus:ring-2 focus:ring-green-500 focus:ring-opacity-50">                     Finalizar <i class="fas fa-check ml-2"></i>                 </button>             </div>         </div>          <!-- Results Container -->         <div id="results-container" class="hidden bg-white rounded-xl shadow-lg p-6">             <div class="text-center mb-8">                 <div class="inline-block p-4 bg-indigo-100 rounded-full mb-4">                     <i class="fas fa-chart-bar text-4xl text-indigo-600"></i>                 </div>                 <h2 class="text-3xl font-bold text-gray-800 mb-2">Seu Resultado</h2>                 <p class="text-gray-600 max-w-2xl mx-auto">                     Veja abaixo sua pontuação e interpretação baseada em pesquisas científicas sobre neurodivergência.                 </p>             </div>              <!-- Score Summary -->             <div class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-10">                 <div class="bg-blue-50 rounded-xl p-6 text-center">                     <div class="text-4xl font-bold text-blue-700 mb-2" id="cognitive-score">0</div>                     <div class="text-lg font-medium text-blue-800 mb-2">Cognitivo</div>                     <div class="h-1.5 bg-blue-200 rounded-full mb-3">                         <div class="h-1.5 bg-blue-600 rounded-full" id="cognitive-bar" style="width: 0%"></div>                     </div>                     <p class="text-sm text-blue-900 opacity-80">Processamento de informações e padrões de pensamento</p>                 </div>                 <div class="bg-purple-50 rounded-xl p-6 text-center">                     <div class="text-4xl font-bold text-purple-700 mb-2" id="emotional-score">0</div>                     <div class="text-lg font-medium text-purple-800 mb-2">Emocional</div>                     <div class="h-1.5 bg-purple-200 rounded-full mb-3">                         <div class="h-1.5 bg-purple-600 rounded-full" id="emotional-bar" style="width: 0%"></div>                     </div>                     <p class="text-sm text-purple-900 opacity-80">Regulação emocional e intensidade de sentimentos</p>                 </div>                 <div class="bg-green-50 rounded-xl p-6 text-center">                     <div class="text-4xl font-bold text-green-700 mb-2" id="sensory-score">0</div>                     <div class="text-lg font-medium text-green-800 mb-2">Sensorial</div>                     <div class="h-1.5 bg-green-200 rounded-full mb-3">                         <div class="h-1.5 bg-green-600 rounded-full" id="sensory-bar" style="width: 0%"></div>                     </div>                     <p class="text-sm text-green-900 opacity-80">Sensibilidade a estímulos do ambiente</p>                 </div>             </div>              <!-- Detailed Analysis -->             <div class="bg-gray-50 rounded-xl p-6 mb-8">                 <h3 class="text-xl font-semibold text-gray-800 mb-4">Análise Detalhada</h3>                 <p class="text-gray-700 mb-6" id="detailed-analysis">                     <!-- Analysis will be inserted here -->                 </p>                                  <h4 class="text-lg font-medium text-gray-800 mb-3">Áreas com maior pontuação:</h4>                 <div id="strengths-list" class="grid grid-cols-1 md:grid-cols-2 gap-3 mb-6">                     <!-- Strengths will be inserted here -->                 </div>                                  <div class="alert bg-indigo-50 border-l-4 border-indigo-500 p-4 rounded mb-6">                     <div class="flex">                         <div class="flex-shrink-0 text-indigo-500">                             <i class="fas fa-info-circle"></i>                         </div>                         <div class="ml-3">                             <p class="text-sm text-indigo-700">                                 <strong>Nota:</strong> Esta avaliação não substitui um diagnóstico profissional. Se os resultados indicarem alta probabilidade de neurodivergência, recomendamos consultar um especialista.                             </p>                         </div>                     </div>                 </div>             </div>              <!-- Resources Section -->             <div class="mb-8">                 <h3 class="text-xl font-semibold text-gray-800 mb-4">Recursos e Próximos Passos</h3>                 <div class="grid grid-cols-1 md:grid-cols-2 gap-4">                     <div class="flex items-start p-4 bg-white border border-gray-200 rounded-lg shadow-sm hover:shadow-md transition">                         <div class="flex-shrink-0 mt-1 mr-4 text-blue-500">                             <i class="fas fa-book-open"></i>                         </div>                         <div>                             <h4 class="font-medium text-gray-800">Leituras recomendadas</h4>                             <p class="text-sm text-gray-600">Materiais científicos sobre neurodivergência e altas habilidades</p>                         </div>                     </div>                     <div class="flex items-start p-4 bg-white border border-gray-200 rounded-lg shadow-sm hover:shadow-md transition">                         <div class="flex-shrink-0 mt-1 mr-4 text-purple-500">                             <i class="fas fa-user-md"></i>                         </div>                         <div>                             <h4 class="font-medium text-gray-800">Profissionais especializados</h4>                             <p class="text-sm text-gray-600">Encontre especialistas em sua região para avaliação detalhada</p>                         </div>                     </div>                 </div>             </div>              <div class="text-center">                 <button onclick="restartAssessment()" class="bg-indigo-600 hover:bg-indigo-700 text-white font-medium py-2 px-6 rounded-lg transition duration-300 transform hover:scale-105 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-opacity-50 inline-flex items-center">                     <i class="fas fa-redo mr-2"></i> Refazer Teste                 </button>             </div>         </div>     </div>      <footer class="bg-white py-6 mt-12 border-t border-gray-200">         <div class="container mx-auto px-4 text-center text-gray-600 text-sm">             <p>© 2023 NeuroAvalia. Baseado em pesquisas científicas sobre neurodivergência e altas habilidades.</p>             <p class="mt-2">Este instrumento não substitui avaliação profissional.</p>         </div>     </footer>      <script>         // Questions database         const questions = [             {                 id: 1,                 category: 'cognitive',                 text: "Com que frequência você percebe padrões, conexões ou relações que outras pessoas não percebem?",                 options: [                     { text: "Raramente ou nunca", score: 1 },                     { text: "Ocasionalmente", score: 2 },                     { text: "Frequentemente", score: 4 },                     { text: "Quase sempre", score: 5 }                 ]             },             {                 id: 16,                 category: 'cognitive',                 text: "Você tem facilidade para aprender conceitos complexos rapidamente?",                 options: [                     { text: "Tenho dificuldade", score: 1 },                     { text: "Às vezes", score: 3 },                     { text: "Com frequência", score: 4 },                     { text: "Sim, quase sempre", score: 5 }                 ]             },             {                 id: 17,                 category: 'cognitive',                 text: "Você se frustra quando outros não acompanham seu raciocínio?",                 options: [                     { text: "Nunca", score: 1 },                     { text: "Raramente", score: 2 },                     { text: "Às vezes", score: 4 },                     { text: "Frequentemente", score: 5 }                 ]             },             {                 id: 2,                 category: 'cognitive',                 text: "Você tem curiosidade intensa sobre vários tópicos diferentes?",                 options: [                     { text: "Não especialmente", score: 1 },                     { text: "Tenho algumas áreas de interesse", score: 3 },                     { text: "Sim, sobre vários assuntos", score: 4 },                     { text: "Sim, sobre muitos assuntos e com grande intensidade", score: 5 }                 ]             },             {                 id: 3,                 category: 'emotional',                 text: "Você já foi descrito como muito intenso(a) emocionalmente?",                 options: [                     { text: "Nunca", score: 1 },                     { text: "Raramente", score: 2 },                     { text: "Às vezes", score: 3 },                     { text: "Frequentemente", score: 4 },                     { text: "Sempre ou quase sempre", score: 5 }                 ]             },             {                 id: 4,                 category: 'emotional',                 text: "Com que frequência você sente emoções com extrema intensidade (alegria, tristeza, raiva, etc.)?",                 options: [                     { text: "Quase nunca", score: 1 },                     { text: "De vez em quando", score: 2 },                     { text: "Regularmente", score: 3 },                     { text: "Frequentemente", score: 4 },                     { text: "Quase sempre", score: 5 }                 ]             },             {                 id: 5,                 category: 'sensory',                 text: "Você é particularmente sensível a sons, luzes, texturas ou cheiros que não parecem incomodar outras pessoas?",                 options: [                     { text: "Nunca", score: 1 },                     { text: "Raramente", score: 2 },                     { text: "Às vezes", score: 3 },                     { text: "Frequentemente", score: 4 },                     { text: "Sempre ou quase sempre", score: 5 }                 ]             },             {                 id: 6,                 category: 'sensory',                 text: "Você fica sobrecarregado(a) em ambientes com muita estimulação sensorial (como shoppings, festas, locais barulhentos)?",                 options: [                     { text: "Nunca", score: 1 },                     { text: "Raramente", score: 2 },                     { text: "Às vezes", score: 3 },                     { text: "Frequentemente", score: 4 },                     { text: "Sempre ou quase sempre", score: 5 }                 ]             },             {                 id: 7,                 category: 'cognitive',                 text: "Você pensa principalmente em imagens ou padrões em vez de palavras?",                 options: [                     { text: "Quase nunca", score: 1 },                     { text: "Ocasionalmente", score: 2 },                     { text: "Regularmente", score: 3 },                     { text: "Frequentemente", score: 4 },                     { text: "Quase sempre", score: 5 }                 ]             },             {                 id: 8,                 category: 'emotional',                 text: "Você tem forte empatia e pode sentir o que os outros estão sentindo?",                 options: [                     { text: "Não especialmente", score: 1 },                     { text: "Às vezes", score: 3 },                     { text: "Frequentemente", score: 4 },                     { text: "Muito intensamente, às vezes é avassalador", score: 5 }                 ]             },             {                 id: 9,                 category: 'cognitive',                 text: "Você aprende melhor quando pode explorar um tópico profundamente em vez de seguir uma estrutura pré-definida?",                 options: [                     { text: "Prefiro seguir a estrutura definida", score: 1 },                     { text: "Às vezes gosto de explorar", score: 3 },                     { text: "Geralmente prefiro explorar por conta própria", score: 4 },                     { text: "Sempre aprendo melhor explorando profundamente", score: 5 }                 ]             },             {                 id: 10,                 category: 'sensory',                 text: "Você tem reações físicas intensas (como náusea ou dor) a certos estímulos sensoriais?",                 options: [                     { text: "Nunca", score: 1 },                     { text: "Raramente", score: 2 },                     { text: "Às vezes", score: 3 },                     { text: "Frequentemente", score: 4 },                     { text: "Sempre ou quase sempre", score: 5 }                 ]             },             {                 id: 11,                 category: 'cognitive',                 text: "Com que frequência você se envolve em pensamento divergente (várias ideias ou soluções para um problema)?",                 options: [                     { text: "Raramente", score: 1 },                     { text: "Ocasionalmente", score: 2 },                     { text: "Regularmente", score: 3 },                     { text: "Frequentemente", score: 4 },                     { text: "Quase sempre", score: 5 }                 ]             },             {                 id: 12,                 category: 'emotional',                 text: "Você já sentiu que suas emoções são mais intensas do que as das pessoas ao seu redor?",                 options: [                     { text: "Nunca", score: 1 },                     { text: "Raramente", score: 2 },                     { text: "Às vezes", score: 3 },                     { text: "Frequentemente", score: 4 },                     { text: "Sempre ou quase sempre", score: 5 }                 ]             },             {                 id: 13,                 category: 'sensory',                 text: "Você tem preferências muito específicas por certos tipos de tecidos, sabores ou sons?",                 options: [                     { text: "Nenhuma preferência especial", score: 1 },                     { text: "Algumas pequenas preferências", score: 2 },                     { text: "Algumas preferências marcantes", score: 3 },                     { text: "Muitas preferências fortes", score: 4 },                     { text: "Prefiroências muito específicas e intensas", score: 5 }                 ]             },             {                 id: 14,                 category: 'cognitive',                 text: "Você tende a pensar de maneira não linear (saltando entre ideias em vez de seguir uma sequência lógica)?",                 options: [                     { text: "Quase nunca", score: 1 },                     { text: "Ocasionalmente", score: 2 },                     { text: "Regularmente", score: 3 },                     { text: "Frequentemente", score: 4 },                     { text: "Quase sempre", score: 5 }                 ]             },             {                 id: 15,                 category: 'emotional',                 text: "Você tem dificuldade em regular suas emoções (calmar-se quando está agitado ou animar-se quando está desanimado)?",                 options: [                     { text: "Nunca", score: 1 },                     { text: "Raramente", score: 2 },                     { text: "Às vezes", score: 3 },                     { text: "Frequentemente", score: 4 },                     { text: "Sempre ou quase sempre", score: 5 }                 ]             },             {                 id: 18,                 category: 'emotional',                 text: "Você se envolve emocionalmente com personagens de livros/filmes como se fossem reais?",                 options: [                     { text: "Quase nunca", score: 1 },                     { text: "Raramente", score: 2 },                     { text: "Às vezes", score: 3 },                     { text: "Frequentemente", score: 4 },                     { text: "Quase sempre", score: 5 }                 ]             },             {                 id: 19,                 category: 'sensory',                 text: "Você evita certas atividades devido à sensibilidade sensorial?",                 options: [                     { text: "Nunca", score: 1 },                     { text: "Raramente", score: 2 },                     { text: "Às vezes", score: 4 },                     { text: "Frequentemente", score: 5 }                 ]             },             {                 id: 20,                 category: 'sensory',                 text: "Você tem reações físicas intensas a certos alimentos (textura, temperatura, sabor)?",                 options: [                     { text: "Nunca", score: 1 },                     { text: "1-2 alimentos", score: 2 },                     { text: "3-5 alimentos", score: 3 },                     { text: "6-10 alimentos", score: 4 },                     { text: "Mais de 10 alimentos", score: 5 }                 ]             }         ];          // Comparative data for results (percentiles)         const comparativeData = {             cognitive: {                 10: 20, 20: 30, 30: 45, 40: 55, 50: 65,                 60: 72, 70: 79, 80: 85, 90: 90, 95: 95             },             emotional: {                 10: 25, 20: 35, 30: 45, 40: 55, 50: 62,                 60: 69, 70: 75, 80: 81, 90: 88, 95: 93             },             sensory: {                 10: 15, 20: 30, 30: 42, 40: 52, 50: 60,                 60: 68, 70: 74, 80: 80, 90: 87, 95: 94             }         };          // Assessment state         let currentQuestionIndex = 0;         let answers = [];         let scores = { cognitive: 0, emotional: 0, sensory: 0 };          // DOM elements         const welcomeCard = document.getElementById('welcome-card');         const assessmentContainer = document.getElementById('assessment-container');         const questionContainer = document.getElementById('question-container');         const resultsContainer = document.getElementById('results-container');         const progressBar = document.getElementById('progress-bar');         const progressPercentage = document.getElementById('progress-percentage');         const prevBtn = document.getElementById('prev-btn');         const nextBtn = document.getElementById('next-btn');         const submitBtn = document.getElementById('submit-btn');          // Current position in assessment         currentQuestionIndex = 0;          // Start the assessment         function startAssessment() {             welcomeCard.classList.add('hidden');             assessmentContainer.classList.remove('hidden');             showQuestion(currentQuestionIndex);             updateProgress();         }          // Show a specific question         function showQuestion(index) {             // Reset question container             questionContainer.innerHTML = '';                          // Get current question             const question = questions[index];                          // Create question element             const questionElement = document.createElement('div');             questionElement.className = 'question mb-8';                          // Add question text             const questionText = document.createElement('h3');             questionText.className = 'text-xl font-semibold text-gray-800 mb-6';             questionText.textContent = question.text;             questionElement.appendChild(questionText);                          // Add options             const optionsContainer = document.createElement('div');             optionsContainer.className = 'space-y-3';                          question.options.forEach((option, optionIndex) => {                 const optionElement = document.createElement('div');                 optionElement.className = 'option cursor-pointer bg-gray-50 hover:bg-indigo-50 border border-gray-200 rounded-lg p-4 transition duration-300';                 optionElement.innerHTML = `                     <div class="flex items-center">                         <div class="w-5 h-5 rounded-full border border-gray-300 mr-3 flex-shrink-0 option-radio ${answers[index] === optionIndex ? 'bg-indigo-500 border-indigo-500' : ''}"></div>                         <div>${option.text}</div>                     </div>                 `;                                  // Add click event to select option                 optionElement.addEventListener('click', () => {                     // Deselect all options                     document.querySelectorAll('.option-radio').forEach(radio => {                         radio.className = 'w-5 h-5 rounded-full border border-gray-300 mr-3 flex-shrink-0 option-radio';                     });                                          // Select clicked option                     const radio = optionElement.querySelector('.option-radio');                     radio.className = 'w-5 h-5 rounded-full border border-indigo-500 bg-indigo-500 mr-3 flex-shrink-0 option-radio';                                          // Store answer                     answers[index] = optionIndex;                                          // Enable next/submit button                     if (index === questions.length - 1) {                         nextBtn.classList.add('hidden');                         submitBtn.classList.remove('hidden');                     }                 });                                  // If this option was previously selected, mark it                 if (answers[index] === optionIndex) {                     const radio = optionElement.querySelector('.option-radio');                     radio.className = 'w-5 h-5 rounded-full border border-indigo-500 bg-indigo-500 mr-3 flex-shrink-0 option-radio';                                          // Make sure submit button is visible on last question if answered                     if (index === questions.length - 1) {                         nextBtn.classList.add('hidden');                         submitBtn.classList.remove('hidden');                     }                 }                                  optionsContainer.appendChild(optionElement);             });                          questionElement.appendChild(optionsContainer);             questionContainer.appendChild(questionElement);                          // Update navigation buttons             prevBtn.classList.toggle('hidden', index === 0);         }          // Go to next question         function nextQuestion() {             if (answers[currentQuestionIndex] === undefined) {                 alert('Por favor, selecione uma resposta antes de continuar.');                 return;             }                          currentQuestionIndex++;             showQuestion(currentQuestionIndex);             updateProgress();         }          // Go to previous question         function prevQuestion() {             currentQuestionIndex--;             showQuestion(currentQuestionIndex);             updateProgress();         }          // Update progress bar         function updateProgress() {             const progress = ((currentQuestionIndex + 1) / questions.length) * 100;             progressBar.style.width = `${progress}%`;             progressPercentage.textContent = `${Math.round(progress)}%`;         }          // Submit assessment and show results         function submitAssessment() {             if (answers[currentQuestionIndex] === undefined) {                 alert('Por favor, selecione uma resposta antes de finalizar.');                 return;             }                          calculateScores();             showResults();             assessmentContainer.classList.add('hidden');             resultsContainer.classList.remove('hidden');         }          // Calculate scores from answers         function calculateScores() {             // Reset scores             scores = { cognitive: 0, emotional: 0, sensory: 0 };                          // Count questions per category to calculate averages later             const counts = { cognitive: 0, emotional: 0, sensory: 0 };                          // Sum scores for each category             questions.forEach((question, index) => {                 if (answers[index] !== undefined) {                     const selectedOption = question.options[answers[index]];                     scores[question.category] += selectedOption.score;                     counts[question.category]++;                 }             });                          // Calculate average scores (percentage of max possible score)             ['cognitive', 'emotional', 'sensory'].forEach(category => {                 if (counts[category] > 0) {                     const maxPossible = counts[category] * 5;                     scores[category] = Math.round((scores[category] / maxPossible) * 100);                 }             });         }          // Show results page         function showResults() {             // Update score displays             document.getElementById('cognitive-score').textContent = scores.cognitive;             document.getElementById('emotional-score').textContent = scores.emotional;             document.getElementById('sensory-score').textContent = scores.sensory;                          // Update progress bars             document.getElementById('cognitive-bar').style.width = `${scores.cognitive}%`;             document.getElementById('emotional-bar').style.width = `${scores.emotional}%`;             document.getElementById('sensory-bar').style.width = `${scores.sensory}%`;                          // Generate analysis text             const analysis = generateAnalysis();             document.getElementById('detailed-analysis').innerHTML = analysis.text;                          // Add strengths             const strengthsList = document.getElementById('strengths-list');             strengthsList.innerHTML = '';             analysis.strengths.forEach(strength => {                 const strengthItem = document.createElement('div');                 strengthItem.className = 'flex items-start';                 strengthItem.innerHTML = `                     <div class="flex-shrink-0 mt-1 mr-3 text-green-500">                         <i class="fas fa-check-circle"></i>                     </div>                     <div>                         <h5 class="font-medium text-gray-800">${strength.title}</h5>                         <p class="text-sm text-gray-600">${strength.description}</p>                     </div>                 `;                 strengthsList.appendChild(strengthItem);             });         }          // Generate analysis based on scores         function generateAnalysis() {             const cognitiveLevel = getLevel(scores.cognitive);             const emotionalLevel = getLevel(scores.emotional);             const sensoryLevel = getLevel(scores.sensory);                          // Calculate percentiles             const cognitivePercentile = getPercentile('cognitive', scores.cognitive);             const emotionalPercentile = getPercentile('emotional', scores.emotional);             const sensoryPercentile = getPercentile('sensory', scores.sensory);                          // Determine overall assessment with comparison data             let overallScore = Math.round((scores.cognitive + scores.emotional + scores.sensory) / 3);             const overallPercentile = Math.round((cognitivePercentile + emotionalPercentile + sensoryPercentile) / 3);                          let overallAssessment = '';             if (overallPercentile <= 30) {                 overallAssessment = `Seus resultados (percentil ${overallPercentile}) sugerem padrões predominantemente neurotípicos, com poucos indícios de neurodivergência. Você está entre os ${100-overallPercentile}% menos neurodivergentes da população.`;             } else if (overallPercentile <= 60) {                 overallAssessment = `Seus resultados (percentil ${overallPercentile}) mostram algumas características neurodivergentes em intensidade moderada. Você está entre os ${60-overallPercentile}% da população com traços leves ou mistos.`;             } else if (overallPercentile <= 85) {                 overallAssessment = `Seus resultados (percentil ${overallPercentile}) indicam um perfil significativamente neurodivergente. Isso coloca você entre os ${100-overallPercentile}% mais neurodivergentes da população.`;             } else {                 overallAssessment = `Seus resultados (percentil ${overallPercentile}) mostram um perfil altamente neurodivergente. Você está entre os ${100-overallPercentile}% mais neurodivergentes da população, com padrões intensos e marcantes.`;             }                          // Create strengths list             const strengths = [];                          if (scores.cognitive >= 70) {                 strengths.push({                     title: 'Pensamento complexo',                     description: 'Você demonstra forte capacidade de perceber padrões, conexões e pensar de maneiras não convencionais.'                 });             }                          if (scores.emotional >= 70) {                 strengths.push({                     title: 'Intensidade emocional',                     description: 'Sua profundidade emocional pode representar uma rica vida interior e alta empatia.'                 });             }                          if (scores.sensory >= 70) {                 strengths.push({                     title: 'Percepção sensorial',                     description: 'Sua sensibilidade sensorial pode indicar uma percepção mais fina e detalhada do ambiente.'                 });             }                          return {                 text: `                     <div class="mb-6 p-4 bg-blue-50 rounded-lg">                         <h4 class="font-bold text-lg text-blue-800 mb-2">Resumo Geral</h4>                         <p class="mb-4">${overallAssessment}</p>                         <div class="flex flex-wrap gap-4">                             <div class="bg-white p-3 rounded-lg shadow-sm w-full md:w-auto">                                 <div class="text-sm text-gray-600">Percentil Total</div>                                 <div class="text-2xl font-bold text-blue-700">${overallPercentile}</div>                                 <div class="text-xs text-gray-500">(maior = mais neurodivergente)</div>                             </div>                         </div>                     </div>                      <h4 class="font-bold text-lg text-gray-800 mb-3">Detalhes por Área</h4>                                          <div class="grid grid-cols-1 md:grid-cols-3 gap-4 mb-6">                         <div class="bg-white p-4 rounded-lg shadow-sm">                             <h5 class="font-bold text-blue-800 mb-2">Cognitivo <span class="text-sm">(${scores.cognitive}%)</span></h5>                             <div class="h-2 bg-gray-200 rounded-full mb-2">                                 <div class="h-2 bg-blue-600 rounded-full" style="width: ${scores.cognitive}%"></div>                             </div>                             <div class="text-sm mb-1">Nível: <strong>${cognitiveLevel}</strong></div>                             <div class="text-xs text-gray-600">Percentil ${cognitivePercentile} - ${getPercentileInterpretation(cognitivePercentile)}</div>                         </div>                         <div class="bg-white p-4 rounded-lg shadow-sm">                             <h5 class="font-bold text-purple-800 mb-2">Emocional <span class="text-sm">(${scores.emotional}%)</span></h5>                             <div class="h-2 bg-gray-200 rounded-full mb-2">                                 <div class="h-2 bg-purple-600 rounded-full" style="width: ${scores.emotional}%"></div>                             </div>                             <div class="text-sm mb-1">Nível: <strong>${emotionalLevel}</strong></div>                             <div class="text-xs text-gray-600">Percentil ${emotionalPercentile} - ${getPercentileInterpretation(emotionalPercentile)}</div>                         </div>                         <div class="bg-white p-4 rounded-lg shadow-sm">                             <h5 class="font-bold text-green-800 mb-2">Sensorial <span class="text-sm">(${scores.sensory}%)</span></h5>                             <div class="h-2 bg-gray-200 rounded-full mb-2">                                 <div class="h-2 bg-green-600 rounded-full" style="width: ${scores.sensory}%"></div>                             </div>                             <div class="text-sm mb-1">Nível: <strong>${sensoryLevel}</strong></div>                             <div class="text-xs text-gray-600">Percentil ${sensoryPercentile} - ${getPercentileInterpretation(sensoryPercentile)}</div>                         </div>                     </div>                 `,                 strengths             };         }          // Get descriptive level based on score         function getLevel(score) {             if (score <= 25) return 'Muito Baixo';             if (score <= 40) return 'Baixo';             if (score <= 60) return 'Moderado';             if (score <= 75) return 'Alto';             return 'Muito Alto';         }          // Get percentile based on comparative data         function getPercentile(category, score) {             const data = comparativeData[category];             for (let percentile = 95; percentile >= 10; percentile -= 5) {                 if (score >= data[percentile]) return percentile;             }             return 5;         }          // Get interpretation of percentile         function getPercentileInterpretation(percentile) {             if (percentile <= 15) return 'Baixa neurodivergência';             if (percentile <= 40) return 'Neurotípico com alguns traços';             if (percentile <= 60) return 'Perfil misto';             if (percentile <= 80) return 'Neurodivergente significativo';             if (percentile <= 90) return 'Altamente neurodivergente';             return 'Extremamente neurodivergente';         }          // Restart assessment         function restartAssessment() {             currentQuestionIndex = 0;             answers = [];             resultsContainer.classList.add('hidden');             welcomeCard.classList.remove('hidden');         }     </script> </body> </html>