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