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.
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).
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 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)
For full marks your page must meet all of the following requirements:
For full marks you must meet all of the following 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).
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.