How to write a simple chatbot (part II)

October 17, 2018

Last time you learned the basics of making a rule-based chatbot that can respond to some basic triggers (hi, yes, no, maybe, what is the meaning of life). Nifty but not too journalistic, so now we’re going to progress toward making a simple on-the-rails explainer using buttons.

For a great example of this, remember the Quartz News (nee Quartzy) chatbot from class. The bot may seem complex, but if you walk through a story, you actually have very few options – many checkpoints only provide a single option, and the ones that provide more quickly return to the main story. This simple engagement, coupled with a distinctive voice and an interesting story, provides a way to relate the news via your bot, and it’s pretty much all done with buttons. Let’s make one!

Your first button

Select your bot from last time and go into Edit mode (the pencil icon). We’ll keep our hi/Hello There! first interaction, but we’ll have our bot follow it up with a button to direct the reader’s next step.

Your first two lines of code should say:

+ hi

– Hello there!

Hit return twice and add the following:

+ intro button

– 

Add a space after the – and leave your cursor there. Do the following:

  • Click the button icon at the top of the edit panel (second from the left).
  • This adds the button code, which will look like this: ^buttons(First Choice, Second Choice, Third Choice)
  • The text is all placeholders. The only things you can’t change are the punctuation marks ^ and ()
  • Delete everything in the parentheses and replace it with “What are you?
  • Back at the top, after “Hello There!” add a space the code {@ intro button} so the button will show up after the robot is triggered with “hi”

Right now you’ve created a button that doesn’t go anywhere – give it a try! Next, we’ll make it do something.

  • Add a new trigger: “what are you” (no quotes)
  • Add the response “I’m a bot!

Publish and try it out! Your code should now read:

+ hi
– Hello there! {@ intro button}

+ intro button
– ^buttons(What are you?)

+ what are you
– I’m a bot!

Did it work? If not, go through our troubleshooting list (is it published? are there capitals or punctuation in triggers? did you add the {@ intro button} code in your bot’s first response?). If not, check in with me and we’ll see.

Adding more buttons

This is the simplest button scheme you can have – there’s only one choice! What I’d like you to do now is add in a second option for the reader who already knows what a bot is. Back in the response to + intro button, add a comma after What are you? and add a second option, Who made you? At the bottom of your code, add this new trigger/response pair:

+ who made you

– You did, silly!

Publish and try it out! If it fails, run through the usual steps, which you should be getting pretty good at.

Tell me a story

Now you know how to write button code with ^buttons() and how to call that code with { }. From here, we’re going to turn this to something more practical. Identify a simple story related to your interests that can be told in three stages (plus an introduction). Think again of the Quartz News example – we’d call this an explainer – and don’t overthink it!

  • Keep it short and conversational!
  • Each stage should progress via a single button
  • Try at least one stage with two buttons

When you’re done, go to the deploy menu, click the switch that deploys your bot (it won’t work otherwise, as we learned last time), paste the code at pste.edu and give it a try. If it works, go to this link (it’s a Google Doc) and add your chatbot (with your name and description) to the list. Let’s see what you come up with!


How to write a simple chatbot (part I)

October 15, 2018

We’ll be designing basic chatbots in the next few weeks. You learned about these in this week’s readings, so you know you’ve already interacted with a chatbot on your phone, in your home, and probably lots of other places. The bots we’re going to make will be simple, rule-based call-and-response setups, but they’ll be enough to put together a simple explainer for your next assignment. Let’s get started!

FIRST: Create an account on rundexter.com (Dexter is a free platform for building chatbots) and log in

First contact

  1. Select a Blank theme and create a new bot (there are lots of possible themes to browse, but we’re starting simple).
  2. Rename your bot (top left) and in the big window, delete all the default code – we’re starting from scratch!
  3. On the first line, enter “+ hi” (don’t use quotation marks)
  4. Hit return, and on line 2 enter “– Hello There!” (again, no quotes)
  5. On the right, click the big friendly green button that says “Publish Current Topic”
  6. There’s a phone-shaped window on the right with an entry blank at the bottom. Type in “Hi” – your chatbot should respond “Hello There!

What did you just do? You created a trigger and told the chatbot how to react when it encountered that trigger. It’s a call-and-response, like how when you say “Let’s Go!” people respond “Mountaineers!” This is a rule-based chatbot: It doesn’t really use artificial intelligence to “think,” it just reacts to preprogrammed stimuli.

Now try the following:

  • Tell your chatbot both “hi” and “Hi” and “hi!” – what happens?
  • Tell your chatbot “hello” – what happens? Why?

Does my chatbot hate me?

If “hi” didn’t get you a response, there’s two likely reasons. The code for your chatbot triggers (the code after +) cannot contain either of the following:

  • Capital letters (“+ Hi“)
  • Punctuation (“+ hi!“)
  • Also make sure you include a space after the + or – in your code

Look at your code. Does the trigger contain either of those? If so, there’s your problem. Also note that the chatbot responses CAN contain caps and punctuation. Also ALSO note that you can include these when talking to your chatbot, so either “hi” or “Hi” or “”HI!!!!!!!” will work just fine. “Hello” or “Hi there” won’t, however, because that’s not what your chatbot is coded to respond to.

Sorry, didn’t get that

As you’ve just seen, chances are users are going to say things to your bot that it’s not prepared for. It’s good practice to have a catch-all response for this.

  1. In your code, hit return twice (to leave a blank line) then add a new trigger: “+ *”
  2. Below that, add an error response such as “– Sorry, I don’t understand that command.
  3. You’ll have to republish the bot (green button) before you can test out the new code

That asterisk (*) trigger is a wildcard, meaning it stands in for any trigger not specified in your code. Right now, that means anything other than a variation on “hi” will return the catch-all message.

There are other uses for the wildcard operator too:

  • Add it in brackets before or after a trigger to allow additional words – so “+ hi [*]” would recognize both “hi” and “hi there”
  • Bots commonly also recognize requests for help by including the trigger “+ [*] help [*]” (along with a response that gives the user a list of help commands)

Publishing your bot

We’ve tested our bot in Dexter, but it’s not the best way for seeing your work in action. To try it out, we’re going to copy the code to an HTML pastebin that will show what it’d look like in Messenger or on your phone.

  1. Click the green Publish Topic button when your bot is ready
  2. At the top of the screen, click “Deploy” (the paper airplane icon)
  3. You’ll get a window that says “Embed Code” with a block of code under it. Select that code and copy it.
  4. In a new tab, go to pste.edu
  5. Paste your code in the box and click submit
  6. Go to the link you get and click the chat bubble in the bottom right to activate your bot!

That’s it! You now have a functioning – if somewhat dull – bot. Next, try building in some additional triggers and responses. What should this bot do? How can you use it to tell a simple story? We’ll do more with this in our next session.


How-to: Making and Embedding a Google Map

October 3, 2018

Today we’re making maps! At the bottom of this how-to, you’ll see a sample map of our own beloved Evansdale Crossing, made by following these very steps. Follow along and create your own!

Making the map

  1. Sign in to Google and go to maps.google.com
  2. Click the menu icon to the left of the search bar (it looks like three horizontal lines) and select “Your Places” from the drop-down menu, then click “MAPS”
  3. Select “Create Map” (at the very bottom of the left bar)
  4. In the new window, click “Untitled map” to give it a title and description
  5. Add places: Search a place address, click the marker, and select “+ Add to map” in its pop-up window
  6. Make changes by clicking a placed marker:
    1. Edit (the pencil icon) lets you change the title and description of a place. You can also add links () with HTML.
    2. Style (the paint bucket icon) lets you change the color and design of map markers. You can also upload your own designs, if you’re fancy.
    3. Add Image or Video (the camera icon) lets you … well, I think you can figure that one out.
    4. You can also add points of your own by selecting the “Add marker” icon (under the search bar) and clicking to place new map markers.
  7. Add lines and shapes
    1. Click the line/shape button and click points – double-click to finish
    2. Can name/describe your lines and polygons (shapes) in the same way as map markers.
    3. Style:
      1. Click lines to change color and thickness
      2. Click polygons to change color, border thickness, and transparency.
  8. Trash an element by selecting it and clicking the trashcan in its window

Adding group members

  1. Click “share” in top left menu
  2. Under “Invite collaborators,” add email addresses
  3. Choose what they can do: “Can view” or “Can edit”

Embed the map in your blog

  1. Click “share” and change settings from Private to “Public on the Web” (this allows any reader of your blog to see it), then click Done.
  2. Placing the map:
    1. Position the map how you want it to appear on your blog
    2. Click the three dots next to your map’s name in the top left menu > Select “Set default view”
    3. Click them again and select “Embed on my site”
      1. The code should look like this: “iframe src=”https://www.google.com/maps/d/embed?mid=1L7ZYJ8iuII5T9qoIuk4IAtmQF7U” width=”640″ height=”480″ “
      2. [note: There will also be pointy brackets like this around it, but I’ve left them out so WordPress doesn’t think I’m trying to embed a map here!]
    4. Paste the resultant line of code directly into a WordPress blog post and preview to see if it looks the way you want it.

Advanced map shaping

  1. Don’t like the shape of your map? Notice the details of that code:
    1. (this code comes from the map embedded in this post): iframe src=”https://www.google.com/maps/d/embed?mid=zRA7u_2r6VF0.kDx4jre2-3cA”; width=”640″ height=”480″
  2. See those “width” and “height” values? Right now it’s a horizontal rectangle, but you can change that! Try some different values to get the shape you want.

Here’s our map!

Last year’s map (for code reference)


How-To: Setting up your Wordpress blog

August 22, 2018

We set up our WordPress blogs in class, but it’s helpful to have a guide available for troubleshooting, so here you go! Follow the handy steps below to get started – feel free to stick with me or dash ahead.

  1. We’ll be using WordPress (http://wordpress.com).
  2. Click the “Sign up” link (at top)
  3. Enter the required information (username, password, email)
  4. Give your blog a name
    • The format is YOURNAME.wordpress.com
    • May take a couple tries to find one not taken
  5. Once you’ve got a blog …
    • Post!
      1. Log in & in the top infobar click “New Post”
      2. Enter a title in the top box, enter your text in the lower box (we’ll delete it later)
        • For more detail, go to your dashboard (link in top left of infobar > WP Admin) – in left menu, Posts > Add New
        • You may want to compose your posts in a word processing program then paste them into the blog box
    • Add value! (in dashboard view only)
      • Images: Make sure you know where the image is, then click Add Media > Upload Files > Select Files. Find your image, and decide where you want it in the text (left, right, or center)
      • Links: Select the text you want to make into a link. Click the little chain link icon above the text window and enter an address (or cut and paste) – it MUST begin with http://
      • Tags and Categories: Tags and categories (in the right menu) help index your posts. Just type a new one and click “add”.
    •  Publish!
      1. Click the big blue “Publish” button in the right menu
      2. If you want to save a post for later, click “Save Draft”
        • Log in later and publish manually
        • Set a specific time for it to publish automatically
      3. Don’t like what you have? Scroll to the bottom of your post and click “edit” and make the changes you want.
  1. Publicity (Publicize > Settings)
    1. You can link your blog to your Facebook, Twitter, Google+, LinkedIn, Tumblr, and Path accounts
    2. Linked blogs can publish automatically to these
  2. NOTE: Whenever you make an assigned blog post, be sure to check the assignment for where to post the link (typically as a comment to the assignment post but sometimes as an email or tweet)

And remember…

Regular blogging hours are from 10a-4p, Monday through Thursday. Posts (one required every week) must be made within this time to receive credit! That doesn’t mean you have to write them then – write when you want and save it as a draft to post later – but they MUST be posted then.


How-To: Make a Google Map

March 29, 2017

Today we’re making maps! At the bottom of this how-to, you’ll see a sample map of our own beloved Evansdale Crossing, made by following these very steps. Follow along and create your own!

Making the map

  1. Sign in to Google and go to maps.google.com
  2. Click the menu icon to the left of the search bar (it looks like three horizontal lines) and select “Your Places” from the drop-down menu, then click “MAPS”
  3. Select “Create Map” (at the very bottom of the left bar)
  4. In the new window, click “Untitled map” to give it a title and description
  5. Add places: Search a place address, click the marker, and select “+ Add to map” in its pop-up window
  6. Make changes by clicking a placed marker:
    1. Edit (the pencil icon) lets you change the title and description of a place. You can also add links () with HTML.
    2. Style (the paint bucket icon) lets you change the color and design of map markers. You can also upload your own designs, if you’re fancy.
    3. Add Image or Video (the camera icon) lets you … well, I think you can figure that one out.
    4. You can also add points of your own by selecting the “Add marker” icon (under the search bar) and clicking to place new map markers.
  7. Add lines and shapes
    1. Click the line/shape button and click points – double-click to finish
    2. Can name/describe your lines and polygons (shapes) in the same way as map markers.
    3. Style:
      1. Click lines to change color and thickness
      2. Click polygons to change color, border thickness, and transparency.
  8. Trash an element by selecting it and clicking the trashcan in its window

Adding group members

  1. Click “share” in top left menu
  2. Under “Invite collaborators,” add email addresses
  3. Choose what they can do: “Can view” or “Can edit”

Embed the map in your blog

  1. Click “share” and change settings from Private to “Public on the Web” (this allows any reader of your blog to see it), then click Done.
  2. Placing the map:
    1. Position the map how you want it to appear on your blog
    2. Click the three dots next to your map’s name in the top left menu > Select “Set default view”
    3. Click them again and select “Embed on my site”
      1. The code should look like this: “iframe src=”https://www.google.com/maps/d/embed?mid=1L7ZYJ8iuII5T9qoIuk4IAtmQF7U” width=”640″ height=”480″ “
      2. [note: There will also be pointy brackets like this <> around it, but I’ve left them out so WordPress doesn’t think I’m trying to embed a map here!]
    4. Paste the resultant line of code directly into a WordPress blog post and preview to see if it looks the way you want it.

Advanced map shaping

  1. Don’t like the shape of your map? Notice the details of that code:
    1. (this code comes from the map embedded in this post): iframe src=”https://www.google.com/maps/d/embed?mid=zRA7u_2r6VF0.kDx4jre2-3cA”; width=”640″ height=”480″
  2. See those “width” and “height” values? Right now it’s a horizontal rectangle, but you can change that! Try some different values to get the shape you want.

The final product!


Assignment #6: Storify

February 13, 2017

In last week’s scavenger hunt, we used Twitter to report. Today, we’ll use another app, Storify, to condense that content into something that can accompany a news story or serve as a stand-alone narrative.

The Assignment

Storify your scavenger hunt with the following:

  • An introduction
  • Informative text throughout (so it’s not just 10 tweets with no connective tissue)
  • All your team’s Tweets
  • Your top three favorite Tweets from classmates
  • Don’t just add all this content and think you’re done! You must also include a narrative (text) about the experience. Make it interesting, and make it worth reading.

Due: 10a Wednesday, February 15. To receive full credit, you must publicize with the #WVUblogJ tag and post a link to your storify in a comment to this assignment post.

The How-To

Getting Started

  1. Go to Storify.com and log in with your Twitter handle
  2. Browse through the stories there to get a feel for what’s possible
  3. Click the “Create Story” button at the top right of the screen and create a Storify page (choose Public Story) of your team’s scavenger hunt – each member creates one.
  4. This must be curated – not just a list of tweets – so include explanatory written detail, links, maps, and other information that fleshes things out

Adding content

  1. In the left panel, add a title and description for your story in the blanks, then write some intro text in the main frame.
  2. In the right “Media” panel, click the Twitter icon (the little blue bird) and type in “#WVUblogJ”
    • You can search users and keywords too, but start with this for now)
  3. Drag tweets and images from the right panel to where you want them in the left panel
    • You can click “Images” to just display images to use, “Timeline” for tweets a single user sees, and “User” for tweets from that user
  4. You can also include elements from Facebook, YouTube, Flickr, Instagram & Google by clicking the relevant tab on the right panel
  5. You can embed links to specific sites as well – just click the little chainlink icon, enter the URL, and drag it to your story (OR highlight the text to link, click the chainlink icon, and paste in the URL)
  6. Add text by mousing over blank areas before or after your content links. A yellow bar will appear. Click on any of these to enter text

Publishing your story

  1. At the top right of the left-hand window is a big, friendly blue “Publish” button – click it
  2. You’ll get a window with a Publicity message that lets you send this to Twitter or Facebook and also inform people you quoted
    • You can change these from their defaults to something better
    • You can skip this and send it later by clicking “Notify” at the top of your story panel
      • This is a great way to publicize what you’re doing to the people who helped you do it!
  3. If your Storify is associated with an actual news story (e.g., something in the DA or WVU News), and you’re embedding the Storify at the end, switch the default link to that of your story
    • NOTE: You can’t embed this code in a WordPress-hosted blog, but you can post to there by clicking “Export” (at the top)
    • To embed: Click “embed” (below the headline of your story) and copy/paste the resultant text to your story (or blog post).

In-class: HTML #2

November 16, 2016

This week, we start with the foundation from earlier in the semester and add lists and styles (learned this in this week’s Codecademy module: Web Fundamentals: HTML Basics II):

Remember these basics for coding and previewing your work:

To preview in TextWrangler:

  1. Open Chrome and TextWrangler
  2. In Chrome, go to File > Open File… and open “index.html”
  3. Command-Tab to select TextWrangler and write code
  4. Command-Tab to select Chrome
  5. Command-R to refresh your webpage

You’ll do the following:

  1. Use/create WWW folder; create “index.html”; add structural tags
  2. Create a comment inside that says “In-class assignment #2: HTML2”
  3. Create a first-level heading and an intro paragraph
  4. Create a second-level heading and an ordered list of your top three books, movies, or bands
  5. Create a fourth-level heading and an unordered list of skills you possess
  6. Add a fourth item to the ordered list (step 4) and add an image to it

Too easy? Try these:

  1. Change background color of page
  2. Change style of top headline to Verdana font family, a different color, and centered alignment
  3. Change style of your intro paragraph to 30px, a different color, and centered alignment