Creá un cuestionario en el sitio web de Wix.

Hoy vamos a ver cómo crear un cuestionario en un sitio web de Wix usando código.

Descripción del código

Elementos del código

Video tutorial

Descripción del ejemplo

En este ejemplo, creé un cuestionario que selecciona al azar 5 preguntas de una base de datos. Una vez que la persona visitante del sitio responde todas las preguntas y las envía, verificamos sus respuestas, mostramos la respuesta correcta para cada pregunta y mostramos el resultado final.

Ver un ejemplo

Video tutorial para crear el código

https://www.youtube.com/watch?v=U44kUDlunoI

Ejemplo de código

HOME

​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; }

Cómo crear un cuestionario similar

Colección

Creé una colección de preguntas que guarda todas las preguntas y las respuestas de las personas visitantes.

Elementos de la página

Agregué los siguientes elementos:

1. 3 elementos de texto: para dar la bienvenida a quienes visitan el sitio y mostrar el puntaje del cuestionario.

2. 2 botones: un botón para comenzar el cuestionario y otro para enviarlo.

3. Repeater: contiene las preguntas y sus posibles respuestas. Después de enviar el cuestionario, el repeater también muestra la respuesta correcta para cada pregunta y un texto que indica si la respuesta de la persona fue correcta o incorrecta.

Código

Agregué el módulo web question.jsw para obtener información sobre las preguntas y respuestas desde la colección de preguntas:getAllQuestions() es una función que consulta la colección y devuelve todos sus elementos.getRandomQuestions() es una función que recibe una variable que indica cuántas preguntas debe devolver. Esta función llama a getAllQuestions() para obtener todas las preguntas y devuelve la cantidad especificada de preguntas seleccionadas al azar. Código de la página

Dentro de la función $w.onReady, inicializamos los controladores de eventos onClick de los botones.

Cuando la persona visitante del sitio hace clic en el botón “Start Quiz”, obtenemos 5 preguntas aleatorias usando la función getRandomQuestions() y las vinculamos a los datos del repeater.

Cuando se hace clic en el botón de envío, primero verificamos que la persona visitante haya respondido todas las preguntas del cuestionario. Si es así, validamos las respuestas. Comparamos cada respuesta con la correcta obtenida de los datos del cuestionario y mostramos un mensaje que indica si cada respuesta es correcta o no.

También calculamos el puntaje de la persona sumando 20 puntos por cada respuesta correcta.

Ejemplo en el editor de Wix