Julia Sememova
Jan 19, 20221 min
Updated: Jan 21, 2022
Сегодня мы с вами посмотрим как создать тестирование на сайте wix с помощью кода.
Описание кода
Элементы кода
Видео-инструкция
В этом примере я создала викторину, которая случайным образом выбирает 5 вопросов из базы данных. Как только посетитель сайта ответит на все вопросы викторины и отправит их, мы проверяем их ответы, показываем правильный ответ на каждый вопрос и отображаем окончательный результат.
Я создала коллекцию вопросов, в которой хранятся все вопросы и ответы посетителей.
Я добавила следующие элементы:
3 текстовых элемента: для приветствия посетителей сайта и отображения балла теста.
2 кнопки: кнопка запуска теста и кнопка отправки.
Репитер: содержит вопросы и возможные ответы на них. После отправки повторитель также содержит правильный ответ на каждый вопрос и текст, указывающий, был ли ответ посетителя правильным или неправильным.
Я добавила веб-модуль question.jsw для получения информации о вопросах и ответах из коллекции вопросов: getAllQuestions(): функция, которая запрашивает коллекцию и возвращает все ее элементы. getRandomQuestions(): функция, которая получает переменную, указывающую, сколько вопросов она должна вернуть. Функция вызывает функцию getAllQuestions() для получения всех вопросов и возвращает указанное количество случайно выбранных вопросов. Код страницы В функции $w.onReady мы инициируем обработчики событий onClick кнопок.
Когда посетитель сайта нажимает кнопку «Начать опрос», мы получаем 5 случайных вопросов с помощью функции getRandomQuestions() и привязываем их к данным повторителя. Нажимая кнопку отправки, мы сначала проверяем, что посетитель сайта ответил на все вопросы викторины. Если это так, мы подтверждаем ответы. Мы сравниваем каждый ответ с правильным ответом, полученным из данных теста, и показываем сообщение, сообщающее посетителю, является ли каждый ответ правильным или нет. Мы также оцениваем балл посетителя, добавляя 20 баллов за каждый правильный ответ.