JSFiddle - React, Tailwind, and code Playground

HTML

<center>
  <div style="margin-top: 200px;">
    <div id="area" class="wrapper">   
      <p style="font-size: 38px; font-weight: bold; padding-top: 2px; color: #fff;" id="question"></p>
      <button onclick="check(0)" class="myButton" id="option1"></button>
      <button onclick="check(1)" class="myButton" id="option2"></button>
      <button onclick="check(2)" class="myButton" id="option3"></button>
      <button onclick="check(3)" class="myButton" id="option4"></button>      
    </div>
  </div>
  <div id="shit" style="display: none">
    <span style="font-size: 38px; font-weight: bold;">Ответы на ошибки</span>
    <br>
  </div> 
  <br>
  <button id="start" class="myButton" onclick="starttest()">Приступить к тесту</button>
  <a id="end" style="display: none" class="myButton" onclick="restart()">Начать сначала</a>
</center>

CSS

<style type="text/css">body {
  background: url('http://getwallpapers.com/wallpaper/full/6/6/b/604364.jpg');
}

.wrapper {
  width: 600px;
  height: 130px;
  margin: 0 auto;
  display: none;
  border-radius: 10px;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  background: repeat-y #00008B;
}

.myButton {
  -moz-box-shadow: inset 0px 1px 0px 0px #54a3f7;
  -webkit-box-shadow: inset 0px 1px 0px 0px #54a3f7;
  box-shadow: inset 0px 1px 0px 0px #54a3f7;
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0.05, #007dc1), color-stop(1, #0061a7));
  background: -moz-linear-gradient(top, #007dc1 5%, #0061a7 100%);
  background: -webkit-linear-gradient(top, #007dc1 5%, #0061a7 100%);
  background: -o-linear-gradient(top, #007dc1 5%, #0061a7 100%);
  background: -ms-linear-gradient(top, #007dc1 5%, #0061a7 100%);
  background: linear-gradient(to bottom, #007dc1 5%, #0061a7 100%);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#007dc1', endColorstr='#0061a7', GradientType=0);
  background-color: #007dc1;
  -moz-border-radius: 3px;
  -webkit-border-radius: 3px;
  border-radius: 3px;
  border: 1px solid #124d77;
  display: inline-block;
  cursor: pointer;
  color: #ffffff;
  font-family: arial;
  font-size: 13px;
  padding: 6px 24px;
  text-decoration: none;
  text-shadow: 0px 1px 0px #154682;
}

.myButton:hover {
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0.05, #0061a7), color-stop(1, #007dc1));
  background: -moz-linear-gradient(top, #0061a7 5%, #007dc1 100%);
  background: -webkit-linear-gradient(top, #0061a7 5%, #007dc1 100%);
  background: -o-linear-gradient(top, #0061a7 5%, #007dc1 100%);
  background: -ms-linear-gradient(top, #0061a7 5%, #007dc1 100%);
  background: linear-gradient(to bottom, #0061a7 5%, #007dc1 100%);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#0061a7', endColorstr='#007dc1', GradientType=0);
  background-color: #0061a7;
}

.myButton:active...

JavaScript

var countQuest = 0;
var plus = 0;
var wronganswers = [];
//Массив вопросов
var questions = ["Hello", "House", "Tree", "Homeland", "Desolation", "Immortal", "Car", "Bus", "Life", "Irrelevant"];
//Массивы вариантов ответов
var variants = [
	["Дом", "Дом", "Дерево", "Природа", "Запустение", "Бессмертие", "Автобус", "Жизнь", "Дом", "Привет"],
	["Привет", "Кот", "Родина", "Родина", "Бессмертие", "Жизнь", "Машина", "Кот", "Запустение", "Жизнь"],
 	["Дерево", "Запустение", "Автобус", "Остров", "Стояк", "Массив", "Дерево", "Запустение", "Родина", "Незначительно"],
 	["Родина", "Автобус", "Жизнь", "Планета", "Машина", "Жизнь", "Незначительно", "Автобус", "Жизнь", "Дерево"]
]; 
//Массив правильных ответов
var answer = [1, 0, 0, 1, 0, 0, 1, 3, 3, 2];

var quest = document.getElementById('question');
var opt1 = document.getElementById('option1');
var opt2 = document.getElementById('option2');
var opt3 = document.getElementById('option3');
var opt4 = document.getElementById('option4'); 
var shit = document.getElementById('shit'); 

function starttest() { 
  document.getElementById('area').style.display = 'block'; 
  document.getElementById('start').style.display = 'none';
  document.getElementById('end').style.display = 'inline'; 
  nextQuestion();
}

function nextQuestion() {
	quest.textContent = questions[countQuest];
  opt1.textContent = variants[0][countQuest];
  opt2.textContent = variants[1][countQuest];
  opt3.textContent = variants[2][countQuest];
  opt4.textContent = variants[3][countQuest];  
}

function result() {
	document.getElementById('area').style.display = 'none';
  alert('У Вас ' + plus + ' правильных ответа!');
  alert('Правильных ответов ' + plus * 10 + '%.' + (plus == 10 ? ' Подарок в студию!': ''));  
  if (plus < 10) {
    for (var a of wronganswers)
      shit.innerHTML += questions[a] + ' – ' + variants[answer[a]][a] + '<br>';
    shit.style.display = 'block';
  }
}

function check(num) {  
  if (num == answer[countQuest]) plus++;
  else {
 ...