Создать опрос (викторину) на сайте wix
- 18 янв. 2022 г.
- 3 мин. чтения
Сегодня мы с вами посмотрим как создать тестирование на сайте wix с помощью кода.
Описание кода
Элементы кода
Описание примера
В этом примере я создала викторину, которая случайным образом выбирает 5 вопросов из базы данных. Как только посетитель сайта ответит на все вопросы викторины и отправит их, мы проверяем их ответы, показываем правильный ответ на каждый вопрос и отображаем окончательный результат.
Видео-инструкция по созданию кода
Пример кода
ГЛАВНАЯ | questions.jsw |
import { getRandomQuestions } from 'backend/questions';import wixWindow from 'wix-window';const numOfQuizQuestions = 5;let isUserAnswerValid;$w.onReady(function () { setUpEventHandlers();});function setUpEventHandlers() { $w('#startQuizBtn').onClick(async () => { $w('#submitBtn').expand(); $w('#welcomeGroup').collapse(); $w('#scoreGroup').collapse(); await initQuestionsData(); $w('#quizGroup').expand(); }); $w('#submitBtn').onClick(async () => { isUserAnswerValid = true; $w('#invalidMessageText').collapse(); await checkValidity(); if (isUserAnswerValid) { await submitAnswers(); $w('#scoreGroup').expand(); $w('#welcomeText').text = 'Lets try again'; $w('#welcomeGroup').expand(); } else { $w('#invalidMessageText').expand(); } wixWindow.scrollTo(0, 0); });}async function initQuestionsData() { const questions = await getRandomQuestions(numOfQuizQuestions); $w('#quizRepeater').data = questions; $w('#quizRepeater').onItemReady(($item, itemData, index) => { $item('#questionText').text = itemData.title; $item('#wrongAnswerText').hide(); $item('#correctAnswerText').hide(); $item('#correctAnswersGroup').hide(); if (itemData.type === 'radioGroup') { $item('#radioGroup').required = false; $item('#radioGroup').selectedIndex = null; setRadioGroupOptions($item, itemData); $item('#radioGroup').expand(); $item('#input').collapse(); } else { $item('#input').required = false; $item('#input').value = null; $item('#input').expand(); $item('#radioGroup').collapse(); } });}function setRadioGroupOptions($item, itemData) { let opts = []; itemData.answersList.forEach((answer) => { opts.push({ 'label': answer, 'value': answer }); }) $item('#radioGroup').options = opts;}async function checkValidity() { $w('#quizRepeater').forEachItem(($item, itemData, index) => { if (itemData.type === 'input') { $item('#input').required = true; isUserAnswerValid = (isUserAnswerValid && $item('#input').valid); } else { $item('#radioGroup').required = true; isUserAnswerValid = (isUserAnswerValid && $item('#radioGroup').value); } });}async function submitAnswers() { $w('#submitBtn').collapse(); let score = 0; $w('#quizRepeater').forEachItem(async ($item, itemData, index) => { let userAnswer; if (itemData.type === 'input') { userAnswer = $item('#input').value; } else { userAnswer = $item('#radioGroup').value; } if (userAnswer.toLowerCase() === itemData.correctAnswer.toLowerCase()) { score = score + 20; $w('#score').text = String(score); $item('#correctAnswerText').show(); } else { $item('#wrongAnswerText').show(); } $item('#correctAnswer').text = itemData.correctAnswer; $item('#correctAnswersGroup').show(); });} | import wixData from 'wix-data';const options = { 'suppressAuth': true};async function getAllQuestions() { try { const request = await wixData.query('questions').find(options); if (request.items.length > 0) { return request.items; } else { throw 'no items found'; } } catch (error) { console.error('an error was found in getAllQuestions function', error); }}export async function getRandomQuestions(numOfQuestions) { const allQuestions = await getAllQuestions(); const numberOfItems = allQuestions.length; let randomQuestions = []; while (randomQuestions.length < numOfQuestions) { const randomNumber = Math.floor(Math.random() * (numberOfItems)); let question = allQuestions[randomNumber]; if (randomQuestions.indexOf(question) < 0) { randomQuestions.push(question); } } return randomQuestions;} |
Как создать аналогичный опрос
Коллекция
Я создала коллекцию вопросов, в которой хранятся все вопросы и ответы посетителей.
Элементы страницы
Я добавила следующие элементы:
3 текстовых элемента: для приветствия посетителей сайта и отображения балла теста.
2 кнопки: кнопка запуска теста и кнопка отправки.
Репитер: содержит вопросы и возможные ответы на них. После отправки повторитель также содержит правильный ответ на каждый вопрос и текст, указывающий, был ли ответ посетителя правильным или неправильным.
Код
Я добавила веб-модуль question.jsw для получения информации о вопросах и ответах из коллекции вопросов: getAllQuestions(): функция, которая запрашивает коллекцию и возвращает все ее элементы. getRandomQuestions(): функция, которая получает переменную, указывающую, сколько вопросов она должна вернуть. Функция вызывает функцию getAllQuestions() для получения всех вопросов и возвращает указанное количество случайно выбранных вопросов. Код страницы В функции $w.onReady мы инициируем обработчики событий onClick кнопок.
Когда посетитель сайта нажимает кнопку «Начать опрос», мы получаем 5 случайных вопросов с помощью функции getRandomQuestions() и привязываем их к данным повторителя. Нажимая кнопку отправки, мы сначала проверяем, что посетитель сайта ответил на все вопросы викторины. Если это так, мы подтверждаем ответы. Мы сравниваем каждый ответ с правильным ответом, полученным из данных теста, и показываем сообщение, сообщающее посетителю, является ли каждый ответ правильным или нет. Мы также оцениваем балл посетителя, добавляя 20 баллов за каждый правильный ответ.
