Примерен тест по CSS с малко JavaScript

CSS-test2
Реших да направя един примерен тест, който би помогнал на някой колеги от Телерик Академията да се подготвят за предстоящия изпит по CSS стилизиране. Тестът включва 30 въпроса и времето за изпълнение е ограничено до 45 минути. Въпросите за сега са само върху първата лекция – “Selectors, Styles, Classes”. Всички селектори, дори и най-рядко използваните са включени в теста.
 Измислянето на въпросите и описването им под формата на HTML и CSS ми отнеха най-много време. Най-интересната част беше правенето на логиката за оценяването. Това беше и първият ми допир с JavaScript.

Логиката

  1. Създаваме си функция, която ще оценява резултата от теста: CalculateResults();
  2. Създаваме си масив с 30 елемента съдържащ всички верни отговори: answeredAnswers;
  3. Завъртаме цикъл, който обхожда всички форми, в които са радио бутоните за избор на верен отговор. Формите съответно имат имена Form1 до Form30, и затова на всеки цикъл в променливата n към Form се долепя брояча на цикъла i + 1.
  4.  После вземаме всички HTML елементи в съответната форма и ги записваме в един масив:AllFormElements.
  5.  Завъртаме цикъл с тяхния брой и проверяваме всеки път дали това е радиобутон и съответно дали е избран. След като намерим маркирания отговор проверяваме дали това е верният отговор. Ако е верният отговор увеличаваме броя на верните отговори с единица. Ако не е верният отговор просто оцветяваме полето в червено. След всяка проверка на радио бутон той се деактивира с AllFormElements[j].disabled=true;
  6.  Селектираме всички полета с правилните 30 отговора и ги оцветяваме в зелено.
  7.  Принтираме резултата от теста във footer-а на страницата.
  8. Спираме Timer-a, с който отброяваме оставащото време. Логиката за таймера взаимствах от тук, но съм я променил леко: timer.
function CalculateResults()
{
	var correctAnswers = 0;
	var answeredAnswers = new Array("d","c","f","b","f","d","e","d","d","c","f","d","f","d","a","b","b","f","c","b","a","d","b","a","a","c","d","c","b","a");
	for(i = 0; i < 30; i++)
	{
		var n="Form".concat((i+1).toString());
		var AllFormElements = window.document.getElementById(n).elements;
		for (j = 0; j < AllFormElements.length; j++)
		{
			if(AllFormElements[j].type == 'radio')
			{
				if(AllFormElements[j].checked)
				{
					if(AllFormElements[j].value == answeredAnswers[i])
					{
						correctAnswers = correctAnswers + 1;
					}
					else
					{
						AllFormElements[j].parentNode.style.backgroundColor = '#FF0000';
					}

				}
				AllFormElements[j].disabled=true;
			}
		}
	}
	var correctElements = document.getElementsByClassName('correct');
	for(var i = 0; i < correctElements.length; i++)
	{
		correctElements[i].style.backgroundColor = '#00FF00';
	}
	if(correctAnswers == 1)
	{
		document.getElementById("result").innerHTML = ("You have 1 correct answer out of 30 questions!");
	}
	else
	{
		document.getElementById("result").innerHTML = ("You have ".concat((correctAnswers).toString())).concat(" correct answers out of 30 questions!");
	}
	Timer=0;
}

Приятно решаване –> CSS Test

Оставете коментар

Вашият имейл адрес няма да бъде публикуван. Задължителните полета са отбелязани с *