Quiz app



This is a simple quiz app made with Html CSS and JavaScript.. you can also add your own questions to it




<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=Edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>HTML</title>
  <!-- HTML -->
  <!-- Custom Styles -->
  <link rel="stylesheet" href="style.css">
</head>

<body>
  <div class="container">
    <div class="showBoard">
      <h2 id="demo"></h2>
      <h1>Score: <span id="showScore">0</span></h1>
    </div>
    <div class="totalArea">
      <div class="questionArea">
        <h3 id="showQuestion"></h3>
      </div>
      <div class="answers">
        <div class="option">A</div>
        <button class="opt" value="A"></button>
        </div>
      <div class="answers">
          <div class="option">B</div>
           <button class="opt" value="B"></button>
      </div>
      <div class="answers">
          <div class="option">C</div>
           <button class="opt" value="C"></button>
      </div>
      <div class="answers">
          <div class="option">D</div>
           <button class="opt" value="D"></button>
      </div>
    </div>
  </div>
  <script src="main.js"></script>
</body>

</html>                     
                  
                



 * {
  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+''
}