CS50-MCZ

Lab 8: Trivia

Escreva uma página da web que permita aos usuários responder a perguntas de trivia.

Começando

Abra o VS Code.

Comece clicando dentro da janela do terminal e, em seguida, execute cd por si só. Você deve encontrar que seu "prompt" se assemelha ao abaixo.

$

Clique dentro dessa janela de terminal e execute

wget https://cdn.cs50.net/2022/fall/labs/8/trivia.zip

digite Enter para baixar um arquivo ZIP chamado trivia.zip em seu espaço de códigos. Tenha cuidado para não ignorar o espaço entre wget e a URL seguinte, ou qualquer outro caractere!

Agora execute

unzip trivia.zip

para criar uma pasta chamada trivia. Você não precisa mais do arquivo ZIP, então pode executar

rm trivia.zip      

e responda com "y" seguido de Enter no prompt para remover o arquivo ZIP que você baixou.

Agora digite

cd trivia

seguido de Enter para entrar (ou seja, abrir) nesse diretório. Seu prompt agora deve se parecer com o abaixo.

trivia/ $    

Se tudo foi bem sucedido, você deve executar

ls    

e você deve ver um arquivo, index.html, e um arquivo styles.css.

Se você encontrar algum problema, siga os mesmos passos novamente e veja se consegue determinar onde errou!

Detalhes de Implementação

Projete uma página da web usando HTML, CSS e JavaScript para permitir que os usuários respondam a perguntas de trivia.

• Em index.html, adicione abaixo de "Part 1" uma pergunta de trivia de múltipla escolha de sua escolha usando HTML.
  • Você deve usar um cabeçalho h3 para o texto da pergunta.
  • Você deve ter um button para cada uma das opções de resposta possíveis. Deve haver pelo menos três opções de resposta, das quais exatamente uma deve estar correta.
• Usando JavaScript, adicione lógica para que os botões mudem de cor quando um usuário clicar neles.
  • Se um usuário clicar em um botão com uma resposta incorreta, o botão deve ficar vermelho e um texto deve aparecer abaixo da pergunta dizendo "Incorrect".
  • Se um usuário clicar em um botão com a resposta correta, o botão deve ficar verde e um texto deve aparecer abaixo da pergunta dizendo "Correct!".
• Em index.html, adicione abaixo de "Part 2" uma pergunta de resposta livre baseada em texto de sua escolha usando HTML.
  • Você deve usar um cabeçalho h3 para o texto da pergunta.
  • Você deve usar um campo de input para permitir que o usuário digite uma resposta.
  • Você deve usar um button para permitir que o usuário confirme sua resposta.
• Usando JavaScript, adicione lógica para que o campo de texto mude de cor quando um usuário confirmar sua resposta.
  • Se o usuário digitar uma resposta incorreta e pressionar o botão de confirmação, o campo de texto deve ficar vermelho e um texto deve aparecer abaixo da pergunta dizendo "Incorrect".
  • Se o usuário digitar a resposta correta e pressionar o botão de confirmação, o campo de entrada deve ficar verde e um texto deve aparecer abaixo da pergunta dizendo "Correct!".

Opcionalmente, você também pode:

• Editar styles.css para alterar o CSS da sua página da web!
• Adicionar perguntas adicionais de curiosidades ao seu questionário, se desejar!

Dicas

• Use document.querySelector para buscar um único elemento HTML.
• Use document.querySelectorAll para buscar vários elementos HTML que correspondem a uma consulta. A função retorna uma matriz de todos os elementos correspondentes.

Testando

Sem check50 para este laboratório, pois as implementações variarão com base em suas perguntas! Mas certifique-se de testar respostas incorretas e corretas para cada uma de suas perguntas para garantir que sua página da web responda adequadamente.

Execute http-server em seu terminal enquanto estiver no diretório lab8 para iniciar um servidor da web que sirva sua página da web.

Como enviar

No seu terminal, execute o seguinte para enviar seu trabalho.

submit50 cs50/labs/2023/x/trivia