Super-Basic Chatterbot

You ARE allowed to work in pairs on this project.

You can do this homework individually or in a pair (2 people) ONLY.
If you work with a partner make sure that you put BOTH of your names on the assignment and then have ONE person hand in the assignment via StudentTracker.

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



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:

Personal Requirements

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

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.


This is hidden from the students

but saved for later reference by the professor :)

The page must use jQuery