Create a second question page

Create another empty file for your second question named details.html in your app/views folder.

As before, add this line to the top of each file:

{% extends "layout.html" %}

Preview the page by visiting http://localhost:3000/details in your browser.

Our details.html page is going to have a textarea component to collect details of the users symptoms.

1. Go to the textarea page of the design system.
2. Select the Nunjucks tab under the ‘Radios with hints’ example, then Copy code.
3. Open details.html in your app/views folder.
4. Paste the component inside the <form> tag, before the continue button.

Customise the example code

1. Delete {% from "textarea/macro.njk" import textarea %}. These import lines are not needed in the prototype kit.
2. Under label, change text from “Can you provide more detail?” to “Tell us your symptoms of magical powers”.
3. Change the id and name to details.
4. We don’t need a hint, so remove it and the comma just before it.
5. We also want to make the label be the page h1, so in the label area add size: "l", and isPageHeading: true

Your component code should now look like this:

{{ textarea({
  name: "details",
  id: "details",
  label: {
    text: "Tell us your symptoms of magical powers",
    size: "l",
    isPageHeading: true
  }
}) }}

Your page should now look like this:

Link the pages together

As before, you’ll need to link 2 pages together.

Make the back link work

Find the back link on this second question page and update the href to /magical-powers to link it back to the first question.

Make the continue button on the first question work

You’ll notice that the continue button on the first question page takes you to a ‘Page not found’ error page.

To make this button work, you will have to do something different from the button on the start page. That’s because this time it’s a real HTML button, not a link. Buttons submit form data – the URL is on the form tag, not the button.

To make the form work:

1. Open magical-powers.html in your app/views folder.
2. Find the line <form action="/form-handler" method="post" novalidate>.
3. Change the value of the action attribute from /form-handler to /details.

Click on the Continue button to check that it now works. It should take you the second question page.