How to Write a Simple Chatbot (part I)

October 28, 2019

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, on Facebook, and probably lots of other places. The ability of chatbots to engage makes them powerful tools – you can even use one for your resume!

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 personal or group blog. 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, and don’t forget the space)
  4. Hit return, and on line 2 enter “– Hello There!” (again, no quotes and remember the space)
  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 (the + part) and told the chatbot how to react (the  part) 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!“)
  • 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 right now your chatbot is only coded to respond to versions of “hi”.

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!
  7. NOTE: In previous classes, we’ve found this often doesn’t work on the first try. If you don’t get the bubble icon (bottom right), try repasting the code and reloading, or republishing the code in rundexter and pasting that. It always works eventually, it’s just weird sometimes.

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 Google Maps

October 16, 2019

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 (in progress)!

Last semester’s map (for reference)


How-To: Write an Explainer Post

September 11, 2019

Any topic area has certain subjects that are important but complicated. Maybe it’s why the polls didn’t predict Trump’s win, or how boys can keep up with girls in school, or how to carry a gun while running, or why Cardi B and Nicki Minaj have beef. We’ll call this kind of post an Explainer, and yes, there’s even an explainer about explainers.

An explainer isn’t based on a question with a simple answer like “why does a cat purr?” but rather one that requires breaking down some complex details with a variety of sources and evidence. They’re a common tool for online media – Vox has its own section for them – and when planning your own, it helps to look at what’s come before. Let’s go back to that Cardi B and Nicki Minaj post (oh the sacrifices I make for education) and look at its components:

Hed: What’s being explained?

The Complete History of Nicki Minaj and Cardi B’s Beef

Okay, it’s a bit of a label hed, but you definitely know what you’re getting. Any good explainer post is built around the question “Why/How did things come to this point?” Your hed should reflect this, ideally by incorporating those “Why” and “How” words.

Lede: Why explain it now?

For more than a year, Nicki Minaj and Cardi B walked on eggshells while rumors of their alleged beef bubbled just below surface. Through shady interviews and sneak disses, the rappers waged a cold war. Then, during New York Fashion Week at Harper’s Bazaar Icon party, photos and video of a physical altercation between Cardi and Nicki’s parties circulated the web.

Since then, their public feud has intensified, with memorable Queen Radio rants and viral Instagram posts. But how exactly did we get here? Was it Nicki’s obsession with being the queen of rap? Is Cardi too sensitive? Below we revisit the history of Cardi B and Nicki’s long simmering feud and the events that led us here.

Explainers should be timely and clearly answer the “Why NOW” question. The beef in question dates back to June 2017, but the New York Fashion Week fight is what made it newsworthy for its Oct. 30, 2018 publication date.

Structure

This particular post takes the form of a timeline chronicling the various slights cast by B and Minaj. It’s marked by entries such as:

August 2017: Nicki denies subbing Cardi on “No Flags”

Notice how the post is broken up with subheadings that start with the date and detail what happened then. Even if you’re not doing a timeline, this bite-sized format helps make the complexity more approachable.

Support

This post in particular is strong because it not only employs strong evidence for its explanation, it brings in a strong VARIETY of sources. Consider this passage:

Coincidentally, Nicki’s original verse on “MotorSport” leaked the same day as her interview, revealing she had referenced Cardi:

I’m with a couple bad bitches that’ll rip the party
If Cardi the QB, I’m Nick Lombardi
Pull up in the space coupe, I done linked with Marty
I can actually afford to get a pink Bugatti

The final version replaced Cardi’s name with Quavo, and it’s still unclear if it was meant to be shade or a shout out. Nicki later tweeted that she changed the verse per Atlantic’s request.

 

It’s typical of the article, too: throughout, it employs links, social media posts, screenshots and video to support every claim it makes. This isn’t just gossip, it’s a fully documented account.

Planning your explainer

Here’s a few steps, via Poynter, for creating an explainer post of your own:

  1. Figure out what to explain: What’s a subject your readers need/want to have broken down for them? Look for a question that “requires more than a fact to explain.”
  2. Report the explainer: Poynter recommends contacting multiple experts; for a blog post, that translates into multiple explanatory links and media. Keep your questions pretty basic – think elementary school level – and along the lines of “why does this happen?”
  3. Craft the explainer: Don’t start with history, start with why it matters now. This is similar to establishing a news peg for any story. Poynter provides a tremendous example here: After President Obama signed a bill restoring Secret Service protection to former presidents and their families, Slate asked the question “does that include presidential pets?” (you’ll have to click through for the answer)
  4. Consider voice and style: (This one’s from The Word Factory) An explainer typically deals with a complicated subject, so it’s particularly important to avoid technical jargon or lengthy, complex sentences. Often, a more casual or conversational tone will be used to lighten a heavy subject (that’s up to the individual publication though).

Remember: You’ll have an assignment on this as well, so start thinking now about what your readers need explained!


How-To: Setting Up Your WordPress Blog

August 28, 2019

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) – you want the free version!
  3. Enter the required information (username, password, email)
  4. Give your blog a name
    • The format is YOURNAME.wordpress.com (unless you’ve got a killer name in mind, using your real name is just fine)
    • 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”
        • Important! To access the main menu, enter your blog’s URL and add “/wp-admin” after it (example: interactivejournalismwvu.wordpress.com/wp-admin). There should be a BLACK bar at the top, not a blue one.
      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
        • It’s preferable 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). Make sure you have permission to use the images you do, and include a source credit!
      • 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:// (your links should look like this)
      • 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
        • This is a great tool for writing posts on your own time to post during our 10a – 4p Monday-Thursday requirement
      3. Don’t like what you have? Open the post in its own window (click the headline), scroll to the bottom, 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…

Your first post should not be published until Thursday, Aug. 28 (between 10a and 4p). 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.

Any special requirements for your week’s personal blog will be included in the previous week’s Thursday post, but in general posts need a minimum of three meaningful links and three relevant media content (pics, video, social posts) embeds. Headlines should be specific and relevant; first-paragraph leads should be about 25 words.


How to Write a Simple Chatbot (part II)

March 21, 2019

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 (remember those?) 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 one of its stories, 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. Next, do the following:

  1. Click the button icon at the top of the edit panel (second from the left).
  2. This adds the button code, which will look like this: ^buttons(First Choice, Second Choice, Third Choice)
  3. The text is all placeholders. The only things you can’t change are the punctuation marks ^ and ()
  4. Delete everything in the parentheses and replace it with “What are you?
  5. Back at the top, after “Hello There!” add a space and 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 by adding the following code:

+ what are you

– 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 It will look like this now:

+ intro button
– ^buttons(what are you, who made you)

Then, 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)

March 19, 2019

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 personal or group blog. 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, and don’t forget the space)
  4. Hit return, and on line 2 enter “– Hello There!” (again, no quotes and remember the space)
  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 (the + part) and told the chatbot how to react (the part) 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!“)
  • 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 right now your chatbot is only coded to respond to versions of “hi”.

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!
  7. NOTE: In previous classes, we’ve found this often doesn’t work on the first try. If you don’t get the bubble icon (bottom right), try repasting the code and reloading, or republishing the code in rundexter and pasting that. It always works eventually, it’s just weird sometimes.

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

February 28, 2019

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 (in progress)!

Last semester’s map (for reference)