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 on the ‘Check answers’ page.

We will change the text in the template to match the questions in your prototype and show the user’s answers.

Show the answer to question 1

1. In your browser, go to http://localhost:3000/check-answers (opens in a new tab).

2. In your code editor, open check-answers.html in your app/views folder.

3. You need to change the text 'Question 1' to 'Number of balls you can juggle'. Find this code:

   key: {
     text: "Question 1"
   },
   

4. Change it to:

   key: {
     text: "Number of balls you can juggle"
   },
   

5. You need to change the text 'Answer 1' to data['how-many-balls']. Find this code:

   value: {
     text: "Answer 1"
   },
   

6. Change it to:

   value: {
     text: data['how-many-balls']
   },
   

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

Update the screen reader text

Screen readers read out hidden text, but it will not appear on the page. For example, there is a 'Change' link next to each question. Without hidden text, screen reader users would just hear “Change” and not know what it’s for.

Update the screen reader text – change this:

visuallyHiddenText: "Question 1"

to:

visuallyHiddenText: "number of balls you can juggle"

Show the answer to question 2

1. You need to change the text 'Question 2' to 'Your most impressive juggling trick'. Find this code:

key: {
  text: "Question 2"
},

2. Change it to:

key: {
  text: "Your most impressive juggling trick"
},

3. You need to change the text 'Answer 2' to data['most-impressive-trick']. Find this code:

value: {
  text: "Answer 2"
},

4. Change it to:

value: {
  text: data['most-impressive-trick']
},

5. Update the screen reader text – find this code:

visuallyHiddenText: "Question 2"

6. Change it to:

visuallyHiddenText: "your most impressive juggling trick"

7. Go to http://localhost:3000/start (opens in a new tab) and answer the questions to check that your answers show up correctly.

Delete the remaining example row

The ‘Check answers’ template page has 3 example rows, each row represents a question. We only have 2 questions in our prototype, so we'll delete the last row.

Delete the last row including the comma above it:

,
{
  key: {
    text: "Question 3"
  },
  value: {
    text: "Answer 3"
  },
  actions: {
    items: [
      {
        href: "#",
        text: "Change",
        visuallyHiddenText: "Question 3"
      }
    ]
  }
}

Your code should now look like this:

  <div class="govuk-grid-row">
    <div class="govuk-grid-column-two-thirds-from-desktop">

      <h1 class="govuk-heading-xl">
        Check your answers before sending your application
      </h1>

      {{ govukSummaryList({
        rows: [
          {
            key: {
              text: "Number of balls you can juggle"
            },
            value: {
              text: data['how-many-balls']
            },
            actions: {
              items: [
                {
                  href: "#",
                  text: "Change",
                  visuallyHiddenText: "number of balls you can juggle"
                }
              ]
            }
          }
          ,
          {
            key: {
              text: "Your most impressive juggling trick"
            },
            value: {
              text: data['most-impressive-trick']
            },
            actions: {
              items: [
                {
                  href: "#",
                  text: "Change",
                  visuallyHiddenText: "your most impressive juggling trick"
                }
              ]
            }
          }
        ]
      }) }}

      <h2 class="govuk-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>

      <form action="/confirmation" method="post" novalidate>

        {{ govukButton({
          text: "Accept and send"
        }) }}

      </form>

    </div>
  </div>