HTML Quiz Certo Errado

<!
DOCTYPE html>
<html>
<head>
<title>Quiz</title>
<style>
body {
background-color: #F0F8FF; /* Azul claro */
font-family: Arial, sans-serif;
}
.container {
max-width: 600px;
margin: 0 auto;
padding: 20px;
}
.question {
background-color: #084B8A; /* Azul escuro */
padding: 20px;
margin-bottom: 20px;
border: 10px solid #1087BF; /* Azul musgo */
border-radius: 30px;
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2); /* Sombra */
}
.question-text {
font-size: 20px;
color: #FFF;
}
.answer-button {
display: inline-block;
padding: 10px 20px;
background-color: #1087BF; /* Azul musgo */
color: #FFF;
border: none;
border-radius: 5px;
cursor: pointer;
margin-right: 10px;
}
.result {
margin-top: 20px;
font-size: 18px;
border: 10px solid #1087BF; /* Azul musgo */
border-radius: 30px;
padding: 20px;
background-color: #F0F8FF; /* Azul claro */
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2); /* Sombra */
}
.result-text {
font-size: 24px;
}
.result-answers {
}
.result-answer {
color: #24658F; /* Azul escuro */
}
.result-correct {
color: #32CD32; /* Verde */
}
.result-wrong {
color: #FF6347; /* Vermelho */
}
.result-stats {
font-weight: bold;
}
.restart-button {
display: inline-block;
padding: 10px 20px;
background-color: #1087BF; /* Azul musgo */
color: #FFF;
border: none;
border-radius: 5px;
cursor: pointer;
margin-top: 20px;
}
</style>
</head>
<body>
<div class="container">
<div class="question">
<p class="question-text">Questão 01 - A revisão de texto deve ser rígida e
unidirecional.</p>
<button class="answer-button" onclick="checkAnswer(false,
this)">Certo</button>
<button class="answer-button" onclick="checkAnswer(true,
this)">Errado</button>
</div>
<p class="question-text">Questão 02: O revisor de texto deve adaptar sua
revisão para cada caso específico.</p>
</div>
<p class="question-text">Questão 03: As revisões gramaticais devem ser
realizadas no final.</p>
</div>
<p class="question-text">Questão 04: A revisão gramatical deve ser realizada
durante todo o processo de revisão.</p>
</div>
<p class="question-text">Questão 05: As revisões não necessitam de pesquisas
complementares.</p>
</div><div class="result" style="display: none;">
<p class="result-text">Gabarito</p>
<div class="result-answers">
<p class="result-stats">Você acertou <span id="correct-answers">0</span> de
<span id="total-questions">0</span> questões.</p>
<p class="result-stats">Percentual de acertos: <span id="percentual-
acertos">0%</span></p>
</div>
<div id="result-answers"></div>
<button class="restart-button" onclick="restartQuiz()">Reiniciar Quiz</button>
</div>
</div>
<script>
const questionElements = document.querySelectorAll(".question");
const resultElement = document.querySelector(".result");
const correctAnswersElement = document.getElementById("correct-answers");
const totalQuestionsElement = document.getElementById("total-questions");
const percentualAcertosElement = document.getElementById("percentual-acertos");
const resultAnswersElement = document.getElementById("result-answers");
const restartButton = document.querySelector(".restart-button");
let currentQuestionIndex = 0;
let correctAnswers = 0;
let wrongAnswers = 0;
function showNextQuestion() {
if (currentQuestionIndex < questionElements.length) {
for (let i = 0; i < questionElements.length; i++) {
questionElements[i].style.display = "none";
}
questionElements[currentQuestionIndex].style.display = "block";
} else {
showResult();
}
}
function checkAnswer(isCorrect, selectedButton) {

if (isCorrect) {
correctAnswers++;
selectedButton.style.opacity = "1";
} else {
wrongAnswers++;
selectedButton.style.opacity = "0.5";
}
for (let i = 0; i <
questionElements[currentQuestionIndex].querySelectorAll(".answer-button").length;
i++) {
const answerButton =
questionElements[currentQuestionIndex].querySelectorAll(".answer-button")[i];
answerButton.disabled = true;
}
currentQuestionIndex++;
setTimeout(showNextQuestion, 1000);
}
function showResult() {
correctAnswersElement.innerText = correctAnswers;
totalQuestionsElement.innerText = questionElements.length;
const percentualAcertos = Math.round((correctAnswers /
questionElements.length) * 100);
percentualAcertosElement.innerText = percentualAcertos + "%";

const resultAnswer = document.createElement("p");
resultAnswer.classList.add("result-answer");
const questionText = questionElements[i].querySelector(".question-
text").innerText;
const userAnswer = questionElements[i].querySelectorAll(".answer-button")
[0].disabled ? "Certo" : "Errado";
const correctAnswer = questionElements[i].querySelectorAll(".answer-
button")[1].disabled ? "Certo" : "Errado";
resultAnswer.innerHTML = `${questionText}<br>Sua resposta: $
{userAnswer}<br>Resposta correta: ${correctAnswer}`;
if (userAnswer === correctAnswer) {

resultAnswer.classList.add("result-correct");
} else {
resultAnswer.classList.add("result-wrong");
}
resultAnswersElement.appendChild(resultAnswer);
}

questionElements[i].style.display = "none";
}
resultElement.style.display = "block";
}
function restartQuiz() {
currentQuestionIndex = 0;
correctAnswers = 0;
wrongAnswers = 0;

const answerButtons = questionElements[i].querySelectorAll(".answer-
button");
for (let j = 0; j < answerButtons.length; j++) {
answerButtons[j].style.opacity = "1";
answerButtons[j].disabled = false;
}
}
resultElement.style.display = "none";
resultAnswersElement.innerHTML = "";
showNextQuestion();
window.scrollTo(0, 0); // Scroll to top of the page
}
restartButton.addEventListener("click", restartQuiz);
showNextQuestion();
</script>
</body>
</html>

HTML Quiz Certo Errado

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

HTML Quiz Certo Errado

Uploaded by

Copyright:

Available Formats

<!

function checkAnswer(isCorrect, selectedButton) {

for (let i = 0; i < questionElements.length; i++) {

if (userAnswer === correctAnswer) {

for (let i = 0; i < questionElements.length; i++) {

for (let i = 0; i < questionElements.length; i++) {

You might also like