chatbot template

chatbot template.markdown

chatbot template

A Pen by lilgreenland on CodePen.

License.

index.html

<div id='bodybox'>
  <div id='chatboarder'>
    <p id="chatlog7" class="chatlog">&nbsp;</p>
    <p id="chatlog6" class="chatlog">&nbsp;</p>
    <p id="chatlog5" class="chatlog">&nbsp;</p>
    <p id="chatlog4" class="chatlog">&nbsp;</p>
    <p id="chatlog3" class="chatlog">&nbsp;</p>
    <p id="chatlog2" class="chatlog">&nbsp;</p>
    <p id="chatlog1" class="chatlog">&nbsp;</p>
    <input type="text" name="chat" id="chatbox">
  </div>
  <br>
  <br>
  <h2>Build a Chatbot</h2>
  <p>Write a program that responds to the user's text input.</p>
  <ul style="list-style-type:disc">
    <li>Input strings of text from the user.</li>
    <li>Output different strings of text in response to the user input.</li>
  </ul>
  <br>
  <h3><p>How to Use This Template!</p></h3>
  <p>The template has several functions that allow you to focus on programming the chatbot's behavoir. It will read in the user's strings from the input box. It will keep a record of every message and display the last few messages above the input box.</p>

  <p>Fork this template!</p>
  <p>Make changes to the javascript function <b>chatbotResponse()</b> to control what the chatbot will say. You can also change the HTML or CSS.</p>
  <p>The variable <b>lastUserMessage</b> is a string that records the last thing typed.</p>
  <p>The variable <b>botMessage</b> is a string that controls what the chatbot will say.</p>
  <p>Example:</p>
  <pre><code>if (lastUserMessage === 'hi'){
  botMessage = 'Howdy!';
}
</pre></code>
  <pre><code>if (lastUserMessage === 'what is your name'){
  botMessage = 'My name is' + botName;
}
</pre></code>


  <br>
  <br>
  <h3><p>Ideas</p></h3>
  <p>Narrow the range of topics the chatbot responds to, like an adventure time chatbot.</p>
  <p>Customize the html and CSS to fit your theme.</p>
  <p>If you only have a few responses, tell the user what commands work.</p>
  <p>Use a <a href="http://www.w3schools.com/js/js_switch.asp">switch statement</a> to simplify a large number of if else branches.</p>
  
  <br>
  <br>
  <h3><p>Advanced Ideas</p></h3>
  <p>Use the <a href="http://www.w3schools.com/jsref/jsref_search.asp">search()</a> command to look for keywords.</p>
  <p>Use <a href="http://www.w3schools.com/js/js_regexp.asp">regular expressions</a> for powerful searches, like the ability to ignore caps.</p>
  <p>Make variables to keep track of what's been said. Use those variables in an If stement to produce a new set of responses.</p>
  <p>Use the <a href="http://www.w3schools.com/jsref/jsref_obj_date.asp">date</a> function to answer questions like "what time is it?".</p>
  <p>Calculator Mathbot?</p>
  <p>Canvas drawbot!</p>
  <p>Write a text adventure game. Like <a href="http://www.web-adventures.org/">these</a>.</p>
  <p>Build an array with several similar responses and have the chatbot pick one at random, like this:
    <pre><code>var hi = ['hi','howdy','hello','hey'];
botMessage = hi[Math.floor(Math.random()*(hi.length))];
</pre></code>
  </p>

  <br>
  <br>
  <h3><p>Links:</p></h3>
  <ul style="list-style-type:disc">
    <li><a href="http://www.w3schools.com/js/js_strings.asp">tutorial on strings</a></li>
    <li><a href="http://www.w3schools.com/js/js_string_methods.asp">string methods</a></li>
    <li><a href="http://www.w3schools.com/jsref/jsref_obj_string.asp">string reference</a></li>
    <li><a href="http://www.w3schools.com/js/js_regexp.asp">regular expressions tutorial</a></li>
    <li><a href="http://www.w3schools.com/jsref/jsref_obj_regexp.asp">regular expressions reference</a></li>
  </ul>
  <center><img src="http://lilgreenland.github.io/images/BMO.jpg" align="middle"></center>
</div>

script.js

var messages = [], //array that hold the record of each string in chat
  lastUserMessage = "", //keeps track of the most recent input string from the user
  botMessage = "", //var keeps track of what the chatbot is going to say
  botName = 'Chatbot' //name of the chatbot

//edit this function to change what the chatbot says
function chatbotResponse() {
  botMessage = "I'm confused..."; //the default message

  if (lastUserMessage === 'hi') {
    botMessage = 'Howdy!';
  }

  if (lastUserMessage === 'name') {
    botMessage = 'My name is ' + botName;
  }
}

//
//this runs each time enter is pressed.
//It controls the overall input and output
function newEntry() {
  //if the message from the user isn't empty then run 
  if (document.getElementById("chatbox").value != "") {
    //pulls the value from the chatbox ands sets it to lastUserMessage
    lastUserMessage = document.getElementById("chatbox").value;
    //sets the chat box to be clear
    document.getElementById("chatbox").value = "";
    //adds the value of the chatbox to the message array
    messages.push(lastUserMessage);
    //takes the return value from chatbotResponse() and outputs it
    chatbotResponse()
      //add the chatbot's name and message to the array messages
    messages.push("<b>" + botName + ":</b> " + botMessage)
      // says the message using the text to speech function written below
    Speech(botMessage);
    //outputs the last few messages to html
    for (var i = 1; i < 8; i++) {
      if (messages[messages.length - i])
        document.getElementById("chatlog" + i).innerHTML = messages[messages.length - i];
    }
  }
}

//text to Speech
//https://developers.google.com/web/updates/2014/01/Web-apps-that-talk-Introduction-to-the-Speech-Synthesis-API
function Speech(say) {
  if ('speechSynthesis' in window) {
    var utterance = new SpeechSynthesisUtterance(say);
    //utterance.volume = 1; // 0 to 1
    //utterance.rate = 1; // 0.1 to 10
    //utterance.pitch = 1; //0 to 2
    //utterance.text = 'Hello World';
    //utterance.lang = 'en-US';
    speechSynthesis.speak(utterance);
  }
}

//runs the keypress() function when a key is pressed
document.onkeypress = keyPress;
//if the key pressed is 'enter' runs the function newEntry()
function keyPress(e) {
  var x = e || window.event;
  var key = (x.keyCode || x.which);
  if (key == 13 || key == 3) {
    //runs this function when enter is pressed
    newEntry();
  }
}

style.css

body {
  font: 15px arial, sans-serif;
  background-color: #d9d9d9;
  padding-top: 15px;
  padding-bottom: 15px;
}

#bodybox {
  margin: auto;
  max-width: 550px;
  font: 15px arial, sans-serif;
  background-color: white;
  border-style: solid;
  border-width: 1px;
  padding-top: 20px;
  padding-bottom: 25px;
  padding-right: 25px;
  padding-left: 25px;
  box-shadow: 5px 5px 5px grey;
  border-radius: 15px;
}

#chatboarder {
  border-style: solid;
  background-color: #f6f9f6;
  border-width: 3px;
  margin-top: 20px;
  margin-bottom: 20px;
  margin-left: 20px;
  margin-right: 20px;
  padding-top: 10px;
  padding-bottom: 15px;
  padding-right: 20px;
  padding-left: 15px;
  border-radius: 15px;
}

.chatlog {
   font: 15px arial, sans-serif;
}

#chatbox {
  font: 15px arial, sans-serif;
  height: 22px;
  width: 100%;
}

h1 {
  margin: auto;
}

pre {
  background-color: #f0f0f0;
  margin-left: 20px;
}