ChatGPT - Experimento 02 - Javascript para validar respostas
Olá, neste post vou mostrar como usar o ChatGPT para gerar um script Javascript para verificar respostas de perguntas numa página HTML.
Motivação
Para ajudar meus filhos nos estudos da língua inglesa, criei várias páginas HTML contendo perguntas sobre vários tópicos da gramática inglesa. Por exemplo, uma página contendo perguntas sobre a utilização do verbo To Be, outra página com perguntas sobre conjugação de verbos, e assim por diante.
Páginas HTML contendo apenas perguntas não ajuda muito nos estudos. Legal seria a página verificar se as respostas estão corretas e mostrar o resultado final, exibindo os acertos e os erros.
Existem algumas opções para fazer tal verificação. Poderia utilizar Javascript, Thymeleaf e Spring, Angular e Java ou Node.js.
Qualquer uma das opções exige um tempo considerável para implementar. Então pensei: a página esta bem estruturada e padronizada, se eu pedir para o ChatGPT criar um script Javascript para validar as perguntas, será que ele consegue?
Simmm, o ChatGPT consegue!!!
O experimento
Prompt que utilizei: A página HTML em anexo contem diversas perguntas nas tags input do tipo text. As perguntas são sobre o uso do verbo To Be. Gerar script Javascript para validar se o usuário respondeu corretamente cada pergunta.
Página anexada
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta charset="utf-8">
<meta name="author" content="Eros Vitor Bornatowski">
<meta name="description" content="Exercícios para fixação da gramática da língua inglesa.">
<title>CTSEnglishBook</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
<style type="text/css">
input[type=text] {
width: 80px;
}
</style
</head>
<body>
<div class="container-fluid p-4 bg-primary text-white text-center">
<h1>Verbo To Be</h1>
</div>
<div class="container mt-5">
<h3>Utilize corretamente o verbo To Be de acordo com o sujeito</h3>
<div class="row mb-3 g-3 align-items-center">
<div class="col-auto">
<label class="col-form-label">1. You</label>
</div>
<div class="col-auto">
<input id="edtQuestion1" type="text" class="form-control">
</div>
<div class="col-auto">
<label class="col-form-label">tired</label>
</div>
</div>
<div class="row mb-3 g-3 align-items-center">
<div class="col-auto">
<label class="col-form-label">2. She</label>
</div>
<div class="col-auto">
<input id="edtQuestion2" type="text" class="form-control">
</div>
<div class="col-auto">
<label class="col-form-label">american</label>
</div>
</div>
<div class="row mb-3 g-3 align-items-center">
<div class="col-auto">
<label class="col-form-label">3. He</label>
</div>
<div class="col-auto">
<input id="edtQuestion3" type="text" class="form-control">
</div>
<div class="col-auto">
<label class="col-form-label">in school</label>
</div>
</div>
<div class="row mb-3 g-3 align-items-center">
<div class="col-auto">
<label class="col-form-label">4. They</label>
</div>
<div class="col-auto">
<input id="edtQuestion4" type="text" class="form-control">
</div>
<div class="col-auto">
<label class="col-form-label">happy</label>
</div>
</div>
<div class="row mb-3 g-3 align-items-center">
<div class="col-auto">
<label class="col-form-label">5. Rex</label>
</div>
<div class="col-auto">
<input id="edtQuestion5" type="text" class="form-control">
</div>
<div class="col-auto">
<label class="col-form-label">a good dog</label>
</div>
</div>
<div class="row mb-3 g-3 align-items-center">
<div class="col-auto">
<label class="col-form-label">6. Tony</label>
</div>
<div class="col-auto">
<input id="edtQuestion6" type="text" class="form-control">
</div>
<div class="col-auto">
<label class="col-form-label">canadian</label>
</div>
</div>
<div class="row mb-3 g-3 align-items-center">
<div class="col-auto">
<label class="col-form-label">7. I</label>
</div>
<div class="col-auto">
<input id="edtQuestion7" type="text" class="form-control">
</div>
<div class="col-auto">
<label class="col-form-label">brazilian</label>
</div>
</div>
<div class="row mb-3 g-3 align-items-center">
<div class="col-auto">
<label class="col-form-label">8. We</label>
</div>
<div class="col-auto">
<input id="edtQuestion8" type="text" class="form-control">
</div>
<div class="col-auto">
<label class="col-form-label">home</label>
</div>
</div>
<div class="row mb-3 g-3 align-items-center">
<div class="col-auto">
<label class="col-form-label">9. Peter and Mary</label>
</div>
<div class="col-auto">
<input id="edtQuestion9" type="text" class="form-control">
</div>
<div class="col-auto">
<label class="col-form-label">married</label>
</div>
</div>
<div class="row mb-3 g-3 align-items-center">
<div class="col-auto">
<label class="col-form-label">10. Jennifer</label>
</div>
<div class="col-auto">
<input id="edtQuestion10" type="text" class="form-control">
</div>
<div class="col-auto">
<label class="col-form-label">a student</label>
</div>
</div>
<div class="row mb-3 g-3 align-items-center">
<div class="col-auto">
<label class="col-form-label">11. You</label>
</div>
<div class="col-auto">
<input id="edtQuestion11" type="text" class="form-control">
</div>
<div class="col-auto">
<label class="col-form-label">my friends</label>
</div>
</div>
<div class="row mb-3 g-3 align-items-center">
<div class="col-auto">
<label class="col-form-label">12. The cat</label>
</div>
<div class="col-auto">
<input id="edtQuestion12" type="text" class="form-control">
</div>
<div class="col-auto">
<label class="col-form-label">black and white</label>
</div>
</div>
<div class="row mb-3 g-3 align-items-center">
<div class="col-auto">
<label class="col-form-label">13. Beyoncé</label>
</div>
<div class="col-auto">
<input id="edtQuestion13" type="text" class="form-control">
</div>
<div class="col-auto">
<label class="col-form-label">a beautiful singer</label>
</div>
</div>
<div class="row mb-3 g-3 align-items-center">
<div class="col-auto">
<label class="col-form-label">14. Brad Piit and Leonardo Di Caprio</label>
</div>
<div class="col-auto">
<input id="edtQuestion14" type="text" class="form-control">
</div>
<div class="col-auto">
<label class="col-form-label">good actors</label>
</div>
</div>
<div class="row mb-3 g-3 align-items-center">
<div class="col-auto">
<label class="col-form-label">15. The pencil</label>
</div>
<div class="col-auto">
<input id="edtQuestion15" type="text" class="form-control">
</div>
<div class="col-auto">
<label class="col-form-label">blue</label>
</div>
</div>
<div class="row mb-3 g-3 align-items-center">
<div class="col-auto">
<label class="col-form-label">16. Mary and I</label>
</div>
<div class="col-auto">
<input id="edtQuestion16" type="text" class="form-control">
</div>
<div class="col-auto">
<label class="col-form-label">single</label>
</div>
</div>
<div class="row mb-3 g-3 align-items-center">
<div class="col-auto">
<label class="col-form-label">17. The cat and the dog</label>
</div>
<div class="col-auto">
<input id="edtQuestion17" type="text" class="form-control">
</div>
<div class="col-auto">
<label class="col-form-label">big</label>
</div>
</div>
<div class="row mb-3 g-3 align-items-center">
<div class="col-auto">
<label class="col-form-label">18. My brothers</label>
</div>
<div class="col-auto">
<input id="edtQuestion18" type="text" class="form-control">
</div>
<div class="col-auto">
<label class="col-form-label">nice</label>
</div>
</div>
<div class="row mb-3 g-3 align-items-center">
<div class="col-auto">
<label class="col-form-label">19. The hospital</label>
</div>
<div class="col-auto">
<input id="edtQuestion19" type="text" class="form-control">
</div>
<div class="col-auto">
<label class="col-form-label">in Brazil</label>
</div>
</div>
<div class="row mb-3 g-3 align-items-center">
<div class="col-auto">
<label class="col-form-label">20. I</label>
</div>
<div class="col-auto">
<input id="edtQuestion20" type="text" class="form-control">
</div>
<div class="col-auto">
<label class="col-form-label">a doctor</label>
</div>
</div>
<br/>
<button type="button" class="btn btn-primary">Verificar</button>
<button type="button" class="btn btn-secondary">Refazer</button>
<br/><br/>
</div>
</body>
</html>
Resposta do ChatGPT: A seguir, apresento um script em JavaScript para validar se as respostas inseridas pelo usuário nas perguntas sobre o uso do verbo to be estão corretas. O script verifica as respostas e destaca erros na tela. Além disso, exibe uma mensagem indicando o total de acertos.
// Respostas corretas
const answers = [
"are", "is", "is", "are", "is", "is", "am", "are", "are",
"is", "are", "is", "is", "are", "is", "are", "are", "are", "is", "am"
];
// Função para verificar respostas
function verificarRespostas() {
let totalCorretas = 0;
// Percorre todas as perguntas
answers.forEach((resposta, index) => {
const input = document.getElementById(`edtQuestion${index + 1}`);
const userAnswer = input.value.trim().toLowerCase();
if (userAnswer === resposta) {
input.classList.remove("is-invalid");
input.classList.add("is-valid");
totalCorretas++;
} else {
input.classList.remove("is-valid");
input.classList.add("is-invalid");
}
});
// Exibe mensagem com o total de acertos
alert(`Você acertou ${totalCorretas} de ${answers.length} questões.`);
}
// Função para limpar respostas
function refazerExercicio() {
answers.forEach((_, index) => {
const input = document.getElementById(`edtQuestion${index + 1}`);
input.value = "";
input.classList.remove("is-valid", "is-invalid");
});
}
// Adiciona eventos aos botões
document.querySelector("button:nth-child(1)").addEventListener("click", verificarRespostas);
document.querySelector("button:nth-child(2)").addEventListener("click", refazerExercicio);
Além de gerar o script, ele passou instruções de como utilizá-lo.
Instruções para uso:- Substitua os botões Verificar e Refazer no HTML atual com os seguintes códigos para ativar as funções JavaScript:
-
<button type="button" class="btn btn-primary" onclick="verificarRespostas()">Verificar</button> <button type="button" class="btn btn-secondary" onclick="refazerExercicio()">Refazer</button> - Adicione as classes de validação do Bootstrap no <head>, se ainda não estão disponíveis:
-
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet">
- Respostas corretas podem ser exibidas ao final
- Destaque em vermelho (para erro) e verde (para acerto) nas entradas já configuradas com classes is-invalid e is-valid do Bootstrap.
ChatGPT: Caso precise de ajustes adicionais, é só avisar!
Reparem que ele sujere melhorias. Aproveitei e pedi para ele implementar as melhorias.
Novo prompt: por favor, implemente as melhorias
Resposta do ChatGPT: Aqui está a versão aprimorada do script, que inclui a exibição das respostas corretas para perguntas erradas e destaca corretamente as respostas certas e erradas com cores no formulário. HTML com Botões Atualizados:
Substitua os botões existentes por:
<button type="button" class="btn btn-primary" onclick="verificarRespostas()">Verificar</button> <button type="button" class="btn btn-secondary" onclick="refazerExercicio()">Refazer</button>
Script Melhorado:
Adicione este script no final do arquivo HTML, antes do fechamento da tag </body>:
<script>
// Respostas corretas
const answers = [
"are", "is", "is", "are", "is", "is", "am", "are", "are",
"is", "are", "is", "is", "are", "is", "are", "are", "are", "is", "am"
];
// Função para verificar respostas
function verificarRespostas() {
let totalCorretas = 0;
answers.forEach((resposta, index) => {
const input = document.getElementById(`edtQuestion${index + 1}`);
const userAnswer = input.value.trim().toLowerCase();
if (userAnswer === resposta) {
// Marca como correto
input.classList.remove("is-invalid");
input.classList.add("is-valid");
totalCorretas++;
} else {
// Marca como incorreto e exibe a resposta correta
input.classList.remove("is-valid");
input.classList.add("is-invalid");
input.nextElementSibling?.remove(); // Remove mensagem antiga, se existir
const feedback = document.createElement("div");
feedback.className = "text-danger small mt-1";
feedback.innerText = `Resposta correta: "${resposta}"`;
input.parentNode.appendChild(feedback);
}
});
// Exibe mensagem com o total de acertos
alert(`Você acertou ${totalCorretas} de ${answers.length} questões.`);
}
// Função para limpar respostas
function refazerExercicio() {
answers.forEach((_, index) => {
const input = document.getElementById(`edtQuestion${index + 1}`);
input.value = "";
input.classList.remove("is-valid", "is-invalid");
input.nextElementSibling?.remove(); // Remove mensagens de resposta
});
}
</script>
Alterações e Destaques:
- Destaque em cores:
-
- Respostas corretas: borda verde com a classe is-valid.
- Respostas erradas: borda vermelha com a classe is-invalid.
- Exibição da resposta correta:
-
- Abaixo de cada entrada incorreta, uma mensagem com a resposta correta será exibida em vermelho.
- Função de refazer:
-
- Limpa todas as entradas, remove os destaques de validação e as mensagens exibidas.
- Bootstrap Feedback:
-
- Utilizamos classes de feedback do Bootstrap para manter o design visual e intuitivo.
- Ao verificar as respostas:
-
- Campos corretos serão destacados em verde.
- Campos errados serão destacados em vermelho com a mensagem da resposta correta logo abaixo.
Reparem que o ChatGPT lista as alterações efetuadas e também explica o resultado final. Simplesmente fantástico
Finalizando
Espero que tenha gostado e que este post possa ser, de alguma forma, útil nas suas pesquisas e estudos.
Um grande abraço e até o próximo post.
Comentários
Postar um comentário