Passo 4: Tela final e reiniciar
Depois da última pergunta, o quiz precisa fechar com um resumo: quantas você acertou, e a chance de jogar de novo.
Estudar esta lição interativa →Quando indice alcança o fim do array de perguntas, em vez de tentar mostrar uma pergunta que não existe, chamamos mostrarResultado(): ela troca o innerHTML do quiz inteiro por uma tela de resumo, com a nota (acertos/total) e um botão de reiniciar. É a versão "final feliz" do padrão que você já viu antes: o conteúdo da tela nasce de dados (aqui, da variável acertos), não de HTML fixo.
O botão "Jogar de novo" não recarrega a página: ele zera o estado (indice = 0; acertos = 0), devolve a tela do jogo que guardamos no começo (telaDoJogo), religa as variáveis aos elementos recriados e chama mostrarPergunta() de novo.
🧩 Este conteúdo é interativo — abra no app para ver e rodar de verdade. Responda as três perguntas até o fim e veja a tela de resultado. Clique em 'Jogar de novo'.
Seu quiz está completo: pergunta por pergunta, feedback visual, pontuação e uma tela final com reinício. Agora deixe-o com a sua cara: troque as perguntas do array por um tema que você goste, e experimente aumentar para cinco ou seis perguntas, sem tocar em nenhuma outra linha de código.