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.

yourapp.com/debrief

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.

A preview of the debrief page you are about to build.

The preview shows the look; the real page adds three behaviors:

  1. 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.
  2. 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.
  3. 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.