JSFiddle - React, Tailwind, and code Playground

HTML

<form name="frm1">
  <fieldset class="radius">
      <legend class="zag"><h3>Контроль знаний </h3></legend>
	  <div class="main"> <div class="field"> 
 <label>1)Какие типы файлов используются для получения  исполнимого модуля при программировании на Си++?   </label><br>
	  <input type="checkbox" name="vibor"> .cpp
	  <input type="checkbox" name="vibor"> .com
	 <input type="checkbox" name="vibor"> .txt 
	  <input type="checkbox" name="vibor"> .obj
	 <input type="checkbox" name="vibor">  .exe <br>
	   <label> 2)Каким знаком обозначаются команды препроцессора?   </label> <br>
	  <input type="radio" name="vib">  знаком amp
	  <input type="radio" name="vib">  знаком #
	 <input type="radio" name="vib">   знаком $
	  <input type="radio" name="vib">  знаком @ <br>
	    <label>3)На каком этапе работы с программой программист исправляет синтаксические ошибки в программе?  </label>
		<select size="1" multiple name="aye">
		<option value="1"> perecompil </option>
		<option value="2"> compil </option> 

		<option value="3"> c o m p a n o v k a </option> 
		</select> 
		<label> 4)Назовите системную программу, выполняющую редактирование связей. </label>
		<select size="1" multiple name="kerk">
		<option value="1"> редактор </option>
		<option value="2"> компилятор </option>
		<option value="3"> линкер </option> 
		</select> <br> 
  <input type="button" value="proveryai ???" onclick="todo()">
   </div></div>
  </fieldset>
  </form>

CSS

body {  
	 background-image: url(i.jpg)   }
      div{font-family:Arial;
            }
			.op{opacity:50;}
            .zag{align:center;
			color:#1E90FF;}
			
    background-color: #7B68EE;}
            .radius {
    background: #87CEEB; 
    border: 1px solid blue;
    border-radius: 4px;       
   }
  .field {clear:both; text-align:right; line-height:25px;}
  label {float:left; padding-right:10px;}
  .main {float:left}
  .border1 {
  box-shadow: 0 0 30px rgba(255, 0, 85, 1);
   margin: auto;
    background-color: #FFF8DC;
  padding:50px;
  border: ridge black 10px;
  border-radius:10%;
  width:1000px;
}
.opac{
opacity: 0.2;
}

JavaScript

function todo(){  
 var k=1;
 var y;
	if(frm1.vibor[0].checked){
	alert('Правильно 1-e');
	++k;
	}
	else alert ('Неправильно 1-e');
		
	if(frm1.vib[0].cheсked){
	alert('Правльно 2-e');
    ++k;
	}
	else 
		alert ('Неправильно 2-e');
	if(frm1.aye.value==2){
	alert('Правильно 3-e');
	++k;
	}
	else alert ('Неправильно 3-e');
	if(frm1.kerk.value==2){
		 alert('правильно 4-e');
		 ++k;
	 }
	else alert ('непрвильно 4-e');
	alert('ваша оценка' + k );
	y=5-k;
	alert('неправильных ответов'+ y);
}