Примерен тест по 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