-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
119 lines (108 loc) · 3.77 KB
/
index.html
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
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Question Interface</title>
<style>
body {
font-family: Arial, sans-serif;
background-color: #f0f0f0;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
}
.container {
text-align: center;
background-color: white;
padding: 20px;
border-radius: 8px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
width: 80%;
max-width: 500px;
}
.question {
font-size: 18px;
margin-bottom: 20px;
}
.buttons {
display: flex;
flex-direction: column; /* Alinhando botões verticalmente */
gap: 10px; /* Espaçamento entre os botões */
}
.buttons button {
padding: 10px 20px;
font-size: 16px;
cursor: pointer;
border: none;
border-radius: 4px;
background-color: #007bff;
color: white;
width: 100%; /* Faz com que os botões ocupem toda a largura */
}
.buttons button.hidden {
display: none;
}
</style>
</head>
<body>
<div class="container">
<div class="question" id="questionText">Carregando pergunta...</div>
<div class="buttons">
<button id="btn1" class="hidden" onclick="nextQuestion(1)"></button>
<button id="btn2" class="hidden" onclick="nextQuestion(2)"></button>
<button id="btn3" class="hidden" onclick="nextQuestion(3)"></button>
</div>
</div>
<script>
let data = []; // Variável para armazenar o JSON do endpoint
let currentLine = 0;
// Função para carregar a pergunta e respostas
function loadQuestion(lineIndex) {
const questionData = data.find(item => item.linha === lineIndex);
if (!questionData) return;
const { "Texto/Pergunta": question, "Resposta 1": res1, "Resposta 2": res2, "Resposta 3": res3 } = questionData.infos;
document.getElementById('questionText').textContent = question;
// Configurando os botões e ponteiros
const btn1 = document.getElementById('btn1');
const btn2 = document.getElementById('btn2');
const btn3 = document.getElementById('btn3');
btn1.textContent = res1;
btn2.textContent = res2;
btn3.textContent = res3;
btn1.classList.toggle('hidden', res1 === "");
btn2.classList.toggle('hidden', res2 === "");
btn3.classList.toggle('hidden', res3 === "");
}
// Função para avançar para a próxima pergunta
function nextQuestion(buttonNumber) {
const questionData = data.find(item => item.linha === currentLine);
const ponteiro = questionData.infos[`Ponteiro ${buttonNumber}`];
if (ponteiro) {
currentLine = parseInt(ponteiro)-1;
loadQuestion(currentLine);
}
}
// Função para buscar dados do endpoint
async function fetchData() {
const url = "https://script.google.com/macros/s/AKfycbxIqPmBWiMDSWBa2nq0rcOVcsnCy22xf2e12mwpjeioFN9FHSJwD73earlDZf6lR6TE/exec?key=chaveDeAcesso&modo=get";
try {
const response = await fetch(url);
if (!response.ok) {
throw new Error(`Erro ao buscar dados: ${response.statusText}`);
}
data = await response.json();
currentLine = data[0].linha; // Defina a primeira linha automaticamente
loadQuestion(currentLine); // Carrega a primeira pergunta
} catch (error) {
document.getElementById('questionText').textContent = "Erro ao carregar dados.";
console.error(error);
}
}
// Carrega os dados ao iniciar a página
window.onload = fetchData;
</script>
</body>
</html>