Vidcode: Slideshow

Vidcode Educator Resource

Big Idea

Learn how to create your own DIY slideshow with code - just like the engineers of PowerPoint!

Principles

• Easy enough for beginners to access

• Ramps up slowly

• Spiral design

• Promotes “deep learning”

• Promotes positive identity, role models

• Digital Citizanship

activity 

Get ready to make an awesome slideshow from scratch with code. Students will learn about core computer programming concepts such as timers, arrays, and sequencing. Additionally, digital citizenship is easily woven into each project concept.

PROJECT

STEP ONE

Create a slideshow for your own research project. For example, you can start by researching a topic such as you favorite museum on the creative commons site.

STEP TWO

Next, navigate to the ‘Slideshow’ tutorial (link). Follow the self-guided instructions and upload the images you found on the creative commons site.

STEP THREE

Go above and beyond! Add the text and graphics to it to make it look like a real powerpoint slideshow

• Headlines (text, then rect)

• Inset Graphics (graphics, then rect, then text)

• Station Logo (shapes & text)

Reflection

Write an answer to the reflection questions outlined below in the description of your exported project. Instructions: once you are finished with your coding sketch, press the ‘Submit’ -> here you will have an opportunity to write a title and a description.

Reflection questions:

How is this different from Keynote or Google Slides? What was dicult about this activity?
How do you overcome struggle?

Core skills (for deep learning)

• Creating objects using variables

• Setting an object’s properties

• Dot notation

• Assignment

• Loops (and intervals)

• Modifying a property by incrementing, decrementing, or assignment.

• Conditionals (evaluating expressions)

Extensions

Invite students to complete the tutorial again with their own images. Search for Creative Commons licensed images using the “Usage Rights” option in Google Images, or use photosforclass.com.

Extra Challenges

Before coding, make a sketch of what the project will look like.
Include one bonus element, like a box, border, lter, second text object, adjustment of rotation or opacity.

Sample Code

Sample Solution (https://app.vidcode.io/share/ISonYB2ZzO)

//slideshow project
movie = stopmotion();
movie.frames = ["mj_working.jpg", "mj_earth.jpg", "mj_floating.jpg"];
movie.interval = 800:
var title = text("Dr. Mae Jemison, Astronaut");
title.font = "Oswald";
title.x = 40;
title.y = 300;
title.color = "pink";

Standards

CSTA Standards

CSTA 1B-AP-09 Create programs that use variables to store and modify data.
CSTA 1B-AP-15 Test and debug (identify and x errors) a program or algorithm to ensure it runs as intended.

CSTA 1B-IC-21 Use public domain or creative commons media, and refrain from copying or using material created by others without permission.

Common Core Standards for Mathematical Practice
CCSS.MATH.PRACTICE.MP1 Make sense of problems and persevere in solving them. CCSS.MATH.PRACTICE.MP2 Reason abstractly and quantitatively. CCSS.MATH.PRACTICE.MP3 Construct viable arguments and critique the reasoning of others. 
CCSS.MATH.PRACTICE.MP4 Model with mathematics.
CCSS.MATH.PRACTICE.MP5 Use appropriate tools strategically.
CCSS.MATH.PRACTICE.MP6 Attend to precision.
CCSS.MATH.PRACTICE.MP7 Look for and make use of structure. CCSS.MATH.PRACTICE.MP8 Look for and express regularity in repeated reasoning.

Next Generation Science Standards for Engineering Practices
Practice 1 Defining problems
Practice 2 Developing and using models
Practice 3 Planning and carrying out investigations
Practice 4 Analyzing and interpreting data
Practice 5 Using mathematics and computational thinking
Practice 6 Constructing explanations and designing solutions
Practice 7 Engaging in argument from evidence
Practice 8 Obtaining, evaluating, and communicating information

Sign up to our Hour of Code Newsletter for additional resources and updates!