Добрый день. В данной статье рассмотрим как сделать небольшой тест или опрос для пользователей на 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, чтобы не было возможности повторно проходить этот опрос. На этом все, не так сложно... Если статья была полезной, не забываем подписываться.
