Реалізація квізів та опросів
Квізи та опроси збирають зворотний зв'язок, проводять тестування, допомагають користувачам вибрати продукт. Ключові вимоги: гнучка структура питань, підтримка різних типів відповідей, відображення результатів.
Структура БД
CREATE TABLE quizzes (
id SERIAL PRIMARY KEY,
title VARCHAR(255) NOT NULL,
description TEXT,
type VARCHAR(50) NOT NULL DEFAULT 'survey', -- survey|quiz|poll
settings JSONB NOT NULL DEFAULT '{}', -- show_results, randomize, time_limit
is_active BOOLEAN NOT NULL DEFAULT true,
created_at TIMESTAMPTZ NOT NULL DEFAULT NOW()
);
CREATE TABLE questions (
id SERIAL PRIMARY KEY,
quiz_id INTEGER REFERENCES quizzes(id) ON DELETE CASCADE,
type VARCHAR(50) NOT NULL, -- text|choice|multiple|rating|nps
title TEXT NOT NULL,
required BOOLEAN DEFAULT true,
order_index INTEGER NOT NULL,
metadata JSONB DEFAULT '{}'
);
CREATE TABLE answers (
id SERIAL PRIMARY KEY,
question_id INTEGER REFERENCES questions(id),
text TEXT NOT NULL,
order_index INTEGER
);
CREATE TABLE responses (
id SERIAL PRIMARY KEY,
quiz_id INTEGER REFERENCES quizzes(id),
user_id INTEGER REFERENCES users(id),
ip_address INET,
data JSONB NOT NULL, -- {question_id: answer_value, ...}
completed_at TIMESTAMPTZ
);
React Компонент
function QuizForm({ quiz }: { quiz: Quiz }) {
const [responses, setResponses] = useState<Record<string, any>>({});
const handleSubmit = async () => {
const res = await fetch(`/api/quizzes/${quiz.id}/responses`, {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify(responses),
});
if (res.ok) alert('Дякуємо за ваш відгук!');
};
return (
<form onSubmit={handleSubmit}>
{quiz.questions.map(q => (
<QuestionField
key={q.id}
question={q}
onChange={(val) => setResponses(prev => ({...prev, [q.id]: val}))}
/>
))}
<button type="submit">Відправити</button>
</form>
);
}
Розклад
Базовий квіз з 3-4 типами питань та показом результатів: 2-3 дні. Продвинені функції (гілочення логіки, A/B тестування): 5-7 днів.