Create a check answers page

It’s helpful to let users check their answers before submitting them. To do this, we’ll add a check answers page.

Create an empty file named check-your-answers.html in app/views.

Add this line to the top of the file:

{% extends "layout.html" %}

Copy the Nunjucks code from the check answers pattern page and add it to the file.

Go to http://localhost:3000/check-your-answers to check it works.

Show the user’s answers

The prototype kit stores answers that users enter. This means you can make more realistic prototypes, for example by showing answers for users to check or to branch off to different pages depending on their answer.

When storing data, the kit uses the name attribute from the component to save it. We’ll use this when looking up the user’s answer.

Show the answer to question 1

1. Open check-your-answers.html in your app/views folder.
2. In the first row, find the key that contains the text “NHS number”.
3. Change “NHS number” to “Symptoms of magical powers”.
4. In value on the next line, change ‘485 777 3456’ to data.hasSymptoms.

This is how we use data a user has entered – ‘hasSymptoms’ is the name attribute from the input component on the question page.

In the same row, find the line with visuallyHiddenText and change ‘NHS number’ to ‘symptoms of magical powers’.

The link text will read as “Change symptoms of magical powers” to screen reader users. Screen readers will read this out but it will not appear on the page. Without this hidden text, screen reader users would just hear “Change” and not necessarily know what it relates to.

Show the answer to question 2

1. In the second row, find the key that contains the text ‘Name’.
2. Change “Name” to “Details of the symptoms”.
3. In the value on the next line, change ‘Kevin Francis’ to data.details.
4. On the line with visuallyHiddenText, change ‘name’ to ‘details of the symptoms’

Go to http://localhost:3000/ and answer the questions to check your answers show up correctly.

Delete the remaining example answers

In the code there are some example answers that you do not need.

1. Find the , (comma) after the details you have changed, and delete this and everything up to the ] (square bracket).
2. Delete everything from the line that contains “Medical details” down to the line before “Now send your application”.

Your code should now look like this:

<div class="nhsuk-grid-row">
  <div class="nhsuk-grid-column-two-thirds">
    <h1 class="nhsuk-heading-l">
      Check your answers before sending your application
    </h1>

    <h2 class="nhsuk-heading-m">
      Personal details
    </h2>

    {{ summaryList({
      rows: [
        {
          key: {
            text: "Symptoms of magical powers"
          },
          value: {
            text: data.hasSymptoms
          },
          actions: {
            items: [
              {
                href: "#",
                text: "Change",
                visuallyHiddenText: "symptoms of magical powers"
              }
            ]
          }
        },
        {
          key: {
            text: "Details of the symptoms"
          },
          value: {
            text: data.details
          },
          actions: {
            items: [
              {
                href: "#",
                text: "Change",
                visuallyHiddenText: "details of the symptoms"
              }
            ]
          }
        }
      ]
    }) }}

    <h2 class="nhsuk-heading-m">
      Now send your application
    </h2>

    <p>
      By submitting this application you are confirming that,
      to the best of your knowledge, the details you are providing
      are correct.
    </p>

    <p>
      Your details will be sent to Rose Medical Practice to begin
      your registration.
    </p>

    <a href="/confirmation-page" class="nhsuk-button">
      Accept and send registration
    </a>
  </div>
</div>

You can edit the “Now send your application” heading and the content after it to make it more suitable for this service.

Link up the pages

As before, you’ll need to link up this page with previous pages.

Make the ‘Change’ links work

Unlike the previous question pages, there is no back link on the check answers pattern as instead users can go back to any previous question page using the change links in the summary.

Make the change links on the page work by adding the right links.

1. Find the row for Symptoms of magical powers, then change the href value from "#" to "/magical-powers"
2. Find the row for Details of the symptoms, then change the href value from "#" to "/details"

Link to check answers page from the last question

We also need to link the last question page to the check answers page.

To do this:

1. Open details.html in your app/views folder.
2. Find the line <form action="/form-handler" method="post" novalidate>.
3. Change the value of the action attribute from /form-handler to /check-your-answers.

Click on the continue button to check that it now works. It should take you the second question page.