Extensions: Program a Progress Bar

When you share your code, you make it possible for others to see, change, and improve upon what you created.

Developers share and adapt each other’s code all the time, which benefits the entire programming community.

In this extension, you will share the code from your Google Slides script editor with a partner.

Your partner will learn from your programming to create their own progress bar.

To start, open a new tab in your browser.

Then, open your presentation with the progress bar from your Drive.

Open the Share settings.

Enter your partner’s email address.

Then, select the permission you want to use.

Edit means the person you share with can make changes directly in your presentation.

Comment allows them to make comments, but not change the presentation.

and View lets them see your presentation only.

Give your partner viewing permissions.

Add a note so your partner knows how to use the code.

Finally, send it to your partner.

Great job! As you learn more about programming, keep sharing your code to save other people time and effort.

Now, it’s your turn: Open your presentation in Drive.

Share the presentation with a partner.

And write a note explaining what you are sharing.

In this extension, you will insert additional slides in your presentation.

Then, you will run your code in the script editor again so the progress bar appears throughout the entire expanded presentation.

To start, open the presentation with your progress bar.

In the main lesson, you added slides to your presentation one at a time.

Now, you will add multiple slides at once.

Select every slide in your presentation.

To select multiple slides, hold down the shift key as you select each slide.

Then, duplicate the selected slides.

Great! Now you have ten slides in your presentation.

Repeat the process.

This time, select all ten slides.

As a shortcut, hold down the shift key and click on the first and last slides.

Then duplicate all ten slides.

Repeat the process one more time.

You should have 40 slides in your presentation total.

Look at the last slide.

Although it is slide number 40, there are only five shapes in the progress bar.

When you last ran the progress bar code, there were only five slides in your presentation.

Run the code again to apply it to all the new slides.

Open the script editor, and run your function.

Then, return to your presentation to check that the progress bar updated to show the correct number of shapes.

If not, don’t worry.

Go back to the script editor and troubleshoot the problem.

Nice work! You updated your script to match an expanded presentation.

Now, it’s your turn: Open your presentation in Drive.

Duplicate multiple slides until you have 40 total.

Open the script editor, and rerun the function.

And confirm that your progress bar appears on each slide.

When you program, you use a language to talk to a computer.

However, sometimes you make a mistake in the programming language, and the computer doesn’t understand.

When that happens, you get an error message.

Even the most experienced programmer makes mistakes.

Knowing how to troubleshoot mistakes in your code is an important skill.

In this extension, you will: Familiarize yourself with two common coding errors.

Read and interpret error messages.

And solve the problems in your code.

There are many different types of programming errors.

In this extension, you will learn about syntax errors.

Syntax is the order of words in a language.

When we speak English, for example, we follow specific rules of syntax.

It is difficult to understand a sentence when the words aren’t in the expected order, but we use reasoning and our own experiences to reorder and interpret the message.

In programming, syntax errors happen when you create code that doesn't follow the rules of the programming language.

Code that doesn’t follow the rules won’t make sense to the computer.

Unlike humans, computers lack the reasoning ability to understand a sentence with grammar or spelling errors.

To begin troubleshooting error messages, open your progress bar presentation.

Look at the code you used to build your progress bar.

It begins with an open curly brace and ends with a closed curly brace.

These braces tell the computer when to start a function and when to end it.

Delete the final closing curly brace.

You just created a syntax error.

Next, save your function and read the error message.

It lets you know which line has the mistake, and highlights the line.

Now, replace the closing curly brace, and save your code again.

Great! No errors.

Another common syntax error is a misspelling.

For instance, what if you typed the words “Solid Fill” to color in the shapes in your progress bar, but forgot the second “L” in “Fill”?

Create that mistake.

Then save and run your function.

Read the error message.

It’s a type error.

Find which line of code contains the error, and correct it.

Save and run the function.

No errors.

Nice work! Not all programming problems are clear and simple to fix.

If you are unable to troubleshoot an error by yourself, ask a neighbor for help.

Or, search the internet for the error message.

Lots of people have probably encountered the same issue, and you can often find the solution online.

The programming community shares common errors and solutions so others can learn from them.

This is a great part of learning how to program! And, to challenge yourself further, ask a neighbor or your teacher to create an error in your code while you aren’t looking.

See if you can figure out how to fix the problem they created.

Now, it’s your turn: Open your presentation from Google Drive.

Delete the final closing curly brace, and save your function.

Read the error message, and fix the problem.

Misspell the word Fill, and save and run your function.

And read the error message, and fix the problem.

When you’re programming, it’s helpful to try out different variables to see how they change your project.

For example, you might want to try several different colors from the RGB values chart for your progress bar.

If you test a different color and don’t like the results, it can be difficult to go back to the original version of the code.

Instead, make a copy of your code to try out new variables and preserve your original code.

In this extension, you will make a copy of the code and then change the color in your progress bar.

To begin, open a new window in your browser and search for an RGB color picker.

Select a different color for your progress bar.

Leave the browser window open so you can see the RGB values when you go back to your script editor.

Open your presentation from Drive.

Open the script editor.

Then, make a copy.

In the new version, replace the RGB values with the values of your new color choice.

Save and run your function.

Then, return to your presentation to see how the new color looks in your progress bar.

If you prefer the new color, great! If not, delete the new code.

Then, save and run your original function again to go back to the first color you selected.

Repeat the steps to try out more colors for your progress bar, if you’d like.

Good job! In the future, you can make a copy of your code to test other variables.

Now, it’s your turn: Choose a new color for your progress bar.

Make a copy of your code in the script editor for your presentation.

Save and run your function.

And choose whether to keep the new color or delete the copy and use the original instead.

In the main lesson, you created a progress bar in a presentation to show an audience how far along they are in the presentation.

Progress bars are also useful on other projects.

When filling out a form, completing a survey, or taking a quiz, it’s helpful and motivating to have a progress bar so you know how far along you are in the process.

In this extension, you will make your surveys, quizzes, and forms more user-friendly by showing a progress bar.

With Google Forms, you can turn on a progress bar automatically.

You don’t have to program it yourself.

The developers of the app have already done the programming work for you.

To start, open a new tab in your browser and go to forms.google.com Select a new, blank form.

Open the settings.

Then, select the presentation tab.

Select the option to show a progress bar and save the changes.

Then, add a new section.

Continue adding sections until you have at least five.

It’s okay to leave the questions blank.

Preview how your progress bar will look to respondents.

Great job! Your form now has a progress bar that clearly indicates how many pages of questions are finished and how many are still left to complete.

Have fun putting progress bars to work in your forms, quizzes, and surveys! Now, it’s your turn: Open Google Forms and create a new form.

Open the settings, and select the presentation tab.

Choose to show a progress bar.

Add at least five sections to your survey.

And preview your progress bar.

In the main lesson, you used the fill color tool to choose a color for your progress bar.

You can also assign a color using a hex color code.

A hex color code is a six-digit code made of numbers and letters.

It is used to specify colors on a screen.

Hex color codes are useful because they...

produce precise, standard colors and make colors look consistent across all different browsers.

In this extension, you will change a font color in your presentation using a hex color code.

To begin, start a new, blank presentation.

Add a title and subtitle to the first slide.

Then, open a new tab in your browser and do an internet search for hex color codes.

Choose a color for your presentation title.

Copy the hex color code.

Return to your presentation, and select the title.

Open the text color menu and choose Custom.

Paste your hex color code over the value.

Nice work! You adjusted the title font color with a hex code.

Go back to the color picker, and select a second color for the subtitle.

Copy the hex code.

Return to your presentation and select the subtitle.

Use the custom text color menu to paste in the new hex code.

Great job! Keep trying out different colors for your presentation by selecting different hex color codes from the color picker.

Now, it’s your turn: Open a new presentation in Google Slides.

Add a title and subtitle to your presentation.

Use a color picker to choose a color for the title.

In the Text color tool, choose custom, and paste in the hex color code.

And repeat the process for your subtitle.