JSFiddle - React, Tailwind, and code Playground

by Verdere

HTML

<style>
   body {
    background: url(http://s2.uploads.ru/t/5elYM.jpg)
   }
  </style>
<title>тест от Алексея</title>
<body>
  <div style="margin-top: 200px;">

		<div id="area" class="wrapper">

			<center>			
			
				<p style="font-size: 38px;font-weight: bold;padding-top: 2px;color: #fff;" id="question"></p>
			<div style="margin-top: 200px;">

					
			
				
			
      	<button onclick="check(0)" class="myButton12" id="option1"></button>
				
				<button onclick="check(1)" class="myButton12" id="option2"></button>
				
		
			
			
      
      </div>

	
     
        <center> 
     <div id="rezult" 
     style="margin-top: 200px;font-size: 58px;font-weight: bold;padding-top: 2px;color: #fff;">
               
     </div>  </center>
     
     
   	<br><center>
		<button id="start" class="myButton11" onclick="check(2)">Приступить к тесту</button>
  </center>
     

            
 <div class="buton2">   
  <br>
  <button id="end" style = "display:none" onclick="restart" class = "myButton11" >начать с начала</button>
	
  </div>


  <div class="buton1">
	<br><br><center><br>
		<button href="https://www.yandex.ru" 
    class="myButton11"> Вернуться в главное меню</button> 
	</center>
  </div>

CSS

.myButton12
               { 
              color: #524E49;
               background: #fdeaa8;
                padding: 10px; 
                font-size: 20px; 
                border-radius: 5px; 
                box-shadow: 0px 1px 3px;
                 position: relative; 
                 box-sizing: border-box; 
                 transition: all 500ms ease-out; } 
                 .myButton12:hover {
                  box-shadow: 0px 0px 0px 2px #f90914, 0px 0px 0px 7px #a7f9c9, 0px 0px 0px 9px #f90914, 0px 0px 5px 10px #ff4d00; }
    
    
     .myButton11
     
         {
          color: #524E49;
           background: #fdeaa8;
            padding: 10px; 
            font-size: 20px; 
            border-radius: 5px; 
            box-shadow: 0px 1px 3px; }
             .myButton11:hover {
              background-image: radial-gradient(ellipse farthest-corner at 50% 50%, #fdeaa8,#777);	}
     
	.wrapper{
		width: 700px;
		height: 100px;
		margin: 0 auto;
		display: none;
		border-radius: 10px;
		-webkit-border-radius: 10px;
		-moz-border-radius: 10px;
	}
     
 .buton1 {
    position: absolute;
    bottom: 80px; 
    right: 100px; 
    line-height: 1px;
  }
  
  .buton2 {
    position: absolute;
    bottom: 80px; 
    left: 100px;
    line-height: 1px;
  }

JavaScript

var countQuest = 0;
	var plus = 0;
	var test_start = 0;
	

      

       

     	function check(num){
	
		if(num == 2){ 
			
			document.getElementById('area').style.display='block'; //
			document.getElementById('start').style.display='none';
			document.getElementById('end').style.display='inline';

	

		if(test_start == 0){
			
					//Массив вопросов
				var questions = ["1. Вы состоялись как  специалистом в определенной области, возможно, даже не в одной. Вас ценят/ценили на работе.","2. У вас периодически возникают идеи, чем бы можно было заняться. Вы их не реализуете, а позднее вы видите, что их реализовал кто-то другой.","3. У вас есть собственные успехи в том деле, которым  вы планируете заниматься/занимаетесь","4. Вы не можете представить себе жизнь без развития и работы над собой"];

					//Массивы вариантов ответов
				var number1 = ["ДА","ДА","ДА","ДА"];	
				var number2 = ["НЕТ","НЕТ","НЕТ","НЕТ"];	
				

				document.getElementById('question').innerHTML=questions[countQuest];
				
				document.getElementById('option1').innerHTML=number1[countQuest];
				document.getElementById('option2').innerHTML=number2[countQuest];
				
				
					//Массив правильных ответов
				var answer = [0,0,0,0];
				
				test_start = 1;	
			}
		}
		else{
					//Массив вопросов
			var questions = ["1. Вы состоялись как  специалистом в определенной области, возможно, даже не в одной. Вас ценят/ценили на работе.","2. У вас периодически возникают идеи, чем бы можно было заняться. Вы их не реализуете, а позднее вы видите, что их реализовал кто-то другой.","3. У вас есть собственные успехи в том деле, которым  вы планируете заниматься/занимаетесь","4. Вы не можете представить себе жизнь без развития и работы над собой"];
			
				//Массивы вариантов ответов
			var number1 = ["ДА","ДА","ДА","ДА"];	
			var number2 = ["НЕТ","НЕТ","НЕТ","НЕТ"];	
			
			
				//Массив правильных ответов
			var answer = [0,0,0,0];
	
   		if(num == answer[countQuest]) plus++;
			
			if(questions.length -...