Spaces:
Running
Running
<!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> - Follow Up Deployment
dfdce9f verified | <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; | |
| } | |
| .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> |