How to Build a Online Quiz App with Lovable

1Create a quiz app with Supabase. Set up these tables:
2
3- quizzes: id (uuid pk), title (text not null), description (text), time_limit_seconds (int not null, e.g. 300 for 5 minutes), passing_score (int default 70, percentage), is_published (bool default false), created_by (uuid references auth.users), created_at
4- questions: id (uuid pk), quiz_id (uuid references quizzes on delete cascade), question_text (text not null), options (jsonb not null, array of strings, e.g. ["Paris", "London", "Berlin"]), correct_answer (int not null, 0-based index into options array), explanation (text, shown after submission), sort_order (int not null), created_at
5- quiz_attempts: id (uuid pk), quiz_id (uuid references quizzes), student_id (uuid references auth.users), answers (jsonb, array of int indices submitted by the student), score (int, percentage 0-100), passed (bool), time_taken_seconds (int), submitted_at, UNIQUE(quiz_id, student_id)
6
7RLS:
8- quizzes: anon/authenticated SELECT where is_published=true, admin INSERT/UPDATE/DELETE
9- questions: authenticated SELECT for question_text, options, sort_order, quiz_id only — NOT correct_answer or explanation (use column-level security or a view that excludes these columns)
10- quiz_attempts: students INSERT/SELECT their own rows, admin SELECT all
11
12Create a view questions_public that selects all columns EXCEPT correct_answer and explanation from questions. Grant SELECT on this view to authenticated users.
13
14Create an index on quiz_attempts(quiz_id, score DESC, time_taken_seconds ASC) for the leaderboard query.

1Build a quiz page at src/pages/TakeQuiz.tsx. Route: /quiz/:quizId.
2
3On mount:
41. Fetch quiz metadata (title, time_limit_seconds, question count)
52. Check if the student already has a quiz_attempt for this quiz. If so, redirect to /quiz/:quizId/results
63. Fetch questions from questions_public view ordered by sort_order
74. Set a startedAt = Date.now() in a ref (not state — prevents re-renders)
85. Initialize answers as an array of null values, one per question
9
10Timer logic:
11- Store remaining seconds in state, initialized from quiz.time_limit_seconds
12- useEffect with setInterval every 1000ms: setRemaining(r => r - 1)
13- When remaining reaches 0: clear the interval, call submitQuiz() with whatever answers are filled
14- Show remaining time as MM:SS format. Turn red when < 60 seconds. Show a pulsing Badge when < 30 seconds.
15- Do NOT reset or pause the timer when the user navigates between questions
16
17Question display:
18- Show one question at a time (current question index in state)
19- Question text in a large Card
20- RadioGroup with one RadioGroupItem per option (from the options JSON array)
21- 'Previous' and 'Next' Buttons. On last question, show 'Submit' Button.
22- Progress dots at the top showing answered (filled) vs unanswered (empty) for each question
23
24submitQuiz function:
25- Call supabase.functions.invoke('score-quiz', { body: { quizId, answers, startedAt } })
26- On success, navigate to /quiz/:quizId/results
27- Disable the submit button and show a loading spinner while scoring

1// supabase/functions/score-quiz/index.ts
2import { serve } from 'https://deno.land/std@0.168.0/http/server.ts'
3import { createClient } from 'https://esm.sh/@supabase/supabase-js@2'
4
5const cors = {
6  'Access-Control-Allow-Origin': '*',
7  'Access-Control-Allow-Headers': 'authorization, x-client-info, apikey, content-type',
8  'Content-Type': 'application/json',
9}
10
11serve(async (req: Request) => {
12  if (req.method === 'OPTIONS') return new Response('ok', { headers: cors })
13
14  const authHeader = req.headers.get('Authorization')
15  if (!authHeader) return new Response(JSON.stringify({ error: 'Unauthorized' }), { status: 401, headers: cors })
16
17  const { quizId, answers, startedAt } = await req.json()
18
19  const userClient = createClient(
20    Deno.env.get('SUPABASE_URL') ?? '',
21    Deno.env.get('SUPABASE_ANON_KEY') ?? '',
22    { global: { headers: { Authorization: authHeader } } }
23  )
24  const { data: { user } } = await userClient.auth.getUser()
25  if (!user) return new Response(JSON.stringify({ error: 'Unauthorized' }), { status: 401, headers: cors })
26
27  const supabase = createClient(
28    Deno.env.get('SUPABASE_URL') ?? '',
29    Deno.env.get('SUPABASE_SERVICE_ROLE_KEY') ?? ''
30  )
31
32  const { data: questions } = await supabase
33    .from('questions')
34    .select('id, correct_answer, explanation, sort_order')
35    .eq('quiz_id', quizId)
36    .order('sort_order')
37
38  if (!questions) return new Response(JSON.stringify({ error: 'Quiz not found' }), { status: 404, headers: cors })
39
40  const { data: quiz } = await supabase
41    .from('quizzes')
42    .select('passing_score, time_limit_seconds')
43    .eq('id', quizId)
44    .single()
45
46  const results = questions.map((q, i) => ({
47    questionId: q.id,
48    submittedAnswer: answers[i] ?? null,
49    correct: answers[i] === q.correct_answer,
50    correctAnswer: q.correct_answer,
51    explanation: q.explanation,
52  }))
53
54  const correctCount = results.filter((r) => r.correct).length
55  const score = Math.round((correctCount / questions.length) * 100)
56  const timeTaken = Math.min(Math.round((Date.now() - startedAt) / 1000), quiz?.time_limit_seconds ?? 999)
57  const passed = score >= (quiz?.passing_score ?? 70)
58
59  await supabase.from('quiz_attempts').insert({
60    quiz_id: quizId,
61    student_id: user.id,
62    answers,
63    score,
64    passed,
65    time_taken_seconds: timeTaken,
66    submitted_at: new Date().toISOString(),
67  })
68
69  return new Response(JSON.stringify({ score, passed, timeTaken, results }), { headers: cors })
70})

1Build two views:
2
31. src/pages/QuizResults.tsx — shown after quiz submission:
4- Fetch the student's quiz_attempt for this quiz
5- If no attempt found (came directly to this URL), redirect to /quiz/:quizId
6- Show a large score Badge: green if passed, red if failed
7- Show: 'You scored X% — You Passed!' or 'You scored X% — Better luck next time'
8- Show time_taken_seconds formatted as 'Completed in 3m 42s'
9- Show a list of results per question:
10  - Question text
11  - The answer the student chose (highlighted green if correct, red if incorrect)
12  - The correct answer (shown regardless)
13  - Explanation text in a muted paragraph below
14- Add a 'View Leaderboard' Button that shows a Sheet with the leaderboard
15
162. Leaderboard Sheet:
17- Fetch top 10 quiz_attempts for this quiz ordered by score DESC, time_taken_seconds ASC
18- Join with auth.users to get display names (or user_profiles if that table exists)
19- Render as a Table with columns: Rank (1st Badge gold, 2nd silver, 3rd bronze), Name, Score (%), Time
20- Highlight the current student's row with a different background