tag:blogger.com,1999:blog-42494387764536539322023-05-06T21:49:30.846-07:00Travelling and Tracking KnowledgeTravelling and Tracking Knowledgehttp://www.blogger.com/profile/00934996177338927497noreply@blogger.comBlogger1125tag:blogger.com,1999:blog-4249438776453653932.post-73094900283349983082023-04-18T01:03:00.005-07:002023-05-06T21:35:45.071-07:00<!doctype html>
<html><head>
<meta charset='utf-8'>
<meta name='viewport' content='width=device-width, initial-scale=1'>
<title>Exam Preparation MCQ</title>
<link href='' rel='stylesheet'>
<link href='' rel='stylesheet'>
<style>#quizWrap {
max-width: 600px;
margin: 0 auto;
}
#quizQn {
padding: 20px;
background: #4c93ba;
color: #fff;
font-size: 24px;
border-radius: 10px;
}
#quizAns {
margin: 10px 0;
display: grid;
grid-template-columns: auto auto;
grid-gap: 10px;
}
#quizAns input[type=radio] {
display: none;
}
#quizAns label {
background: #fafafa;
border: 1px solid #eee;
border-radius: 10px;
padding: 10px;
font-size: 20px;
cursor: pointer;
text-align: center;
}
#quizAns label.correct {
background: #d8ffc4;
border: 1px solid #60a03f;
}
#quizAns label.wrong {
background: #ffe8e8;
border: 1px solid #c78181;
}
* {
font-family: arial, sans-serif;
box-sizing: border-box;
}
body {
display: flex;
align-items: center;
justify-content: center;
min-height: 100vh;
text-align: center;
background: rgb(238, 174, 202);
background: radial-gradient(circle, rgba(238, 174, 202, 1) 0%, rgba(148, 187, 233, 1) 100%);
}
.widget-wrap {
width: 600px;
padding: 30px;
border-radius: 20px;
background: rgba(255, 255, 255, 0.4);
}</style>
<script type='text/javascript' src=''></script>
<script type='text/javascript' src='https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js'></script>
<script type='text/javascript' src=''></script>
</head>
<body oncontextmenu='return false' class='snippet-body'>
<div class="widget-wrap">
<h1>SIMPLE JS QUIZ</h1>
<div id="quizWrap"></div>
</div>
<script type='text/javascript'>var quiz = {
data: [
{
q: "What is the standard distance between the target and archer in Olympics?",
o: [
"50 meters",
"70 meters",
"100 meters",
"120 meters"],
a: 1
},
{
q: "Which is the highest number on a standard roulette wheel?",
o: [
"22",
"24",
"32",
"36"],
a: 3 },
{
q: "How much wood could a woodchuck chuck if a woodchuck would chuck wood?",
o: [
"400 pounds",
"550 pounds",
"700 pounds",
"750 pounds"],
a: 2 },
{
q: "Which is the seventh planet from the sun?",
o: [
"Uranus",
"Earth",
"Pluto",
"Mars"],
a: 0 },
{
q: "Which is the largest ocean on Earth?",
o: [
"Atlantic Ocean",
"Indian Ocean",
"Arctic Ocean",
"Pacific Ocean"],
a: 3 }],
hWrap: null, // HTML quiz container
hQn: null, // HTML question wrapper
hAns: null, // HTML answers wrapper
now: 0, // current question
score: 0, // current score
init: () => {
quiz.hWrap = document.getElementById("quizWrap");
quiz.hQn = document.createElement("div");
quiz.hQn.id = "quizQn";
quiz.hWrap.appendChild(quiz.hQn);
quiz.hAns = document.createElement("div");
quiz.hAns.id = "quizAns";
quiz.hWrap.appendChild(quiz.hAns);
quiz.draw();
},
draw: () => {
quiz.hQn.innerHTML = quiz.data[quiz.now].q;
quiz.hAns.innerHTML = "";
for (let i in quiz.data[quiz.now].o) {
let radio = document.createElement("input");
radio.type = "radio";
radio.name = "quiz";
radio.id = "quizo" + i;
quiz.hAns.appendChild(radio);
let label = document.createElement("label");
label.innerHTML = quiz.data[quiz.now].o[i];
label.setAttribute("for", "quizo" + i);
label.dataset.idx = i;
label.addEventListener("click", () => {quiz.select(label);});
quiz.hAns.appendChild(label);
}
},
select: option => {
let all = quiz.hAns.getElementsByTagName("label");
for (let label of all) {
label.removeEventListener("click", quiz.select);
}
let correct = option.dataset.idx == quiz.data[quiz.now].a;
if (correct) {
quiz.score++;
option.classList.add("correct");
} else {
option.classList.add("wrong");
}
quiz.now++;
setTimeout(() => {
if (quiz.now < quiz.data.length) {quiz.draw();} else { quiz.hQn.innerHTML=`You have answered ${quiz.score} of ${quiz.data.length} correctly.`; quiz.hAns.innerHTML="" ; } }, 1000); }, reset: ()=> {
quiz.now = 0;
quiz.score = 0;
quiz.draw();
} };
window.addEventListener("load", quiz.init);</script>
</body>
</html>Travelling and Tracking Knowledgehttp://www.blogger.com/profile/00934996177338927497noreply@blogger.com0