GitBook: [#75] No subject

Author: jlyst

docs/.gitbook/assets/buttonScreenShot.png

@@ -20,4 +20,4 @@
   * [Using Topics](code-mods/adding-topics.md)
   * [Create Flipcards](code-mods/create-flipcards.md)
 * [Rivescript Reference](https://www.rivescript.com/docs/tutorial)
-
+* [Chatbot Project Guidebook](https://docs.idew.org/project-chatbot/)

docs/.gitbook/assets/dbSpreadsheetEx.png

@@ -6,14 +6,14 @@ You can use a Google Sheet as a database for your chatbot. Making a database thi
 
 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.**
 
-![Example Spreadsheet for Chatbot Database](../.gitbook/assets/dbspreadsheetex.png)
+![Example Spreadsheet for Chatbot Database](../.gitbook/assets/dbSpreadsheetEx.png)
 
-## 2. Publish Your Google Sheet <a id="using-google-sheet-as-database-recommended"></a>
+## 2. Publish Your Google Sheet <a href="#using-google-sheet-as-database-recommended" id="using-google-sheet-as-database-recommended"></a>
 
 In order to import your information, you will need to publish your Google Sheet.
 
 1. Publish your copy of the spreadsheet by selecting `File > Publish to the web...` and click the `Publish` button.
-2. Once your spreadsheet is published, click the _share_ button \(upper right-hand side\) of the spreadsheet page and **copy the shareable link**. \(Make sure your link is set to _Anyone with the link can view_.\)
+2. Once your spreadsheet is published, click the _share_ button (upper right-hand side) of the spreadsheet page and **copy the shareable link**. (Make sure your link is set to _Anyone with the link can view_.)
 
 ## 3. Load the Spreadsheet Data into Your Chatbot JavaScript
 
@@ -30,15 +30,15 @@ function setup() {
 }
 ```
 
-**You will need to change the `key` value \(the long number in the example 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.
+**You will need to change the `key` value (the long number in the example 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.
 
 {% hint style="warning" %}
-**For those that may have previously used `loadDB( )`:** 
+**For those that may have previously used `loadDB( )`:**&#x20;
 
 The `loadDB( )` function still works but it is being deprecated. You should use the `getDB( )` shown above since it supports loading multiple databases.
 {% endhint %}
 
-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"\).
+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").
 
 ```javascript
 [
@@ -73,11 +73,11 @@ The `chatbot.db` array now contains your spreadsheet data as a list of Javascrip
 ]
 ```
 
-## 4. Accessing the Database in a Function 
+## 4. Accessing the Database in a Function&#x20;
 
-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?".
+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?".
 
-```text
+```
   > object getRandomTerm javascript
     var randomIndex = Math.floor(Math.random() * chatbot.db.length);
     var currentItem = chatbot.db[randomIndex]
@@ -115,4 +115,3 @@ chatbot.getDB('link', 'My First Sheet Name').then(data => chatbot.db = data);
 chatbot.getDB('link2', 'My Second Sheet Name').then(data => chatbot.db2 = data);
 chatbot.getDB('link3', 'My Third Sheet Name').then(data => chatbot.db3 = data);
 ```
-

docs/.gitbook/assets/searchExample.png

@@ -1,12 +1,10 @@
 # Searching a Database
 
-Below is an example of how a chatbot could search a database of definitions and display the results as buttons for the user to click to then get the definition of that term.
-
 {% hint style="info" %}
 This example uses the same database described in the example for [Connecting a Database Using Google Sheets](https://docs.idew.org/code-chatbot/code-mods/connecting-a-database-using-google-sheets), which has column names _id, term, definition, and keywords_. Your database will likely have different column names.
 {% endhint %}
 
-![](../.gitbook/assets/searchexample.png)
+![](../.gitbook/assets/searchExample.png)
 
 ## 1. Create the Rivescript Trigger
 
@@ -35,10 +33,10 @@ 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.dbFilter()` 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.  
+**Line 2** uses the `chatbot.dbFilter()` 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.
@@ -47,7 +45,5 @@ The variable `filtered` now contains the matches of our search.
 
 **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 8** uses the chatbot.postReply() function to display the reply after 2 seconds.
 

docs/.gitbook/assets/vidComing.png

@@ -1,15 +1,15 @@
 # Add Buttons for User Input
 
-![](../.gitbook/assets/buttonscreenshot.png)
+![](../.gitbook/assets/buttonScreenShot.png)
 
-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. 
+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. 
 
 ### Use HTML Buttons Directly in the Rivescript
 
-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.
+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.
 
 {% hint style="info" %}
-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.
+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.
 {% endhint %}
 
 {% code title="Rivescript" %}
@@ -32,4 +32,3 @@ Notice that the example below uses the continuation syntax \(`^`\) in the chatbo
 {% endcode %}
 
 That's it. Modify as needed.
-

docs/SUMMARY.md

@@ -2,15 +2,15 @@
 
 {% embed url="https://www.loom.com/share/11223bfc18be4730a9378a33f55edfbb" %}
 
-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**](https://chatbot2018--jimlyst.repl.co/) which doesn't do anything exciting -- that's up to you to change.
+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**](https://chatbot2018--jimlyst.repl.co) which doesn't do anything exciting -- that's up to you to change.
 
 ## HTML
 
-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. 
+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. _Tabletop.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.
+The required libraries are also loaded. _Tabletop.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.
 
-{% code title="HTML - \(index.html\)" %}
+{% code title="HTML - (index.html)" %}
 ```markup
 <!DOCTYPE html>
 <html>
@@ -47,7 +47,7 @@ The required libraries are also loaded. _Tabletop.js_ enables you to use a back-
 
 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.
 
-{% code title="JS \(script.js\)" %}
+{% code title="JS (script.js)" %}
 ```javascript
 function setup() {
 	chatbot.loadFiles(['bot.rive']);
@@ -61,7 +61,7 @@ window.onload = setup;
 
 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.
 
-{% code title="Rivescript \(bot.rive\)" %}
+{% code title="Rivescript (bot.rive)" %}
 ```javascript
 // conversation script is below
 // "start" auto-runs to begin the bot conversation 
@@ -78,7 +78,7 @@ The script below determines how your chatbot will converse with a visitor. The `
 
 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.
 
-{% code title="CSS \(style.css\)" %}
+{% code title="CSS (style.css)" %}
 ```css
 body {
   background: linear-gradient(#A90329, #6d0019);
@@ -188,4 +188,3 @@ div#dialogue {
 }
 ```
 {% endcode %}
-

docs/code-mods/connecting-a-database-using-google-sheets.md

@@ -4,19 +4,24 @@
 
 Develop a chatbot script that demonstrates several useful features and patterns in programming a conversation.
 
+{% hint style="warning" %}
+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.
+{% endhint %}
+
+{% embed url="https://www.loom.com/share/eb305934b4e34d41ab5dbb450345707f" %}
+
 ## Instructions
 
 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.
 
 1. **Read first section of** [**The Code, Explained**](https://www.rivescript.com/docs/tutorial#the-code-explained) **in the Rivescript documentation.** Pay close attention to the "Important Note" in the reading that describes the importance of using lowercase with triggers.
 2. **Create four** [**random replies**](https://www.rivescript.com/docs/tutorial#random-replies) **to "hello" for your chatbot.**
-3. **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 ["alternatives and optionals" in RiveScript](https://www.rivescript.com/docs/tutorial#alternatives-and-optionals).
+3. **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 ["alternatives and optionals" in RiveScript](https://www.rivescript.com/docs/tutorial#alternatives-and-optionals).
 4. Use [a redirection](https://www.rivescript.com/docs/tutorial#redirections) to your "hello" trigger when the user inputs "Hey". Basically, make your bot respond the same way to _hello_ or _hey._
-5. **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 [open-ended trigger with a wildcard](https://www.rivescript.com/docs/tutorial#open-ended-triggers).
-6. **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 example on short discussions](https://www.rivescript.com/docs/tutorial#short-discussions).
+5. **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 [open-ended trigger with a wildcard](https://www.rivescript.com/docs/tutorial#open-ended-triggers).
+6. **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 example on short discussions](https://www.rivescript.com/docs/tutorial#short-discussions).
 7. **Finally, choose two other features of RiveScript syntax to implement in your bot.**
 
 ## ✓ Deliverable
 
 Have your chatbot working with the features described above and be prepared to demonstrate and explain how it works.
-