Untitled
unknown
html
2 years ago
8.3 kB
7
Indexable
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap demo</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">
<style>
#opt_a:hover{
background-color: rgba(234, 255, 0, 0.338);
}
#opt_b:hover{
background-color: rgba(234, 255, 0, 0.338);
}
#opt_c:hover{
background-color: rgba(234, 255, 0, 0.338);
}
#opt_d:hover{
background-color: rgba(234, 255, 0, 0.338);
}
input{
display: none;
}
.btn{
display: none;
}
</style>
</head>
<body>
<h1 class="text-center">KBC Trivia</h1>
<div class="container">
<div class="row">
<div class="col-8 m-auto ">
<div class="questions">
<div class="question-box py-5">
<div class="main-question">
<p id="q_id" class="border ps-4 py-3 fs-4 fw-semibold rounded-pill bg-primary-subtle"></p>
</div>
<div class="main-options">
<div class="row">
<div class="col-6">
<div class="option-a">
<p id="opt_a" class="border ps-4 py-3 fs-5 rounded-pill"></p>
</div>
</div>
<div class="col-6">
<div class="option-a">
<p id="opt_b" class="border ps-4 py-3 fs-5 rounded-pill"></p>
</div>
</div>
<div class="col-6">
<div class="option-a">
<p id="opt_c" class="border ps-4 py-3 fs-5 rounded-pill"></p>
</div>
</div>
<div class="col-6">
<div class="option-a">
<p id="opt_d" class="border ps-4 py-3 fs-5 rounded-pill"></p>
</div>
</div>
</div>
</div>
<button class="btn btn-primary" id="btn" onclick="submitAns()">Submit</button>
</div>
</div>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL" crossorigin="anonymous"></script>
<script>
let questions = [
{
queId:01,
que:"What is the capital of India?",
optin:{
A:"Delhi",
B:"Kanpur",
C:"Gandhinagar",
D:"Mumbai"
},
correctOpt:{
B:"Delhi"
},
},
{
queId:02,
que:"What is the capital of Gujarat?",
optin:{
A:"Kanpur",
B:"Delhi",
C:"Gandhinagar",
D:"Mumbai"
},
correctOpt:{
B:"Delhi"
},
}
]
let q_id=document.getElementById('q_id').innerText="(1) " + questions[0].que
let opt_a=document.getElementById('opt_a').innerHTML="<input type='checkbox' id='input_a' />" + "(A) " + questions[0].optin.A
let opt_b=document.getElementById('opt_b').innerHTML="<input type='checkbox' id='input_b' />" + "(B) " + questions[0].optin.B
let opt_c=document.getElementById('opt_c').innerHTML="<input type='checkbox' id='input_c' />" + "(C) " + questions[0].optin.C
let opt_d=document.getElementById('opt_d').innerHTML="<input type='checkbox' id='input_d' />" + "(D) " + questions[0].optin.D
document.getElementById('opt_a').addEventListener("click",function(){
let check = document.getElementById('input_a').checked
if(check==true){
document.getElementById('input_a').checked=false;
document.getElementById('opt_a').style.background="none"
}else{
document.getElementById('input_a').checked=true;
document.getElementById('opt_a').style.background="rgba(234, 255, 0, 0.338)"
document.getElementById('opt_b').style.visibility="hidden";
document.getElementById('opt_c').style.visibility="hidden";
document.getElementById('opt_d').style.visibility="hidden";
document.getElementById('btn').style.display="block"
};
})
document.getElementById('opt_b').addEventListener("click",function(){
let check = document.getElementById('input_b').checked
if(check==true){
document.getElementById('input_b').checked=false;
document.getElementById('opt_b').style.background="none"
}else{
document.getElementById('input_b').checked=true;
document.getElementById('opt_b').style.background="rgba(234, 255, 0, 0.338)"
document.getElementById('opt_a').style.visibility="hidden";
document.getElementById('opt_c').style.visibility="hidden";
document.getElementById('opt_d').style.visibility="hidden";
document.getElementById('btn').style.display="block"
};
})
document.getElementById('opt_c').addEventListener("click",function(){
let check = document.getElementById('input_c').checked
if(check==true){
document.getElementById('input_c').checked=false;
document.getElementById('opt_c').style.background="none"
}else{
document.getElementById('input_c').checked=true;
document.getElementById('opt_c').style.background="rgba(234, 255, 0, 0.338)"
document.getElementById('opt_b').style.visibility="hidden";
document.getElementById('opt_a').style.visibility="hidden";
document.getElementById('opt_d').style.visibility="hidden";
document.getElementById('btn').style.display="block"
};
})
document.getElementById('opt_d').addEventListener("click",function(){
let check = document.getElementById('input_d').checked
if(check==true){
document.getElementById('input_d').checked=false;
document.getElementById('opt_d').style.background="none"
}else{
document.getElementById('input_d').checked=true;
document.getElementById('opt_d').style.background="rgba(234, 255, 0, 0.338)"
document.getElementById('opt_b').style.visibility="hidden";
document.getElementById('opt_c').style.visibility="hidden";
document.getElementById('opt_a').style.visibility="hidden";
document.getElementById('btn').style.display="block"
};
})
let submitAns=()=>{
let opt_a_checked=document.getElementById('input_a').checked;
// let opt_b_checked;
// let opt_c_checked;
// let opt_d_checked;
if(opt_a_checked==true){
alert("Right Answer")
} else {
alert("Wrong Answer")
}
}
</script>
</body>
</html>Editor is loading...
Leave a Comment