BIT116: Graduation Requirement Helper

The Due Date for this assignment is listed on the course schedule page

Overview

Your goal is to create a prototype for a web page that will help people figure out if they've met their degree requirements.  The basic idea is that someone can sit down in front of this page, check off whichever courses they've taken, click a button and the page wil tell them which categories' requirements that they've satisfied and which requirements they still need to fulfill.

Wikipedia defines a prototype as "early sample, model, or release of a product built to test a concept or process or to act as a thing to be replicated or learned from" so we'll allow ourselves to create something that isn't a fully completed product.  In particular, while the page must work with something that strongly resembles part of the "ASSOCIATE IN SCIENCE - TRANSFER TRACK 2" degree from Cascadia's catalog, it's not exactly the same.  As always, you should read through the college catalog and talk with a college advisor (who are happy to talk with you!) in order to make sure that you're able to acheive whatever your individual, academic goals are.

In case you're curious, here's a link to the 2014-2015 catalog.

An Example

Here's an example of what the page might end up looking like (there will not be any of the purple-blue, circled numbers in your version):

There's a couple of things to notice:

• When the user does NOT satisfy a given requirement you should display a message telling them that, using the Bootstrap class "text-danger" to help the message stand out.  There are two, purple, circled 1's in the above image showing what this should look like.
• When the user DOES satisfy a given requirement you should display a message confirming that for them, using the Bootstrap class "text-success".
  There is one, purple, circled 2 in the above image showing what this should look like.
• You will need to add a button to the starting template page. 
  There's a note left on the page, right next to the purple, circled "3" in the above image.

Here's a link to the starter file: advising_template.html.  It is expected that you will save a copy of this file and modify it (instead of starting from scratch). Note that the starter file will look similar to the above image but not identical to it - you will need to add Bootstrap to it on your own.

Functional Requirements

For full marks your page must meet all of the following requirements:

• You must put your name at the top of the page, in the obvious spot
  • If you're working with a partner make sure that both of your names are there.
  • Also change the title of the page to contain your name (or both names, if you're part of a pair)
• The page itself lists what the requirements are for each category. 
  • For example, in order to satisfy the QSR requirement one needs to check off BOTH Math& 151 and Math&152.
  • You should provide error messages for each category if the user hasn't satisfied that requirement.
    For example, in the above image the message "You have not yet fulfilled the QSR requirement" appears underneath the "Quantitative and Symbolic Reasoning" category because the user hasn't taken Math& 152 yet.
  • As much as you can, you should also provide specific error messages that specify why/how the user hasn't met the requirement. 
    For example, in the above image the message "You're missing Math& 152" appears underneath the "Quantitative and Symbolic Reasoning" category in order to tell the user which of the two courses they haven't taken.
    Don't worry if you've got multiple, redundant-looking error messages.  For example, if the user hasn't taken Math& 151 or Math& 152 it's ok to display three separate messages.  (The first is "You have not yet fulfilled the QSR requirement", the second is "You're missing Math& 151", and the third is "You're missing Math& 152")
  • You should provide a confirmation message when the user does satisfy a requirement.
    For example, in the above image the message "You have fulfilled the 'College Success' requirement!" appears underneath the "Foundations For College Success" category because the user took COL 101. 
• Just to clarify: for the science distribution any course with the word "Lab" in it counts as a lab. 
  I'm expecting you to check this by examining individual checkboxes directly (i.e., I'm not expecting you to do something clever where you have JavaScript code check if the text contains "Lab", etc)
  • Remember that the real AS-T Track 2 requirements are a bit more involved - you'd need at least 5 credits of science lab, and since these courses may be only 4 credits you might need to take more than 1 lab in to satisfy the real-life requirements for this degree.
•  Just to clarify: for the science distribution there are three "disciplines" lists: Chemistry (the chemistry lab course is CHEM& 161), Math (the two math courses are MATH 146 and MATH& 161, and Physics (the three physics lab courses are PHYS& 114, PHYS& 115, and PHYS& 116).
• Note: You may not be able to finish this assignment before we cover 'Logical Operators'.  It is highly recommended that you get started on this and do as much as you can. For example, you can add Bootstrap to the file, add jQuery to the file, set up the button at the bottom, and set things up so that when you click on the button an alert is displayed.  You can check the state of the various checkboxes, and should be able to get at least get the "Foundations For College Success" category done.

Technical Requirements

For full marks your page must meet all of the following requirements:

• You must put all your JavaScript code into a separate .js file.
  • Please remember to include this in your submitted work!!!
• The page must use CSS generally and Boostrap specifically.
  • Use the text-danger class to format any messages telling the user that they have NOT satisfied a given requirement
  • Use the text-success class to format any messages telling the user that they have satisfied a given requirement
  • You can load Bootstrap from either a local copy or from a CDN.  Unlike jQuery there is no requirement (nor expectation) that you will use a local backup for a CDN.
• You'll need to add a button at the bottom of the page.  Your page should check the user's requirements when the user clicks that button.
• The page must use jQuery
  • You should make sure that your page will try to use a CDN to get jQuery, but will then use a local backup copy if the CDN doesn't work.
  • You must include the local backup copy of jQuery in your submitted work.
    • The instructor often grades on the bus (where there's no WiFi) and will most likely notice immediatley if your local backup doesn't work so make sure to test this!
  • The button click should be handled by your code, which must use jQuery.  You must you jQuery to figure out if the various checkboxes are checked or not, and you must use jQuery to show or hide the various error/confirmation messages on the page
    • If you want to look up and use the jQuery .show() and .hide() method you're welcome to do so, however it is entirely sufficient to just change the paragraph element to either be a message (using the .html() method that we looked at in class) or to be the empty string (.html(" "), as we saw in class)

Personal Requirements

For full marks you must meet all of the following requirements:

• You should be able to successfully complete this project even if we haven't covered all the details of the starter file.  For example, the <table> element or any new CSS attributes.  One of the goals for the first few lectures was to develop your ability to either independently learn (or else productively ignore) details that hadn't been covered; you're expected to be able to succeed in spite of several new, not-yet-covered details. 
  • That said, if you're stuck on something please talk to the instructor or visit the Open Lab and ask for help from the tutor.

How To Submit Your Work

Prior to handing in your work it is highly, highly recommended that you check your work against the rubric for this assignment.  When you do, please keep in mind that the checklist provided in the rubric is not exhaustive - the instructor will be looking at all your work and you may lose points for errors and mistakes that aren't listed in the rubric.

You should .ZIP your files into a single .ZIP folder/file, and then upload that file to StudentTracker.  There are instructions about how to do this on the main page for the course.

If you keep all your files in a single folder as you're working on them then it should be very easy to compress that folder into the .ZIP that you need to hand in.  Regardless, it's recommended that you test that you packaged everything up correctly by extracting the contents of your .ZIP file into a new folder, opening the .HTML file, and testing the page itself.