Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Implement changes to your chatbot based on the previous evaluation and reflect on the key principles of chatbot design.
1. Incorporate Improvements in your Chatbot Based on your feedback in the previous activity, update your chatbot script and test it to ensure it works as expected.
2. Reflect on Key Learning Now that you have completed your first basic chatbot, reflect on the key aspects of building a successful chatbot. Create a document and write what you have learned in the following three areas of chatbot design, as if you were advising people on how to develop their own chatbot.
Chatbot Purpose: What are important ideas to keep in mind when developing the chatbot's purpose and the problem to be solved?
Chatbot Personality: What are key things to consider when determining a chatbot personality and why are they important? Provide some example dialogue between the user and chatbot to help explain your ideas.
Chatbot Scripting and Code: What did you find challenging, but very important, when creating the actual script/code for the chatbot? How do you think these challenges will affect a larger chatbot project that will have more complexity and features?
Submit your document (about one page in length). Make your document easy to follow and ensure the three items above are clearly covered.
The code below will get you started with the iDEW chatbot template. It is a minimum starting point for a working chatbot that you will later modify and refine towards your design goals. There is a live example which doesn't do anything exciting -- that's up to you to change.
Below is the core html for the chatbot. The div element with an id="dialogue" is the block that contains the back-and-forth messages like you see in common messaging interfaces. The form element handles the user's text input at the bottom of the interface.
The required libraries are also loaded. PapaParse.js enables you to use a back-end database using Google Sheets. JQuery is a common library for Javascript programmers. Rivescript is the chatbot scripting language you will use (more on this later). Chatbot.js is the iDEW library that makes your programming easier.
Update February 11, 2022: The PapaParse library is now used, instead of the Tabletop library, to optionally import data from a spreadsheet. The change is seen at line 21 below.
Below is the minimal Javascript needed to get started. The setup ()function starts automatically once the page loads in the browser and simply loads the Rivescript file as your chatbot script to get things started.
The script below determines how your chatbot will converse with a visitor. The + start is automatically started to get the conversation going. The + * is a wildcard that catches anything that you have not programmed your chatbot to recognize. At first your chatbot recognizes little, but we will work on that soon.
There is a lot going on here with the styling of the chatbot. Use the code below as your starting point, but you may choose to change some elements later. A simple way to customize the look would be to change the background, font-family, and color of the body element.
Let's take our first dive into conversational interactions with a warm-up project that you will do individually. We will do some reading and research, as well as create an interaction script for a chatbot. This will provide a foundation for tackling your team project.
Develop a chatbot script that demonstrates several useful features and patterns in programming a conversation.
Any direct links to headings within the Rivescript documentation no longer work. Therefore, you will want to do a search for a keyword in the browser to find the content. We will update this page if we find a better way to link directly to the desired location in the Rivescript documentation.
Let's get familiar with the syntax of RiveScript and how it will provide the logic of your chatbot. For each item below carefully look at the documentation for RiveScript to understand the options available to you as you determine what is possible with your chatbot.
Finally, choose two other features of RiveScript syntax to implement in your bot.
Have your chatbot working with the features described above and be prepared to demonstrate and explain how it works.
Evaluate your chatbot with three participants.
Review the questions in the evaluation template and adjust the language if needed.
Record feedback from at least 3 classmates.
Reflect on the the responses and consider how you could incorporate changes to your bot.
Submit your feedback document.
Copyright © 2017-2018 Jim Lyst and Michael Frontz, Indiana University School of Informatics and Computing at IUPUI
This material is part of the high school computer science curriculum developed for the program, an award-winning community partnership in central Indiana that is broadening student participation in computing and helping students develop the skills essential for success in the 21st century workplace. The iDEW program is managed by the .
Design and develop a basic chatbot that solves a particular problem.
Ok, let's design a bot that actually does something useful. Each of you will define a simple problem for your bot to solve for somebody, then map out how your bot will function.
Define the Problem. Define what you want your bot to achieve for people. Keep it simple, but specific. For example, provide some background information about the August 2017 solar eclipse and link them to information about specific times to view the eclipse from their location.
Mini-Personas for the users and bot. Describe the people you want to serve with your bot. Also, describe the personality of your bot. Will it be formal or informal? Fun or serious? Etc.
Create a Conversation Flow. Use (from ) as an example. . Remember, keep the ultimate goal of your bot very simple, but think about the potential paths a user may take to get there.
Edit Your Bot Script to Match. Finally edit your script (RiveScript) to match your bot flow and test it in the message app.
Use for your Design Document in steps 1 - 3.
Submit your design document in class
A Checklist for Chatbot Usability
Is the name compatible with the purpose of the bot?
Does the initial chatbot message provide an indication of what the user should do next?
Does the bot recover well if the user get's lost in the conversation or provides unusable information?
Are the triggers (what the user can say) flexible enough to handle the different ways users may say something.
Is it generally helpful? Does it provide a sense of closure to the user even if the user thought your bot would provide something different?
Read about design aspects of conversational interactions with bots and synthesize your understanding in writing and discussion.
What advantages/disadvantages do bots have over mobile apps?
What do you think the best uses of bots are or will be?
How does the process of designing an app compare to the process of designing a bot?
Why is a bot personality important?
What factors influence the design of a bot personality?
Document your answers to the questions above for each reading and be prepared to discuss in class.
Investigate the basic use and logic of a chatbot script and make modifications to demonstrate initial understanding.
Before we get into the details of designing chatbot conversations, we want to practice how you will technically build them with code. Understand that machines and their programs are still rather "dumb" compared to humans and cannot interpret complex human ideas easily. So your challenge will be to connect a person's complex intentions to a rather simplistic computer program.
Let's get started with some chatbot code.
Go to the and copy the template code for each file and ensure that it works.
Take a look at the bot.rive file while you message with the chatbot. Notice how the script file controls how the bot responds to you.
Change the start response, which introduces your chatbot to the user. Include a name for your chatbot. You can change it again later.
Change the * response as well, where the bot responds to unknown user requests.
Add the following Rivescript lines below to respond to "hello" and "bye". Change the response as you like.
Demonstrate a working Chatbot.
Read first section of in the Rivescript documentation. Pay close attention to the "Important Note" in the reading that describes the importance of using lowercase with triggers.
Create four to "hello" for your chatbot.
Define a single trigger (a trigger is the user input that starts with a "+" in the script) that will respond to these two user questions - "What do you do?" or "What can you do?" with a bot answer that you choose. For example, you could respond to the user with "I do very little at the moment." Hint: use the .
Use to your "hello" trigger when the user inputs "Hey". Basically, make your bot respond the same way to hello or hey.
Create a reply to "My name is Sue" (or any name). In your chatbot response, use the person's name---like, "Nice to meet you Sue, my name is ChattyBot." Hint: Use an .
Have your bot kick-off the conversation with a question when it starts so the visitor knows how to continue the conversation. Also, add the needed script to listen for a response to that question and respond. Take a look at .
This work is licensed under a . You are free to use, share, or adapt this material for noncommercial purposes as long as you provide proper attribution and distribute any copies or adaptations under this same license.
Read
Read
Read
Using functions in your chatbot script will provide some powerful options. For example, you can make calculations on the fly for the user, or you can access, search, and filter a database based on user input.
Below is an example function, demonstrating the syntax to use in your chatbot script file. We recommend that you put functions at the top of your file.
The function is called getRandomNumber and we include the word javascript to indicate that the function is written in javascript. The object tag syntax encloses the function. Notice that something is returned to be used by the chatbot. In this case, it is a random number.
In order to use the function in your chat script, you use the <call> tag like below.
If the user says "Random number please" (the trigger), the getRandomNumber function is called and the returned random number will be the response.
User: Random number please.
Bot: Here is your random number: 0.874612
A function can also accept arguments or inputs. See the example below.
The argument passed to the function is accessed by args[0]. If there were a second argument (like two numbers to be added) you would access it with args[1]. args is an array.
In order to use a function that accepts arguments, you place those values after the function name, like below.
Notice that we are using the user's input as our argument--a number in this case--using the <star> tag.
User: square 4
Bot: 4 squared is 16
You can use a Google Sheet as a database for your chatbot. Making a database this way allows you to more easily offer a lot of information for your users. For example, you could create a dictionary of terms on a topic that your chatbot would use to help people searching for information.
Below is an example of a spreadsheet of machine learning terms. Of course, you could have many more terms. The key is to make it a simple table with single word headings on the first row.
Update February 11, 2022: Steps 2 and 3 below have been updated to fix a problem associated with a Google api change.
In order to import your information, you will need to publish your Google Sheet.
Publish your copy of the spreadsheet by ...
Selecting File > Share > Publish to the web...
Then under the link heading select the sheet you want to use with the first drop-down menu
Select comma-separated values (.csv) from the second drop-down menu.
Finally, click the Publish button and copy the link provided.
Once your spreadsheet is published, copy the shareable link. (Make sure your link is not restricted to your organization.)
Update the code.js file inside the setup() function to what you see in lines 4 - 7 below. Notice that chatbot.loadFiles(['bot.rive']); has been moved inside the chatbot.getDB function. This ensures that your database has loaded before the chatbot is started.
You will need to change the link above to the link you copied in the previous step for your Google sheet. Your spreadsheet data is now available in an array, chatbot.db, where each array element represents a row in your spreadsheet as an object.
For those that may have previously used loadDB( ):
The loadDB( ) function still works but it is being deprecated. You should use the getDB( ) shown above since it supports loading multiple databases.
The chatbot.db array now contains your spreadsheet data as a list of Javascript objects like the one shown below. See the connection to the spreadsheet we started with? So, in Javascript you could use chatbot.db[0].keywords to get the first term's key words ("labeled, training").
You could now access your database in a function like the one below. This function gets a random term to quiz the chatbot user. Notice how the chatbot responds to "quiz me" by calling the getRandomTerm function (object) which returns a random term so the chatbot responds with something like "What is Reinforcement Learning?".
Wow. That's seems like a lot of work for such a short dialogue. But now you could have one of 10,000 terms randomly displayed to the user. There will be more examples of functions accessing a database in the listed Code Mods.
If you want to access multiple Google Sheet files to create multiple databases, you can reuse the getDB( ) function to load several databases like below. This allows you to access each database with chatbot.db, chatbot.db2, and chatbot.db3.
If you want to use a single Google Sheets File that has multiple named sheets, you can use the getDB( ) function in the following way. Notice that you must include the sheet name along with the link in this case.
While a text interface is great for allowing people to engage with natural language, there are times when a simple button has advantages allowing you to interact with specificity and save time for the user.
Below is an example of how you could insert buttons in the chatbot's response. It uses a standard HTML button element with an onclick attribute to run the `getReply() function of the chatbot library. Notice how each argument in the getReply functions ('hello', 'bye', or 'youre awesome') is a string that will match a trigger in your Rivescript file.
Notice that the example below uses the continuation syntax (^) in the chatbot response to make the Rivescript easier to read. Also notice that the optional <br> element is used to create a line break in the chatbot interface.
That's it. Modify as needed.
Let's add a simple pop sound effect when a message is sent by the chatbot.
First, download the mp3 file above of a pop sound. Alternatively, you could find or create your own sound if you like. Place the file in the same folder as your code files.
Add the following line to the very top of your Javascript to define a global variable for your sound. This will allow your code and the iDEW trivia library to use your sound.
Add the following line of code inside your setup() function. This will load your sound file so that it can be played later.
That is actually all you need to do. It should work for you now. The iDEW chatbot library actually plays the pop sound (that you have made available) when the chatbot responds to a message.
This example uses the same database described in the example for , which has column names id, term, definition, and keywords. Your database will likely have different column names.
Create a trigger in your chatbot script like the one below that will respond to the user typing "search" followed by a word. The response will begin with "Searching..." to provide feedback to the user, then call a searchTerms() function that we will define next.
The function below will process the search and return HTML about the results.
Let's step through what is happening above...
Line 2 uses the chatbot.dbFilter2() function. Notice there are 3 arguments used by the function.
- chatbot.db is the database to be searched.
- "term" is the column name to be searched. In this case we will search each term name.
- args represents the text the user has typed in for the search.
The variable filtered now contains the matches of our search.
Lines 3-5 takes each matched item and creates HTML for the term and definition that will be displayed to the user.
Line 6 defines a variable for our reply string. We start with "Didn't find any matches" as a default.
Line 7 modifies our reply with the HTML of terms and definitions if there were any matches.
Line 8 uses the chatbot.postReply() function to display the reply after 2 seconds.
Line 9 simply returns an empty string so that you don't get an undefined showing up in your chatbot in certain cases. The reply text is taken care of in the lines above.
There are a couple of ways you could add topics to your chatbot. But we recommend you do it the following way if you are working in teams.
Remember that you can always access the to understand them more.
1. Create separate chatbot script files for each topic. In addition to your main script file (bot.rive) create files like bot-topic-1.rive and bot-topic-2.rive for your topics.
2. Place topic tags in each of the new files with the script embedded like this.
3. Include an entry point to the new topics in your main chatbot script file using something like this, where the bot goes to the new topic if the visitor types "go to topic 1".
The {@ start} triggers the new topic's + start line. So in this case the chatbot would respond to "go to topic 1" with "Greetings from topic 1".
4. Lastly, have the javascript load your new files. Find the chatbot.loadFiles function in your code.js file and add your new files like below.
You will definitely want to customize and refine the scripts above, but you should be on your way.
Rivescript offers a way to store data in your chatbot. For example, you could use the following script.
For a more detailed explanation go .The only limitation is that it only stores the name for the duration of the browser session. In other words if the user leaves your chatbot and comes back another time, his or her name will not be remembered (or stored) by the chatbot. The next way uses Javascript localStorage to store the data for longer periods.
localStorage WayUsing this method we can store information that will remain in the browser, even after a browser refresh. (Unless the user clears the browser cache, which is not typical.) First let's create some Javascript functions in our Rivescipt file to store, get, or clear a user's name.
Next, create the script needed to use these functions, like below.
You may have noticed that we used <formal> instead of <star> in line 6 to represent the user's input. The only difference between the two is that <formal> maintains any capitalization the user would use. This is useful in this case since we expect that most names begin with a capital letter.
You can modify the examples above to store and retrieve different information.
For your chatbot we recommend that you place the bulk of your Javascript work in a proper Javascript file and keep your Rivescript "objects" very simple.
Your Rivescript file could simply call a Javascript function like below.
Notice how this will run the getRandomTerm() function, like the one below, that can be in your code.js file.
The chain of returns: The Javascript function will return the "term" (in this case) to the Rivescript object, which will then return that value to your script file
Placing JavaScript in a proper .js file produces the familiar code highlighting that makes your code much easier to write, edit, and debug.
The example code below demonstrates how you could add flip cards to your chatbot. Here we use a flip card to create a study tool for terms and definitions. This example is an adaptation of .
Below, the getRandomFlipcard function gets a random term from the database and creates a flash card with the term on the front side and the definition on the back. Buttons for the user to get another term or quit are provided. You can use this code below, but you may need to make adjustments to work with your database column names.
Below is a simple trigger you can use, but you will likely want to customize how the user starts using flip cards, whether by clicking a button or using a different keyword trigger.
You will need the CSS below for the flip card to work. It is recommended that you paste this to the bottom of your stylesheet.
That's it. Your flip card should work, but you may have to make modifications to how you access your database.
Learn more about localStorage in Javascript .
