Build a basic prototype

Create pages

Create pages by copying template files that come with the Prototype Kit.

Create a start page

Copy the start-page.html file from docs/views/templates to app/views.

Preview the pages in your prototype by going to http://localhost:3000/NAME-OF-HTML-FILE in your web browser. For example, go to http://localhost:3000/start-page to preview start-page.html.

Change the service name

You'll normally edit the HTML to make changes to pages, but the service name is in a config file. This is so we can change it in one place to update it on every page in your prototype.

  1. Open the config.js file in your app folder.
  2. Change serviceName from "Service name goes here" to "Order a test to check if you have magical powers".
  3. Press Cmd+S on Mac or Ctrl+S on Windows to save your change.

You must save every time you make a change to a file. In most code editors, a dot appears in the tab for any file that has unsaved changes.

Normally your changes will automatically show in the browser without refreshing. But for this config change, you need to refresh the page. You should see your service name change on the Start page.

Question pages

Make 2 copies of the question-page.html file from docs/views/templates to app/views.

Rename the 2 file copies to:

  • magical-powers.html
  • details.html

Go to the following URLs to check your pages:

In the magical-powers.html file, change the text inside the <h1> tag from "Heading or question goes here" to "Have you felt symptoms of magical powers in the last 30 days?".

In the details.html file, change the text inside the <h1> tag to "Tell us your symptoms of magical powers".

'Check answers' page

Copy the check-your-answers.html file from docs/views/templates to app/views.

Go to http://localhost:3000/check-your-answers to check.

Confirmation page

Copy the confirmation-page.html file from docs/views/templates to app/views.

Go to http://localhost:3000/confirmation-page to check.