Merge pull request #556 from alphagov/update-branching-example

Update branching example

CHANGELOG.md

@@ -1,9 +1,9 @@
 # Unreleased
 
 Bug fixes:
+- [#556 Update branching example](https://github.com/alphagov/govuk-prototype-kit/pull/556)
 - [#536 Import missing component macros](https://github.com/alphagov/govuk_prototype_kit/pull/536)
 - [#532 Update repo links from govuk_prototype_kit to govuk-prototype-kit](https://github.com/alphagov/govuk_prototype_kit/pull/532)
-
 - [#540 Fix grid css classes on check-your-answers page](https://github.com/alphagov/govuk-prototype-kit/pull/540)
 
 # 7.0.0-beta.10

docs/documentation_routes.js

@@ -48,16 +48,17 @@ router.get('/examples/template-data', function (req, res) {
 })
 
 // Branching
-router.get('/examples/over-18', function (req, res) {
-  // Get the answer from the query string (eg. ?over18=false)
-  var over18 = req.query.over18
+router.post('/examples/branching/over-18-answer', function (req, res) {
+  // Get the answer from session data
+  // The name between the quotes is the same as the 'name' attribute on the input elements
+  // However in JavaScript we can't use hyphens in variable names
+
+  let over18 = req.session.data['over-18']
 
   if (over18 === 'false') {
-    // Redirect to the relevant page
-    res.redirect('/docs/examples/under-18')
+    res.redirect('/docs/examples/branching/under-18')
   } else {
-    // If over18 is any other value (or is missing) render the page requested
-    res.render('examples/over-18')
+    res.redirect('/docs/examples/branching/over-18')
   }
 })
 

docs/views/examples/branching.html → docs/views/examples/branching/index.html

@@ -13,22 +13,22 @@
   <div class="govuk-grid-row">
     <div class="govuk-grid-column-two-thirds">
 
-      <form action="/docs/examples/over-18" method="get" class="form">
+      <form action="/docs/examples/branching/over-18-answer" method="post" class="form">
 
         <h1 class="govuk-heading-xl">
           Branching
         </h1>
 
         <p>
-          You may want to show a user different pages, depending on how they've answered a question.
+          You can show a user different pages, depending on how they've answered a question.
         </p>
 
         <p>
-          You can see the code for this example here:
+          The code for this example is in your prototype folder:
         </p>
 
         <pre class="app-code"><code>/docs/documentation_routes.js
-/docs/views/examples/branching.html</code></pre>
+/docs/views/examples/branching</code></pre>
 
         <div class="govuk-form-group">
           <fieldset class="govuk-fieldset">
@@ -39,14 +39,14 @@ <h2 class="govuk-fieldset__heading">
           </legend>
           <div class="govuk-radios govuk-radios--inline">
             <div class="govuk-radios__item">
-              <input class="govuk-radios__input" id="over18-1" name="over18" type="radio" value="true">
-              <label class="govuk-label govuk-radios__label" for="over18-1">
+              <input class="govuk-radios__input" id="over-18-yes" name="over-18" type="radio" value="true">
+              <label class="govuk-label govuk-radios__label" for="over-18-yes">
                 Yes
               </label>
             </div>
             <div class="govuk-radios__item">
-              <input class="govuk-radios__input" id="over18-2" name="over18" type="radio" value="false">
-              <label class="govuk-label govuk-radios__label" for="over18-2">
+              <input class="govuk-radios__input" id="over18-no" name="over-18" type="radio" value="false">
+              <label class="govuk-label govuk-radios__label" for="over-18-no">
                 No
               </label>
             </div>