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. Find the value data['magical-powers'], then change the the href value from '#' to '/magical-powers'
  2. Find the value data['details'], then change the the href value 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.

Go to id: "details", and add a new line value: data['details'], like this: 

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

  }}

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.