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

Во ова и во неколку следни лекции ние со вас ќе се занимаваме со создавање на тестови со прашања и одговори. Ќе започнеме со наједноставните варианти и постепено ќе ги комплицираме.

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

Ќе го илустрирам напишаното со HTML код:

html<div id="test">
  <div>
    <p>прашање 1?</p>
    <input>
  </div>
  <div>
    <p>прашање 2?</p>
    <input>
  </div>
  <div>
    <p>прашање 3?</p>
    <input>
  </div>
</div>

Како што гледате, ги имаме прашањата и input полињата за одговори. Останува да смислиме, каде ќе ги чуваме точните одговори.

Наједноставното што може да се смисли - е да ги чуваме одговорите директно во HTML кодот на input полињата, во некој 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>

Следниот нијанса што треба да се размисли: во кој момент ќе ја извршуваме проверката на одговорите за точност? Овде може да се предложат два варианта: или некое input поле веднаш по внесување на одговор во него да проверува дали тој одговор е точен, или нека има копче, при кликнување на кое ќе се проверат сите одговori на сите прашања одеднаш.

Кој од вариантите и да го избереме, ако одговорот е точен, тогаш границата на input полето нека ја бојиме во зелена боја, а ако е неточен - во црвена. Да направиме соодветни CSS класи за ова:

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