Eu amo, literalmente amo ajudar à comunidade, até agora tenho experimentado vários bootcamp , e nele eu vou vendo muitos códigos bugeados, em minha vontade de ajudar.
E sabendo que cada programador é uma cabeça e que cada cabeça é um mundo, eu mergulho no novo código, para poder ajudá-l@s a superar o bug e fazer ele correr. Porque de nada adianta tratar de apagar o código dele ou dela e fazer novamente o código a minha imagem e semelhança.
Aí tenho que fazer uma inspeção detalhada de cada linha e entender o que faz esse código.
Particularmente esta semana, em um treinamento, uma equipe tinha um código que corria mas não fazia o que tinha que fazer.
O problema era uma trivia e dependendo da resposta, o programa tinha que falar se a resposta era correta ou incorreta.
Eu me disponibilizo a ajudar.
Abrindo o projeto, inferindo que o possível erro estaria nas decisões (if -else), decidi dar uma olhada a tudo, e no html me deparei com um código muito bagunçado, as modificações que fizemos junt@s, não mudava o que era mostrado em tela, mas deixava o código mais limpo e depois conseguimo@s encontrar o erro nas decisões no arquivo JS.
Aqui o código
Vamos com a identação (é a sangria ou margem)
Se faz com a tecla tab do teclado, e permite indicar que uma sentença o bloco de código está dentro de algo maior.
Aqui a estrutura do HTML, indica que ele tem uma cabeça e um corpo.
Então devemos deixar a cabeça e o copo dentro do HTML.
Para ver melhor o código, vamos a recolher os blocos (head e body) na seta que está na parte esquerda onde estão os números do código.
Já recolhido
Temos melhor visualização do documento HTML
Damos um tab, para deixar estas duas tag (<head>...</head> e <body>...</body>) dentro da estrutura do HTML
Apagamos os espaços em branco
Solucionado
Continuamos
Abrimos novamente as tag, para poder ordenar e limpar o código dentro delas.
Empurramos desde a linha 4 até a 7 para dentro do head, e a 8 na mesma altura do head
Assim indicaremos que esse código está dentro ou pertence ao head
Fazemos o mesmo com o body.
Agora bem, no body na linha 11, temos uma duplicidade de tag <p> e <strong> para um mesmo texto.
Sabendo que a tag <p> é para criar um texto de tipo parágrafo e <strong> é para texto igual que o parágrafo mas em negrito. Aí elegemos só uma, ter as duas tag, não faz sentido algum. E outra a cotação que eu faço, usa p, que se precisas colocar esse texto em negrito usa no css o bold e vai ter o mesmo resultado.
Vamos a ver
Usamos <strong>
Ou usamos <p>
Mas usar as duas é redundante.
Na linha 13, temos uma tag <p> demais
Apagamos
Agora estudemos tag <input type="radio">
esta tag é usada para tomar uma única decisão de un grupo de opções, e sua sintaxe é assim:
Aqui temos demais a classe e o id, podemos definir sim, mas no momento é muito cedo para decidir, se vamos a precisar.
O campo do name deve ter um nome significativo e explicativo desse conjunto de opções
Podemos colocar ele como groupOpt1 (para este conjunto de opções), em caso de agregar um novo conjunto de opções podemos usar groupOpt2.
Ficando um código mais limpo:
Se queremos ter uma interação com a resposta do usuário podemos incorporar o EVENTO onclick na tag, ficando assim:
Replicamos esta linhas de código para fazer a opção b e c do botón, e serão do mesmo grupo groupOpt1
Pronta a estrutura semântica do html vamos para o cérebro do código o JavaScript (JS), é ele quem toma as decisões e faz acontecer algumas coisas na execução da aplicação (ganhando interatividade nossa página).
Para isso vamos a usar um botão chamado "Ver resultados" que vai a chamar uma função que está no arquivo JS
Ela deve comparar se a resposta escolhida pelo usuário bate com a resposta correta.
Aí vamos a fazer uma comparação e apresentar um mensagem na tela que fale correcto ou incorreto, dependendo da selecção do usuário.
Para isso vamos a entender primeiro o código 👀
e tratar de saber porque não faz nada 🙆
Por lógica devemos:
1.- Definir uma função, onde compara-se a resposta escolhida com a resposta correta.
2.- Chamar a função.
3.- Mostar um mensagem com "Resposta correta" ou "Resposta incorreta" segundo seja o caso.
Para o primeiro quesito - Definir a função com a comparação
Não temos essa função, vamos a declarar-a.
Declaramos a função por volta desse código, que chamaremos de answer
Damos um tab para identar o código, e dejarlo dentro da função
Para o segundo quesito - Chamar a função
Na linha 22 do HTML
Anexamos o evento onclick do button e chamamos a função
Agregamos um tag <p> para apresentar o menssagem do quesito 3, le definimos uma classe chamada mensagem e deixamos ela vazia (é no javascript que mandamos a escrever nela)
Ficando assim nosso HTML
Para o terceiro quesito - Mostrar "Resposta correta" e "Resposta Incorreta"
Na linha 2 do JS se declara a resposta c como correta
Agora vamos a responder a Trivia
Se selecionamos c dá correta
Se selecionamos a dá correta
E se selecionamos b dá correta
Sim, dá correta.
Opaaaaaa....
Então o código tem a condicional mal, analisemos o porque e melhoremos o código para que não fique errado.
O código, está comparando a resposta correta como o valor o valor c.
O código esta comparando resposta correcta que é igual a "c" com "c".
E com "c" é igual a "c".
Será verdadeiro, por isso entra no if e nunca vai entrar no else.
É por isso que escolhemos a opção que escolhemos no nosso programa, vai falar ao usuário que sua resposta está correta.
Porque c é igual a c.
Pensemos um poucoooooooo......
Como solucionar isto
Falta saber qual é a resposta escolhida pelo usuário, certo?
E como pegamos ela?
Tem um evento no DOM que é o checked (que el devolve a opção seleccionada)
E vamos guardar esse valor em uma variável.
Agora mudemos o if, e em lugar de ter que
Vamos a comparar se resposta correta é igual à resposta selecionada pelo usuário
Agora temos um bloco de if e else
Neste código a condicional tem só uma linha de código tanto para o if como para o esle, podemos apagar essas chaves
As chaves são usadas quando tem mais de uma linha, é optativo, mas fica mais limpo seu código 😉
Sem mais palavras bora testar novamente.
Selecionamos a
Agora sim está mostrando que é uma resposta incorreta
Porque ele pega na variável respostaCorreta o valor de C e o compara como o valor da variavel respostaDoUsuraio que é a
E como "c" não é igual "a", é falso, por isso entra no else mostrando o menssagem que a resposta é incorreta
E com b
E com c
Já está um código funcional e menos sujo do que estava rsrsrs 👻
Já você tentou pegar o código bugado de outra pessoa e consegue fazer ele correr.
Faça é uma experiência gratificante ajudar ao outro a sair do bug e continue, e outro factor que suma a você uma experiência nova de entendimento, com certeza vai fazer explodir sua cabeça rsrsrs
Frontend | JavaScript
https://www.linkedin.com/in/nadiduno/
Link do código: https://replit.com/@NadiDuno/TriviaWandinhaJs#index.html
