Тест с въпроси и отговори в HTML код на JavaScript

В този и в няколко следващи урока ние с вас ще се заемем със създаване на тестове с въпроси и отговори. Ще започнем с най-простите варианти и постепенно ще усложняваме.

Нека за начало искаме да направим набор от въпроси, на всеки от които е възможен само един отговор. Нека отговорите се въвеждат от потребителя в инпути под самите въпроси.

Нека илюстрирам написаното с HTML код:

html<div id="test">
  <div>
    <p>въпрос 1?</p>
    <input>
  </div>
  <div>
    <p>въпрос 2?</p>
    <input>
  </div>
  <div>
    <p>въпрос 3?</p>
    <input>
  </div>
</div>

Както виждате, имаме въпроси и инпути за отговори. Остава да измислим къде ще съхраняваме правилните отговори.

Най-простото, което можем да измислим - това е да съхраняваме отговорите директно в HTML кода на инпутите, в някакъв data- атрибут:

html<div id="test">
  <div>
    <p>въпрос 1?</p>
    <input data-right="отговор 1">
  </div>
  <div>
    <p>въпрос 2?</p>
    <input data-right="отговор 2">
  </div>
  <div>
    <p>въпрос 3?</p>
    <input data-right="отговор 3">
  </div>
</div>

Следващият нюанс, който трябва да обмислим: в кой момент ще извършваме проверката на отговорите за правилност? Тук може да се предложат два варианта: или всеки инпут веднага след въвеждане на отговор в него да проверява дали този отговор е правилен, или да има бутон, при натискането на който ще се проверяват отговорите на всички въпроси наведнъж.

Независимо кой вариант изберем, нека, ако отговорът е правилен, границата на инпута да се оцветява в зелен цвят, а ако е неправилен - в червен. Нека направим за това съответните CSS класове:

css.right {
  border: 1px solid green;
}
.wrong {
  border: 1px solid red;
}