<!
DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
body {
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
margin: 0;
font-family: Arial, Helvetica, sans-serif;
}
#question-container {
display: flex;
justify-content: space-around;
margin-top: 20px;
}
#options-container {
display: flex;
justify-content: space-around;
margin-top: 20px;
}
button {
padding: 10px;
font-size: 16px;
cursor: pointer;
}
#result {
margin-top: 20px;
}
</style>
</head>
<body>
<div id="question-container">
<h2 id="question"></h2>
<div id="options-container">
<!--opção de resposta serão adicionadas dinamicamente aqui-->
</div>
<p id="result"></p>
<button onclick="nextQuestion()"> Próxima pergunta</button>
</div>
<script>
const questions = [
{question: 'Pergunta 01', options: ['Resposta 01', 'Resposta 02', 'Resposta
03'], correctAnswer: 'Resposta 02', points:10},
{question: 'Pergunta 02', options: ['Resposta 01', 'Resposta 02', 'Resposta
03'], correctAnswer: 'Resposta 02', points:10},
{question: 'Pergunta 03', options: ['Resposta 01', 'Resposta 02', 'Resposta
03'], correctAnswer: 'Resposta 02', points:10},
{question: 'Pergunta 04', options: ['Resposta 01', 'Resposta 02', 'Resposta
03'], correctAnswer: 'Resposta 02', points:10},
{question: 'Pergunta 05', options: ['Resposta 01', 'Resposta 02', 'Resposta
03'], correctAnswer: 'Resposta 02', points:10},
{question: 'Pergunta 06', options: ['Resposta 01', 'Resposta 02', 'Resposta
03'], correctAnswer: 'Resposta 02', points:10},
{question: 'Pergunta 07', options: ['Resposta 01', 'Resposta 02', 'Resposta
03'], correctAnswer: 'Resposta 02', points:10},
{question: 'Pergunta 08', options: ['Resposta 01', 'Resposta 02', 'Resposta
03'], correctAnswer: 'Resposta 02', points:10},
{question: 'Pergunta 09', options: ['Resposta 01', 'Resposta 02', 'Resposta
03'], correctAnswer: 'Resposta 02', points:10},
{question: 'Pergunta 10', options: ['Resposta 01', 'Resposta 02', 'Resposta
03'], correctAnswer: 'Resposta 02', points:10},
];
let currentQuestionIndex = 0;
let totalPoints = 0;
function loadQuestion() {
const questionElement = document.getElementById('question');
const optionsContainer = document.getElementById('options-container');
const resultElement = document.getElementById('result');
questionElement.textContent = questions[currentQuestionIndex].question;
optionsContainer.innerHTML = ''; //limpar as opções anteriores
questions[currentQuestionIndex].options.forEach((option) => {
const button = document.createElement('button');
button.textContent = option;
button.onclick = () => checkAnswer(option);
optionsContainer.appendChild(button);
});
resultElement.textContent = '';
}
function checkAnswer(selectedAnswer) {
const currentQuestion = questions[currentQuestionIndex];
const correctAnswer = currentQuestion.correctAnswer;
const resultElement = document.getElementById('result');
if (selectedAnswer === correctAnswer) {
totalPoints += currentQuestion.points;
resultElement.textContent = `Resposta Correta! pontos ganhos:$
{currentQuestion.points}`;
resultElement.style.color = 'green';
} else {
resultElement.textContent = `Resposta incorreta. pontos: 0. tente
novamente.`;
resultElement.style.color = 'red';
}
}
function nextQuestion() {
currentQuestionIndex++;
if (currentQuestionIndex < questions.length) {
loadQuestion();
} else {
document.getElementById('question-container').innerHTML = `<h2> Fim do
quiz </h2> <p>Pontuação Total: ${totalPoints} pontos</p>` ;
}
}
//Carrega a primeira pergunta ao iniciar a página
loadQuestion();
</script>
</body>
</html>
