Добавление кнопок js, методом document.getElementById

171

19 июля 2018, 14:30

есть код, который выбирает и выводит рандомный элемент массива. Элемент массива представляет из себя вопрос с вариантами ответов. Пользователь отвечает и если ответ правильный, то переходит к следующему вопросу, если же неправильно, то выбранный ответ становится красным, а верный зеленым + внизу высвечивается комментарий. Не могу понять,в чем косяк с кнопками выбора ответа... Как это правильно организовать и в случае неправильного ответа вывести эти же кнопки, но с другим стилем и комментарием?

//вопрос, варианты ответа, комментарий, номер правильного ответа 
 
var data_array = [ 
  ["Вопрос", "Неверный ответ", "Неверный ответ", "Верный", "ком1", 3], 
  ["Вопрос", "Неверный ответ", "Верный", "Неверный ответ", "ком2", 2], 
  ["Вопрос", "Верный", "Неверный ответ", "Неверный ответ", "ком3", 1], 
  ["Вопрос", "Неверный ответ", "Неверный ответ", "Верный", "ком4", 3], 
  ["Вопрос", "Неверный ответ", "Неверный ответ", "Верный", "ком5", 3], 
  ["Вопрос", "Верный", "Неверный ответ", "Неверный ответ", "ком6", 1], 
]; 
 
 
 
var prov = []; //пустой массив, в который будут записывать используемые строки массива 
var p = 0; //подсчёт количества правилных ответов 
var i = 0; 
var plus = 0; 
var cur_answer = 0; 
 
 
while (i++ < 3) //повторение цикла три раза 0-2 
{ 
  var rand = Math.floor(Math.random() * data_array.length); //рандомный выбор индекса 
  function check(num) { 
 
    if (num == 0) { 
 
      document.getElementById("var1").style.display = "block"; 
      document.getElementById("var2").style.display = "block"; 
      document.getElementById("var3").style.display = "block"; 
      document.getElementById("question").style.display = "block"; 
 
      document.getElementById('var1').innerHTML = data_array[rand][1]; 
      document.getElementById('var2').innerHTML = data_array[rand][2]; 
      document.getElementById('var3').innerHTML = data_array[rand][3]; 
      document.getElementById('question').innerHTML = data_array[rand][0]; 
 
      document.getElementById('start').style.display = 'none'; 
 
    } else { 
      if (num == data_array[rand][4]) { 
        plus++; 
 
      } else { 
        document.getElementById('result').innerHTML = "Неверно!" + data_array[rand] data_array[rand][5]]; //вывод комментария 
    } 
  } 
} 
prov = prov.concat(data_array.splice(rand, 1)); //отрезаем выбранный элемент в другой массив, чтобы он больше не попадался 
} 
 
}

.wrong { 
  background-color: #ff3333; 
} 
 
.right { 
  background-color: #00b300; 
} 
 
#var1, 
#var2, 
#var3 { 
  display: none; 
  margin-bottom: 10px; 
}

<!DOCTYPE html> 
<html lang="ru-RU"> 
 
<head> 
  <meta charset="UTF-8"> 
</head> 
 
<body> 
  <p style="font-size: 14px;font-weight: bold;padding-top: 2px; line-height: 1.5; " id="question"></p> 
 
  <button onclick="check(1)" id="answ1"></button> 
 
  <button onclick="check(2)" id="answ2"></button> 
 
  <button onclick="check(3)" id="answ3"></button> 
 
  <p style="font-size: 14px;font-weight: bold;padding-top: 2px; line-height: 1.5; " id="result"></p> 
  <button id="start" onclick="check(0)">Приступить к тесту</button> 
 
</body> 
 
</html>