-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathchatbot.html
More file actions
104 lines (94 loc) · 5.64 KB
/
chatbot.html
File metadata and controls
104 lines (94 loc) · 5.64 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>chat bot</title>
<link rel="stylesheet" href="assets/css/chatbot.css">
<script type="text/javascript" src="chatbot.js"></script>
<div id='bodybox'>
<div id='chatborder'>
<p id="chatlog7" class="chatlog"> </p>
<p id="chatlog6" class="chatlog"> </p>
<p id="chatlog5" class="chatlog"> </p>
<p id="chatlog4" class="chatlog"> </p>
<p id="chatlog3" class="chatlog"> </p>
<p id="chatlog2" class="chatlog"> </p>
<p id="chatlog1" class="chatlog"> </p>
<input type="text" name="chat" id="chatbox" placeholder="Hi there! Type here to talk to me." onfocus="placeHolder()">
</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.</li>
<li>Here is my attempt: <a href="https://codepen.io/lilgreenland/pen/zqXLeJ">notbot</a>
</ul>
<br>
<h3><p>How to Use This Template!</p></h3>
<p>Fork this template!</p>
<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>To control what the chatbot will say make changes to the javascript function <b>chatbotResponse()</b> . You can also change the HTML or CSS. There is no need to keep these directions.</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="https://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="https://www.w3schools.com/jsref/jsref_tolowercase.asp">.tolowercase()</a> command to ignore capitalization.</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>Respond to the users by using what they said. For example:</p>
<pre><b>User:</b> I like puppies
<b>Chatbot:</b> Tell me more about puppies.</pre>
<p>Use the <a href="https://www.w3schools.com/jsref/jsref_obj_date.asp">date</a> function to answer questions like "what time is it?".</p>
<p>Quizbot?</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>
<p>Use <a href="https://www.w3schools.com/js/js_regexp.asp">regular expressions</a> for powerful searches. Here is my <a href="https://codepen.io/lilgreenland/pen/YGENqK?editors=0010">example</a></p>
<p>Regular expressions can search in a way similar to a google search. This example searches for words that are cat-like. It also ignores capitalization and looks for the words preceded and followed by spaces.</p>
<pre><code>var n = lastUserMessage.search(/\b(cat|cats|kitten|feline)\b/i);
if (n !== -1) {
botMessage = 'I hate cats!';
} </pre></code>
<p>Here is an example that looks for ways to say dog as singular or plural. It then repeats back the dog related word to the user.</p>
<pre><code>var patt = /\b(dogs?|pup(s|py|pies?)?|canines?)\b/i;
var result = patt.exec(lastUserMessage);
if (result) {
botMessage = 'I love ' + result[0];
} </pre></code>
<br>
<br>
<h3><p>Links:</p></h3>
<ul style="list-style-type:disc">
<li><a href="https://www.w3schools.com/js/js_strings.asp">tutorial on strings</a></li>
<li><a href="https://www.w3schools.com/js/js_string_methods.asp">string methods</a></li>
<li><a href="https://www.w3schools.com/jsref/jsref_obj_string.asp">string reference</a></li>
<li><a href="https://www.w3schools.com/js/js_regexp.asp">regular expressions tutorial</a></li>
<li><a href="https://www.w3schools.com/jsref/jsref_obj_regexp.asp">W3 schools regular expressions reference</a></li>
<li><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Regular_Expressions">MDN regular expressions reference</a></li>
<li><a href="http://regexr.com/">Testing your regular expressions</a></li>
</ul>
<center><img src="https://lilgreenland.github.io/images/BMO.jpg" align="middle"></center>
</div>
</head>
<body>
</body>
</html>