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.magicalPowers, 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 let you select which option should be pre-selected by setting a value option to the value of the selected option.

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

Update the radios component to add value: data.magicalPowers, like this: 

{{ radios({
  idPrefix: "magical-powers",
  name: "magicalPowers",
  fieldset: {
    legend: {
      text: "Have you felt symptoms of magical powers in the last 30 days?",
      classes: "nhsuk-fieldset__legend--l",
      isPageHeading: true
    }
  },
  hint: {
    html: "For example, things moving when you have strong feelings or hearing someone's thoughts."
  },
  value: data.magicalPowers,
  items: [
  {
    value: "yes",
    text: "Yes"
  },
  {
    value: "no",
    text: "No"
  },
  {
    value: "not sure",
    text: "I'm not sure"
  }
]
}) }}

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 work in a similar way to radios, adding 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.