📑 Тестування на JavaScript

Реалізуємо перевірку тесту за допомогою JavaScript.

Для початку, слід створити форму із запитаннями тесту, наприклад:

Ця форма створена наступним кодом

<form method="post" name="zno">
<p>Вкажіть своє ім'я та прізвище <input type="text" name="question0" id="person"></p>
<p>Вкажіть клас
<br><input type="radio" name="question1" id="variant11" value="11А">11А
<br><input type="radio" name="question1" id="variant12" value="11Б">11Б
<br><input type="radio" name="question1" id="variant13" value="11В">11В
</p>
<p>Вкажіть предмети, які будете здавати на ЗНО:
<br><input type="checkbox" name="question2" id="variant21" value="українська мова">українська мова
<br><input type="checkbox" name="question2" id="variant22" value="математика">математика 
<br><input type="checkbox" name="question2" id="variant23" value="англійська мова">англійська мова
<br><input type="checkbox" name="question2" id="variant24" value="історія">історія
</p>
<p>Вкажіть види складних речень:
<br><input type="checkbox" name="question3" id="variant31" value="складносурядні">складносурядні 
<br><input type="checkbox" name="question3" id="variant32" value="складносурядні">складнопідрядні  
<br><input type="checkbox" name="question3" id="variant33" value="безсполучникові">безсполучникові
<br><input type="checkbox" name="question3" id="variant34" value="розділові">розділові
</p>
<p>Скільки буде 2+2*2?
<select name="question4">
<option>2
<option>4
<option>6
<option>8
</select>
</p>
<p>Як англійською буде "стіл"?:
<br><input type="radio" name="question5" id="variant51" value="table">table
<br><input type="radio" name="question5" id="variant52" value="apple">apple 
<br><input type="radio" name="question5" id="variant53" value="tree">tree
<br><input type="radio" name="question5" id="variant54" value="car">car
</p>
<p>Коли прийнято Конституцію України? <input type="date" name="question6" id="question6">
</p>
<input name="check" onclick="perevirka(this.form)" type="button" value="Розрахувати бал">
<br><textarea name="display" rows="5" cols="50"> </textarea>
</form>

Зверніть увагу на кілька моментів: форма має назву zno , а кнопка її обробки запускає функцію перевірки onclick="perevirka(this.form)"

Кожне запитання має власну назву name, елементи також мають ідентифікатори id. У запитаннях checkbox та radio кожен варіант відповіді має ще атрибут value.

Розглянемо функцію perevirka, яка застосовується до форми із назвою zno:

<script>
function perevirka(zno){
var imya=document.getElementById("person").value;
var klas=document.querySelector('input[name="question1"]:checked').value;
var predmet="";
if (zno.question2[0].checked) {predmet=predmet+"українська мова"}
if (zno.question2[1].checked) {predmet=predmet+" математика"}
if (zno.question2[2].checked) {predmet=predmet+" англійська мова"}
if (zno.question2[3].checked) {predmet=predmet+" історія"}
var bal=0;
if (zno.question3[0].checked) {bal+=1;}
if (zno.question3[1].checked) {bal+=1;}
if (zno.question3[2].checked) {bal+=1;}
if (zno.question4.selectedIndex==2) {bal+=1;}
if (zno.question5[0].checked) {bal+=1;}
if (document.getElementById("question6").value=="1996-06-28") {bal+=1;}
zno.display.value ="Ваша інформація: "+ imya+" "+klas+" "+predmet+" Ваш бал: "+bal;
}
</script>

Розглянемо цей скрипт докладніше.

Перша команда var imya=document.getElementById("person").value; шукає в документі елемент з ідентифікатором person та записує введене у нього значення value в змінну imya.

Наступна команда var klas=document.querySelector('input[name="question1"]:checked').value; шукає елемент за назвою question1, і у змінну klas записує значення value позначеного checked елемента.

Наступний блок команд зчитує назви предметів. Оскільки можна обрати кілька предметів, обробка такого питання є дещо складнішою.

var predmet="";

if (zno.question2[0].checked) {predmet=predmet+"українська мова"}

if (zno.question2[1].checked) {predmet=predmet+" математика"}

if (zno.question2[2].checked) {predmet=predmet+" англійська мова"}

if (zno.question2[3].checked) {predmet=predmet+" історія"}

Змінна predmet створюється із порожнім значенням, і якщо елемент форми zno, що належить до question2 під номером 0, позначено checked, то до змінної predmet дописуємо українська мова. Аналогічно відбувається перевірка для усіх інших номерів відповідей на питання question2 . В результаті в змінній predmet сформовано рядок з усіх назв предметів, які обрав користувач.

Далі йде обробка відповідей користувача на фактичні питання. Змінна bal позначає кількість набраних балів.

Перше питання передбачає три правильні відповіді, за кожну з яких надається по 1 балу

if (zno.question3[0].checked) {bal+=1;}

якщо на формі zno, позначено checked елемент 0 питання question3 , то до балу додається 1.

Наступне питання має тип вибору зі списку, тож застосовується інший синтаксис перевірки:

if (zno.question4.selectedIndex==2) {bal+=1;}

якщо номер вибраної відповіді selectedIndex на питання question4 форми zno дорівнює 2, то до балу додається 1.

Обробка питання question5 типу radio у даному випадку дуже схожа на checkbox, оскільки немає потреби фіксувати сам текст відповіді, а лише перевіряти її номер: якщо він рівний 0, то до балу додається 1.

 if (zno.question5[0].checked) {bal+=1;}

І останнє питання типу date перевіряється через обране значення:

if (document.getElementById("question6").value=="1996-06-28") {bal+=1;}

якщо значення value, введене у елемент документа з ідентифікатором question6, рівне 1996-06-28 (дата у форматі рік-місяць-день), то до балу додається 1.

Таким чином за подібний тест можна отримати 6 балів. При потребі можна помножити це значення на 2 (тоді отримуємо оцінку в 12-бальній шкалі), чи на будь-яке інше число.

Остання команда скрипту 

zno.display.value ="Ваша інформація: "+ imya+" "+klas+" "+predmet+" Ваш бал: "+bal;

заповнює елемент display форми zno (це текстове поле).