Your team is required to develop a prototype web application for a human facilitator to conduct a survey that attempts to find the real unemployment rate, i.e. a like Assignment 2 except that it will be enhanced by:

  • Using a graphical user interface.
  • Provide full details for a given individual.
  • List the people belonging to various subsets of those surveyed.
  • Ordering those lists according to various criteria.
  • A test plan and test results are required.

Normally such a program would communicate with a server which in turn, would store and retrieve that data from a database. However, this course has not taught server side programming, so your prototype is limited to a single browser window, and cannot load or save.

Your web page will display the following sections:-

Input Person Details

A section for inputting the name, useful demographic details, and employment status of people surveyed.

Results

A section for displaying the percentages of people classified as "Not in the workforce", "Unemployed", "Underemployed", or "Employed".

It can do this for the entire surveyed population or a given demographic subset of the surveyed population.

Person Details

A section that shows all of the inputted data for an individual person, the entire surveyed population or a given demographic subset of the surveyed population.

Figure 1: see image.

Figure 1 depicts how your web page might appear. Please note:-

  • The look and feel shown in the image above is generated by CSS (Cascading Style Sheet) as per the provided template.
  • You are not required to use the template.
  • You are not required to use CSS.
  • You are not required to duplicate the look and feel of the above illustration. A very plain web page with no styling is acceptable, as is a different styling.

Questionnaire Records

Each record includes the following fields:-

  • fName: Given name of the person surveyed. This is required. It is a non-empty string, even after you apply the trim() method.
  • sName: surname of the person surveyed. This is required. It is a non-empty string, even after you apply the trim() method.
  • gender: Indicates the biological gender of the person surveyed. Could be a string, or perhaps a boolean (e.g. isMale). (The possibility of any genders other than "male" or "female" should probably not be allowed. You may include the possibility of other genders, in keeping with current trends, but please note that doing so will create extra work for you, because you must then follow it through when you perform selection and/or sorting). Whatever you choose to do here, full validation will be required.
  • dob: The date of birth of the person surveyed. This is required. It is entered as a string in the form "dd/mm/yyyy". It will be fully verified and will be stored as a Date object.
  • pCode: The residential post code of the person being surveyed. This is required. It must consist of 4 digits.
  • curStat: The current employment status of the person being surveyed. It must be one of:- "none", "part", or "full". desired: The desired employment status of the person being surveyed. It must be one of:- "none", "part", or "full".

The Input Customer Records section

The user fills out the fields in this section, and then presses the "enter" button to add the record. On success the web application will add the record, and also blank out (remove text from) the fields in preparation for the next record entry.

The web application validates all fields and won't permit an invalid record to be entered if any of the fields are invalid.

When the user presses the enter button, if there are invalid fields, then rather than accepting the record, the application must provide an error message, and visually indicate which field has an unacceptable value. You might choose do the visual indication by calling highlightLabel(), which is provided with the template. Of course there may be more than one invalid field, but multiple error messages can be overwhelming, and it may be better to tell the user about the first problem only.

The Results section

In this section we can show the percentage who are in each of the following groups:-

  • "Not in Workforce"
  • "Unemployed"
  • "UnderEmployed"
  • "Employed"

This data should be presented in a table as depicted in Figure 1.

The user can also see the results for a subset of the sample data by using filter controls depicted in Figure 1. The subset can be defined in the following ways:-

1. The user can limit the subset to "male only" or to "female only".

2. The user can limit the subset to those people who are greater than or equal to a minimum number of years. The use can indicate no minimum by leaving the minimum blank (which is the default).

3. The user can limit the subset to those people who are less than or equal to a maximum number of years. The use can indicate no maximum by leaving the maximum blank (which is the default).

4. The user can limit the subset to a given post code.

5. The user can limit the subset to be the intersection of any combination of the above subsets. For example, if the user wants to know the unemployment rate for female persons of age of 21 or over who live in London, then the user would set the filters as follows:-

  • The "Gender" would be set to "female only".
  • The "Min Age" would be set to 21.
  • The "Max Age" would be left blank.
  • The "Post Code" would be 9999.

The Results section should behave gracefully if the sample data set is empty or if the requested subset is empty. A message that explains that the data set is empty should appear in place of the output table.

Similarly, you should present a message rather than a table if the filter criteria are invalid, e.g. the min age is not an integer or it is greater than the max age.

The Person Details section

The purpose of this section is to present the user with all fields of the raw data for each person selected as depicted in Figure 1.

Filtering

The user can also see the details for a subset of the sample data by using filter controls depicted in Figure 1. The subset can be restricted in all the ways that we can limit the subset for the results. In addition, we can also filter on the given name or the surname of persons surveyed.

For example, if we wish to confirm the details of Joe Biden, then the user would set the filters as follows:-

  • The "Given name" would be set to "Joe".
  • The "Surname" would be set to "Biden".
  • The "Gender" would be set to "male and female".
  • The "Min Age" would be left blank.
  • The "Max Age" would be left blank.
  • The "Post Code" would be left blank.

The output table will be shown with headings, but no data if the selected data set is empty.

Sorting

The user may order the person details by:-

  • name (surname as primary sort criteria)
  • name (given name as primary sort criteria)
  • date of birth
  • post code

Test Plan

Teams are required to prepare a test plan for each of the three sections of the application. The test plan should consist of a series of tests. Each test should have a description and a data set.

Test Plan for Input Customer Records

The ordinary entry of data needs to be represented by at least 3 tests with valid data.

There should also be some tests with nearly valid data, but invalid data for one of the input fields. While only one test is required for fields that are merely required to be present, you should be able to design tests with different flaws for fields with more rigorous validation criteria.

For example, there should be several tests featuring valid and invalid post codes:-

  • 1234
  • 9999
  • 1111
  • 1
  • aaaa
  • 123
  • 12345
  • d234
  • 348x

Notice that many of the above test cases represent a different way that a post code can be invalid.

There are many ways that birth date could be wrong. The format could be violated, e.g. "123/123/123". Or the format could be good, but reference a date that did not actually exist, e.g. "29/02/1971".

Test Plan for Results section

There needs to be tests for given data sets where we know what the resulting percentages in each category are. The provided template comes with some test data which may be used here.

You should test with various subsets of the data too, and see if you get the correct answers.

There needs to be tests for the various minimum and maximum age. What happens when the minimum is greater than the maximum or minimum or maximum age is invalid?

Test for graceful behaviour in the case of the empty set.

Test Plan for Person Details

You would need to all the tests that you would for the Results section. In addition you would need to test for:-

  • Someone that exists.
  • Someone that does not exist.

There needs to be a test for each of the ways that the user may choose to sort.

Academic Honesty!
It is not our intention to break the school's academic policy. Posted solutions are meant to be used as a reference and should not be submitted as is. We are not held liable for any misuse of the solutions. Please see the frequently asked questions page for further questions and inquiries.
Kindly complete the form. Please provide a valid email address and we will get back to you within 24 hours. Payment is through PayPal, Buy me a Coffee or Cryptocurrency. We are a nonprofit organization however we need funds to keep this organization operating and to be able to complete our research and development projects.