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

Overview:

For this assignment, you will create a web page that will simulate a very, very simple chatterbot.  The goal of the page is to simulate a conversation by looking for key phrases and responding to them according to a script. 

There are two objectives for this assignment. The first is to utilize the technical content that we've covered up till this point in the quarter: basic HTML, basic CSS (including Bootstrap), and basic JavaScript/jQuery.  The second is to give you an opportunity to practice the skill of learning of (semi-)independently learning and applying something new - by figuring out how to use the indexOf method.

You should use Chatterbot_Template.html as your starting file, since it contains the basic HTML structures that you'll need.  Here's a picture of what the page should look like when it's ready to hand in:

(Note that this page uses Bootstrap for it's styling - yours needs to use Bootstrap, as well.  The button must be styled using the "btn active" CSS class, just like in the above image)

The basic idea is that we'll prompt the user type something (in the above image,the prompt is "Please tell me something that you're concerned about") and we'll put the beginnings of a sentence into the textbox.  The user will (hopefully) complete the sentence, after which they'll click the button.  At that point we'll look for a specific word in the sentence and issue a generic response to that word.  if the we don't find that word then our program will stop working; this isn't good, but it's ok for a first assignment in BIT 116. Here's a brief video which illustrates the basic way in which this works. 

For this assignment you need to replicate what's presented in the video, including the starting prompt and the three responses AND you need to add two more responses beyond those (this is a total of five ( 5 ) responses). 

Notice that in order to correctly implement this, you'll need to use "if" statements.  Even though we haven't spent much time on them in this class, the topic was fully covered in BIT 115 (and pretty much identical here in JavaScript), and there's material in online that uses the "if" statement, as well.

Semi-Independent Investigation:

In order to make this work you'll need to have a way of doing two things that we didn't cover in class: you need to be able to detect when the user has typed in a specific word and you need a way of changing the text that's in the text box.

For that first task you should use the indexOf function that's built into JavaScript.  There are several pages that will get you started with figuring this out, including W3Schools, the TutorialsPoint website, and the Mozilla Developer Network (MDN) docs.

For the second task you should look at using the .val() method to change what's in the box (yes, this is the same method that we use to get the user's input out of the box, too).  Again, W3Schools, the jQuery docs, and whatever else you can find will be helpful.

You'll notice that the width of the text input box is considerable.  You should find a way to make the textbox very wide, too.  You might want to look at the size attribute of the HTML input element.  (For this you'll need to Google/Bing around and see what you find)

Technical Requirements

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

• For this assignment, you will use the provided "starter" page.  You must place the the full names of all the people that worked on this project in the jumbotron at the top of the starter page AND in the title element of hte page.
• 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.
  • 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.
• The page must use jQuery
  • Using 'raw' JavaScript to access form elements and to handle events will be penalized steeply.
  • 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.

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.

Other Requirements

Your page should be portable in the sense that when one opens the .HTML file, the page should properly open and display all elements on the page.  At this point this mostly means that you should not use absolute file names for extra files (like image files).

What to hand in:

1. Your modified Chatterbot_Template.html
2. Any extra files that your page uses.  This includes image files, CSS files, external JavaScript files, etc, etc.
   • Note that you are required to hand in a copy of the jQuery library, so that if the CDN isn't available your page will still work.

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.