Extensions

In the main lesson, you used conditional statements to program your talkbot to tell a joke.

In this video, you’ll deploy your project so that other people can chat with your joke-telling talkbot.

A deployment is the process for making a program ready to use.

When you deploy your code, you move it from the script editor to a private webpage on the internet.

In your script editor, make sure your code has been saved.

Then, do a new deployment.

Describe your project… And execute the deployment as yourself.

Then, decide who will have access to your talkbot.

Select “only myself” if you want to keep your talkbot private… Select “anyone with a Google account” if you’d like to give more people, like your teacher and classmates, access… Or select “anyone” if you want to make your talkbot available to everyone.

Remember, don’t share anything personal online, especially if it can be accessed by people you don’t know.

Then deploy it.

Click the URL to open the web app.

Nice work! Now share your talkbot with your teacher, family member, or friend.

Open Gmail in a new tab.

Type a note.

Then, go back to the tab with your talkbot and copy the URL from the address bar… and paste it into your email.

Add your teacher’s email address… And send your email.

If you want to stop sharing your web app, manage the deployment settings.

In the main lesson, you used conditional statements to write a knock-knock joke for your talkbot.

But maybe you didn’t think the joke was funny and you’d like to share a better joke.

In this video, you will search online to find a new joke for your talkbot.

Then, you will write new conditional statements for your talkbot so it has a new function.

In programming...

It has a defined input and output.

The code you’ve been working on begins with the word “function.” The input is what the user types and the output is how the computer responds.

To start, copy the last conditional statement and paste it below the knock-knock joke.

For the first conditional statement, the string that started the knock-knock joke was the word “joke.” And the user knows to ask for a joke because of the placeholder text in the chat box.

So what if you want your talkbot to tell a second joke?

You’ll need a different word to use as the string, like “another.” But you’ll also need your user to know to ask the talkbot to tell another joke.

They’ll need a hint, like the one that’s used in the placeholder text.

After the joke in the previous conditional statement ends, add a hint for the user.

After the sentence “you wrote some code,” type “Hint: Ask me to tell you another joke.” Next, search online to find a new joke to use.

Open a new tab in your browser and go to google.com Then, use keywords to search for a short joke.

Review your results.

Then, choose a link to open.

Copy the first line of the joke.

Then, paste the first line of the joke in the string of the new conditional statement.

Next, copy and paste another conditional statement to finalize the joke.

Write what you think the user’s response will be to the first part of the joke as the first string… And then finish the joke.

Save your code… And try it out by reloading the page.

Then, start at the beginning.

If your new conditional statements didn’t work, debug your code.

Keep trying until you get the results you’re after.

Ask a neighbor or a teacher for help, if you need to.

1 In this video, you will change the colors, borders and text in your talkbot.

2 Your talkbot uses different coding languages.

3 A coding language determines the specific words and symbols 4 used in the code and the order they are placed in to create a product.

5 The three coding languages your talkbot uses are: JavaScript, 6 which you used to code your talkbot’s responses, 7 H-T-M-L, which codes for the content that appears on the page like text, 8 input bars and buttons, And C-S-S, 9 which you will use in this video.

10 C-S-S stands for cascading style sheet.

11 You use a CSS to code for the color, text, 12 and sizing of features in your app.

13 You can change the visual appearance of your talkbot 14 by changing the CSS code.

15 To begin, open the C-S-S file.

16 In this sheet 17 you will see selectors for body and chatbox.

18 Selectors tell you what elements of your page 19 will be changed.

20 Body is a selector that includes all elements on a page, 21 including headers, paragraphs, tables, buttons, and more.

22 Chatbox identifies the specific section on your page 23 where users input text and the talkbot provides its response.

24 Within your body or chatbox, you can code for different properties 25 depending on what type of element it is.

26 Change the background color of the body to a color that you like 27 and save your code.

28 Make sure to keep the colons and semicolons where they are 29 or your changes may not work.

30 If you don’t know what color to choose, 31 search online for a list of available C-S-S background colors.

32 Navigate to your test deployment 33 and refresh your page to observe your changes.

34 If your background did not change 35 color, return to the script editor and debug until it works.

36 Check to make sure that you spelled the colors name correctly 37 and that colons and semicolons are in the correct places.

38 Next, adjust the color of your font so that it coordinates 39 with your background.

40 Check your font color 41 to make sure it is easy to read.

42 Now, change the style of the border.

43 Search online to find some standard border styles.

44 Alter the border style code 45 and check your changes.

46 If you aren’t sure 47 what a style trait means, change it and observe what happens.

48 Sometimes the easiest way to understand what something does 49 is to experiment with it and debug if something doesn’t work.

50 If you get stuck or want to use 51 less common colors and styles, ask your teacher or friend for help.

52 You can also search online to see if you can find an answer to your problem 53 or the code for other CSS colors and styles.

54 Software engineers don’t remember everything in every coding language, 55 so they often search for solutions online or ask colleagues for help.

56 Play around with the other style traits in the CSS 57 until you are happy with the way your talkbot looks.

58 Now, it’s your turn: Open the C-S-S file, 59 Change the code for background color, 60 Adjust the talkbot’s text color, 61 Alter the border style, 62 And modify at least two other traits.