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 Canvas.

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, which should be in your project folder and referred to by relative address).

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

The easiest way to keep track of the files for this assignment is to keep all pertinent files in one folder. You can zip the entire folder and hand that in. You should be able to check and ensure you are handing in all components by unzipping your folder and re-testing your work.