mude o botão Professor para em baixo no iniciar questionário - Follow Up Deployment

index.html

@@ -5,6 +5,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Questionário sobre Cidade Cinza</title>
     <script src="https://cdn.tailwindcss.com"></script>
+    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
     <style>
         /* Custom CSS for shuffle animation */
@@ -81,10 +82,12 @@
     <!-- Login Screen -->
     <div id="loginScreen" class="min-h-screen flex items-center justify-center px-4 py-12">
         <div class="w-full max-w-md bg-white rounded-lg shadow-md overflow-hidden">
-            <div class="bg-blue-600 py-4 px-6 relative">
+            <div class="bg-blue-600 py-4 px-6">
                 <h2 class="text-2xl font-bold text-white">Questionário sobre "Cidade Cinza"</h2>
                 <p class="text-blue-100 mt-1">Por favor, insira suas informações para começar</p>
-                <button id="teacherAccessBtn" class="absolute right-6 top-4 bg-white text-blue-600 px-3 py-1 rounded font-bold hover:bg-blue-100 transition">
+            </div>
+            <div class="px-6 pb-4">
+                <button id="teacherAccessBtn" class="w-full bg-blue-500 hover:bg-blue-600 text-white font-bold py-2 px-4 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 transition duration-150">
                     Professor
                 </button>
             </div>
@@ -199,9 +202,6 @@
                         <button id="viewResultsBtn" class="bg-blue-600 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 transition duration-150">
                             Ver Resultados Detalhados
                         </button>
-                        <a href="index.html" class="bg-gray-300 hover:bg-gray-400 text-gray-800 font-bold py-2 px-4 rounded-md focus:outline-none focus:ring-2 focus:ring-gray-500 focus:ring-offset-2 transition duration-150">
-                            Voltar ao Início
-                        </a>
                     </div>
                 </div>
             </div>
@@ -778,7 +778,7 @@
             }, 0);
             
             const score = Math.round((correctCount / questions.length) * 10);
-            const percentage = Math.round((correctCount / questions.length) * 100);
+            const percentage = (correctCount / questions.length * 100).toFixed(1);
             
             // Update results display
             studentNameDisplay.textContent = quizState.studentName;
@@ -935,14 +935,59 @@
         }
 
         // Load results for admin panel
-        function loadResults() {
-            const results = JSON.parse(localStorage.getItem('quizResults')) || [];
+        function loadResults(filterClass = '') {
+            const allResults = JSON.parse(localStorage.getItem('quizResults')) || [];
             
             // Clear table
             resultsTableBody.innerHTML = '';
             
-            // Add each result to the table
-            updateClassStatistics(results);
+            // Add all results to the table (filtering will be handled by filterResults)
+            allResults.forEach(result => {
+                const row = document.createElement('tr');
+                row.className = 'hover:bg-gray-50';
+                
+                // Name
+                const nameCell = document.createElement('td');
+                nameCell.className = 'py-2 px-4';
+                nameCell.textContent = result.name;
+                row.appendChild(nameCell);
+                
+                // Class
+                const classCell = document.createElement('td');
+                classCell.className = 'py-2 px-4';
+                classCell.textContent = result.class;
+                row.appendChild(classCell);
+                
+                // Date
+                const dateCell = document.createElement('td');
+                dateCell.className = 'py-2 px-4';
+                dateCell.textContent = formatDate(result.date);
+                row.appendChild(dateCell);
+                
+                // Answers
+                const answersCell = document.createElement('td');
+                answersCell.className = 'py-2 px-4 font-mono text-sm';
+                answersCell.textContent = result.answers;
+                row.appendChild(answersCell);
+                
+                // Score
+                const scoreCell = document.createElement('td');
+                scoreCell.className = 'py-2 px-4 font-semibold';
+                scoreCell.textContent = `${result.correct}/${questions.length} (${result.score}/10)`;
+                row.appendChild(scoreCell);
+                
+                // Time
+                const timeCell = document.createElement('td');
+                timeCell.className = 'py-2 px-4';
+                timeCell.textContent = result.time;
+                row.appendChild(timeCell);
+                
+                resultsTableBody.appendChild(row);
+            });
+            
+            // Update stats and chart (will be filtered by filterResults)
+            updateClassStatistics(allResults);
+            updateClassPieChart(allResults);
             
             results.forEach(result => {
                 const row = document.createElement('tr');
@@ -1047,25 +1092,83 @@
 
         function filterResults() {
             const selectedClass = classFilter.value;
-            const results = JSON.parse(localStorage.getItem('quizResults')) || [];
+            loadResults(selectedClass);
+        }
+
+        // Update pie chart for class stats
+        function updateClassPieChart(results) {
+            // Get container or create it
+            let chartContainer = document.getElementById('pieChartContainer');
+            if (!chartContainer) {
+                chartContainer = document.createElement('div');
+                chartContainer.id = 'pieChartContainer';
+                chartContainer.className = 'w-full max-w-md mx-auto mt-6 bg-white p-4 rounded-lg shadow-md';
+                chartContainer.innerHTML = '<h4 class="font-bold text-center mb-4">Distribuição de Notas</h4>';
+                
+                const chartCanvas = document.createElement('canvas');
+                chartCanvas.id = 'resultsPieChart';
+                chartContainer.appendChild(chartCanvas);
+                document.querySelector('#adminPanel .max-w-6xl').appendChild(chartContainer);
+            }
+
+            if (results.length === 0) {
+                chartContainer.innerHTML = '<p class="text-gray-500 text-center py-4">Nenhum dado disponível para exibir</p>';
+                return;
+            }
+
+            // Grade buckets
+            const gradeBuckets = [0, 0, 0, 0, 0]; // 0-2, 2-4, 4-6, 6-8, 8-10
+            results.forEach(result => {
+                const score = result.score;
+                if (score <= 2) gradeBuckets[0]++;
+                else if (score <= 4) gradeBuckets[1]++;
+                else if (score <= 6) gradeBuckets[2]++;
+                else if (score <= 8) gradeBuckets[3]++;
+                else gradeBuckets[4]++;
+            });
+
+            const ctx = document.getElementById('resultsPieChart').getContext('2d');
             
-            // Filter table rows
-            const rows = resultsTableBody.querySelectorAll('tr');
-            rows.forEach(row => {
-                const classCell = row.querySelector('td:nth-child(2)');
-                if (!selectedClass || classCell.textContent === selectedClass) {
-                    row.style.display = '';
-                } else {
-                    row.style.display = 'none';
+            // If existing chart exists, destroy it
+            if (window.resultsPieChart) {
+                window.resultsPieChart.destroy();
+            }
+            
+            window.resultsPieChart = new Chart(ctx, {
+                type: 'pie',
+                data: {
+                    labels: ['0-2', '2-4', '4-6', '6-8', '8-10'],
+                    datasets: [{
+                        data: gradeBuckets,
+                        backgroundColor: [
+                            '#EF4444',
+                            '#F59E0B', 
+                            '#3B82F6',
+                            '#6366F1',
+                            '#10B981'
+                        ],
+                        borderWidth: 1
+                    }]
+                },
+                options: {
+                    responsive: true,
+                    plugins: {
+                        legend: {
+                            position: 'bottom'
+                        },
+                        tooltip: {
+                            callbacks: {
+                                label: function(context) {
+                                    const total = results.length;
+                                    const value = context.raw;
+                                    const percentage = Math.round((value / total) * 100);
+                                    return `${context.label}: ${value} (${percentage}%)`;
+                                }
+                            }
+                        }
+                    }
                 }
             });
-
-            // Filter results for stats
-            const filteredResults = selectedClass 
-                ? results.filter(result => result.class === selectedClass)
-                : results;
-                
-            updateClassStatistics(filteredResults);
         }
 
         // Export results to CSV

prompts.txt

@@ -3,4 +3,8 @@ as turmas são 1n1, 1n2, 2n1, 2n2, 3n1, 3n2, 1eja, 2eja, 3eja
 queria que eu como professor tivesse uma area de loguin onde eu tivesse acesso a uma listagem por turma onde constasse a listagem de notas dos alunos
 gostaria que após o preenchimento não pudesse voltar
 acrescente um botão professor no início, quando clicar tenha a opção de por senha: Profandre123 e vá para planílhas por turma com nome e nota dos alunos
-na planilha, qdo selecionar a turma só apareça a listagem daquela turma
+na planilha, qdo selecionar a turma só apareça a listagem daquela turma
+calcular corretamente a porcentagem de acerto, gere um gráfico pizza do total de acetos por turma selecionada e somente dela, só apareça as notas e alunos da turma selecionada no filtro de turmas
+quando selecionar no filtro uma turma apareça a planilha daquela turma
+retire o botão voltar, mude a posição do botão professor para baixo 
+mude o botão Professor para em baixo no iniciar questionário