O que vais construir
Um quiz a funcionar: avança pergunta a pergunta, marca as certas e erradas, conta os pontos e mostra o resultado — feito só com HTML, CSS e JavaScript.
Código 100% próprio e aberto. As perguntas são tuas — fácil de adaptar a qualquer tema.
Em quase todas as apps repetimos as mesmas camadas, como construir uma casa: o HTML põe as coisas na mesa (a estrutura), o CSS veste-as (a aparência), e o JavaScript é a linguagem que lhes dá vida (o que reage ao toque). No fim, a memória guarda o que importa. Não precisas de decorar — vais reconhecê-las em cada passo. E há um truque de criador: antes de cada passo, diz em voz alta “quando eu faço X, a app deve fazer Y”. Isso transforma-te de quem copia em quem cria.
Pomos na mesa: o sítio da pergunta, os botões com as respostas, uma linha que vai enchendo para mostrar quanto falta para chegar ao fim, e um segundo ecrã (escondido) para o resultado final. Como na página de login, há dois ecrãs que se trocam.
<div id="jogo">
<div class="pergunta" id="pergunta"></div>
<div class="opcoes" id="opcoes"></div>
<button id="proxima">Próxima</button>
</div>
<div id="resultado">...a tua nota...</div>Acrescenta uma barra de progresso por cima da pergunta — por agora só o sítio.
Montaste a casa seguindo o plano. O salto a criador é mudá-la sozinho. Tenta estas três — da mais simples à mais corajosa — sem receita. Se travares, pede à tua IA; mas tenta primeiro, e diz antes «quando eu fizer isto, a app deve…».
O que construíste é teu. Abre a Prova Viva, clona para a tua IA, e faz crescer — uma cor nova, um botão novo, ou O Quiz no teu telemóvel.