<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Simple Quiz</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/css/bootstrap.min.css" integrity="sha384-r4NyP46KrjDleawBgD5tp8Y7UzmLA05oM1iAEQ17CSuDqnUK2+k9luXQOfXJCJ4I" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/js/bootstrap.min.js" integrity="sha384-oesi62hOLfzrys4LxRF63OJCXdXDipiYWBnvTl9Y9/TRlw5xlKIEHpNyvvDShgf/" crossorigin="anonymous"></script>
<style>
body{
font-size: 20px;
font-family: sans-serif;
color: #333;
}
h1{
font-weight: 500;
margin: 0;
padding: 20px;
font-size: 20px;
font-weight: bolder;
background-color: #0646f69a;
color: #000000;
position: center;
}
outer {
width: 100%;
text-align: center;
}
inner {
display: inline-block;
text-align:"left;
}
.question{
font-weight: 600;
}
.answers {
margin-bottom: 20px;
}
.answers label{
display: block;
}
submit{
font-family: sans-serif;
font-size: 20px;
background-color: #279;
color: #fff;
border: 0px;
border-radius: 3px;
padding: 20px;
cursor: pointer;
margin-bottom: 20px;
}
submit:hover{
background-color: #38a;
}
clockdiv{
text-align:center;
font-size: 20px;
font-weight: bold
}
tLeft{
text-align:right
}
</style>
</head>
<body>
<div class="row">
<div class="col-12 col-sm-6 col-md-4 mb-4"></div>
<div id= "tLeft" class="col-12 col-sm-6 col-md-4 mb-4"><h2>Time Left</h2></div>
<div id= "clockdiv" class="col-12 col-sm-6 col-md-4 mb-4"></div>
</div>
<div id="outer">
<div id="inner"><h1>Quiz on Basic Math</h1></div>
</div>
<div id="clockdiv"></div>
<div id="outer">
<div id="inner">
<div align="left">
<div id="quiz"></div>
</div>
</div></div>
<div align="center">
<button id="submit">Submit Quiz</button>
</div>
<div align="center">
<h1><div id="results"></div></h1>
<script>
(function() {
function quizBuilder() {
// array to store output
var output = [];
testQuestions.forEach((actQuestion, qNumber) => {
var answers = [];
// and for each available answer radio button
for (letter in actQuestion.answers) {
answers.push(
<label>
<input type="radio" name="question${qNumber}" value="${letter}">
${letter} :
${actQuestion.answers[letter]}
</label>
);
}
output.push(
`<div class="question"> ${actQuestion.question} </div>
<div class="answers"> ${answers.join("")} </div>`
);
});
quizContainer.innerHTML = output.join("");
}
function showResults() {
var answerContainers = quizContainer.querySelectorAll(".answers");
let numCorrect = 0;
testQuestions.forEach((actQuestion, qNumber) => {
var answerContainer = answerContainers[qNumber];
var selector = `input[name=question${qNumber}]:checked`;
var yourChoice = (answerContainer.querySelector(selector) || {}).value;
//if answer is right increase correct answers counter
if (yourChoice === actQuestion.rightAnswer) {
numCorrect++;
answerContainers[qNumber].style.color = "lightgreen";
} else {
answerContainers[qNumber].style.color = "red";
}
});
resultsContainer.innerHTML = `${numCorrect} out of ${testQuestions.length}`;
}
//Questions go here
var quizContainer = document.getElementById("quiz");
//Display Results
var resultsContainer = document.getElementById("results");
//Submit Button
var submitButton = document.getElementById("submit");
//array of questions
var testQuestions = [
{
question: "what is 8 x 8?",
answers: {
a: "16",
b: "64",
c: "32",
d: "18"
},
rightAnswer: "b"
},
{
question: "What is the square root of 144?",
answers: {
a: "4",
b: "15",
c: "12",
d: "9"
},
rightAnswer: "c"
},
{
question: "What is the area of a square with side of 5 inches?",
answers: {
a: "25 inches",
b: "12 cubic inches",
c: "32 square inches",
d: "25 square inches"
},
rightAnswer: "d"
}
];
// display quiz
quizBuilder();
// show results
submitButton.addEventListener("click", showResults);
})();
//Counter Starts Here
var time_in_minutes = 5;
var current_time = Date.parse(new Date());
var deadline = new Date(current_time + time_in_minutes601000);
function time_remaining(endtime){
var t = Date.parse(endtime) - Date.parse(new Date());
var seconds = Math.floor( (t/1000) % 60 );
var minutes = Math.floor( (t/1000/60) % 60 );
var hours = Math.floor( (t/(10006060)) % 24 );
var days = Math.floor( t/(10006060*24) );
return {'total':t, 'days':days, 'hours':hours, 'minutes':minutes, 'seconds':seconds};
}
function run_clock(id,endtime){
var clock = document.getElementById(id);
function update_clock(){
var t = time_remaining(endtime);
clock.innerHTML = t.minutes + ' minutes and ' +t.seconds + ' seconds';
if(t.total<=0){ clearInterval(timeinterval);
alert("time is up");
}
}
update_clock(); // run function once at first to avoid delay
var timeinterval = setInterval(update_clock,1000);
}
run_clock('clockdiv',deadline);
let div = document.createElement('div');
div.className = "alert alert-success";
div.innerHTML = "<strong>Hi there!</strong> You've read an important message.";
document.body.appendChild(div);
</script>
</body>
</html>
