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!


Group Blogs: Pitching Your Ideas

September 17, 2018

For the final third of the semester (weeks 11-15), you will be creating, promoting and maintaining focused group blogs. In preparation, and to identify similar interests, each of you will propose a group blog concept and a list of potential stories. I’ll use these to determine group assignments, which we’ll finalize in class. Use the group blogs you reviewed in this week’s read & respond to identify ideas you think will work (and those you think NEED work).

Post a comment (to this post) with a pitch for a group blog concept by 10 a.m. Wednesday, September 19. This must contain the following:

  • A one-paragraph description of a group blog concept focused on some aspect of Morgantown life (no activities calendar blogs!). Other regions (e.g., West Virginia; other cities) can also be your focus as long as you’re able to cover them.
  • A tentative title for this blog concept
  • At least FIVE story ideas. Use complete sentences and address why this story matters. For example: “A few years back, downtown Morgantown saw an explosion of eCigarette shops, but today many of these have closed. Is vaping on its way out?” Include at least two potential sources for each!

We’ll go through these comments in our next class. By the end of class, you must post comments to TWO concepts that you’d be interested in contributing to (more than two is fine), and let the creator know what you’d bring to the table. This will determine who you’ll be working with for the last five weeks of the semester, so make your best case!


Assignment #4: Twitter Scavenger Hunt!

September 12, 2018

It’s time! Every year, our class takes to the streets for a Twitter scavenger hunt. Thus far, many of you have probably only used Twitter for personal posting, but it’s a powerful tool for reporting and newsgathering, and the best way to learn about this is to do it. For the remainder of class today (Wednesday, September 12), you’re heading out into the world in teams of two (at least one of you needs a phone with the Twitter app) to find 10 things. You’ll need to complete the bulk of this assignment by the end of class.

IMPORTANT: To count, each tweet MUST include:

  • A photo
  • The number you are doing (e.g., 1. Joe Smith: “I love WVU”) – Without these, I can’t guess which entry you’re checking off (which means no credit)!
  • The hashtag: #WVUblogJ

So a sample tweet might look like this:

“3. Prof. Biggins (Econ): It’s made protesting easier, but also more identifiable. #WVUblogJ”

Restrictions: No College of Media students, and please don’t all mob the same professor. No more than half can come from the same building, so don’t just hang around Evansdale Crossing or the Rec Center – try heading downtown!

FIRST!

Each member of your team must post an introductory tweet with a photo of your team so readers (and I) know what to expect. Don’t forget the course hashtag!

And now … the list!

  1. School spirit: Photo and quote from someone (not you or your partner) revealing school or civic spirit (what that means is up to you).
  2. Eating Up: Photo and quote from someone (not you or your partner) at a restaurant, coffee shop or bar on or near campus. Why do they eat here?
  3. Professor on the street. Photo and quote from a professor on campus. Ask them what role they think social media plays in our society today. Be sure you include the professor’s title and department.
  4. Student on the street. Photo and quote from a student (not you or your partner). Ask them where they get their news and if they use social media to keep up on the news. Be sure you include their year in school and major.
  5. Academic excellence. Photo and quote that reveals (you are going to have to be creative) how our university contributes to cutting edge research and/or learning.
  6. Scenic spot. Photo of a distinctive scenic spot on or near campus.
    • 2016 rule: No photos of Woodburn Hall. We get it! It’s in all the brochures!
    • 2017 rule: No photos from the top of Evansdale Crossing. It’s very pretty, but I’ve seen enough of it.
  7. Little-known fact. Photo and detail of something you think many people might not know about your school or campus or city.
  8. Fanatic fans – Photo/quote from somebody asking for their take on NC State cancelling this weekend’s game against WVU due to Hurricane Florence.
  9. Extracurricular extravaganza: Photo and quote/detail that exemplify some of the huge variety of clubs, organizations, etc. available to students at our university.
  10. WVU Weird: Photo and detail of the strangest thing you can find in WVU or Morgantown. See if you can out-weird your classmates!

Extra Credit? Sure, why not? Add something beyond the standard requirements above, and I’ll consider an extra point or so. It should be clearly above and beyond the norm, and determining what constitutes “extra” is solely at my discretion.

DUE: You need to make most of your 10 tweets during our regular class time of 10-11:15a (one or two stragglers are acceptable), and your team must be done by 1p today. You’re expected to use class time to work on this, so if there’s a long delay to your start, it will affect your grade.

A Few Tips:

  • Think like a reporter. Have an eagle eye for the interesting, the important, the relevant, the unique, and the immediate. Double check your facts.
  • Think like a public relations professional. Show other people what’s cool about WVU.
  • Think like a storyteller. You may only have 280 characters in each tweet (actually less, once you subtract numbers, links and hashtags), but you can say a lot in a few words or using an image.
  • You may use more than one Tweet for each of the items below. Don’t overdo it, though, and don’t forget the #WVUblogJ hashtag for each!
  • 280 characters isn’t much. Try using other apps and tactics to allow you to say more.

This is going to seem a little strange to some of you, but the goal is to reveal to you the journalistic applications of Twitter. You need to be an observer, a reporter, and you can’t be afraid to accost people on the street for their opinions. You’ll provide perspective and voice, and you’ll tell a larger audience something about your subject (WVU, in this case) – make sure you’re thinking of them!


Class Coding: HTML 1

April 17, 2017

After completing your first Codecademy assignment in Web Fundamentals (HTML I) and showing me your completion badges, do the following:

  1. Preparation:
    • Create a desktop folder called WWW
    • Open TextWrangler (or another text editor), create a new file called “index.html” and save to WWW
    • Save two images (ideally with short names) to your WWW folder
  2. Place your structural tags
  3. Create a title
  4. Add a first-level headline and one paragraph
  5. Bold a few words. Italicize a few other words.
  6. Insert an image
  7. Add a second-level headline and another paragraph
  8. Create a hyperlink to the SOJ homepage within this paragraph
  9. Add a third-level hed and another image
  10. Make this second image into a hyperlink

To preview in TextWrangler

  • In Chrome, go to File > Open File… and open “index.html
  • Command-Tab to select TextWrangler and write code
  • Command-Tab to select Chrome and Command-R to refresh your webpage

To view a webpage’s source code

  • Chrome: View > Developer > View Source
  • Firefox: Command-U OR Tools > Web Developer > Page Source
  • Safari (why are you using Safari???): Develop > View Page Source

Assignment #5: Twitter Scavenger Hunt

February 8, 2017

It’s time! Every year, our class takes to the streets for a Twitter scavenger hunt. Thus far you’ve probably only used Twitter for personal posting (and some of you haven’t used it at all), but it’s a powerful tool for reporting and newsgathering, and the best way to learn about this is to do it. For the remainder of class today (Wednesday, February 8), you’re heading out into the world in teams of two (at least one of you needs a phone with the Twitter app) to find 10 things. You’ll need to complete the bulk of this assignment by the end of class.

IMPORTANT: To count, each tweet MUST include:

  • A photo
  • The number you are doing (e.g., 1. Joe Smith: “I love WVU”) – Without these, I can’t guess which entry you’re checking off (which means no credit)!
  • The hashtag: #WVUblogJ

So a sample tweet might look like this: “3. Prof. Biggins (Econ): It’s made protesting easier, but also more identifiable. #WVUblogJ”

Restrictions: No College of Media students, and please don’t all mob the same professor. No more than half can come from the same building, so don’t just hang around Evansdale Crossing or the Rec Center – try heading downtown!

FIRST!

Each member of your team must post an introductory tweet or two with a photo of your team so readers (and I) know what to expect. Don’t forget the course hashtag!

And now … the list!

  1. School spirit: Photo and quote from someone (not you or your partner) revealing school or civic spirit (what that means is up to you).
  2. Eating Up: Photo and quote (not you or your partner) from your favorite eating spot or watering hole on or near campus.
  3. Professor on the street. Photo and quote from a professor on campus. Ask them what role they think social media plays in our society today. Be sure you include the professor’s title and department.
  4. Student on the street. Photo and quote from a student (not you or your partner). Ask them where they get their news and if they use social media to keep up on the news. Be sure you include their year in school and major.
  5. Academic excellence. Photo and quote that reveals (you are going to have to be creative) how your school contributes to cutting edge research and/or learning.
  6. Scenic spot. Photo of your favorite scenic spot on or near campus.
    • 2016 rule: No photos of Woodburn Hall. We know! We’ve all seen it!
    • 2017 rule: No photos from the top of Evansdale Crossing. It’s very pretty, but I’ve seen enough of it.
  7. Little-known fact. Photo and detail of something you think many people might not know about your school or campus or city.
  8. Fanatic fans – Photo/quote from somebody asking for their prognosis on a WVU sport of your choice.
  9. Extracurricular extravaganza: Photo and quote/detail that exemplify some of the huge variety of clubs, organizations, etc. available to students at our university.
  10. WVU Weird: The strangest thing you can find. This one’s pretty open-ended, so be creative.

Extras! (for +0.5 each – only your first use gets the extra credit. These must also include both hashtags):

  • Use a microvideo app like Vine to provide interesting/funny/relevant information about your school .
  • Post 3-4 photos in a single tweet.
  • Incorporate other social media in meaningful ways to add value to your tweets.

DUE: You need to make most of your 10 tweets during our regular class time (10-1115a), and your team must be done by 1p today (one or two stragglers are acceptable). You’re expected to use class time to work on this, so if there’s a long delay to your start, it will affect your grade.

A Few Tips:

  • Think like a reporter. Have an eagle eye for the interesting, the important, the relevant, the unique, and the immediate. Double check your facts.
  • Think like a public relations professional. Show other people what’s cool about WVU.
  • Think like a storyteller. You may only have 140 characters in each tweet (actually less, once you subtract numbers, links and hashtags), but you can say a lot in a few words or using an image.
  • You may use more than one Tweet for each of the items below. Don’t overdo it, though, and don’t forget the #WVUblogJ hashtag for each!
  • 140 characters isn’t much. Try using other apps and tactics to allow you to say more.

This is going to seem a little strange to some of you, but the goal is to reveal to you the journalistic applications of Twitter. You need to be an observer, a reporter, and you can’t be afraid to accost people on the street for their opinions. You’ll provide perspective and voice, and you’ll tell a larger audience something about your subject (WVU, in this case) – make sure you’re thinking of them!

Looking Ahead: Storify

We’ll start this next week, but if you’d like to prepare in advance, it will include the following: a) All of your own Tweets, and b) Your top three favorite Tweets from your classmates. In this Storify, you’ll reflect on what you learned and observed from the experience.


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

How To: Create a Thematic Map

October 31, 2016

Here’s a guide to creating your own heat map, adapted from this tutorial.

Getting the data into a Fusion Table

  1. Import the dataset (a .csv list of insects from Google)
  2. Sign in to Google Drive, click “New,” and in the menu, go to More > +Connect More Apps
  3. Type “fusion tables” in the search bar and click the Connect button
  4. Click New > More > Google Fusion Tables
  5. In the window, browse to find your .csv and click Next. Review how the data looks and click Next
  6. Give it a name and click Finish
  7. Check out your table of data and images

Map the data

  1. Click the “map of latitude” tab at the top of your table
  2. Click the dots in the map to view individual entries’ data
  3. The Google tutorial also provides directions for making those pop-up windows more readable. Scroll down to “customize the info window template” and try it out!

Make a heat map

  1. Download the “population” and “states.kml” files I’ve sent you
  2. Create a new fusion table with this file
  3. Click the map tab in the spreadsheet, and Fusion Tables will geocode the locations (states) you’ve provided as points
  4. In a NEW window (important), upload “states.kml” – go through same steps to create a second Fusion Table
  5. In the uploaded “population” Fusion Table, click File > Merge
    • Select “states”
    • This table: Region – states: Name – click Next
    • Uncheck “description” and “id” and click Merge
  6. To change from dots to shapes, click “change feature styles” in the left menu and select Polygons > Fill color
  7. Select “Gradient” and change to 5 with the listed values.
  8. You SHOULD get a map with states shaded in colors that are darker with higher population levels
  9. Try searching for other state data and mapping it (use the filetype:.csv to help out)