Debrief Page
Overview
After Phase 3 ends, participants land on the debrief page. It does two jobs, and both are required. First, it explains what the study was actually about, which may be a required part of your IRB protocol: participants weren't told about the phase structure during the task, because explicit knowledge of condition changes can drive behavior through rule-following rather than direct contact with the contingencies. The debrief is where you level with them. Second, it sends them back to Prolific with a completion code, which is how Prolific confirms they finished and how you approve their payment.
What You're Building
This is a preview of the page we are building.
Thank You
What This Study Was About
This study examined a phenomenon called resurgence: the reappearance of a previously reinforced behavior when a more recently reinforced alternative is discontinued. We were interested in whether clicking returned to the first circle during the final phase.
Why We Did Not Explain the Phases
Explicitly telling participants when conditions would change can cause behavior to be driven by verbal rules rather than direct experience with the task.
The preview shows the look; the real page adds three behaviors:
- It's only reachable by finishing. The page checks the participant's
record, and anyone whose task isn't complete gets sent back to
/task. The Return to Prolific button is only ever shown to someone who earned it. - The button closes the payment loop. It sends the participant to your study's completion address on Prolific, which marks their submission finished so you can approve payment.
- It fails safely. If the completion address isn't set up yet, the button falls back to the Prolific homepage instead of breaking. That's what will happen during local testing, and it's fine.
Building It With Claude Code
One setup note first. When you eventually create your study on Prolific
(two lessons from now), Prolific will give you a completion address that
looks like https://app.prolific.com/submissions/complete?cc=XXXXXXXX. The
page reads that address from a setting called PROLIFIC_COMPLETION_URL in
your .env file, the same file that holds your database connection. You
don't have it yet, and that's fine: the page falls back to the Prolific
homepage until you add it. Nothing to do right now except know it exists.
No schema changes this lesson; the taskCompleted field from the trial is
all the gate needs.
@prisma/schema.prisma
Build a debrief page at src/app/debrief/page.tsx. It should:
1. Check for the participant cookie. If missing, redirect to /.
2. Look up the participant in the database. If taskCompleted is false,
redirect to /task.
3. Display a debrief explaining that the study examined resurgence (the
return of a previously reinforced behavior when a more recently
reinforced alternative stops paying off), what happened in each phase,
and why the phase structure was not disclosed up front.
4. Show a "Return to Prolific" button that links to the
PROLIFIC_COMPLETION_URL environment variable, falling back to
https://app.prolific.com if it is not set.
Testing What You Built
Run the full flow one more time with a new ID: entry, consent, demographics, instructions, all three phases of the task. When Phase 3 ends, you should land here, on a real page, with no 404s left anywhere in the participant's path. The experiment is complete end to end.
The Return to Prolific button will go to the Prolific homepage for now, because the completion address isn't set yet. That's the fallback working as intended.
Then test the gate: open http://localhost:3000/debrief directly in the
same browser after starting a fresh ID that hasn't done the task. You
should be sent to /task, because the debrief checks for a finished task
before showing anything.
If You Get Stuck
Same pattern: what you did, what you expected, what happened, plus any error text. Common symptoms:
- You finished the task but get bounced to /task. The gate thinks you didn't finish, which usually means completion was never recorded. Check the participant's row first. "I completed all three phases but the debrief page keeps redirecting me to /task. taskCompleted shows false in Prisma Studio. Finishing the task is not being recorded."
- The gate doesn't work. "I can open /debrief directly without doing the task. It should redirect to /task unless taskCompleted is true. Fix the check."
- The button does nothing or errors. "The Return to Prolific button on the debrief page doesn't go anywhere. It should use the PROLIFIC_COMPLETION_URL setting and fall back to the Prolific homepage when that isn't set."
- You got sent to the entry page instead. Your cookie is gone, which happens after clearing the browser or the database mid-flow. Start a fresh run with a new ID.
Make It Your Own
The debrief text is placeholder language. Before going live, replace it with your IRB-approved debrief:
@src/app/debrief/page.tsx
Update the debrief text to match my IRB-approved language. The study is
run through [institution]. Contact for questions is [email]. Keep the
Return to Prolific button exactly as is.
The Code, If You're Curious
You don't need to read anything in this section to continue the course. It's here for the curious and for anyone who wants to compare against the checkpoint branch.
The debrief page: the gate, the text, and the button
import { cookies } from "next/headers";
import { redirect } from "next/navigation";
import prisma from "@/lib/prisma";
export default async function DebriefPage() {
const cookieStore = await cookies();
const participantId = cookieStore.get("participantId")?.value;
if (!participantId) {
redirect("/");
}
const participant = await prisma.participant.findUnique({
where: { id: participantId },
});
if (!participant?.taskCompleted) {
redirect("/task");
}
const completionUrl =
process.env.PROLIFIC_COMPLETION_URL ?? "https://app.prolific.com";
return (
<div className="max-w-2xl mx-auto px-6 py-12">
<h1 className="text-3xl font-bold text-zinc-900 dark:text-white mb-8">
Thank You
</h1>
<div className="space-y-8">
<section>
<h2 className="text-xl font-semibold text-zinc-800 dark:text-zinc-200 mb-3">
What This Study Was About
</h2>
<p className="text-zinc-600 dark:text-zinc-400">
This study examined a phenomenon called resurgence: the reappearance
of a previously reinforced behavior when a more recently reinforced
alternative is discontinued. During the task, clicking one circle
earned points in the first phase. In the second phase, a different
circle earned points. In the final phase, no circles earned points.
We were interested in whether clicking returned to the first circle
during the final phase.
</p>
</section>
<section>
<h2 className="text-xl font-semibold text-zinc-800 dark:text-zinc-200 mb-3">
Why We Did Not Explain the Phases
</h2>
<p className="text-zinc-600 dark:text-zinc-400">
We withheld information about the phase structure because explicitly
telling participants when conditions would change can cause behavior
to be driven by verbal rules rather than direct experience with the
task. This would make it harder to study how behavior responds
naturally to changes in reinforcement.
</p>
</section>
<section>
<h2 className="text-xl font-semibold text-zinc-800 dark:text-zinc-200 mb-3">
Questions or Concerns
</h2>
<p className="text-zinc-600 dark:text-zinc-400">
If you have any questions about this study, please contact the
research team at [researcher contact information].
</p>
</section>
<a
href={completionUrl}
className="block w-full text-center bg-zinc-900 dark:bg-white text-white dark:text-zinc-900 font-semibold py-4 px-6 rounded-lg text-lg"
>
Return to Prolific
</a>
</div>
</div>
);
}The short version: two gates run before anything shows (no cookie sends you
to the start; an unfinished task sends you back to it). The button is a
plain link to the completion address from your .env file, with the
Prolific homepage as the safe fallback. It's a link rather than a form
because it navigates away to another site; nothing else needs to happen.
🌿 Checkpoint branch: 07-debrief-page: This is the finished debrief page
with Prolific redirect. Check out this branch to see the completed page and
catch up to this point in the course.
⚠️ If you built earlier lessons yourself and then switch to this
branch: your database was set up by your own migrations, not this
branch's, so npm run db:migrate will report a mismatch and offer to
reset the database. Accepting the reset is the right move during the
course: it deletes your practice data and rebuilds the tables to match
this branch. Never accept a reset once real participant data is in the
database.