Build a basic prototype

Show the user's answers on the Check answers page

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.

Show the answer to question 1

1. Open check-your-answers.html in your app/views folder.
2. 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['magical-powers'].

This is how we show data a user has entered – 'magical-powers' is the name attribute from the <input> on the question page.

Update the screen reader text – on the next line visuallyHiddenText change 'NHS number' to 'symptoms of magical powers'.

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 know what it's for.

Show the answer to question 2

1. 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 next line visuallyHiddenText change 'name' to 'details of the symptoms'

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

Delete the remaining example answers

On the "Check answers" template page, there are 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: "Magical power symptoms in the last 30 days"
            },
            value: {
              text: data["magical-powers"]
            },
            actions: {
              items: [
                {
                  href: "#",
                  text: "Change",
                  visuallyHiddenText: "magical power symptoms in the last 30 days"
                }
              ]
            }
          },
          {
            key: {
              text: "Details of symptoms"
            },
            value: {
              text: data["details"]
            },
            actions: {
              items: [
                {
                  href: "#",
                  text: "Change",
                  visuallyHiddenText: "details of 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>