+ By submitting this notification you are confirming that, to the best of your knowledge, the details you are providing are correct. +
+ ++ Your details with be sent to Rose Medical Practice to begin your registration. +
+ + + Accept and send registration + + +
+ Your reference number
+
+ HDJ2123F
+
We have sent you a confirmation email.
+ +Tell the user what happens next.
+ +Go back to page templates.
+ ++ Visit the + NHS digital service manual + for guidance and code examples. +
+ +Use this service to:
+ +Registering takes around 5 minutes.
+ + +You can only use this service if you live in the UK.
+ + + Start now + + +Add text in makePrototype block
+{% endblock %} + +{{ pagination({ + previousUrl: prev.link if prev , + previousPage: prev.title if prev , + nextUrl: next.link if next , + nextPage: next.title if next +}) }} + + + {% include "how-tos/includes/back-button.html" %} + ++ Our first question asks the user if they have had symptoms of magical powers + in the last 30 days. We’re going to send them to an ‘ineligible’ page if + answer anything other than yes. Sending users to different pages based on + their input is called branching. +
+
+ To do this, we’re going to need an
+ {{exampleIneligible.url}}.html page, and
+ some logic to decide when to send users there.
+
+ This kind of logic goes in a file called
+ app/routes.js, which is written in
+ JavaScript. Routes tell the kit what to do when the user goes to specific
+ pages.
+
+ The route takes the answer the user gave to the first question and either + sends them to the next question or the ineligible page, depending on their + answer. +
+
+ Make an
+ {{exampleIneligible.url}}.html page
+ by copying content.html from
+ docs/views/templates to
+ app/views.
+
+ Update the content to tell the user why they’re ineligible and what they + can do next. +
++ To check it works, + go to http://localhost:3000/{{exampleIneligible.url}}. +
++ We’re going to write some logic to process the user’s answer to question 1. If + the user has had magical symptoms in the last 30 days, we’ll send them to + question 2. If they answer with anything else, we’ll send them to the + ineligible page. +
+
+ Currently, the {{exampleRadios.url}} page
+ sends the user directly to question 2. Instead, we’re going to send them to a
+ special URL where we can run some code to check their answer.
+
+ In {{exampleRadios.url}}.html change
+ the form action to
+ /{{exampleRadios.url}}-answer.
+
Open /app/routes.js.
+ Insert new JavaScript into line 5, before
+ module.exports = router.
+
// Run this code when a form is submitted to '{{exampleRadios.url}}-answer'
+router.post('/{{exampleRadios.url}}-answer', function (req, res) {
+
+// Make a variable and give it the value from '{{exampleRadios.legend}}'
+var magicPowers = req.session.data['{{exampleRadios.legend}}']
+
+// Check whether the variable matches a condition
+if (magicPowers == "yes"){
+// Send user to next page
+res.redirect('/{{exampleTextArea.url}}')
+} else {
+// Send user to ineligible page
+res.redirect('/{{exampleIneligible.url}}')
+}
+
+})
++ If you do not get a page, check in the terminal to see if the kit has crashed. + This is a common problem if there’s a typo in the JavaScript. If so, the kit + will try to tell you the line number with the issue. +
+If the kit crashes, you will see something like this on the terminal:
+/Users/name/projects/{{exampleServiceURL}}-prototype/app/routes.js:12
+});
+^
+SyntaxError: Unexpected token }
+at Object.exports.runInThisContext (vm.js:76:16)
+at Module._compile (module.js:542:28)
+at Object.Module._extensions..js (module.js:579:10)
+at Module.load (module.js:487:32)
+at tryModuleLoad (module.js:446:12)
+at Function.Module._load (module.js:438:3)
+at Module.require (module.js:497:17)
+at require (internal/module.js:20:19)
+at Object.<anonymous> (/Users/[username]/projects/{{exampleServiceURL}}-prototype/server.js:7:14)
+at Module._compile (module.js:570:32)
+[14:11:50] [nodemon] app crashed - waiting for file changes before starting…
+
+ The first line of this sample output ends with
+ /app/routes.js:12.
+
+ The '12' suggests there’s probably an issue on line 12 or the line before it. + In this case, the issue was a missing bracket. +
+ +{% endblock %} diff --git a/app/views/how-tos/build-basic-prototype/create-pages.html b/app/views/how-tos/build-basic-prototype/create-pages.html new file mode 100644 index 00000000..c4476beb --- /dev/null +++ b/app/views/how-tos/build-basic-prototype/create-pages.html @@ -0,0 +1,118 @@ +{% set pageTitle = "Create pages" %} {% set next = { "title" : "Link your pages +together" , "link" : "link-pages-together" } %} {% set prev = { "title" : "Open +your prototype in your editor" , "link" : "open-prototype-in-editor" } %} {% +extends 'how-tos/build-basic-prototype/_BASE.njk' %} {% block makePrototype %} + +Create pages by copying template files that come with the Prototype Kit.
+
+ Copy the {{exampleStart.url}}.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/{{exampleStart.url}}
+ to preview {{exampleStart.url}}.html.
+
+ 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. +
+config.js file in your
+ app folder.
+ serviceName from "Service name
+ goes here" to "{{exampleServiceName}}".
+ + 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. +
+
+ Make 2 copies of the
+ question-page.html file from
+ docs/views/templates to
+ app/views.
+
Rename the 2 file copies to:
+{{exampleRadios.url}}.html{{exampleTextArea.url}}.htmlGo to the following URLs to check your pages:
+
+ In the {{exampleRadios.url}}.html file,
+ change the text inside the <h1> tag
+ from "Heading or question goes here" to "{{exampleRadios.title}}".
+
+ In the {{exampleTextArea.url}}.html file,
+ change the text inside the <h1> tag
+ to "{{exampleTextArea.title}}".
+
+ Copy the
+ {{exampleCheckAnswers.url}}.html file
+ from docs/views/templates to
+ app/views.
+
+ Go to + http://localhost:3000/{{exampleCheckAnswers.url}} + to check. +
+ +
+ Copy the
+ {{exampleConfirmation.url}}.html file
+ from docs/views/templates to
+ app/views.
+
+ Go to + http://localhost:3000/{{exampleConfirmation.url}} + to check. +
+ +{% endblock %} diff --git a/app/views/how-tos/build-basic-prototype/index.html b/app/views/how-tos/build-basic-prototype/index.html new file mode 100644 index 00000000..2478a6ae --- /dev/null +++ b/app/views/how-tos/build-basic-prototype/index.html @@ -0,0 +1,58 @@ +{% set noCaption = true %} +{% set pageTitle = "Build a basic prototype using the NHS.UK prototype kit" %} + +{% extends 'how-tos/build-basic-prototype/_BASE.njk' %} + +{% block makePrototype %} + ++This tutorial shows you how to prototype a fictional '{{exampleServiceName}}' service that will: +
++It will take about an hour to finish this tutorial, after you install the Prototype Kit. +
+ ++Our prototype will look a bit like this: +
+ + +
+Before you start, you must install and run the NHS.UK prototype kit. +
+ ++You'll also need a code editor. These two are popular, well established and fairly accessible: +
+ + + + + + Start now + + +{% endblock %} diff --git a/app/views/how-tos/build-basic-prototype/let-user-change-answers.html b/app/views/how-tos/build-basic-prototype/let-user-change-answers.html new file mode 100644 index 00000000..905d4a4d --- /dev/null +++ b/app/views/how-tos/build-basic-prototype/let-user-change-answers.html @@ -0,0 +1,112 @@ +{% set pageTitle = "Let the user change their answers" %} {% set next = { +"title" : "Show different pages depending on user input" , "link" : "branching" +} %} {% set prev = { "title" : "Show the user’s answers on your ‘Check answers’ +page" , "link" : "show-users-answers" } %} {% extends +'how-tos/build-basic-prototype/_BASE.njk' %} {% block makePrototype %} ++ Make the Change links on the ‘{{exampleCheckAnswers.title}}’ + page work by adding the right links. +
+<a> tag under
+ {{ data['how-many-balls'] }}, change
+ the href attribute from # to
+ /{{exampleRadios.url}}
+ <a> tag under
+ {{ data['most-impressive-trick'] }},
+ change the href attribute from # to
+ /{{exampleTextArea.url}}
+ + If you select a Change link, you’ll go back to the right + question page, but your answer will not appear yet. +
+
+ Radios and checkboxes have a
+ checked option to set whether they are
+ selected (checked) or not when the page loads.
+
+ Open the {{exampleRadios.url}}.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/{{exampleRadios.url}} + and check the journey works by selecting an answer, continuing to the next + page, then going back. +
+
+ Text inputs and textareas have a value to
+ set what text appears in them when the page loads.
+
+ Open the
+ {{exampleTextArea.url}}.html file in your
+ app/views folder.
+
+ Add
+ value: data['{{exampleRadios.legend}}']
+ 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/{{exampleTextArea.url}} + and check it works by filling in an answer, continuing to the next page, going + back, then refreshing your browser. +
+ +{% endblock %} diff --git a/app/views/how-tos/build-basic-prototype/link-index-page-start-page.html b/app/views/how-tos/build-basic-prototype/link-index-page-start-page.html new file mode 100644 index 00000000..6c0a6157 --- /dev/null +++ b/app/views/how-tos/build-basic-prototype/link-index-page-start-page.html @@ -0,0 +1,28 @@ +{% set pageTitle = "Link your index page to your start page" %} {% set prev = { +"title" : "Show different pages depending on user input" , "link" : "branching" +} %} {% extends 'how-tos/build-basic-prototype/_BASE.njk' %} {% block +makePrototype %} + ++ You can route users from your service's index page to your start page. The + index page is the page that loads when users + go to http://localhost:3000. +
+index.html file in your
+ app/views folder.
+ <a> tag that links to
+ /{{exampleStart.url}}.
+ + You can now find out + how to publish your prototype online, so you can share it with your team or do user research. +
+ +{% endblock %} diff --git a/app/views/how-tos/build-basic-prototype/link-pages-together.html b/app/views/how-tos/build-basic-prototype/link-pages-together.html new file mode 100644 index 00000000..00e56ead --- /dev/null +++ b/app/views/how-tos/build-basic-prototype/link-pages-together.html @@ -0,0 +1,109 @@ +{% set pageTitle = "Link your pages together" %} {% set next = { "title" : "Use +components from the Design System" , "link" : "use-components" } %} {% set prev += { "title" : "Create pages" , "link" : "create-pages" } %} {% extends +'how-tos/build-basic-prototype/_BASE.njk' %} {% block makePrototype %} + +To take users from one page to another, you can use either:
+<a> tag)<form> tag, when the
+ user inputs data)
+ start.html in your
+ app/views folder.
+ <a> tag with 'Start
+ now' inside.
+ href attribute from
+ # to
+ /{{exampleRadios.url}}.
+ + Go to http://localhost:3000/{{exampleStart.url}} + and select the Start now button to check the link works. +
++ Links normally appear as text with underlines. We make + Start now look like a button to make it more obvious to + users. +
+{{exampleRadios.url}}.html in
+ your app/views folder.
+ <form class="form" action="/url/of/next/page"
+ method="post">.
+ action attribute from
+ /url/of/next/page to
+ /{{exampleTextArea.url}}.
+ + Go to http://localhost:3000/{{exampleRadios.url}} + and select Continue to check the button works. +
++ 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. +
+{{exampleTextArea.url}}.html in
+ your app/views folder.
+ <form class="form" action="/url/of/next/page"
+ method="post">.
+ action attribute from
+ /url/of/next/page to
+ /{{exampleCheckAnswers.url}}.
+ + Go to http://localhost:3000/{{exampleTextArea.url}} + and select Continue to check the button works. +
++ The 'Check answers' page template links to the ‘Confirmation’ page by + default. So you do not need to change the ‘Check answers’ page. +
+ + {% endblock %} ++ In your code editor open your prototype folder. You will see the files and + folders that you can edit in your prototype. +
+
+ /app is for your work. Inside that
+ folder:
+
views is for HTML pagesassets is for CSS, JavaScript, images
+ and downloadable files
+ routes.js is for advanced logic - for
+ example, if a user should go to one page or another based on their answers.
+ We'll cover it later.
+ /docs/views/templates has template
+ pages for you to copy into your prototype
+ + The Prototype Kit stores answers that users enter. This means you can make + more realistic prototypes, for example by showing answers for users to check. +
+{{exampleCheckAnswers.url}}.html in
+ your app/views folder.
+ <dt> tag that contains
+ the text 'NHS number'.
+ <dd> tag on the next line,
+ change '485 777 3456' to
+ {{ data['{{exampleRadios.legend}}'] }}.
+
+ This is how we show data a user has entered – '{{exampleRadios.legend}}' is
+ the name attribute from the
+ <input> on the question page.
+
Update the screen reader text – change this
+<span class="govuk-visually-hidden"> name</span>
+to
+<span class="govuk-visually-hidden"> {{exampleRadios.summary | lower }}</span>
++ Screen readers will read this out but it will not appear on the page. Without + this hidden text, screen reader users would just hear “Change” and not know + what it’s for. +
+<dt> tag that contains
+ the text 'Name'.
+ <dd> tag on the next line,
+ change 'Kevin Francis' to
+ {{ data['{{exampleTextArea.legend}}'] }}.
+ Change
+<span class="govuk-visually-hidden"> name</span>
+to
+<span class="govuk-visually-hidden"> {{exampleTextArea.legend | lower}}</span>
++ Go to http://localhost:3000/{{exampleStart.url}} + and answer the questions to check your answers show up correctly. +
++ On the ‘Check answers’ template page, there are example answers that you do + not need. +
+<div> that starts with
+ <div class="govuk-summary-list__row">
+ and contains 'Contact information'.
+ <div> that starts with
+ <div class="govuk-summary-list__row">
+ and contains 'Contact details'.
+ Your code should now look like this:
+
+
+ {{ '
+
+
+
+ Check your answers before sending your application
+
+
+
+ Personal details
+
+
+ {{ summaryList({
+ rows: [
+ {
+ key: {
+ text: "Magical power symptoms in the last 30 days"
+ },
+ value: {
+ text: data["magical-powers"]
+ },
+ actions: {
+ items: [
+ {
+ href: "/magical-powers",
+ text: "Change",
+ visuallyHiddenText: "magical power symptoms in the last 30 days"
+ }
+ ]
+ }
+ },
+ {
+ key: {
+ text: "Details of symptoms"
+ },
+ value: {
+ text: data["details"]
+ },
+ actions: {
+ items: [
+ {
+ href: "/details",
+ text: "Change",
+ visuallyHiddenText: "details of symptoms"
+ }
+ ]
+ }
+ }
+ ]
+ }) }}
+
+
+
+ Now send your application
+
+
+
+ By submitting this notification you are confirming that, to the best of your knowledge, the details you are providing are correct.
+
+
+
+ Your details with be sent to Rose Medical Practice to begin your registration.
+
+
+
+ Accept and send registration
+
+
+
+ ' | escape }}
+
+{{exampleRadios.url}}.html in your
+ app/views folder.
+ <p>...</p> paragraphs with
+ the code you copied.
+ <h1> tag with
+ "{{exampleTextArea.title}}" (again the example code comes with an accessible
+ heading for the question).
+ label, change
+ text from "Can you provide more
+ detail?" to "{{exampleTextArea.title}}".
+ id and
+ name to
+ {{exampleTextArea.legend}}.
+ label area add
+ classes: "nhsuk-label--l", and
+ isPageHeading: true
+ Your component code should now look like this:
+ +{{ textarea({
+name: "{{exampleTextArea.legend}}",
+id: "{{exampleTextArea.legend}}",
+label: {
+ text: "{{exampleTextArea.title}}",
+ classes: "nhsuk-label--l",
+ isPageHeading: true
+}
+}) }}Your page should now look like this:
+
+ 
+
+ You can copy example code from the NHS Design System to add page elements like + radios and text inputs - we call these ‘components’. +
+HTML is the language used to create web pages.
++ Nunjucks is another language we can run in the Prototype Kit, to make HTML for + us. Short, simple Nunjucks code can create much longer, more complex HTML. +
++ In the Design System, components have both Nunjucks and HTML example code. + Either will work in the Prototype Kit. +
+{{exampleRadios.url}}.html in your
+ app/views folder.
+ <p>...</p> paragraphs with
+ the code you copied.
+ <h1> tag with
+ "{{exampleRadios.title}}".
+ legend, change
+ text from "Do you know your NHS
+ number?" to "{{exampleRadios.title}}".
+ name to
+ {{exampleRadios.legend}}.
+ {% set hint %} code.
+ hint: { html: area replace
+ hintHtml and add "For example, things moving when you have strong feelings or hearing
+ someone’s thoughts.".
+ Your component code should now look like this:
+ +{{ radios({
+ idPrefix: "{{exampleRadios.legend}}",
+ name: "{{exampleRadios.legend}}",
+ fieldset: {
+ legend: {
+ text: "{{exampleRadios.title}}",
+ classes: "nhsuk-fieldset__legend--l",
+ isPageHeading: true
+ }
+ },
+ hint: {
+ html: "For example, things moving when you have strong feelings or hearing someone’s thoughts."
+ },
+ items: [
+ {
+ value: "yes",
+ text: "Yes"
+ },
+ {
+ value: "no",
+ text: "No"
+ },
+ {
+ value: "not sure",
+ text: "I'm not sure"
+ }
+ ]
+}) }}Your page should now look like this:
+
+ 
+
These guides will show you how to use the prototype kit, from creating a simple page to building complex user journeys.
+The kit is now installed. Congratulations!