Build a basic prototype

Show different pages depending on user input (branching)

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 ineligible.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.

Create an ineligible page

  1. Make an ineligible.html page by copying content.html from docs/views/templates to app/views.

  2. 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/ineligible.

Create a route

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 magical-powers 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.

  1. In magical-powers.html change the form action to /magical-powers-answer.

  2. Open /app/routes.js.

  3. Insert new JavaScript into line 5, before module.exports = router. 

// Run this code when a form is submitted to 'magical-powers-answer'
router.post('/magical-powers-answer', function (req, res) {

// Make a variable and give it the value from 'magical-powers'
var magicPowers = req.session.data['magical-powers']

// Check whether the variable matches a condition
if (magicPowers == "yes"){
// Send user to next page
res.redirect('/details')
} else {
// Send user to ineligible page
res.redirect('/ineligible')
}

})
  1. Check it works. Selecting ‘Yes’ should send you to the next question. Any other answer should send you to the ineligible page.

If it does not work

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/magical-powers-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/magical-powers-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.