Employee Satisfaction Tutorial

Day 3: Testing the flexible box model

Now let's run our application to see how it performs with different screen sizes. Notepad++ allows us to run html applications using different browsers. We will use Chrome in this lesson. Feel free to use any of the others to see how the application is formatted with them

Your screen should look like this:



As you can see there 5 sections:

The color of each of these sections can be changed as well as other characteristics within each section.

Header Section

To create the header, locate the header tags <Header> and</Header> Type the name of the document, Employment Satisfaction Survey between the tags.

Image for survey


Right click and Save image as empSat.JPEG

Survey Instructions



Paste the information into the nav section.

Mail To Tag

We now have to create a way for the survey responses to be sent to the company. There are a number of ways this can be done. Here we will use the mailto tag to send the information from the survey to an email address.


Survey Questions in nav section



Paste this text into end of nav section.

Survey Questions in article section



Paste this code into the beginning of article section.

The way the code works is as follows:

  1. The user clicks on the arrows on the number box controls to set their answers. This is the inout type = number
  2. A range of numbers can be set I used 1 and 10 as min and max
  3. The control is given and id and a name
  4. When the user leaves the field, the onBlur code sends each question's responses to javaScript functions.