Тест на javascript з відповідями та обліком часу, пошукове просування і створення сайту, уроки

Тест на javascript з відповідями та обліком часу, пошукове просування і створення сайту, уроки

Я вже публікував урок - як зробити тест. в тому уроці можна вибрати відповідь, але після вибору ви не дізнаєтеся правильну відповідь, навіть після проходження всього тесту.

Що вміє тест?

У цьому уроці ми створимо тест з наступними можливостями:

  • Можна буде вибрати варіант відповіді (1 з 4);
  • Після вибору відповіді, користувач буде знати - чи правильно він відповів на це питання;
  • Після проходження тесту, буде виведено кількість і відсоток правильних відповідей;
  • Буде засікати час, витрачений на проходження тесту;
  • Після тесту, буде виводитися оцінка (погано, добре, відмінно).

Отже, давайте почнемо!

Збереження даних

В першу чергу нам потрібно подумати про те, де ми буде зберігати такі дані:

  1. питання
  2. варіанти відповідей
  3. правильні відповіді

Найідеальніший варіант - це зберігати всі дані в одному масиві, це зручно тим, що для додавання (видалення, зміни) питання досить зробити правку в одному місці!

Будемо використовувати двовимірний масив, індекс цього масиву буде визначати номер питання, а кожен елемент масиву - це ще один масив, що містить в собі питання, варіанти відповідей і номер правильної відповіді (всього 6 елементів).

Давайте подивимося, як це буде виглядати:

Наприклад, для того, щоб дізнатися номер правильної відповіді для 3 питання (зліва направо), потрібно написати такий код:

Тобто в питанні, де потрібно перевести слово "Dog", правильну відповідь коштує на першому місці.

Для того, щоб дізнатися правильну відповідь для 3 питання (зліва направо), потрібно написати такий код:

Кінцевий варіант коду

Тепер приведу js код цілком і поясню основні моменти:

Для обліку часу (в секундах) буде використовуватися функція - "sec", ця функція збільшує змінну time на 1 і виводить нове значення на екран.

Для того, щоб час "йшло", використовується інтервал, встановлений на одну секунду - цей інтервал і запускає функцію sec (відразу після початку тесту).

В змінної "plus" ми зберігаємо кількість правильних відповідей, за замовчуванням в цій змінній зберігається 0, а при кожному правильній відповіді ця змінна збільшується відповідно на одиницю.

Для обчислення процентного показника (змінна percent) правильних відповідей, просто ділимо кількість правильних відповідь на загальне у запитань і множимо це значення на 100.

Для визначення загального кол-ва питань, просто визначаємо розмір масиву з даними, це означає, що при додаванні або видаленні питань з масиву, більше нічого змінювати не потрібно.

Також, після проходження тесту, користувачеві виставляється оцінка - в залежності від процентного показника правильних відповідей (percent):

  • за замовчуванням оцінка: погано!
  • якщо percent більше 80%: добре!
  • якщо percent дорівнює 100%: відмінно!

В принципі, це основні моменти, на які варто звернути увагу, ці значення (і умови) ви зможете змінити під свої потрібні.

Тепер ви можете перевірити тест на реальному прикладі, а також завантажити всі вихідні файли даного уроку (все в одному файлі)!