quiz

by zxzc0

HTML

<h1>Quiz</h1>
<div id="co">
  <div id="q">-</div>
  <div class="a" id="a1">-</div>
  <div class="a" id="a2">-</div>
  <br>
  <div class="a" id="a3">-</div>
  <div class="a" id="a4">-</div>
</div>

CSS

body{
  background-color: #21262D;
  color: #eee;
}

.a{
    display: inline-block;
    padding: 5px;
    cursor: pointer;
 }

JavaScript

let questions = [{
  q: 'ODP A',
  c: ['a', 'b', 'c', 'd'],
  a: 'a'
}, {
  q: 'ODP B',
  c: ['a', 'b', 'c', 'd'],
  a: 'b'
}, {
  q: 'ODP C',
  c: ['a', 'b', 'c', 'd'],
  a: 'c'
}, {
  q: 'ODP D',
  c: ['a', 'b', 'c', 'd'],
  a: 'd'
}];

const q = document.querySelector('#q');
const a1 = document.querySelector('#a1');
const a2 = document.querySelector('#a2');
const a3 = document.querySelector('#a3');
const a4 = document.querySelector('#a4');

let currentIndex, randIndex;

function quizInit() {
  if (randIndex === currentIndex) {
    randIndex = Math.floor(Math.random() * questions.length);
  }
  currentIndex = randIndex;
  q.innerText = questions[currentIndex].q;
  a1.innerText = questions[currentIndex].c[0];
  a2.innerText = questions[currentIndex].c[1];
  a3.innerText = questions[currentIndex].c[2];
  a4.innerText = questions[currentIndex].c[3];
}
//const matchA1 = questions[currentIndex].c[0] = 'a1';

a1.addEventListener("click", function() {

alert(a1.value);
alert(questions[currentIndex].a)

  if (a1.value === questions[currentIndex].a) {
    alert("correct");
  } else {
    alert("false");
  }
});

/*
a2.addEventListener("click", function() {
    if (questions[currentIndex].a2 === questions[currentIndex].c) {
        alert("correct");
    }
});

a3.addEventListener("click", function() {
    if (questions[currentIndex].a3 === questions[currentIndex].c) {
        alert("correct");
    }
});

a4.addEventListener("click", function() {
    if (questions[currentIndex].a4 === questions[currentIndex].c) {
        alert("correct");
    }
}); */

quizInit();