Build an AI Review Prototype

Introduction

30 Second Summary

A confident recommendation can feel easy to trust when the evidence stays out of sight. That missing context can hide who faces the greatest impact.

In this project, you will build a browser-based review interface for a fictional customer-incident decision. The finished page gives you enough context to practise accountable human-AI oversight.

What You'll Build

The finished prototype turns a confident recommendation into an accountable decision by revealing evidence before displaying your recorded rationale.

By the end of this project, you'll have:

• An evidence comparison that lets you weigh reach, impact, time pressure, and workarounds across three fictional incidents.
• An accept-or-override workflow that gives the reviewer final authority over the simulated recommendation.
• A visible decision receipt that displays the chosen outcome together with the human rationale.
• Secret Mission: Add a Defer and request evidence path that records the missing information needed before a decision.

Do I need any experience before starting?

A Windows computer is the only prerequisite. No prior web development experience is required because the project includes the full Visual Studio Code setup.

Before We Start

Before any hands-on work begins, this checkpoint helps you define the decision your prototype supports. You will also commit to keeping a human accountable for how that decision affects customers and operational priorities.

Set Up the Local Design Lab

Your decision system needs a dependable local home before its interface can take shape. Keeping the files together makes every later preview easier to test.

A dependency-light workspace keeps your attention on judgment instead of framework setup. Visual Studio Code gives you that workspace. Three plain files provide separate homes for the interface structure, visual design, and interaction.

In this step, get ready to:

• Verify Visual Studio Code from a new Windows PowerShell window.
• Open the local human-judgment-lab workspace in Visual Studio Code.
• Add empty index.html, style.css, and app.js files.

Verify Visual Studio Code

A PowerShell check confirms that Windows can find Visual Studio Code from the command line. The result determines whether the editor is ready or needs to be installed.

• Press the Windows key to open Windows search.
• Type PowerShell into the search field.

You should see PowerShell in the search results.

• Press Enter to open a new PowerShell window.
• Check whether Visual Studio Code is available by running this command:

code --version

What does this check?

The code command uses the Visual Studio Code command-line interface. The --version option asks the installation to identify itself.

✔️ I see three lines

The first line shows the Visual Studio Code version. The second line shows the GitHub commit ID.

The third line shows your computer architecture. Good start. Your editor is installed and available from PowerShell.

Output looks incomplete?

Maximize the PowerShell window if any line wraps or appears cut off.

Run the check again if the prompt returned before all three lines appeared.

Get help understanding the version output.

ⓧ Command not found

Visual Studio Code still needs to be installed or made available to a fresh PowerShell window. The Windows User setup is recommended for most people and does not require administrator permissions.

• Open the official Visual Studio Code Windows setup page in your browser.
• Select the Windows User setup download.

The installer download should begin in your browser.

• Run the downloaded installer.

The setup wizard opens with the installation options.

• Keep the installer defaults selected.
• Complete the setup wizard.

Visual Studio Code is now installed. A fresh PowerShell window can detect its command-line registration.

• Close the current PowerShell window.
• Press the Windows key to reopen Windows search.
• Type PowerShell into the search field.

PowerShell should appear in the search results again.

• Press Enter to open a new PowerShell window.
• Verify the completed installation by running this command:

code --version

What should I see?

• The first line shows the Visual Studio Code version.
• The second line shows the GitHub commit ID.
• The third line shows your computer architecture.

Still cannot run the command?

Close every PowerShell window before opening another one. An older window may not recognize a newly installed command.

Run the Windows User setup again if the installer did not finish.

Get help diagnosing the installation.

Create the project workspace

A named workspace keeps every prototype file in one local folder. Placing it on your Desktop makes it easy to find throughout the project.

• Minimize your open windows until the Windows Desktop is visible.

You should see the Desktop area where the project folder will live.

• Right-click an empty area of the Desktop.
• Select New from the context menu.

A submenu opens with the item types Windows can create.

• Select Folder.

The new folder name field becomes active.

• Type human-judgment-lab as the folder name.
• Press Enter to create the folder.

You should see the new human-judgment-lab folder on your Desktop.

• Double-click the human-judgment-lab folder.

The folder opens in a new window. It is empty because you have not added the project files yet.

• Select the address bar at the top of the folder window.

The current folder path becomes selected.

• Type PowerShell into the address bar.
• Press Enter to open PowerShell in this folder.

The PowerShell prompt should end with human-judgment-lab. This confirms that the current location is your project folder.

Visual Studio Code may show a folder-trust prompt after the next command runs. This is expected for a folder you created yourself.

• Open the current folder in Visual Studio Code by running this command:

code .

What does this command do?

This command opens the current PowerShell location as a Visual Studio Code workspace. The dot represents the folder where PowerShell is currently working.

• Confirm trust if Visual Studio Code asks about the folder.

Visual Studio Code should open with human-judgment-lab shown in the Explorer sidebar. That folder name proves that the editor opened the correct local workspace.

Did the wrong folder open?

Check that the PowerShell prompt ends with human-judgment-lab. The command opens whichever folder PowerShell currently uses.

Return to the folder window before reopening PowerShell if the prompt shows a different location.

Get help opening the correct workspace.

Add the empty project files

HTML provides the page structure. CSS controls its appearance.

JavaScript adds the decision interaction. Empty files create the exact starting point for the first interface build.

The new-file control in the Explorer sidebar is small, so it can be easy to miss. Look beside the human-judgment-lab folder name.

• Select the new-file control in the Visual Studio Code Explorer sidebar.

A file name field opens beneath the workspace folder.

• Enter index.html as the file name.
• Press Enter to create the file.

You should see index.html in the Explorer sidebar. Its editor area should be blank.

• Select the new-file control in the Explorer sidebar again.

Another file name field opens beneath the workspace folder.

• Enter style.css as the file name.
• Press Enter to create the file.

You should see style.css beside the first file. Its editor area should also be blank.

• Select the new-file control in the Explorer sidebar once more.

The file name field opens for the final project file.

• Enter app.js as the file name.
• Press Enter to create the file.

That is the workspace assembled. You should see all three empty files directly inside human-judgment-lab.

Do the files look wrong?

Check that each filename includes its full extension. A missing extension changes how Visual Studio Code identifies the file.

Confirm that all three files sit directly beneath human-judgment-lab in the Explorer sidebar.

Get help checking the workspace files.

✔️ Awesome, I've got everything!

Your human-judgment-lab workspace contains all three project files. Keep each file empty for the next step.

ⓧ I'd like to double check the full code

The complete contents of index.html, style.css, and app.js are empty.

• Select index.html in the Explorer sidebar.
• Confirm that its editor area contains no characters, spaces, or comments.
• Select style.css in the Explorer sidebar.
• Confirm that its editor area contains no characters, spaces, or comments.
• Select app.js in the Explorer sidebar.
• Confirm that its editor area contains no characters, spaces, or comments.

Before the final check, which three installation details do you expect PowerShell to print?

• Close the PowerShell window from earlier.
• Press the Windows key to open Windows search.
• Type PowerShell into the search field.

PowerShell should appear in the search results.

• Press Enter to open a new PowerShell window.
• Confirm the Visual Studio Code installation by running this command:

code --version

What should I see?

• The first line shows the Visual Studio Code version.
• The second line shows the GitHub commit ID.
• The third line shows your computer architecture.

• Switch back to Visual Studio Code.
• Select the Explorer icon in the Activity Bar.

You should see index.html, style.css, and app.js inside the open human-judgment-lab workspace. Your local design lab is ready for the first interface.

Your local design lab is ready. Next up, you will build a polished recommendation that reveals how confident presentation can hide a weak decision process.

Build the AI Recommendation

Your Visual Studio Code workspace is ready for its first visible result. This step explores how presentation can shape a reviewer's confidence.

A polished AI recommendation can create false confidence before its reasoning earns that trust. You will deliberately build that experience so you can test what the interface truly supports.

In this step, get ready to:

• Build the fictional incident scenario with one simulated AI recommendation.
• Style the recommendation as a confident product interface.
• Test whether the polished interface supports a meaningful review decision.

Build the recommendation structure

HTML gives the prototype its content hierarchy. The opening structure frames a fictional customer crisis before presenting the simulated recommendation.

• Select index.html in the Explorer sidebar.
• Create the scenario structure by replacing the empty file with the code below:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>Human Judgment Lab</title>
    <link rel="stylesheet" href="style.css" />
    <script src="app.js" defer></script>
  </head>
  <body>
    <main>
      <header class="hero">
        <p class="eyebrow">Human Judgment Lab</p>
        <h1>Triage a customer crisis</h1>
        <p>
          A fictional operations team must choose which customer incident to
          address first. Review the simulated AI output, inspect the missing
          context, and own the final decision.
        </p>
      </header>
    </main>
  </body>
</html>

What does this structure do?

• The document metadata gives the page a title plus a responsive viewport.
• The stylesheet link connects style.css to the page.
• The deferred script link prepares app.js to run after the document loads.
• The hero header frames the customer-incident decision.

• Save index.html.
• Right-click index.html in the Explorer sidebar.
• Select Open in Integrated Browser.

You will see the Human Judgment Lab label above the customer-crisis heading. That first slice is working: the browser now shows the scenario that frames the recommendation.

Missing the scenario header?

• Confirm that the integrated browser opened index.html from the human-judgment-lab folder.
• Check that every opening HTML tag has the matching closing tag shown in the code.

Help me troubleshoot the scenario header.

The recommendation card is the interface's central claim. Its visible reason emphasizes customer reach plus deadline pressure.

• Switch back to index.html in Visual Studio Code.
• Find the closing </header> tag.
• Add the recommendation below that tag by pasting this code:

      <section class="panel ai-panel" aria-labelledby="ai-heading">
        <p class="label">Simulated AI output</p>
        <h2 id="ai-heading">Address the invoice export delay first</h2>
        <p>
          Reason shown: it affects the largest number of customers with an
          immediate reporting deadline.
        </p>
        <p class="confidence">Confidence shown: High</p>
        <p class="warning">
          A confident presentation is not the same as complete decision
          context.
        </p>
      </section>

What does the recommendation contain?

• The heading recommends addressing the invoice export delay first.
• The visible reason highlights customer reach plus an immediate reporting deadline.
• The confidence statement adds a strong certainty signal.
• The warning questions whether the visible reasoning provides complete context.

• Save index.html.
• Return to the integrated browser preview.
• Refresh the preview.

You will see the simulated recommendation below the scenario header. The page now presents a clear conclusion with a short supporting reason.

Missing the recommendation?

• Confirm that the recommendation section sits after </header>.
• Confirm that the recommendation section sits before </main>.
• Check that the section uses the panel class plus the ai-panel class.

Help me troubleshoot the missing recommendation.

✔️ Awesome, I've got everything!

The scenario plus recommendation are in place. Make sure index.html is saved.

ⓧ I'd like to double check the full code

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>Human Judgment Lab</title>
    <link rel="stylesheet" href="style.css" />
    <script src="app.js" defer></script>
  </head>
  <body>
    <main>
      <header class="hero">
        <p class="eyebrow">Human Judgment Lab</p>
        <h1>Triage a customer crisis</h1>
        <p>
          A fictional operations team must choose which customer incident to
          address first. Review the simulated AI output, inspect the missing
          context, and own the final decision.
        </p>
      </header>

      <section class="panel ai-panel" aria-labelledby="ai-heading">
        <p class="label">Simulated AI output</p>
        <h2 id="ai-heading">Address the invoice export delay first</h2>
        <p>
          Reason shown: it affects the largest number of customers with an
          immediate reporting deadline.
        </p>
        <p class="confidence">Confidence shown: High</p>
        <p class="warning">
          A confident presentation is not the same as complete decision
          context.
        </p>
      </section>
    </main>
  </body>
</html>

Style the confident recommendation

CSS controls how trustworthy the recommendation appears. Color plus spacing will turn the plain content into a polished interface.

• Select the empty style.css file in the Explorer sidebar.
• Create the page foundation by pasting this code:

:root {
  color: #172033;
  background: #eef2f7;
  font-family:
    Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
    sans-serif;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
}

main {
  width: min(72rem, calc(100% - 2rem));
  margin: 0 auto;
  padding: 3rem 0 5rem;
}

What does the foundation do?

• The root rule gives the page dark text on a pale background.
• The font stack uses an available system interface font.
• The sizing rule keeps element dimensions predictable.
• The main rule centers the content within a responsive width.

• Save style.css.
• Return to the integrated browser preview.
• Refresh the preview.

You will see a pale blue-gray background around a centered content column. The text will use a system interface font.

Still seeing the default page?

• Confirm that style.css is saved beside index.html in the human-judgment-lab folder.
• Check that index.html links to style.css.

Help me troubleshoot the page styles.

The hero establishes the scenario's visual hierarchy. Its heading needs clear scale while the supporting description stays easy to scan.

• Switch back to style.css.
• Add the hero styles at the end of the file by pasting this code:

.hero {
  max-width: 48rem;
  margin-bottom: 2rem;
}

.hero h1 {
  margin: 0.25rem 0 0.75rem;
  font-size: clamp(2.2rem, 6vw, 4.5rem);
  line-height: 1;
}

.hero p:last-child {
  color: #4a556b;
  font-size: 1.1rem;
  line-height: 1.6;
}

.eyebrow,
.label {
  margin: 0;
  color: #4f46e5;
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

How does the hero gain focus?

• The hero width keeps the introduction compact on wide screens.
• The responsive heading size creates a clear visual starting point.
• The final hero paragraph uses softer text with more line spacing.
• The shared label rule turns both small labels into purple interface signposts.

• Save style.css.
• Return to the integrated browser preview.
• Refresh the preview.

You will see a larger customer-crisis heading with a softer description. The two small labels will appear in purple uppercase text.

Hero styles missing?

• Confirm that the header in index.html uses the hero class.
• Check that the grouped label selectors are separated by a comma.
• Confirm that the longer description is the final paragraph inside the hero.

Help me troubleshoot the hero styles.

The recommendation becomes more persuasive when it resembles a finished product panel. A border plus shadow gives the claim visual weight.

• Switch back to style.css.
• Add the recommendation panel styles at the end of the file by pasting this code:

.panel {
  margin-top: 1.25rem;
  padding: 1.5rem;
  border: 1px solid #d9e0ea;
  border-radius: 1rem;
  background: #ffffff;
  box-shadow: 0 0.75rem 2rem rgba(23, 32, 51, 0.07);
}

.panel h2 {
  margin: 0.5rem 0 1rem;
}

.ai-panel {
  border: 2px solid #4f46e5;
  background: linear-gradient(135deg, #ffffff, #f1f0ff);
}

How does the panel gain credibility?

• The white panel separates the recommendation from the page background.
• The rounded border makes the output feel like a self-contained product element.
• The soft shadow gives the recommendation visual weight.
• The purple border plus pale gradient draw attention to the simulated AI output.

• Save style.css.
• Return to the integrated browser preview.
• Refresh the preview.

You will see the recommendation inside a rounded white panel with a soft shadow. A purple border plus pale gradient will make it the strongest element on the page.

Recommendation still looks plain?

• Confirm that the recommendation section uses the panel class.
• Confirm that the same section uses the ai-panel class.
• Check that both CSS selectors begin with a period.

Help me troubleshoot the recommendation panel.

A badge can make a confidence claim resemble a verified product status. The warning needs a separate visual signal so the caveat remains visible.

• Switch back to style.css.
• Complete the recommendation treatment by adding this code at the end of the file:

.confidence {
  display: inline-block;
  margin: 0.5rem 0;
  padding: 0.35rem 0.65rem;
  border-radius: 999px;
  color: #14532d;
  background: #dcfce7;
  font-weight: 750;
}

.warning {
  margin-bottom: 0;
  color: #7c2d12;
  font-weight: 650;
}

How do these signals shape the claim?

• The inline layout lets padding form a compact badge around the confidence text.
• The pill shape resembles a familiar status indicator.
• The green treatment gives the confidence claim a positive signal.
• The darker warning color separates the caveat from that positive signal.

• Save style.css.
• Return to the integrated browser preview.
• Refresh the preview.

You will see the confidence statement inside a rounded green badge. You've got the visual treatment working: the warning now appears in darker orange text below the badge.

Badge or warning style missing?

• Confirm that the confidence paragraph uses the confidence class.
• Confirm that the final paragraph uses the warning class.
• Check that the closing brace for the confidence rule appears before the warning selector.

Help me troubleshoot the final visual signals.

✔️ Awesome, I've got everything!

The recommendation now has its complete visual treatment. Make sure style.css is saved.

ⓧ I'd like to double check the full code

:root {
  color: #172033;
  background: #eef2f7;
  font-family:
    Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
    sans-serif;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
}

main {
  width: min(72rem, calc(100% - 2rem));
  margin: 0 auto;
  padding: 3rem 0 5rem;
}

.hero {
  max-width: 48rem;
  margin-bottom: 2rem;
}

.hero h1 {
  margin: 0.25rem 0 0.75rem;
  font-size: clamp(2.2rem, 6vw, 4.5rem);
  line-height: 1;
}

.hero p:last-child {
  color: #4a556b;
  font-size: 1.1rem;
  line-height: 1.6;
}

.eyebrow,
.label {
  margin: 0;
  color: #4f46e5;
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.panel {
  margin-top: 1.25rem;
  padding: 1.5rem;
  border: 1px solid #d9e0ea;
  border-radius: 1rem;
  background: #ffffff;
  box-shadow: 0 0.75rem 2rem rgba(23, 32, 51, 0.07);
}

.panel h2 {
  margin: 0.5rem 0 1rem;
}

.ai-panel {
  border: 2px solid #4f46e5;
  background: linear-gradient(135deg, #ffffff, #f1f0ff);
}

.confidence {
  display: inline-block;
  margin: 0.5rem 0;
  padding: 0.35rem 0.65rem;
  border-radius: 999px;
  color: #14532d;
  background: #dcfce7;
  font-weight: 750;
}

.warning {
  margin-bottom: 0;
  color: #7c2d12;
  font-weight: 650;
}

Test the polished recommendation

The completed page looks decisive because its recommendation has strong visual hierarchy. The final review tests how much authority the interface gives its human reviewer.

Before you check, do you think the interface gives the reviewer enough context to challenge the recommendation?

• Right-click index.html in the Explorer sidebar.
• Select Open in Integrated Browser.

You will see a styled recommendation to address the invoice export delay first. You will find no evidence comparison or human decision form.

What limitation did you expose?

The interface shows a conclusion before it shows the decision context. Its polished treatment makes the recommendation feel complete.

The reviewer cannot compare stakeholder impact or record a different choice. The screen persuades before it supports accountable judgment.

You have made the design failure visible. Next, you will expose the evidence that makes this recommendation contestable.

Expose the Missing Context

Your first screen proves how easily a polished recommendation can feel final. It still hides who is affected by each incident.

This step adds the severity details that the recommendation missed. Shared evidence dimensions make the three incidents easier to compare through accountable human-AI oversight.

In this step, get ready to:

• Add evidence cards for the three customer incidents.
• Give every card the same four decision dimensions.
• Style the evidence cards for responsive comparison.

Add the payment lockout evidence

A recommendation becomes contestable when reviewers can inspect the evidence behind each option. The payment lockout card exposes a small group facing severe consequences with no workaround.

• In index.html, find the closing </section> for the simulated AI output.
• Insert the following evidence section directly below it:

      <section class="panel" aria-labelledby="evidence-heading">
        <p class="label">Human review</p>
        <h2 id="evidence-heading">Evidence the recommendation did not weigh</h2>

        <div class="evidence-grid">
          <article class="evidence-card priority-risk">
            <h3>Payment lockout</h3>
            <dl>
              <dt>Reach</dt>
              <dd>18 organizations</dd>
              <dt>Impact</dt>
              <dd>Payroll cannot be completed</dd>
              <dt>Time pressure</dt>
              <dd>Payroll closes in 3 hours</dd>
              <dt>Workaround</dt>
              <dd>None available</dd>
            </dl>
          </article>
        </div>
      </section>

What does this markup do?

• The evidence section creates a separate human review area beneath the simulated recommendation.
• The <dl> element pairs each decision dimension with its incident detail.
• The priority-risk class identifies the payment lockout for a stronger visual treatment later.

• Save index.html.
• Switch back to the integrated browser preview.
• Reload the preview.

You'll see a Human review panel beneath the recommendation. It contains the payment lockout evidence in an unstyled list.

Don't see the payment lockout evidence?

• Check that the new section sits inside <main> and above its closing tag.
• Check that every opening HTML tag in the new section has a matching closing tag.

Still stuck? Help me find why my payment lockout evidence section is missing from the browser preview.

Complete the evidence comparison

One incident reveals an overlooked risk. A fair comparison needs the same evidence dimensions for every available option.

• In index.html, find the closing </article> for the Payment lockout card.
• Add the invoice export card directly below it:

          <article class="evidence-card">
            <h3>Invoice export delay</h3>
            <dl>
              <dt>Reach</dt>
              <dd>140 organizations</dd>
              <dt>Impact</dt>
              <dd>Monthly reporting is delayed</dd>
              <dt>Time pressure</dt>
              <dd>Reports are due tomorrow</dd>
              <dt>Workaround</dt>
              <dd>Manual CSV export</dd>
            </dl>
          </article>

What does this card reveal?

The invoice export delay affects more organizations than the payment lockout. Its later deadline and manual workaround make the trade-off visible.

• Save index.html.
• Reload the integrated browser preview.

You'll see the invoice export evidence below the payment lockout evidence. Both incidents now use the same four dimensions.

Only see one incident?

• Confirm that the invoice export <article> sits inside <div class="evidence-grid">.
• Confirm that the new card appears after the payment lockout card's closing </article> tag.

Need another pair of eyes? Help me place my invoice export evidence card inside the evidence grid.

The dashboard theme defect adds a high-reach incident with lower urgency. This prevents reach alone from deciding the priority.

• In index.html, find the closing </article> for the Invoice export delay card.
• Add the dashboard theme card directly below it:

          <article class="evidence-card">
            <h3>Dashboard theme defect</h3>
            <dl>
              <dt>Reach</dt>
              <dd>600 organizations</dd>
              <dt>Impact</dt>
              <dd>Some labels are difficult to read</dd>
              <dt>Time pressure</dt>
              <dd>No fixed deadline</dd>
              <dt>Workaround</dt>
              <dd>Refresh the saved theme</dd>
            </dl>
          </article>

Why include this incident?

The dashboard defect reaches the largest group. Its lower impact and available workaround show why one number cannot represent overall priority.

• Save index.html.
• Reload the integrated browser preview.

You'll see all three incidents beneath the recommendation. Each incident exposes reach, impact, time pressure, and workaround details.

Is the third card missing?

• Check that the dashboard theme card sits before the closing tag for evidence-grid.
• Check the card for a complete opening <article> tag and closing </article> tag.

Still missing the card? Help me check the HTML structure for my three evidence cards.

✔️ Awesome, I've got everything!

Your three evidence cards are now present in index.html.

ⓧ I'd like to double check the full code

• Compare index.html with the complete file below.

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>Human Judgment Lab</title>
    <link rel="stylesheet" href="style.css" />
    <script src="app.js" defer></script>
  </head>
  <body>
    <main>
      <header class="hero">
        <p class="eyebrow">Human Judgment Lab</p>
        <h1>Triage a customer crisis</h1>
        <p>
          A fictional operations team must choose which customer incident to
          address first. Review the simulated AI output, inspect the missing
          context, and own the final decision.
        </p>
      </header>

      <section class="panel ai-panel" aria-labelledby="ai-heading">
        <p class="label">Simulated AI output</p>
        <h2 id="ai-heading">Address the invoice export delay first</h2>
        <p>
          Reason shown: it affects the largest number of customers with an
          immediate reporting deadline.
        </p>
        <p class="confidence">Confidence shown: High</p>
        <p class="warning">
          A confident presentation is not the same as complete decision
          context.
        </p>
      </section>

      <section class="panel" aria-labelledby="evidence-heading">
        <p class="label">Human review</p>
        <h2 id="evidence-heading">Evidence the recommendation did not weigh</h2>

        <div class="evidence-grid">
          <article class="evidence-card priority-risk">
            <h3>Payment lockout</h3>
            <dl>
              <dt>Reach</dt>
              <dd>18 organizations</dd>
              <dt>Impact</dt>
              <dd>Payroll cannot be completed</dd>
              <dt>Time pressure</dt>
              <dd>Payroll closes in 3 hours</dd>
              <dt>Workaround</dt>
              <dd>None available</dd>
            </dl>
          </article>

          <article class="evidence-card">
            <h3>Invoice export delay</h3>
            <dl>
              <dt>Reach</dt>
              <dd>140 organizations</dd>
              <dt>Impact</dt>
              <dd>Monthly reporting is delayed</dd>
              <dt>Time pressure</dt>
              <dd>Reports are due tomorrow</dd>
              <dt>Workaround</dt>
              <dd>Manual CSV export</dd>
            </dl>
          </article>

          <article class="evidence-card">
            <h3>Dashboard theme defect</h3>
            <dl>
              <dt>Reach</dt>
              <dd>600 organizations</dd>
              <dt>Impact</dt>
              <dd>Some labels are difficult to read</dd>
              <dt>Time pressure</dt>
              <dd>No fixed deadline</dd>
              <dt>Workaround</dt>
              <dd>Refresh the saved theme</dd>
            </dl>
          </article>
        </div>
      </section>
    </main>
  </body>
</html>

Style the evidence for comparison

A CSS Grid can adapt the comparison to the available screen width. This keeps each incident readable while preserving the shared evidence structure.

• In style.css, add the responsive evidence grid below the existing .warning block:

.evidence-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
  gap: 1rem;
}

How does the grid respond?

• The grid layout places the cards into columns.
• The auto-fit value adjusts the number of columns to the available width.
• The minmax(14rem, 1fr) value keeps each column readable while allowing it to grow.

• Save style.css.
• Reload the integrated browser preview.

You'll see the three incidents move into responsive columns when the preview is wide enough.

Are the cards still stacked?

• Confirm that the selector is spelled .evidence-grid.
• Confirm that index.html uses class="evidence-grid" on the container around the cards.
• Widen the integrated browser preview to give the grid room for multiple columns.

Need help with the layout? Help me troubleshoot why my evidence-grid CSS is not creating responsive columns.

The grid controls placement. A shared card treatment makes each incident feel like an equal candidate for review.

• Add the shared card style below the .evidence-grid block:

.evidence-card {
  padding: 1rem;
  border: 1px solid #d9e0ea;
  border-radius: 0.8rem;
  background: #f8fafc;
}

What does the card style change?

• Padding separates the evidence from each card edge.
• The border and rounded corners define every incident as a comparable unit.
• The background distinguishes the cards from the surrounding panel.

• Save style.css.
• Reload the integrated browser preview.

You'll see three pale cards with borders, rounded corners, and spacing around their evidence.

Don't see the card styling?

• Check that every incident uses class="evidence-card" in index.html.
• Check that the .evidence-card selector includes its leading period.

Still seeing plain text? Help me find why my evidence-card styles are not appearing.

The payment lockout deserves visual emphasis because its impact is immediate and it has no workaround. A warmer treatment draws attention without hiding the other options.

• Add the payment lockout highlight below the shared card style:

.evidence-card.priority-risk {
  border-color: #f97316;
  background: #fff7ed;
}

Why combine two classes?

The combined selector applies only when an element has both evidence-card and priority-risk. The payment lockout keeps the shared card design while gaining a distinct border and background.

• Save style.css.
• Reload the integrated browser preview.

You'll see an orange border and a warm background on the Payment lockout card.

Is the payment card unchanged?

• Confirm that the payment lockout article uses both evidence-card and priority-risk in its class value.
• Confirm that the CSS selector has no space between .evidence-card and .priority-risk.

Need help with the highlight? Help me troubleshoot the priority-risk style on my payment lockout card.

The card titles and evidence pairs still need a consistent reading order. A compact definition-list layout keeps each dimension aligned with its value.

• Add the title and evidence layout below the priority highlight:

.evidence-card h3 {
  margin-top: 0;
}

dl {
  display: grid;
  grid-template-columns: 6rem 1fr;
  gap: 0.5rem;
  margin-bottom: 0;
}

How does this organize the evidence?

• Removing the title's top margin keeps it aligned with the card padding.
• The definition list uses a narrow first column for dimension names.
• The flexible second column gives the incident details the remaining space.

• Save style.css.
• Reload the integrated browser preview.

You'll see each dimension aligned beside its corresponding incident detail.

Are the evidence pairs misaligned?

• Confirm that each card wraps its <dt> and <dd> elements inside <dl>.
• Confirm that the dl selector has no leading period.

Still seeing a single column? Help me troubleshoot the definition-list grid inside my evidence cards.

Labels need enough contrast to scan quickly. Resetting the value margins also keeps the grid alignment precise.

• Complete the evidence styling by adding these definition styles:

dt {
  color: #64748b;
  font-weight: 700;
}

dd {
  margin: 0;
}

What do these final styles do?

• The dt style gives dimension names a muted color and stronger weight.
• The dd style removes the browser's default indentation from each value.

• Save style.css.

Before you reload, which incident do you expect to stand out once every trade-off is visible?

• Reload the integrated browser preview.
• Resize the preview to test the responsive evidence grid.

You'll see three responsive evidence cards beneath the simulated recommendation. The smaller payment lockout stands out because payroll closes in three hours and no workaround exists.

Does the final comparison look uneven?

• Check that the dt and dd blocks appear after the dl block in style.css.
• Check that all braces in the evidence styles are balanced.
• Reload the preview after saving the latest CSS changes.

Need help with the finished comparison? Help me inspect my evidence card styles for missing selectors or braces.

✔️ Awesome, I've got everything!

Your responsive evidence comparison is complete. The saved page now exposes the trade-offs behind the recommendation.

ⓧ I'd like to double check the full code

• Compare style.css with the complete file below.

:root {
  color: #172033;
  background: #eef2f7;
  font-family:
    Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
    sans-serif;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
}

main {
  width: min(72rem, calc(100% - 2rem));
  margin: 0 auto;
  padding: 3rem 0 5rem;
}

.hero {
  max-width: 48rem;
  margin-bottom: 2rem;
}

.hero h1 {
  margin: 0.25rem 0 0.75rem;
  font-size: clamp(2.2rem, 6vw, 4.5rem);
  line-height: 1;
}

.hero p:last-child {
  color: #4a556b;
  font-size: 1.1rem;
  line-height: 1.6;
}

.eyebrow,
.label {
  margin: 0;
  color: #4f46e5;
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.panel {
  margin-top: 1.25rem;
  padding: 1.5rem;
  border: 1px solid #d9e0ea;
  border-radius: 1rem;
  background: #ffffff;
  box-shadow: 0 0.75rem 2rem rgba(23, 32, 51, 0.07);
}

.panel h2 {
  margin: 0.5rem 0 1rem;
}

.ai-panel {
  border: 2px solid #4f46e5;
  background: linear-gradient(135deg, #ffffff, #f1f0ff);
}

.confidence {
  display: inline-block;
  margin: 0.5rem 0;
  padding: 0.35rem 0.65rem;
  border-radius: 999px;
  color: #14532d;
  background: #dcfce7;
  font-weight: 750;
}

.warning {
  margin-bottom: 0;
  color: #7c2d12;
  font-weight: 650;
}

.evidence-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
  gap: 1rem;
}

.evidence-card {
  padding: 1rem;
  border: 1px solid #d9e0ea;
  border-radius: 0.8rem;
  background: #f8fafc;
}

.evidence-card.priority-risk {
  border-color: #f97316;
  background: #fff7ed;
}

.evidence-card h3 {
  margin-top: 0;
}

dl {
  display: grid;
  grid-template-columns: 6rem 1fr;
  gap: 0.5rem;
  margin-bottom: 0;
}

dt {
  color: #64748b;
  font-weight: 700;
}

dd {
  margin: 0;
}

Your recommendation can now be challenged with visible evidence. Next, you'll turn that review into a recorded human decision.

Give the Human Decision Authority

Your evidence cards now expose the trade-offs hidden by the simulated AI recommendation.

However, the reviewer can only read the evidence. They still cannot control the final outcome.

Meaningful human-AI oversight gives the reviewer authority over the decision. You will turn the page into an accountable decision workflow.

In this step, get ready to:

• Add controls for accepting or overriding the recommendation.
• Require the reviewer to explain their rationale.
• Display a receipt that records the human decision.

Add the accountable decision form

A reviewer needs a clear choice before their oversight can affect the outcome. The decision panel will hold that choice plus a visible record of what they submit.

• Switch back to index.html in Visual Studio Code.
• Find the closing </main> line near the bottom of the file.
• Add the decision panel immediately above that line by pasting this shell:

      <section class="panel decision-panel" aria-labelledby="decision-heading">
        <p class="label">Accountable decision</p>
        <h2 id="decision-heading">What should the team do first?</h2>

        <form id="decision-form">
        </form>

        <p id="receipt" class="receipt" aria-live="polite">
          No decision has been recorded yet.
        </p>
      </section>

What does this structure do?

• The decision-form ID gives JavaScript a precise way to find the form.
• The receipt ID identifies the area where the recorded decision will appear.
• The aria-live="polite" attribute lets assistive technologies announce receipt updates without interrupting the current task.

• Save index.html.
• Reload the integrated browser preview.

You should see a new decision panel below the evidence cards. It contains the question plus an empty decision receipt.

Don't see the decision panel?

• Check that the new section sits above the closing </main> tag.
• Confirm that every opening HTML tag in the new section has a matching closing tag.

Ask for help with the panel structure.

The form needs mutually exclusive choices because the reviewer can record only one outcome. A same-named group of required radio inputs enforces that single choice.

• Find the empty decision-form element in index.html.
• Add the decision choices between its opening and closing tags by pasting:

          <fieldset>
            <legend>Choose one path</legend>

            <label class="decision-option">
              <input
                type="radio"
                name="decision"
                value="Accept the AI recommendation: invoice export delay"
                required
              />
              <span>Accept the AI recommendation: invoice export delay</span>
            </label>

            <label class="decision-option">
              <input
                type="radio"
                name="decision"
                value="Override: payment lockout"
                required
              />
              <span>Override: address the payment lockout first</span>
            </label>
          </fieldset>

How do the choices work?

• The shared name="decision" value groups both radio inputs into one choice.
• Each value stores the exact outcome that the receipt will record.
• The required attribute prevents submission until one decision is selected.

• Save index.html.
• Reload the integrated browser preview.

You should see one option for accepting the invoice export recommendation. You should also see one option for overriding it with the payment lockout.

Can you select both choices?

• Check that both radio inputs use the exact name decision.
• Confirm that each input uses type="radio".

Ask for help with the radio group.

A choice alone does not explain the reviewer’s judgment. The rationale field makes the person responsible for connecting evidence to the recorded outcome.

• Place your cursor below the closing </fieldset> tag inside decision-form.
• Add the required rationale field plus the submit button by pasting:

          <label for="rationale">Human rationale (required)</label>
          <textarea
            id="rationale"
            name="rationale"
            rows="5"
            required
            placeholder="Explain which evidence and stakeholder impact drove your decision."
          ></textarea>

          <button type="submit">Record accountable decision</button>

Why require a rationale?

• The linked label tells the reviewer what belongs in the textarea.
• The required attribute blocks an empty explanation.
• The submit button turns the reviewer’s choice into an explicit act of responsibility.

• Save index.html.
• Reload the integrated browser preview.

You should see both decision choices above a rationale field. The form should end with a button labelled Record accountable decision.

Missing the rationale field?

• Check that the textarea sits inside the decision-form element.
• Confirm that the textarea uses the exact ID rationale.

Ask for help with the form controls.

Style the human review controls

The new controls need a clear reading order so the reviewer can move from evidence to choice to explanation. The styling keeps every stage visually distinct.

• Switch back to style.css in Visual Studio Code.
• Find the closing brace for the existing dd rule at the bottom of the file.
• Add the form layout directly below that rule by pasting:

form {
  display: grid;
  gap: 1rem;
}

fieldset {
  display: grid;
  gap: 0.75rem;
  margin: 0;
  padding: 1rem;
  border: 1px solid #cbd5e1;
  border-radius: 0.75rem;
}

legend,
label {
  font-weight: 750;
}

What does this styling change?

• The form grid places each stage of the decision workflow on its own row.
• The fieldset border keeps the two possible outcomes together as one decision.
• The heavier label text makes each required action easier to identify.

• Save style.css.
• Reload the integrated browser preview.

You should see more space between the choice group and the rationale field. The two choices should sit inside one bordered fieldset.

Still seeing crowded controls?

• Confirm that the new rules sit outside the closing brace of the existing dd rule.
• Check every new CSS rule for both an opening brace and a closing brace.

Ask for help with the form layout.

• Add the option-card and textarea styles directly below the label rule by pasting:

.decision-option {
  display: flex;
  gap: 0.75rem;
  align-items: flex-start;
  padding: 0.85rem;
  border-radius: 0.6rem;
  background: #f8fafc;
  cursor: pointer;
}

textarea {
  width: 100%;
  padding: 0.85rem;
  border: 1px solid #94a3b8;
  border-radius: 0.6rem;
  font: inherit;
  resize: vertical;
}

How do these controls help?

• Each decision label becomes a large selectable row instead of a small radio target.
• The textarea spans the available width so the reviewer has room to explain their reasoning.
• Vertical resizing lets the reviewer expand a longer rationale.

• Save style.css.
• Reload the integrated browser preview.

You should see each radio choice inside a pale card. The rationale field should now span the decision panel.

Don't see the option cards?

• Check that both HTML labels use the exact class decision-option.
• Confirm that the CSS selector begins with a period.

Ask for help with the option styling.

• Add the button styles directly below the textarea rule by pasting:

button {
  width: fit-content;
  padding: 0.8rem 1.1rem;
  border: 0;
  border-radius: 0.6rem;
  color: #ffffff;
  background: #3730a3;
  font: inherit;
  font-weight: 800;
  cursor: pointer;
}

button:hover,
button:focus-visible {
  background: #312e81;
}

Why highlight the button?

• The dark background makes the recording action distinct from the evidence above it.
• The hover and keyboard-focus state confirms when the button is ready to activate.

• Save style.css.
• Reload the integrated browser preview.

You should see a compact purple submission button. Its background should darken when you hover over it or focus it with the keyboard.

Button still looks plain?

• Check that the selector is written as button without a period.
• Confirm that the HTML control uses the button element.

Ask for help with the button style.

• Add the receipt and small-screen rules directly below the button focus rule by pasting:

.receipt {
  min-height: 3rem;
  margin-bottom: 0;
  padding: 1rem;
  border-left: 0.3rem solid #4f46e5;
  background: #eef2ff;
  line-height: 1.5;
}

@media (max-width: 36rem) {
  main {
    padding-top: 2rem;
  }

  dl {
    grid-template-columns: 1fr;
  }

  dd {
    margin-bottom: 0.4rem;
  }
}

What finishes the visual hierarchy?

• The receipt gains a persistent area for the recorded outcome.
• The coloured border separates the receipt from the controls that produce it.
• The media query keeps the evidence details readable in a narrow preview.

• Save style.css.
• Reload the integrated browser preview.

You should see the receipt inside a pale purple box beneath the form. The complete workflow should read from evidence to decision to recorded outcome.

Receipt missing its background?

• Check that the receipt paragraph in index.html uses class="receipt".
• Confirm that the .receipt rule sits outside the preceding button rule.

Ask for help with the receipt style.

Record the reviewer’s decision

The form now presents real authority, but its submission still needs to change the page. A DOM event lets JavaScript respond when the reviewer submits the form.

The handler will prevent a reload. It will read the chosen outcome plus the rationale before writing both into the receipt.

• Switch back to the empty app.js file in Visual Studio Code.
• Add the complete decision handler by pasting:

const decisionForm = document.querySelector("#decision-form");
const rationaleInput = document.querySelector("#rationale");
const receipt = document.querySelector("#receipt");

function handleDecision(event) {
  event.preventDefault();

  const selectedDecision = document.querySelector(
    'input[name="decision"]:checked',
  );
  const rationale = rationaleInput.value;

  receipt.textContent = `Decision recorded: ${selectedDecision.value}. Human rationale: ${rationale}`;
}

decisionForm.addEventListener("submit", handleDecision);

How does the decision handler work?

• The three querySelector calls connect JavaScript to the form, rationale field, and receipt.
• The submit listener runs handleDecision when the reviewer submits the form.
• The event.preventDefault() call keeps the browser on the current page.
• The value properties retrieve the selected outcome plus the reviewer’s rationale.
• The textContent assignment writes both values into the visible receipt as plain text.

• Save app.js.
• Reload the integrated browser preview.

Before you submit, predict whether the reviewer’s override will replace the empty receipt without reloading the page.

• Select the option labelled Override: address the payment lockout first.
• Enter Payroll closes in 3 hours and there is no workaround. in the rationale field.
• Click Record accountable decision.

You should stay on the same page. The receipt should begin with Decision recorded: Override: payment lockout.

That is the authority gap closed. The reviewer can now change the outcome and leave visible reasoning behind.

Receipt does not update?

• Confirm that app.js is saved.
• Check that the form ID is exactly decision-form in both files.
• Check that the rationale ID is exactly rationale in both files.

Ask for help debugging the decision receipt.

✔️ Awesome, I've got everything

Your three files now contain the complete accountable decision workflow.

ⓧ I'd like to double check the full code

These references show the exact file contents at the end of this step.

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>Human Judgment Lab</title>
    <link rel="stylesheet" href="style.css" />
    <script src="app.js" defer></script>
  </head>
  <body>
    <main>
      <header class="hero">
        <p class="eyebrow">Human Judgment Lab</p>
        <h1>Triage a customer crisis</h1>
        <p>
          A fictional operations team must choose which customer incident to
          address first. Review the simulated AI output, inspect the missing
          context, and own the final decision.
        </p>
      </header>

      <section class="panel ai-panel" aria-labelledby="ai-heading">
        <p class="label">Simulated AI output</p>
        <h2 id="ai-heading">Address the invoice export delay first</h2>
        <p>
          Reason shown: it affects the largest number of customers with an
          immediate reporting deadline.
        </p>
        <p class="confidence">Confidence shown: High</p>
        <p class="warning">
          A confident presentation is not the same as complete decision
          context.
        </p>
      </section>

      <section class="panel" aria-labelledby="evidence-heading">
        <p class="label">Human review</p>
        <h2 id="evidence-heading">Evidence the recommendation did not weigh</h2>

        <div class="evidence-grid">
          <article class="evidence-card priority-risk">
            <h3>Payment lockout</h3>
            <dl>
              <dt>Reach</dt>
              <dd>18 organizations</dd>
              <dt>Impact</dt>
              <dd>Payroll cannot be completed</dd>
              <dt>Time pressure</dt>
              <dd>Payroll closes in 3 hours</dd>
              <dt>Workaround</dt>
              <dd>None available</dd>
            </dl>
          </article>

          <article class="evidence-card">
            <h3>Invoice export delay</h3>
            <dl>
              <dt>Reach</dt>
              <dd>140 organizations</dd>
              <dt>Impact</dt>
              <dd>Monthly reporting is delayed</dd>
              <dt>Time pressure</dt>
              <dd>Reports are due tomorrow</dd>
              <dt>Workaround</dt>
              <dd>Manual CSV export</dd>
            </dl>
          </article>

          <article class="evidence-card">
            <h3>Dashboard theme defect</h3>
            <dl>
              <dt>Reach</dt>
              <dd>600 organizations</dd>
              <dt>Impact</dt>
              <dd>Some labels are difficult to read</dd>
              <dt>Time pressure</dt>
              <dd>No fixed deadline</dd>
              <dt>Workaround</dt>
              <dd>Refresh the saved theme</dd>
            </dl>
          </article>
        </div>
      </section>

      <section class="panel decision-panel" aria-labelledby="decision-heading">
        <p class="label">Accountable decision</p>
        <h2 id="decision-heading">What should the team do first?</h2>

        <form id="decision-form">
          <fieldset>
            <legend>Choose one path</legend>

            <label class="decision-option">
              <input
                type="radio"
                name="decision"
                value="Accept the AI recommendation: invoice export delay"
                required
              />
              <span>Accept the AI recommendation: invoice export delay</span>
            </label>

            <label class="decision-option">
              <input
                type="radio"
                name="decision"
                value="Override: payment lockout"
                required
              />
              <span>Override: address the payment lockout first</span>
            </label>
          </fieldset>

          <label for="rationale">Human rationale (required)</label>
          <textarea
            id="rationale"
            name="rationale"
            rows="5"
            required
            placeholder="Explain which evidence and stakeholder impact drove your decision."
          ></textarea>

          <button type="submit">Record accountable decision</button>
        </form>

        <p id="receipt" class="receipt" aria-live="polite">
          No decision has been recorded yet.
        </p>
      </section>
    </main>
  </body>
</html>

:root {
  color: #172033;
  background: #eef2f7;
  font-family:
    Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
    sans-serif;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
}

main {
  width: min(72rem, calc(100% - 2rem));
  margin: 0 auto;
  padding: 3rem 0 5rem;
}

.hero {
  max-width: 48rem;
  margin-bottom: 2rem;
}

.hero h1 {
  margin: 0.25rem 0 0.75rem;
  font-size: clamp(2.2rem, 6vw, 4.5rem);
  line-height: 1;
}

.hero p:last-child {
  color: #4a556b;
  font-size: 1.1rem;
  line-height: 1.6;
}

.eyebrow,
.label {
  margin: 0;
  color: #4f46e5;
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.panel {
  margin-top: 1.25rem;
  padding: 1.5rem;
  border: 1px solid #d9e0ea;
  border-radius: 1rem;
  background: #ffffff;
  box-shadow: 0 0.75rem 2rem rgba(23, 32, 51, 0.07);
}

.panel h2 {
  margin: 0.5rem 0 1rem;
}

.ai-panel {
  border: 2px solid #4f46e5;
  background: linear-gradient(135deg, #ffffff, #f1f0ff);
}

.confidence {
  display: inline-block;
  margin: 0.5rem 0;
  padding: 0.35rem 0.65rem;
  border-radius: 999px;
  color: #14532d;
  background: #dcfce7;
  font-weight: 750;
}

.warning {
  margin-bottom: 0;
  color: #7c2d12;
  font-weight: 650;
}

.evidence-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
  gap: 1rem;
}

.evidence-card {
  padding: 1rem;
  border: 1px solid #d9e0ea;
  border-radius: 0.8rem;
  background: #f8fafc;
}

.evidence-card.priority-risk {
  border-color: #f97316;
  background: #fff7ed;
}

.evidence-card h3 {
  margin-top: 0;
}

dl {
  display: grid;
  grid-template-columns: 6rem 1fr;
  gap: 0.5rem;
  margin-bottom: 0;
}

dt {
  color: #64748b;
  font-weight: 700;
}

dd {
  margin: 0;
}

form {
  display: grid;
  gap: 1rem;
}

fieldset {
  display: grid;
  gap: 0.75rem;
  margin: 0;
  padding: 1rem;
  border: 1px solid #cbd5e1;
  border-radius: 0.75rem;
}

legend,
label {
  font-weight: 750;
}

.decision-option {
  display: flex;
  gap: 0.75rem;
  align-items: flex-start;
  padding: 0.85rem;
  border-radius: 0.6rem;
  background: #f8fafc;
  cursor: pointer;
}

textarea {
  width: 100%;
  padding: 0.85rem;
  border: 1px solid #94a3b8;
  border-radius: 0.6rem;
  font: inherit;
  resize: vertical;
}

button {
  width: fit-content;
  padding: 0.8rem 1.1rem;
  border: 0;
  border-radius: 0.6rem;
  color: #ffffff;
  background: #3730a3;
  font: inherit;
  font-weight: 800;
  cursor: pointer;
}

button:hover,
button:focus-visible {
  background: #312e81;
}

.receipt {
  min-height: 3rem;
  margin-bottom: 0;
  padding: 1rem;
  border-left: 0.3rem solid #4f46e5;
  background: #eef2ff;
  line-height: 1.5;
}

@media (max-width: 36rem) {
  main {
    padding-top: 2rem;
  }

  dl {
    grid-template-columns: 1fr;
  }

  dd {
    margin-bottom: 0.4rem;
  }
}

const decisionForm = document.querySelector("#decision-form");
const rationaleInput = document.querySelector("#rationale");
const receipt = document.querySelector("#receipt");

function handleDecision(event) {
  event.preventDefault();

  const selectedDecision = document.querySelector(
    'input[name="decision"]:checked',
  );
  const rationale = rationaleInput.value;

  receipt.textContent = `Decision recorded: ${selectedDecision.value}. Human rationale: ${rationale}`;
}

decisionForm.addEventListener("submit", handleDecision);

Your prototype now gives the reviewer real authority over the recommendation. Next, you will stress-test whether both decision paths produce an accountable record.

Stress-Test the Oversight

Your prototype now combines the simulated recommendation with evidence and a human decision receipt. This final test proves that the reviewer has real authority.

Meaningful human-AI oversight changes the recorded outcome. It also preserves the reviewer’s reasoning.

In this step, get ready to:

• Confirm that incomplete decisions cannot be submitted.
• Test the accept path with reasoning based on reach and time pressure.
• Test the override path with reasoning based on severity and the missing workaround.

Test the empty form

Form validation uses the required controls to block an incomplete decision. The receipt should only change after every required control has a value.

Before the first test, which missing control do you think the browser will ask for first?

• Switch back to the integrated browser from earlier.
• Clear the Human rationale (required) field.
• Leave both decision options unselected.
• Click Record accountable decision.

You’ll remain on the form. The browser asks you to choose a decision while the receipt still says No decision has been recorded yet.

Once a decision exists, do you think the empty rationale can pass the same validation check?

• Select Accept the AI recommendation: invoice export delay.
• Click Record accountable decision again.

The browser blocks submission again. This time, it directs you to the empty Human rationale (required) field.

What Did This Prove?

The form prevents a reviewer from recording a choice without an explanation. The receipt also remains unchanged after an incomplete submission.

Accept the recommendation

The accept path tests whether the reviewer can preserve the simulated recommendation for explicit reasons. Reach and time pressure provide the reasoning for this test.

• Select Accept the AI recommendation: invoice export delay.
• Enter The invoice export delay affects 140 organizations. Reports are due tomorrow. in the Human rationale (required) field.

Before you record the decision, do you expect the receipt to preserve both the selected path and your rationale?

• Click Record accountable decision.

You’ll see Decision recorded: Accept the AI recommendation: invoice export delay. Human rationale: The invoice export delay affects 140 organizations. Reports are due tomorrow. in the receipt. The page stays loaded throughout the update.

Override the recommendation

The override path proves that human review can change the outcome. Severity and the lack of a workaround provide the reasoning for this test.

• Select Override: address the payment lockout first.
• Replace the rationale with Payroll cannot be completed for 18 organizations. No workaround is available..

Before you submit, do you expect the new receipt to replace every part of the accepted decision?

• Click Record accountable decision.

You’ll see Decision recorded: Override: payment lockout. Human rationale: Payroll cannot be completed for 18 organizations. No workaround is available. in the receipt. The page remains loaded while the outcome and rationale both change.

That completes the accountability test. Your prototype now blocks empty submissions and records two genuinely different human decisions.

The browser tests confirm the runtime behavior. These tabs provide a final comparison against the complete base prototype.

✔️ Awesome, I've got everything!

All three tests passed. Your base prototype files remain unchanged and ready for the optional extension.

ⓧ I'd like to double check the full code

• Compare your index.html file with this reference:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>Human Judgment Lab</title>
    <link rel="stylesheet" href="style.css" />
    <script src="app.js" defer></script>
  </head>
  <body>
    <main>
      <header class="hero">
        <p class="eyebrow">Human Judgment Lab</p>
        <h1>Triage a customer crisis</h1>
        <p>
          A fictional operations team must choose which customer incident to
          address first. Review the simulated AI output, inspect the missing
          context, and own the final decision.
        </p>
      </header>

      <section class="panel ai-panel" aria-labelledby="ai-heading">
        <p class="label">Simulated AI output</p>
        <h2 id="ai-heading">Address the invoice export delay first</h2>
        <p>
          Reason shown: it affects the largest number of customers with an
          immediate reporting deadline.
        </p>
        <p class="confidence">Confidence shown: High</p>
        <p class="warning">
          A confident presentation is not the same as complete decision
          context.
        </p>
      </section>

      <section class="panel" aria-labelledby="evidence-heading">
        <p class="label">Human review</p>
        <h2 id="evidence-heading">Evidence the recommendation did not weigh</h2>

        <div class="evidence-grid">
          <article class="evidence-card priority-risk">
            <h3>Payment lockout</h3>
            <dl>
              <dt>Reach</dt>
              <dd>18 organizations</dd>
              <dt>Impact</dt>
              <dd>Payroll cannot be completed</dd>
              <dt>Time pressure</dt>
              <dd>Payroll closes in 3 hours</dd>
              <dt>Workaround</dt>
              <dd>None available</dd>
            </dl>
          </article>

          <article class="evidence-card">
            <h3>Invoice export delay</h3>
            <dl>
              <dt>Reach</dt>
              <dd>140 organizations</dd>
              <dt>Impact</dt>
              <dd>Monthly reporting is delayed</dd>
              <dt>Time pressure</dt>
              <dd>Reports are due tomorrow</dd>
              <dt>Workaround</dt>
              <dd>Manual CSV export</dd>
            </dl>
          </article>

          <article class="evidence-card">
            <h3>Dashboard theme defect</h3>
            <dl>
              <dt>Reach</dt>
              <dd>600 organizations</dd>
              <dt>Impact</dt>
              <dd>Some labels are difficult to read</dd>
              <dt>Time pressure</dt>
              <dd>No fixed deadline</dd>
              <dt>Workaround</dt>
              <dd>Refresh the saved theme</dd>
            </dl>
          </article>
        </div>
      </section>

      <section class="panel decision-panel" aria-labelledby="decision-heading">
        <p class="label">Accountable decision</p>
        <h2 id="decision-heading">What should the team do first?</h2>

        <form id="decision-form">
          <fieldset>
            <legend>Choose one path</legend>

            <label class="decision-option">
              <input
                type="radio"
                name="decision"
                value="Accept the AI recommendation: invoice export delay"
                required
              />
              <span>Accept the AI recommendation: invoice export delay</span>
            </label>

            <label class="decision-option">
              <input
                type="radio"
                name="decision"
                value="Override: payment lockout"
                required
              />
              <span>Override: address the payment lockout first</span>
            </label>
          </fieldset>

          <label for="rationale">Human rationale (required)</label>
          <textarea
            id="rationale"
            name="rationale"
            rows="5"
            required
            placeholder="Explain which evidence and stakeholder impact drove your decision."
          ></textarea>

          <button type="submit">Record accountable decision</button>
        </form>

        <p id="receipt" class="receipt" aria-live="polite">
          No decision has been recorded yet.
        </p>
      </section>
    </main>
  </body>
</html>

How This File Supports the Test

The required radio group blocks an empty decision. The required rationale textarea blocks an empty explanation.

The aria-live="polite" receipt presents each recorded decision as a visible update.

• Compare your style.css file with this reference:

:root {
  color: #172033;
  background: #eef2f7;
  font-family:
    Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
    sans-serif;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
}

main {
  width: min(72rem, calc(100% - 2rem));
  margin: 0 auto;
  padding: 3rem 0 5rem;
}

.hero {
  max-width: 48rem;
  margin-bottom: 2rem;
}

.hero h1 {
  margin: 0.25rem 0 0.75rem;
  font-size: clamp(2.2rem, 6vw, 4.5rem);
  line-height: 1;
}

.hero p:last-child {
  color: #4a556b;
  font-size: 1.1rem;
  line-height: 1.6;
}

.eyebrow,
.label {
  margin: 0;
  color: #4f46e5;
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.panel {
  margin-top: 1.25rem;
  padding: 1.5rem;
  border: 1px solid #d9e0ea;
  border-radius: 1rem;
  background: #ffffff;
  box-shadow: 0 0.75rem 2rem rgba(23, 32, 51, 0.07);
}

.panel h2 {
  margin: 0.5rem 0 1rem;
}

.ai-panel {
  border: 2px solid #4f46e5;
  background: linear-gradient(135deg, #ffffff, #f1f0ff);
}

.confidence {
  display: inline-block;
  margin: 0.5rem 0;
  padding: 0.35rem 0.65rem;
  border-radius: 999px;
  color: #14532d;
  background: #dcfce7;
  font-weight: 750;
}

.warning {
  margin-bottom: 0;
  color: #7c2d12;
  font-weight: 650;
}

.evidence-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
  gap: 1rem;
}

.evidence-card {
  padding: 1rem;
  border: 1px solid #d9e0ea;
  border-radius: 0.8rem;
  background: #f8fafc;
}

.evidence-card.priority-risk {
  border-color: #f97316;
  background: #fff7ed;
}

.evidence-card h3 {
  margin-top: 0;
}

dl {
  display: grid;
  grid-template-columns: 6rem 1fr;
  gap: 0.5rem;
  margin-bottom: 0;
}

dt {
  color: #64748b;
  font-weight: 700;
}

dd {
  margin: 0;
}

form {
  display: grid;
  gap: 1rem;
}

fieldset {
  display: grid;
  gap: 0.75rem;
  margin: 0;
  padding: 1rem;
  border: 1px solid #cbd5e1;
  border-radius: 0.75rem;
}

legend,
label {
  font-weight: 750;
}

.decision-option {
  display: flex;
  gap: 0.75rem;
  align-items: flex-start;
  padding: 0.85rem;
  border-radius: 0.6rem;
  background: #f8fafc;
  cursor: pointer;
}

textarea {
  width: 100%;
  padding: 0.85rem;
  border: 1px solid #94a3b8;
  border-radius: 0.6rem;
  font: inherit;
  resize: vertical;
}

button {
  width: fit-content;
  padding: 0.8rem 1.1rem;
  border: 0;
  border-radius: 0.6rem;
  color: #ffffff;
  background: #3730a3;
  font: inherit;
  font-weight: 800;
  cursor: pointer;
}

button:hover,
button:focus-visible {
  background: #312e81;
}

.receipt {
  min-height: 3rem;
  margin-bottom: 0;
  padding: 1rem;
  border-left: 0.3rem solid #4f46e5;
  background: #eef2ff;
  line-height: 1.5;
}

@media (max-width: 36rem) {
  main {
    padding-top: 2rem;
  }

  dl {
    grid-template-columns: 1fr;
  }

  dd {
    margin-bottom: 0.4rem;
  }
}

How the Styles Support Review

The evidence grid keeps the incidents comparable across screen sizes. The highlighted payment lockout card makes its higher stakeholder risk visible.

The receipt styling separates the recorded outcome from the decision controls. Each successful test produces a clear visual change.

• Compare your app.js file with this reference:

const decisionForm = document.querySelector("#decision-form");
const rationaleInput = document.querySelector("#rationale");
const receipt = document.querySelector("#receipt");

function handleDecision(event) {
  event.preventDefault();

  const selectedDecision = document.querySelector(
    'input[name="decision"]:checked',
  );
  const rationale = rationaleInput.value;

  receipt.textContent = `Decision recorded: ${selectedDecision.value}. Human rationale: ${rationale}`;
}

decisionForm.addEventListener("submit", handleDecision);

How the Script Records Decisions

The submit listener calls handleDecision() after the browser validates the required controls. The handler prevents a page reload.

The handler reads the selected decision and rationale through their value properties. It writes both values into the receipt with textContent.

Secret mission

Add a Defer-and-Investigate Path

A responsible reviewer sometimes needs more evidence before choosing a path. Add a defer option that records the missing evidence in the decision receipt.

Clean Up Your Resources

Clean Up Your Resources

Your prototype runs entirely on your local computer. It does not use paid resources or create ongoing costs.

Decide whether to keep your resources running, pause them to come back later, or delete them entirely.

Resources you used:

• The human-judgment-lab project folder containing your complete local prototype.

Keep everything running

Keep the workspace as it is if you want to refine the interface or demonstrate its decision paths again.

• Keep the human-judgment-lab folder on your computer.
• Leave the workspace available in Visual Studio Code for future edits.
• Use the integrated browser preview whenever you want to test the accept, override, or defer paths.

Pause - I'll come back to this later

Close the local preview to free system memory. Your prototype files remain ready for your next session.

• Close the integrated browser preview in Visual Studio Code.
• Close Visual Studio Code.
• Leave the human-judgment-lab folder unchanged on your computer.

Your prototype stops using active system memory. All three decision paths remain stored in the local workspace.

Delete - I don't want to use this again

Deleting the folder is permanent. Only the local human-judgment-lab workspace is affected.

• Right-click human-judgment-lab in Visual Studio Code's Explorer sidebar.
• Choose the menu option that reveals the folder in the Windows file manager.

You should see the human-judgment-lab folder selected in its containing folder. This confirms that you are targeting the correct workspace.

• Close Visual Studio Code.
• Press Shift+Delete while human-judgment-lab remains selected.
• Confirm the permanent deletion when Windows asks.
• Verify that human-judgment-lab is no longer listed in the containing folder.

The local prototype has now been removed. No cloud resources or background services remain to clean up.

Nice Work!

Nice Work!

You did it! Your local browser prototype now turns a confident AI recommendation into a reviewable decision with visible human accountability.

You've learned how to:

• Build a polished but deliberately incomplete simulated AI recommendation that exposes the risk of missing decision context.
• Use stakeholder evidence to reframe incident priority before accepting a confident recommendation.
• Demonstrate meaningful human-AI oversight with accountable decision controls. Each choice records its rationale in a visible receipt.
• Secret Mission: Added a defer-and-investigate path that records the evidence needed before a reviewer decides.

Ready to quiz yourself?