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

Публикувано от Петър Янков в категория CSS, JavaScript

Реших да направя един примерен тест, който би помогнал на някой колеги от Телерик Академията да се подготвят за предстоящия изпит по 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