Сегодня мы с вами посмотрим как создать тестирование на сайте 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;
}

Как создать аналогичный опрос

Коллекция

Я создала коллекцию вопросов, в которой хранятся все вопросы и ответы посетителей.

Элементы страницы

Я добавила следующие элементы:

  1. 3 текстовых элемента: для приветствия посетителей сайта и отображения балла теста.

  2. 2 кнопки: кнопка запуска теста и кнопка отправки.

  3. Репитер: содержит вопросы и возможные ответы на них. После отправки повторитель также содержит правильный ответ на каждый вопрос и текст, указывающий, был ли ответ посетителя правильным или неправильным.

Код

Я добавила веб-модуль question.jsw для получения информации о вопросах и ответах из коллекции вопросов: getAllQuestions(): функция, которая запрашивает коллекцию и возвращает все ее элементы. getRandomQuestions(): функция, которая получает переменную, указывающую, сколько вопросов она должна вернуть. Функция вызывает функцию getAllQuestions() для получения всех вопросов и возвращает указанное количество случайно выбранных вопросов. Код страницы В функции $w.onReady мы инициируем обработчики событий onClick кнопок.

Когда посетитель сайта нажимает кнопку «Начать опрос», мы получаем 5 случайных вопросов с помощью функции getRandomQuestions() и привязываем их к данным повторителя. Нажимая кнопку отправки, мы сначала проверяем, что посетитель сайта ответил на все вопросы викторины. Если это так, мы подтверждаем ответы. Мы сравниваем каждый ответ с правильным ответом, полученным из данных теста, и показываем сообщение, сообщающее посетителю, является ли каждый ответ правильным или нет. Мы также оцениваем балл посетителя, добавляя 20 баллов за каждый правильный ответ.

← Все руководства по WixНайти другой материал →