In the previous videos, you added shapes to each of your slides.
In this video, you will color in the shapes to indicate progress.
For example, when you are on the first slide, only the first shape will be colored in.
When you are on the third slide, the first three shapes will be colored in.
To create this process, you’ll use a conditional statement.
A conditional statement runs code if something is true, or a particular condition has been met.
In this case, the color of the shape will change if J -- which keeps count of the shapes -- is less than or equal to i, which keeps count of the slides.
To start, choose the color you want to use.
The color you select will have RGB values.
RGB is a system for representing colors on a computer display.
RGB stands for red, green, and blue, which can be combined to make any color in the spectrum.
To find the values of a color for your progress bar, do a web search.
Open another tab in your browser.
Then, go to Google dot com.
Search for RGB values.
Select a website with an RGB color picker tool.
Click on different colors to see their RGB values.
Choose the color you want to use in your progress bar.
Then, return to the script editor.
You can either write down the RGB values of your color, or leave the color picker website open in another browser tab.
Now, press enter after the code that adds the shape.
Type if, space, open parenthesis J, is less than or equal to i, a closed parenthesis, and an open curly brace.
Now, store the shapes on the slide within the conditional.
Press enter, and on the following line, type V-A-R shapes, equals slides, open bracket i, closed bracket.
Then, type a period, and select get shapes from the menu.
Add a semicolon.
On the next line, get the last shape drawn.
Type V-A-R last shape, space, equals, space, shapes, open bracket shapes.
Type a period, and choose length.
Then, type minus one, a closed bracket, and a semicolon.
To fill your shape with the color you selected from the RGB color picker, go to the next line.
Type last shape then a period, and select get fill.
Type another period, and select set solid fill.
Choose the option for red, green, and blue.
Replace the words red, green, and blue with the RGB values for the color you chose.
Make sure your code keeps the commas and spaces between each value.
Press enter, and add one more closed curly brace to complete your code.
Save and run your program.
Now, take a look at your presentation.
Click through all five slides to watch your shape become filled with color.
You now have a progress bar that adds color to a shape with each slide you advance.
Don’t worry if you get an error message -- you just typed a lot of code!
Take a moment to read the error message, compare your code to what’s on screen, and troubleshoot the problem.
Now, it’s your turn: search for rgb values, and use the color picker to choose a color, program a conditional statement, replace the words red, green, and blue with your color’s rgb values, save and run your program, and troubleshoot any errors.
1. Introduction to Program a Progress Bar in Google Slides
2. Program a Variable
3. Program a Shape
4. Use a Loop to Draw Multiple Shapes
5. Use a Loop to Add Shapes to Every Slide
6. Program a Conditional Statement
7. Program a Progress Bar in Google Slides Wrap-Up
9. Extensions: Program a Progress Bar
- Search for RGB values, and use the color picker to choose a color.
- Program a conditional statement.
- Replace the words red, green, and blue with your color’s RGB values.
- Save and run your program.
- Troubleshoot any errors.