Создать опрос (викторину) на сайте wix

Обновлено: 21 янв.

Сегодня мы с вами посмотрим как создать тестирование на сайте wix с помощью кода.


Описание кода

Элементы кода

Видео-инструкция


Описание примера

В этом примере я создала викторину, которая случайным образом выбирает 5 вопросов из базы данных. Как только посетитель сайта ответит на все вопросы викторины и отправит их, мы проверяем их ответы, показываем правильный ответ на каждый вопрос и отображаем окончательный результат.


Создать опрос (викторину) на сайте wix

Видео-инструкция по созданию кода


Пример кода

ГЛАВНАЯ

​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'; c