Pages Menu
Chitu Okoli chitu.okoli.org

BTM 395 Homework 2

This assignment is a continuation of Homework Assignment 1. In this assignment, you will learn to use JavaScript and PHP to add dynamic functionality to your boil-water emergency site. There are three specific requirements for this assignment.

Contents

1. Clean up Homework 1 website

I gave very specific feedback on your Homework 1 submission. For Homework 2, you must fix all problems from Homework 1 that I pointed out. There are no points allocated to this, but if I find the same problems that I pointed out, you will certainly lose points for this. You should maintain your original Homework 1 and Homework 2 assignments distinct:

  1. First, fix all the problems for Homework 1. Leave it intact in the /hw1/ folder according to the Homework 1 submission instructions. You do not need to submit a new Zip file for Homework 1.
  2. Make a copy of your corrected Homework 1 and place it in the /hw2/ folder according to these Homework 2 submission instructions here. This is what you will zip and submit for this assignment.

2. Dynamic “Am I affected?” table using JavaScript (30%)

JavaScript power is in dynamically changing the page that users load into their browsers in response to user input. For this assignment, instead of creating the “Am I affected” table manually with HTML, you will generate it dynamically by manipulating some Document Object Model (DOM) elements.

When the user loads the “Am I affected?” page, instead of a table, the user will see a text area and a button that says, “Convert text to table” or something like that. I have prepared an Excel spreadsheet with the data formatted in a table. Here is the desired behaviour:

  • The user opens the spreadsheet with the affected region data.
  • The user copies the data from the table and then pastes it into the text area. Important: the code should work correctly whether or not the user copies the header row from the spreadsheet. However, other than that, you are not required to validate the input text. That is, if the user enters any data other than the spreadsheet table data (with or without headers), then it is fine if your code does not work.
  • When the user clicks the convert button, the following actions take place:
    1. The data from the text area is converted into an HTML table with proper CSS formatting. You must fully create this HTML table using JavaScript. Unlike for Homework 1, you are NOT permitted to use any table generator for your JavaScript-generated table.
    2. The convert button and the text area are completely removed from the page.
  • The table data in the spreadsheet is not fully sorted by locality. You are not required to sort it.
  • Bonus opportunity: For an extra 5%, fully sort the spreadsheet data by locality. If you choose to do this, you would probably need to learn how to use custom sort functions in JavaScript.

This section counts for 30% of the assignment, with a possible extra bonus of 5% for up to 35%.

3. Fully functional symptom checker using PHP (70%)

In Homework 1, your symptom checker form did nothing but give a fake acknowledgement. For this assignment, you will use PHP to make this form fully functional. Here is a repetition of the minimum requirements for the form, with a few minor changes:

  • There must be at least six different symptoms.
  • The form should have at least one each of the following input types:
    • A text area
    • A submit button (Homework 1 also required a reset button, but that is no longer required for Homework 2.)
    • Radio buttons
    • Checkboxes
    • A drop-down list
    • A number input type. Note that not all browsers support this input type, so be sure to test it on a supported browser.
  • In addition, you must use the following input attributes at least once in your form:
    • autofocus
    • placeholder
    • required

For this assignment, here is the basic behaviour of the symptom checker:

  1. When the user completes the form on the symptom checker page, the user clicks a “Confirm” button.
  2. Clicking the “Confirm” button from the symptom checker page leads to the symptoms confirmation page. This page displays everything that the user entered on the previous page. It asks the user to either submit their symptoms, or to cancel:
    1. Clicking “Submit” from the symptoms confirmation page leads to the acknowledgement page. This page displays a brief acknowledgement message and in the background it e-mails the submission to the site administrator.
      • The e-mail must have all the same information as was presented in the symptoms confirmation page. It can be in plain text, but must be neat and readable.
      • 1&1 provides instructions for sending PHP e-mail from their servers. The same instructions should work for most other web hosts; if not, contact your host for specific details. To send PHP e-mail from a local development server (e.g. XAMPP), follow these instructions. However, the final submission must be configured for your web host.
      • You can use your own e-mail address for testing, but the final submission must be sent to btm395hw2@okoli.org to make sure that I receive it. Feel free to test that e-mail address as often as you like; you will receive an e-mail acknowledgement if your e-mail is correctly sent (the acknowledgement will go to the e-mail address you specified as “From” in your PHP mail code.
    2. Clicking “Cancel” from the symptoms confirmation page leads back to the symptom checker page; the symptom checker page will be blank.
    3. Bonus opportunity: For an extra 10%, in addition to the “Submit” and “Cancel” buttons, you can also add an “Revise Details” button to the symptoms confirmation page that lets the user go back and edit what they have already entered.
      1. Clicking “Revise Details” from the symptoms confirmation page leads back to the symptom checker page, but all details will be filled out from what the user had originally entered. However, since check boxes are particularly tricky, you do not need to fill out the check boxes to get the 10% bonus—everything else, though, must be filled out.
        • Bonus opportunity: For an extra 5%, also fill out the check boxes correctly when you return to “Revise Details”.

This section counts for 70% of the assignment (behaviours 1, 2, 2a and 2b), with a possible extra bonuses of 15% (behaviours 2c and 2ci) for up to 85%.

General requirements

  • While you are permitted to use any text-based editor you like for this assignment, you are not permitted to use any WYSIWYG editing features (drag-and-drop, Microsoft Word-like GUI). You must write all the code yourself directly.
  • You must use valid HTML5 and CSS. Before submitting your assignment, you are required to validate each page on your site (including the old pages from Homework 1) using the W3C HTML5 validator (make sure you select Document Type HTML5) and the W3C CSS3 validator. This will find all your mistakes for you so that you can correct them. I will semi-randomly validate some of your pages myself.
  • This is not a requirement, but I strongly recommend that you first complete the requirements for the JavaScript and PHP sections before attempting the bonus opportunities. They are bonus opportunities because they are more challenging, and so you might not be able to complete them. Without the bonus opportunities, you can make up to 100% in this assignment. With these opportunities, you can make up to 120%.
  • Copying/citation requirements::
    • All JavaScript and PHP code in the website must be your own original work—no copy-and-paste, with or without citation. Of course, looking at models in the book or on the Web and imitating them is perfectly OK. If you use any models to help you in your code you must properly cite it.
    • Unlike for Homework 1, you are NOT permitted to use any table generator for your JavaScript-generated table.

Submission instructions

  1. You must keep the corrected version of Homework 1 on your website in a subfolder named “/hw1/”. Your main page must be named “index.html”.
  2. You must publish Homework 2 (which is the same as Homework 1 plus the new pages specified here) on your website in a subfolder named “/hw2/”. Your main page must be named “index.html”.
  3. Submit the URL to your online Homework 2 assignment on Moodle. For example, it should look something like <http://mysite.ca/hw2/>. When I click on that link, it must go straight to your website, so make sure the link is working before you submit it. Do not submit the Homework 1 link again.
  4. Zip up all your Homework 2 files (all HTML, CSS, PHP, image, and other files) and name it “Firstname Lastname HW2.zip”. Upload this zipped file to Moodle as part of your submission. Do not submit the Homework 1 files again.
  5. If you choose to go for any of the bonus opportunities, please say so clearly in the comments so that I don’t miss it.
  6. You must submit your completed website assignment by 6:30 pm MONDAY August 5.