26 Feb javascript
Posted at 00:15h
in
code
by admin
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<script type="text/javascript" src="./scripts/jsb-global.js"></script>
<script type="text/javascript" src="./scripts/solar_quiz.js"></script>
<title>Document</title>
</head>
<body>
<div class='quiz-container' id='quiz'>
<div class='quiz-body'>
<h2 id='question'>Question Text:</h2>
<ul>
<li>
<input type="radio" id='a' name='answer' class='answer'>
<label for="a" id='a_text'>Question</label>
</li>
<li>
<input type="radio" id='b' name='answer' class='answer'>
<label for="b" id='b_text'>Question</label>
</li>
<li>
<input type="radio" id='c' name='answer' class='answer'>
<label for="c" id='c_text'>Question</label>
</li>
<li>
<input type="radio" id='d' name='answer' class='answer'>
<label for="d" id='d_text'>Question</label>
</li>
</ul>
</div>
<button id='submit'>Submit</button>
</div>
</body>
</html>
const quizData = [
{
question: 'Which planet is the smallest in the solar sytem?',
a: 'Mars',
b: 'Uranus',
c: 'Neptune',
d: 'Mercury',
correct: 'd',
},
{
question: 'Which planet is the largest in the solar sytem?',
a: 'Mars',
b: 'Jupiter',
c: 'Neptune',
d: 'Saturn',
correct: 'b',
},
{
question: 'Which planet is the closest to the sun?',
a: 'Mercury',
b: 'Jupiter',
c: 'Venus',
d: 'Saturn',
correct: 'a',
},
];
var oQuiz;
var aAnswers;
var oQuestion;
var a_text;
var b_text;
var c_text;
var d_text;
var oSubmit;
var currentQuiz = 0;
var score = 0
addEvent(window, "load", initialize);
function initialize()
{
oQuiz = document.getElementById('quiz');
aAnswers = document.querySelectorAll('.answer');
oQuestion = document.getElementById('question');
a_text = document.getElementById('a_text');
b_text = document.getElementById('b_text');
c_text = document.getElementById('c_text');
d_text = document.getElementById('d_text');
oSubmit = document.getElementById('submit');
loadQuiz();
oSubmit.onclick = answerQuestion;
}
function loadQuiz(){
for (var i=0; i<aAnswers.length; i++) {
aAnswers[i].checked = false;
}
var currentQuestion = quizData[currentQuiz];
oQuestion.innerText = currentQuestion.question;
a_text.innerText = currentQuestion.a;
b_text.innerText = currentQuestion.b;
c_text.innerText = currentQuestion.c;
d_text.innerText = currentQuestion.d;
}
function answerQuestion(){
var answer;
for (var i=0; i<aAnswers.length; i++) {
if (aAnswers[i].checked == true){
answer = aAnswers[i].id;
}
}
if (answer){
if (answer == quizData[currentQuiz].correct){
score ++;
}
currentQuiz++;
if (currentQuiz < quizData.length){
loadQuiz();
}
else{
oQuiz.innerHTML = '<h2>You answered correctly at '+score+'/'+quizData.length+ ' questions.</h2> <button onclick="location.reload()">Reload</button>';
}
}
}
No Comments