Quiz Development with Result Calculation for Your Website
A typical situation: a company invests budget in developing a quiz, but after launch, the conversion rate does not exceed 5%. Visitors abandon the survey at the third question, the result calculation gives an obvious answer, and data does not reach the CRM. All because the quiz was built "on the knee": without thoughtful logic, without lead capture, and without analytics. We solve this problem by using an advanced engine with four types of quizzes and integration with popular CRMs. Our experience includes developing over 50 quizzes for various niches, from tariff selection to personality typing. After implementation, your quiz will convert as well as a personalized landing page.
By CXL, personalized interactive surveys double time on site and increase conversion by 30%.
How to Choose the Right Quiz Type for Your Business Tasks?
| Type | Description | Complexity | Suitable for |
|---|---|---|---|
| Typological | Each answer adds points to a profile, the profile with the maximum wins | Medium | Audience segmentation, tariff selection |
| Scored | Answers give numerical points, result determined by range | Low | Knowledge tests, level assessment |
| Branching | The next question depends on the previous answer | High | Complex scenarios with multiple outcomes |
| Recommendation | Collect parameters and recommend a product/specialist | Medium | Product selection, services |
Branching quizzes convert 25% better than linear ones, and typological quizzes convert 30% better than scored ones for segmentation. Choosing the right type directly affects engaged time and quality of leads.
Why Branching Logic Increases Conversion
Branching scenarios allow only relevant questions to be asked, excluding those not applicable to the user. This reduces cognitive load and increases engagement. In one project for an online school, we replaced a linear typological quiz with a branching one — lead conversion increased from 12% to 18%, and average completion time dropped by 40%.
How the Calculation Engine Works
Data structures are described in TypeScript: QuizQuestion, QuizAnswer, QuizResult. The JavaScript engine accumulates points across profiles and determines the result.
interface QuizQuestion {
id: string;
text: string;
type: 'single' | 'multiple' | 'scale';
answers: QuizAnswer[];
nextQuestion?: string | ((answers: Record<string, string[]>) => string);
}
interface QuizAnswer {
id: string;
text: string;
scores: Record<string, number>;
image?: string;
}
interface QuizResult {
id: string;
title: string;
description: string;
recommendation?: string;
cta?: { text: string; url: string };
minScore?: number;
maxScore?: number;
}
class QuizEngine {
constructor(questions, results) {
this.questions = questions;
this.results = results;
this.answers = {};
this.scores = {};
}
answer(questionId, answerIds) {
this.answers[questionId] = answerIds;
const question = this.questions.find(q => q.id === questionId);
for (const answerId of answerIds) {
const answer = question.answers.find(a => a.id === answerId);
if (!answer?.scores) continue;
for (const [profile, score] of Object.entries(answer.scores)) {
this.scores[profile] = (this.scores[profile] || 0) + score;
}
}
}
getNextQuestion(currentId) {
const question = this.questions.find(q => q.id === currentId);
if (typeof question.nextQuestion === 'function') {
return question.nextQuestion(this.answers);
}
return question.nextQuestion;
}
calculateResult() {
const [topProfile] = Object.entries(this.scores)
.sort(([, a], [, b]) => b - a);
return this.results.find(r => r.id === topProfile?.[0]) ?? this.results[0];
}
getTotalScore() {
return Object.values(this.scores).reduce((s, v) => s + v, 0);
}
}
React Component for Quiz with Lead Capture
The Quiz component manages steps, calls the engine, and displays the result after lead capture. Our React quiz component is reusable and customizable.
function Quiz({ config }) {
const engine = useRef(new QuizEngine(config.questions, config.results));
const [step, setStep] = useState(0);
const [selected, setSelected] = useState([]);
const [result, setResult] = useState(null);
const [leadCaptured, setLeadCaptured] = useState(false);
const currentQ = config.questions[step];
const progress = ((step / config.questions.length) * 100).toFixed(0);
function handleNext() {
engine.current.answer(currentQ.id, selected);
setSelected([]);
if (step + 1 >= config.questions.length) {
setResult(engine.current.calculateResult());
} else {
setStep(s => s + 1);
}
}
if (result && !leadCaptured) {
return (
<form onSubmit={(e) => { e.preventDefault(); submitLead({ contact: { email: e.target.email.value }, result, answers: engine.current.answers }); setLeadCaptured(true); }}>
<h3>Your result is ready!</h3>
<p>Enter your email to get personalized recommendations</p>
<input name="email" type="email" placeholder="[email protected]" required />
<input name="name" placeholder="Name (optional)" />
<button type="submit">Show result</button>
</form>
);
}
if (result && leadCaptured) {
return <QuizResult result={result} score={engine.current.getTotalScore()} />;
}
return (
<div className="quiz">
<ProgressBar value={progress} />
<QuizQuestion
question={currentQ}
selected={selected}
onSelect={setSelected}
/>
<button onClick={handleNext} disabled={!selected.length}>
{step + 1 < config.questions.length ? 'Next' : 'Get result'}
</button>
</div>
);
}
A lead capture quiz is proven to increase conversion rates by 35% on average. For analytics, we use GTM or GA4: track each step and completion.
function trackStep(questionIndex, questionId) {
window.dataLayer?.push({
event: 'quiz_step',
quiz_step: questionIndex + 1,
quiz_question_id: questionId,
});
}
function trackCompletion(resultId, score) {
window.dataLayer?.push({
event: 'quiz_complete',
quiz_result: resultId,
quiz_score: score,
});
}
How We Create a Quiz: Step-by-Step Process
- Analytics and requirements gathering — define the goal, target audience, and scenarios.
- Logic design — choose the quiz type, build question tree and calculation rules.
- Interface design — create a prototype in Figma with responsive layout and animation.
- Engine and component development — implement in React with optional TypeScript.
- CRM integration — set up lead transfer via REST API or webhooks.
- Testing and Q/A — check all scenarios, calculation correctness, usability.
- Launch and analytics — deploy to production, set up events.
- Post-launch support — monitoring, fixes, optimization.
What's Included in the Development
- Technical specification with detailed logic description.
- Interface prototype in Figma.
- Layout of responsive components with animation.
- Implementation of the calculation engine supporting the chosen type.
- CRM integration (Bitrix24, amoCRM, HubSpot) via REST API or webhooks.
- Event setup in GA4 / Yandex Metrica.
- Integration documentation and manual for managers.
- Training the team on working with quiz results.
Advantages of Developing a Quiz with Our Team
We use our own flexible engine that adapts to any logic — from simple scored to complex branching with dynamic rules. The quiz can be embedded on any site: as a separate page, popup, or widget. Transition animation using framer-motion makes the process smooth and engaging.
We guarantee fixed deadlines and transparent pricing. Our team has 5+ years of experience in developing over 50 quizzes for various industries. Quiz development pays for itself in 1–2 months due to increased lead generation conversion. One of our clients increased the number of qualified leads by 60% in just 3 weeks after launch. Budget savings — up to 40% compared to developing from scratch without a ready-made engine.
Development Timelines and Costs
| Quiz Type | Timelines | Cost Estimate |
|---|---|---|
| Simple (5–10 questions, lead capture, result) | 3–4 business days | from $500 |
| Medium complexity (branching, multiple profiles, animation) | 6–8 business days | from $1,500 |
| Complex (branching, integration, A/B testing) | 8–12 business days | from $3,000 |
Pricing is calculated individually after agreeing on the technical specification. Order an engineer consultation — get an estimate for your project.