Делаем опрос (тест) для пользователей на Nuxt3

Добрый день. В данной статье рассмотрим как сделать небольшой тест или опрос для пользователей на Nuxt 3 + supabase. В данной статье не буду рассматривать как установить Nuxt 3 + supabase. Это было рассмотрено в предыдущих статьях. Приступим...

Создаем файл opros.vue в папке pages и начинаем его наполнять.

<template>

<div class="text-white flex justify-center items-center mt-[50px]">

<div v-if="!data.opros" class="flex mb-4 flex-col">

<div v-if="fraze" class="bg-indigo-500 rounded-md w-[300px]">

{{ fraze }} Ваши баллы: {{ points }} Процент {{ percent }} %

</div>

<div v-if="percent < 66">Нормально</div>

<div v-for="(i, index) in opros.questions" :id="index">

{{ i.question }}

<div v-for="item in i.answers" class="flex items-center">

<input

@click="checkanswer(item, i.goodanswer, index)"

v-model="radio"

type="radio"

:value="item"

class="w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600"

/>

<label

for="default-radio-1"

class="ml-2 text-sm font-medium 0 text-white"

:class="disbutton ? 'display:none' : 'display: block'"

>{{ item }}</label

>

</div>

</div>

</div>

<div v-else>"Вы уже проходили этот опрос"</div>

</div>

</template>

Тут ничего сложного. Сделали перебор вопросов в массиве opros и вывели их + небольшой подсчет процента правильных ответов. Ниже в скрипте будем делать всю логику.

<script setup>

definePageMeta({

layout: "user",

middleware: ["auth"],

});

import opros from "../../src/opros.json"; //импорт вопросов из json файла

const supabase = useSupabaseClient(); //подключение supabase

const user = useSupabaseUser();

let radio = ref(""); // объявление переменных

let points = ref(null);// объявление переменных

let fraze = ref("");// объявление переменных

let disbutton = ref(false);// объявление переменных

let kolvo = ref(0);// объявление переменных

const { data } = await supabase // достаем из базы нашего пользователя

.from("profiles")

.select(`username, website, avatar_url,isadmin, tasks, opros`)

.eq("id", user.value.id)

.single();

const percent = computed(() => {

return Math.floor((points.value * 100) / opros.questions.length);

});

async function checkanswer(otvet, goodotvet, index) { // функция проверки ответа пользователя

var textarea = document.getElementById(index); // если на вопрос ответили, то не показываем его

textarea.style.display = "none";

if (otvet == goodotvet) {

kolvo.value = kolvo.value + 1;

console.log(kolvo.value);

points.value = points.value + 1;

fraze.value = "Вы ответили правильно";

disbutton.value = true;

} else {

kolvo.value = kolvo.value + 1;

fraze.value = "Вы ответили неправильно";

}

if (kolvo.value == opros.questions.length) {

alert("Все");

const { data, error } = await supabase

.from("profiles")

.upsert({ id: user.value.id, opros: true })

.select();

}

}

</script>

Накидываем функцию проверки ответа пользователя и учета количества правильных ответов checkanswer.

В конце опроса в базу в таблицу профилей пользователю, который прошел опрос ставим флаг opros: true, чтобы не было возможности повторно проходить этот опрос. На этом все, не так сложно... Если статья была полезной, не забываем подписываться.