Build a basic prototype

Let the user change their answers

Make the Change links on the ‘Check your answers’ page work by adding the right links.

  1. In the <a> tag under , change the href attribute from # to /magical-powers
  2. In the <a> tag under , change the href attribute from # to /details

If you select a Change link, you’ll go back to the right question page, but your answer will not appear yet.

Show the user’s answer in question 1

Radios and checkboxes have a checked option to set whether they are selected (checked) or not when the page loads.

Open the magical-powers.html file in your app/views folder.

For each of the items, we’ll add a checked value, like this: 

{
  value: "yes",
  text: "Yes",
  checked: checked("magical-powers", "yes")
},
{
  value: "no",
  text: "No",
  checked: checked("magical-powers", "no")
  },
  {
  value: "not sure",
  text: "I'm not sure",
  checked: checked("magical-powers", "not sure")
  },

In each case make sure the spelling is exactly the same as the value.

Go to http://localhost:3000/magical-powers and check the journey works by selecting an answer, continuing to the next page, then going back.

Show the user’s answer in question 2

Text inputs and textareas have a value to set what text appears in them when the page loads.

Open the details.html file in your app/views folder.

Add value: data['magical-powers'] like this: 

{{
   textarea({
    name: "example",
    id: "example",
    label: {
      text: "Tell us your symptoms of magical powers",
      classes: "nhsuk-label--l",
      isPageHeading: true
    },
    value: data['details']
  }) 

  }}

Go to http://localhost:3000/details and check it works by filling in an answer, continuing to the next page, going back, then refreshing your browser.