<!
DOCTYPE html>
<body>
<div id="progressBar">
<div id="progressIndicator"></div>
</div>
<div id="header" style="margin-top: 4em;">
<h1>Space Quiz</h1>
<h3>Check your <span style="text-decoration: underline;">space</span> knowledge!</h3>
</div>
<div id="results">
<h1>Your Score: <span id="score"></span> / 7</h1>
<ul id="hints"></ul>
<button id="restartQuizBtn" onclick="restartQuiz();">Restart Quiz</button>
</div>
<div id="quiz">
<div>
<label for="q1">1. How many planets are there in our solar system?</label><br/>
<input type="number" id="q1" onblur="updateProgress(1)">
</div>
<div>
<label for="q2">2. What is at the center of our solar system?</label><br/>
<input type="text" id="q2" onblur="updateProgress(2)">
</div>
<div>
<label for="q3">3. What color is sunset on mars?</label><br/>
<select id="q3" onblur="updateProgress(3)">
<option value="" selected disabled hidden></option>
<option value="orange">Orange</option>
<option value="red">Red</option>
<option value="blue">Blue</option>
</select>
</div>
<div>
<label for="q4">4. On Venus: one day is longer than one year.</label>
<div>
<input type="radio" id="q4true" name="q4" value="true" onblur="updateProgress(4)">
<label for="q4true">True</label><br/>
<input type="radio" id="q4false" name="q4" value="false" onblur="updateProgress(4)">
<label for="q4false">False</label><br/>
</div>
</div>
<div>
<label for="q5">5. How many spherical Earths could fit inside the sun?</label><br/>
<select id="q5" onblur="updateProgress(5)">
<option value="" selected disabled hidden></option>
<option value="960k">960k</option>
<option value="2M">2M</option>
<option value="100k">100k</option>
</select>
</div>
<div>
<label for="q6">6. Space is...</label>
<div>
<input type="radio" id="q6silent" name="q6" value="silent" onblur="updateProgress(6)">
<label for="q6silent">Silent</label><br/>
<input type="radio" id="q6noisy" name="q6" value="noisy" onblur="updateProgress(6)">
<label for="q6noisy">Noisy</label><br/>
</div>
</div>
<div>
<label for="q7">7. What is the hottest planet in our solar system?</label><br/>
<input type="text" id="q7" onblur="updateProgress(7)">
</div>
<button onclick="markQuiz();">Submit</button>
</div>
</body>
body {
padding: 0;
margin: 0;
width: 100%;
background-image: url('space2.jpg');
background-size: cover;
font-family: 'calibri';
}
h1 {
font-family: 'comic sans ms';
text-transform: uppercase;
}
#header {
color: white;
text-align: center;
margin: 2em 0;
animation-name: spinHeader;
animation-iteration-count: 1;
animation-duration: 1s;
}
@keyframes spinHeader {
0% {transform: rotateY(180deg);}
50% {transform: rotateX(180deg);}
}
#quiz {
font-size: 1.5em;
background-color: rgba(0, 0, 0, .5);
padding: 2em;
border: solid 1px cyan;
color: white;
width: 70%;
margin: auto;
}
#quiz > div {
margin-bottom: 2em;
}
select, input:not([type=radio]) {
height: 2em;
width: 100%;
border-radius: 8px;
}
button {
padding: 8px 30px;
background: linear-gradient(lime, green, silver);
color: white;
border-radius: 20px;
font-size: 0.8em;
cursor: pointer;
transition: transform 2s;
}
button:hover {
transform: scale(1.5);
}
#results {
display: none;
color: white;
text-align: center;
padding: 10px;
background-color: rgba(0, 255, 0, 0.5);
}
#restartQuizBtn {
background: linear-gradient(coral, black, orange);
}
#progressBar {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 30px;
background-color: gray;
z-index: 10;
}
#progressIndicator {
position: fixed;
top: 0;
left: 0;
width: 0;
height: 30px;
background-color: green;
z-index: 20;
}
#hints {
margin-bottom: 2em;
font-size: 1.2em;
}
li > span:nth-child(2) {
color: red;
}
li > span:last-child{
color: lime;
}
solutions = [
8,
'sun',
'blue',
'true',
'960k',
'silent',
'venus'
];
answers = [];
score = 0;
incorrectAnswers = [];
function updateProgress(questionNo) {
var questionElement = document.getElementById('q' + questionNo);
if (questionElement && questionElement.value == '') {
// do nothing
} else {
var progressPercent = 15 * questionNo;
document.getElementById('progressIndicator').style.width = `${progressPercent}%`;
}
}
function markQuiz() {
try {
for (let i = 0; i < 7; i++) {
question = 'q' + (i + 1);
if (document.getElementById(question)) {
answers.push(document.getElementById(question).value);
} else {
answers.push(document.querySelector('input[name="' + question + '"]:checked').value);
}
}
} catch (error) {
alert('Please answer all the questions before clicking submit.');
answers = [];
return;
}
answers.forEach(markAnswer);
showResults();
}
function markAnswer(answer, index) {
if (answer == solutions[index]) {
score++;
} else {
incorrectAnswers.push(index);
}
}
function showResults() {
document.getElementById('quiz').style.display = 'none';
incorrectAnswers.forEach(showHint);
document.getElementById('results').style.display = 'block';
document.getElementById('score').innerHTML = score;
}
function showHint(incorrectAnswer, index) {
var userAnswer = answers[incorrectAnswer];
var hint = solutions[incorrectAnswer];
var questionNo = incorrectAnswer + 1;
var question = document.querySelector('label[for="q' + questionNo + '"]').innerHTML;
var ul = document.getElementById('hints');
var li = document.createElement('li');
var content = `${question}<br/><span>Your answer: ${userAnswer}</span> <span>Correct
answer: ${hint}</span>`;
li.innerHTML = content;
ul.appendChild(li);
}
function restartQuiz() {
answers = [];
score = 0;
incorrectAnswers = [];
document.getElementById('hints').innerHTML = '';
document.getElementById('quiz').style.display = 'block';
document.getElementById('results').style.display = 'none';
document.getElementById('progressIndicator').style.width = 0;
for (let i = 0; i < 7; i++) {
question = 'q' + (i + 1);
if (document.getElementById(question)) {
answers.push(document.getElementById(question).value);
} else {
document.querySelector('input[name="' + question + '"]').checked;
false;
}
}
}
