File size: 2,608 Bytes
cc51976
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
<!DOCTYPE html>
<html lang="pt-br">
<head>
  <title>Simulado USP</title>
  <style>
    body { font-family: Arial, sans-serif; margin: 20px; }
    h1 { color: #2c3e50; }
    button { padding: 10px 20px; background: #3498db; color: white; border: none; cursor: pointer; }
    button:hover { background: #2980b9; }
    #questions { margin-top: 20px; }
    ul { list-style-type: upper-alpha; padding-left: 20px; }
    li { margin-bottom: 5px; }
    .question { border-bottom: 1px solid #ecf0f1; padding-bottom: 10px; margin-bottom: 10px; }
    .answer { color: #27ae60; }
    .explanation { font-style: italic; color: #7f8c8d; }
    .error { color: #e74c3c; }
  </style>
</head>
<body>
  <h1>Simulado</h1>
  <button onclick="loadSimulado()">Carregar</button>
  <div id="questions"></div>
  <script>
    async function loadSimulado() {
      console.log('Iniciando carregamento do simulado...');
      try {
        const response = await fetch('/simulado?num_questions=5');
        console.log('Requisição enviada, status:', response.status);
        if (!response.ok) {
          throw new Error(`Erro na requisição: ${response.status} ${response.statusText}`);
        }
        const data = await response.json();
        console.log('Dados recebidos:', data);
        const questionsDiv = document.getElementById('questions');
        questionsDiv.innerHTML = data.simulado.map((q, index) => `
          <div class="question">
            <p><strong>Questão ${index + 1}:</strong> ${q.question.replace(/\n/g, '<br>')}</p>
            <ul>
              ${q.options.map((opt, i) => `
                <li>
                  <input type="radio" name="q${index}" value="${opt}" id="q${index}_${i}">
                  <label for="q${index}_${i}">${opt}</label>
                </li>
              `).join('')}
            </ul>
            <button onclick="showAnswer(${index})">Verificar Resposta</button>
            <p id="answer${index}" style="display: none;" class="answer">
              <strong>Gabarito:</strong> ${q.answer}<br>
              <strong>Explicação:</strong> ${q.explanation.replace(/\n/g, '<br>')}
            </p>
          </div>
        `).join('');
      } catch (error) {
        console.error('Erro ao carregar simulado:', error);
        document.getElementById('questions').innerHTML = `<p class="error">Erro ao carregar simulado: ${error.message}</p>`;
      }
    }

    function showAnswer(index) {
      console.log(`Exibindo resposta para questão ${index + 1}`);
      document.getElementById(`answer${index}`).style.display = 'block';
    }
  </script>
</body>
</html>