Spaces:
Running
Running
| <html lang="pt-BR"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Prova em Andamento</title> | |
| <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet"> | |
| $0 | |
| <link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet"> | |
| <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script> | |
| </head> | |
| <body class="bg-blue-50"> | |
| <!-- Header/Session Info --> | |
| <header class="bg-white py-4 border-b border-gray-200"> | |
| <div class="container mx-auto px-4"> | |
| <div class="flex flex-col md:flex-row justify-between items-start md:items-center gap-4"> | |
| <div> | |
| <h2 class="font-bold text-indigo-600 text-lg">Student ID: <span class="font-normal text-gray-700">ABCD1234</span></h2> | |
| <div class="flex items-center mt-1"> | |
| <span class="bg-indigo-100 text-indigo-800 px-3 py-1 rounded-full text-sm flex items-center"> | |
| Matemática | |
| <i data-feather="filter" class="ml-2 w-4 h-4"></i> | |
| </span> | |
| </div> | |
| </div> | |
| <div class="flex items-center"> | |
| <span class="flex items-center mr-8"> | |
| <i data-feather="clock" class="w-4 h-4 mr-1 text-gray-600"></i> | |
| <span id="timer" class="font-medium">00:05:24</span> | |
| </span> | |
| <span class="flex items-center bg-yellow-100 text-yellow-800 px-3 py-1 rounded-full"> | |
| <i data-feather="activity" class="w-4 h-4 mr-1"></i> | |
| <span>Avaliando Resposta...</span> | |
| </span> | |
| </div> | |
| <button class="text-red-500 hover:text-red-700 flex items-center"> | |
| <i data-feather="stop-circle" class="mr-2"></i> | |
| Finalizar Sessão | |
| </button> | |
| </div> | |
| </div> | |
| </header> | |
| <div class="container mx-auto px-4 py-8"> | |
| <div class="grid lg:grid-cols-3 gap-8"> | |
| <!-- Question Card --> | |
| <div class="lg:col-span-2"> | |
| <div class="bg-white rounded-2xl shadow-lg overflow-hidden" data-aos="fade-up"> | |
| <div class="border-b border-gray-200 p-6"> | |
| <div class="flex flex-wrap gap-2 mb-4"> | |
| <span class="bg-indigo-100 text-indigo-800 px-3 py-1 rounded-full text-sm">Item #45</span> | |
| <span class="bg-blue-100 text-blue-800 px-3 py-1 rounded-full text-sm">Geometria</span> | |
| <span class="bg-purple-100 text-purple-800 px-3 py-1 rounded-full text-sm">Dificuldade: Média</span> | |
| </div> | |
| <h3 class="text-2xl font-medium mb-6">Explique o Teorema de Pitágoras e como aplicá-lo em problemas de cálculo de distâncias em plano cartesiano.</h3> | |
| <div class="bg-blue-50 border-l-4 border-blue-500 p-4 rounded"> | |
| <p class="text-gray-700">Escreva sua resposta no formato de texto completo, explicando passo a passo com exemplo numérico se necessário. Mínimo recomendado: 200 caracteres.</p> | |
| </div> | |
| </div> | |
| <div class="p-6"> | |
| <!-- Question Block --> | |
| <div class="mb-6 bg-white border border-gray-200 rounded-lg shadow-sm"> | |
| <div class="bg-blue-50 px-6 py-4 border-b border-gray-200"> | |
| <h4 class="font-bold text-lg text-blue-800 mb-2">Enunciado da Questão</h4> | |
| <p class="text-gray-700"> | |
| Explique detalhadamente o Teorema de Pitágoras e como aplicá-lo em problemas de cálculo de distâncias em plano cartesiano. | |
| Inclua um exemplo numérico para ilustrar sua explicação. | |
| </p> | |
| </div> | |
| <div class="px-6 py-4"> | |
| <div class="flex items-center text-sm text-blue-600"> | |
| <i data-feather="info" class="mr-2 w-4 h-4"></i> | |
| <span>Resposta deve conter no mínimo 200 caracteres</span> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Answer Block --> | |
| <div class="mb-6 bg-white border border-gray-200 rounded-lg shadow-sm overflow-hidden"> | |
| <div class="bg-blue-50 px-6 py-4 border-b border-gray-200"> | |
| <h4 class="font-bold text-lg text-blue-800">Sua Resposta</h4> | |
| </div> | |
| <div class="p-6"> | |
| <textarea rows="10" class="w-full p-4 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-transparent" placeholder="Digite sua resposta aqui..."></textarea> | |
| <div class="mt-2 text-right text-gray-500" id="charCount">0/800 caracteres</div> | |
| </div> | |
| </div> | |
| <!-- Action Buttons --> | |
| <div class="flex justify-between items-center"> | |
| <button class="border border-gray-300 text-gray-600 hover:bg-gray-50 px-4 py-2 rounded-lg flex items-center"> | |
| <i data-feather="trash-2" class="mr-2 w-4 h-4"></i> | |
| Limpar | |
| </button> | |
| <button class="bg-indigo-600 hover:bg-indigo-700 text-white px-6 py-2 rounded-lg shadow flex items-center"> | |
| <i data-feather="send" class="mr-2 w-4 h-4"></i> | |
| Enviar Resposta | |
| </button> | |
| </div> | |
| <!-- Response Status Block --> | |
| <div class="mt-8 p-4 bg-blue-50 border-l-4 border-blue-500 rounded-lg hidden" id="responseStatus"> | |
| <div class="flex items-center"> | |
| <i data-feather="info" class="text-blue-500 mr-3"></i> | |
| <div> | |
| <h4 class="font-medium text-blue-800">Status da Resposta</h4> | |
| <p class="text-blue-600 text-sm" id="statusText">Aguardando avaliação...</p> | |
| </div> | |
| </div> | |
| <div class="mt-3 flex items-center text-sm" id="scoreIndicator"> | |
| <div class="w-full bg-gray-200 rounded-full h-2.5 mr-3"> | |
| <div class="bg-blue-600 h-2.5 rounded-full" style="width: 0%"></div> | |
| </div> | |
| <span class="text-blue-700 font-medium">Score: <span id="scoreValue">-</span></span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Progress Panel --> | |
| <div> | |
| <div class="sticky top-8"> | |
| <div class="bg-white rounded-2xl shadow-lg p-6 mb-6"> | |
| <h3 class="font-bold text-xl mb-4 flex items-center"> | |
| <i data-feather="bar-chart-2" class="mr-3 text-indigo-600 w-5 h-5"></i> | |
| Progresso da Sessão | |
| </h3> | |
| <div class="space-y-5"> | |
| <div> | |
| <div class="flex justify-between items-center mb-1"> | |
| <span class="text-gray-600 font-medium">Itens resolvidos</span> | |
| <span class="font-semibold">3/8</span> | |
| </div> | |
| <div class="w-full bg-gray-200 rounded-full h-2.5"> | |
| <div class="bg-indigo-600 h-2.5 rounded-full" style="width: 37.5%"></div> | |
| </div> | |
| </div> | |
| <div> | |
| <div class="flex justify-between items-center mb-1"> | |
| <span class="text-gray-600 font-medium">Proficiência Estimada (θ)</span> | |
| <span class="font-semibold">0.68 EAP</span> | |
| </div> | |
| <div class="w-full bg-gray-200 rounded-full h-2.5"> | |
| <div class="bg-purple-600 h-2.5 rounded-full" style="width: 68%"></div> | |
| </div> | |
| </div> | |
| <div> | |
| <div class="flex justify-between items-center mb-1"> | |
| <span class="text-gray-600 font-medium">Margem de Erro (SD)</span> | |
| <span class="font-semibold text-orange-600">0.28 (Média)</span> | |
| <span class="text-gray-400 text-sm">Meta: ≤ 0.20</span> | |
| </div> | |
| <div class="w-full bg-gray-200 rounded-full h-2.5"> | |
| <div class="bg-orange-500 h-2.5 rounded-full" style="width: 60%"></div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Debug Panel --> | |
| <div class="bg-gray-50 border border-gray-200 rounded-2xl"> | |
| <div class="flex justify-between p-4 border-b border-gray-200 cursor-pointer"> | |
| <div class="flex items-center"> | |
| <i data-feather="terminal" class="w-4 h-4 mr-3 text-gray-500"></i> | |
| <h4 class="font-medium">Dados Técnicos (Opcional)</h4> | |
| </div> | |
| <i data-feather="chevron-up" class="text-gray-500 w-5 h-5 transform"></i> | |
| </div> | |
| <div class="p-4 font-mono text-xs text-gray-600 max-h-60 overflow-y-auto"> | |
| { | |
| "theta": 0.68, | |
| "sd": 0.28, | |
| "items": [ | |
| {"id": 12, "cat": "Álgebra", "score": 0.82}, | |
| {"id": 45, "cat": "Geometria", "score": null}, | |
| {"id": 37, "cat": "Cálculo", "score": 0.65}, | |
| {"id": 19, "cat": "Álgebra", "score": 0.73} | |
| ], | |
| "completed": 3, | |
| "last_update": "2023-10-17T14:38:22Z", | |
| "next_item_strategy": "Monte Carlo variance minimization (θ̂=0.68) | cat balance" | |
| } | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Feedback Components --> | |
| <div class="fixed inset-x-0 bottom-0 pb-8 flex justify-center space-x-4"> | |
| <div id="toastAvaliando" class="bg-indigo-600 text-white px-6 py-4 rounded-lg shadow-lg flex items-center transition-opacity opacity-0 pointer-events-none"> | |
| <i data-feather="loader" class="animate-spin mr-3"></i> | |
| Avaliando sua resposta com IA... | |
| </div> | |
| <div id="errorBanner" class="bg-red-500 text-white px-6 py-4 rounded-lg shadow-lg flex flex-col max-w-xl transition-opacity opacity-0 pointer-events-none"> | |
| <div class="flex items-center mb-2"> | |
| <i data-feather="alert-triangle" class="mr-3"></i> | |
| <strong class="text-lg">Erro ao processar resposta</strong> | |
| </div> | |
| <p class="mb-2">O modelo de avaliação não respondeu dentro do tempo limite</p> | |
| <div class="flex gap-3"> | |
| <button class="bg-white text-red-500 font-medium px-4 py-2 rounded"> | |
| Tentar Novamente | |
| </button> | |
| <button class="text-white bg-red-600 px-4 py-2 rounded"> | |
| Pular Questão | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Theta Evolution Chart (hidden until data available) --> | |
| <div class="fixed bottom-0 right-0 mb-8 mr-8 w-64 bg-white p-4 rounded-xl shadow-lg hidden" id="thetaChartContainer"> | |
| <div class="flex justify-between items-center mb-3"> | |
| <h4 class="font-medium text-gray-700">Evolução do θ</h4> | |
| <button class="text-gray-400 hover:text-gray-600" id="closeChart"> | |
| <i data-feather="x"></i> | |
| </button> | |
| </div> | |
| <canvas id="thetaChart" height="150"></canvas> | |
| </div> | |
| </div> | |
| <script src="https://cdn.jsdelivr.net/npm/chart.js"></script> | |
| <script> | |
| feather.replace(); | |
| AOS.init(); | |
| // Initialize chart | |
| const ctx = document.getElementById('thetaChart').getContext('2d'); | |
| const thetaChart = new Chart(ctx, { | |
| type: 'line', | |
| data: { | |
| labels: ['Q1', 'Q2', 'Q3', 'Q4', 'Q5', 'Q6'], | |
| datasets: [{ | |
| label: 'θ', | |
| data: [0.5, 0.6, 0.65, 0.7, 0.75, 0.82], | |
| borderColor: '#4f46e5', | |
| backgroundColor: 'rgba(79, 70, 229, 0.1)', | |
| tension: 0.3, | |
| fill: true | |
| }] | |
| }, | |
| options: { | |
| responsive: true, | |
| plugins: { | |
| legend: { | |
| display: false | |
| } | |
| }, | |
| scales: { | |
| y: { | |
| min: 0, | |
| max: 1 | |
| } | |
| } | |
| } | |
| }); | |
| // Show chart button | |
| document.querySelector('.bg-purple-600').addEventListener('click', function() { | |
| document.getElementById('thetaChartContainer').classList.remove('hidden'); | |
| }); | |
| // Close chart | |
| document.getElementById('closeChart').addEventListener('click', function() { | |
| document.getElementById('thetaChartContainer').classList.add('hidden'); | |
| }); | |
| // Character counter | |
| document.querySelector('textarea').addEventListener('input', function() { | |
| document.getElementById('charCount').textContent = this.value.length + '/800 caracteres'; | |
| }); | |
| // Timer simulation | |
| let startTime = Date.now(); | |
| setInterval(() => { | |
| const elapsedTime = Math.floor((Date.now() - startTime) / 1000); | |
| const minutes = Math.floor(elapsedTime / 60).toString().padStart(2, '0'); | |
| const seconds = (elapsedTime % 60).toString().padStart(2, '0'); | |
| document.getElementById('timer').textContent = `00:${minutes}:${seconds}`; | |
| }, 1000); | |
| // Simulate sending response | |
| document.querySelector('.bg-indigo-600').addEventListener('click', function() { | |
| const toast = document.getElementById('toastAvaliando'); | |
| toast.classList.remove('opacity-0'); | |
| toast.classList.remove('pointer-events-none'); | |
| setTimeout(() => { | |
| toast.classList.add('opacity-0'); | |
| setTimeout(() => document.getElementById('errorBanner').classList.remove('opacity-0', 'pointer-events-none'), 1000); | |
| }, 3000); | |
| }); | |
| </script> | |
| </body> | |
| </html> | |