programandoai

Passo 1: Uma pergunta na tela

Todo quiz nasce igual: uma pergunta e suas opções. Ainda sem interação, só a primeira peça no lugar.

Estudar esta lição interativa →

Segundo projeto do curso: um quiz interativo, o tipo de app que ensina uma lição valiosa sobre dados. Um quiz de uma pergunta só é fácil, mas um quiz de verdade tem várias, todas seguindo o mesmo molde (texto + opções + resposta certa). Isso é o cheiro clássico de "isto deveria ser um array de objetos", o mesmo raciocínio do módulo Ponte do curso de JS quando os projetos da Ana viraram dados em vez de HTML escrito à mão.

Mas vamos por partes: esta primeira versão nem usa array ainda, é só a estrutura de uma pergunta, escrita direto no HTML, para você enxergar o "molde" antes de generalizá-lo no próximo passo.

🧩 Este conteúdo é interativo — abra no app para ver e rodar de verdade. Uma pergunta, sem interação ainda. Os botões não fazem nada.

Cada opção é um botão

Usamos <button> para as opções, e não <li> ou <a>, porque semanticamente elas são ações que o usuário clica, exatamente o papel de um botão. Isso também vem de graça com acessibilidade de teclado (Tab e Enter funcionam sem nenhum código extra).

← Voltar ao índice do curso