JSFiddle - React, Tailwind, and code Playground
HTML
<script type="text/javascript">
var countQuest = 0;
var plus = 0;
var test_start = 0;
function check(num){
if(num == 4){
document.getElementById('area').style.display='block'; //
document.getElementById('start').style.display='none';
document.getElementById('end').style.display='inline';
if(test_start == 0){
//Массив вопросов
var questions = ["Hello","House","Tree","Homeland","Desolation","Immortal","Car","Bus","Life","Irrelevant"];
//Массивы вариантов ответов
var number1 = ["Дом","Запустение","Жизнь"];
var number2 = ["Привет","Бессмертие","Незначительно"];
var number3 = ["Дерево","Машина"];
var number4 = ["Родина","Автобус"];
document.getElementById('question').innerHTML=questions[countQuest];
document.getElementById('option1').innerHTML=number1[countQuest];
document.getElementById('option2').innerHTML=number2[countQuest];
document.getElementById('option3').innerHTML=number3[countQuest];
document.getElementById('option4').innerHTML=number4[countQuest];
//Массив правильных ответов
var answer = [1,0,0,1,0,0,1,3,3,2];
test_start = 1;
}
}
else{
//Массив вопросов
var questions = ["Hello","House","Tree","Homeland","Desolation","Immortal","Car","Bus","Life","Irrelevant"];
//1001001332
//Массивы вариантов ответов
var number1 = ["Как дела","Дом", "Дерево", "Природа","Запустение", "Бессмертие", "Автобус", "Жизнь", "Дом", "Привет"];
var number2 = ["Привет", "Кот", "Родина", "Родина", "Бессмертие", "Жизнь", "Машина", "Мащина", "Запустение","Жизнь"];
var number3 = ["Пока", "Запустение","автобус","Остров", "Незначительно","Массив", "Дерево", "Незначительно","Родина", "Незначительно"];
var number4 = ["Дом", "Автобус", "жизнь", "Планета","Мащина", "Жизнь", "Незначительно","Автобус", "Жизнь", "Дерево"];
//Массив правильных...
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 {
position:relative;
top:1px;
}
</style>