HTML
Score: 0
A
B
C
D
* {
margin: 0;
padding: 0;
box-sizing: border-box;
outline: none;
}
body {
background: #E6003A;
}
.container {
width: 100%;
padding: 2rem;
}
.totalArea {
width: 100%;
height: auto;
background: #fff;
border-top-left-radius: 15px;
border-top-right-radius: 15px;
padding-bottom: 15px;
box-shadow: 5px 10px 15px rgba(0,0,0,0.30);
}
.questionArea {
width: 100%;
height: 100px;
background: #343434;
border-top-left-radius: 15px;
border-top-right-radius: 15px;
margin-bottom: 15px;
display: inline-block;
padding: 10px;
font-family: sans-serif;
}
.answers{
width: 90%;
height: 70px;
border: 2px solid black;
margin: auto;
margin-bottom: 10px;
border-radius: 50px;
position: relative;
}
.option{
position: absolute;
top: 8px;
left: 10px;
width: 50px;
height: 50px;
border-radius: 50%;
border: 2px solid black;
text-align: center;
font-size: 25px;
line-height: 50px;
font-weight: 800;
}
#showQuestion{
text-align: center;
padding: 5px;
color: #fff;
font-size: 2rem;
}
.answers button{
width: 100%;
height: 100%;
border-radius: 50px;
font-size: 1.7rem;
border: none;
background: transparent;
font-weight: 700;
}
.active:active{
background: #16DB00;
}
.wrong:active{
background: #DB0000;
}
.showBoard{
width: 100%;
height: 100px;
background: #E3E3E3;
margin-bottom: 15px;
text-align: center;
padding: 10px;
}
.showBoard h1{
margin-top: 20px;
}
window.addEventListener('load', myFunction);
var options = document.getElementsByClassName('opt');
var scoring = 0;
var showQuesti = document.querySelector('#showQuestion');
var i;
var u = 0;
var questions = [
['Which is a JavaScript Framework', 'React', 'HTML', 'CSS', 'Bootstrap', 'A'],
['Who is the Founder of Facebook', 'Alon musk', 'Mark Zukerberg', 'Billgate', 'Donald', 'B'],
['Is HTML a programming Language', 'True', 'False', 'Maybe', 'I don"t know', 'B'],
['PHP is a ....', 'Frontent', 'Backend', 'Data structures', 'Api/ui', 'B']
]
function myFunction() {
showQuest();
}
for (i = 0; i < options.length; i++) {
options[i].addEventListener('click', function(e) {
u++;
if (e.target.value === questions[u][5]) {
this.classList.add('active');
scoring++;
} else {
this.classList.add('wrong')
}
showQuest();
showScore.innerHTML = scoring;
})
// setTimeout(changeColor, 500);
}
function showQuest() {
showQuesti.innerHTML = questions[u][0];
options[0].innerHTML = questions[u][1];
options[1].innerHTML = questions[u][2];
options[2].innerHTML = questions[u][3];
options[3].innerHTML = questions[u][4];
demo.innerHTML = 'Questtion '+(u + 1)+' of '+questions.length+''
}