Vidcode: Code the News!

Educator Resources


Start Student-led Hour of Code tutorial


  • Easy enough for beginners to access
  • Ramps up slowly
  • Spiral design
  • Promotes “deep learning”
  • Promotes positive identity, role models
  • Math should be prominent, but not annoying.

The activity: 
It’s the HOC News! Videos and graphics are all about tech, diversity, kids, and coding. Finished projects can be uploaded to school website as the report on the HOC itself. Teachers can encourage students to use the news to report on what they learned, or a statistic for their school. “Breaking News: 400 students at Roosevelt participate in the Hour of Code”

Chrome is the recommended browser to use for this Hour of Code.

Select an unadorned newscast video, then:
1. Add the text and graphics to it to make it look like a real newscast (Or the Daily Show)

  • Headlines (text, then rect)
  • Inset Graphics (graphics, then rect, then text)
  • Station Logo (shapes & text)

2. Animate each of these using a loop            

  • Scrolling headline
  • Logo fades in
  • Graphics that change using currentTime

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)



Guides & Lesson plans

Sample Code

// Headline text
var text_box = rect(0,300,640,60, "black");
var my_text = text("Breaking News: Grumpy Cat says Go Away.",640,300);
my_text.color = "yellow";
my_text.size = 40;

// Station logo
var logo_circle = circle(40,40,30,"pink", "black", 4);
var logo_V = text("V", 22,6);
logo_V.color = "teal";
var logo_T = text("T", 23,6);
logo_T.color = "black";
logo_circle.opacity = 0;
logo_V.opacity = 0;
logo_T.opacity = 0;

// Inset graphic
var graphic_box = rect(440,50,170,200,"gray", "white",4);
var inset = graphic("meme-1.png");
inset.scale = 0.5;
inset.x = 450;
inset.y = 60;

//scrolling text
my_text.x -= 20;

// logo fade-in
logo_circle.opacity += 0.1;
logo_V.opacity += 0.1;
logo_T.opacity += 0.1;
 }, 1);

//switch out graphic
if(movie.currentTime > 6){
inset.source = "star.png";
  else if(movie.currentTime > 3){
  inset.source = "meme-1.png";
  inset.source = "create.png";
}, 1);


Lesson Plan 1
DownloaD PDF

Big Idea - You are a programmer! 
Create a effects for a news video by using JavaScript functions. Learn the syntax of calling a function, and how to change its arguments to get different effects.

Time: 60-90 minutes

  • 10 minutes background
  • 45-60 minutes coding
  • 10 minutes sharing
  • 5 minutes reflection


Background (10 minutes)

The basics of JavaScript

JavaScript is a programming language. Since computers don't speak human languages like English or Spanish, we use programming languages to talk to them. JavaScript is the programming language that we can use to talk directly to web pages.  

Functions are the main way of getting things done in JavaScript. A function is an action that has a name. Functions are written with parentheses. 

text("hello", 5, 10);

Some functions need one or more arguments inside the parentheses. This tells the function extra information about what to do. 

The text function takes three arguments: text, x position and y position.  The order matters!

Teacher Reference:

Code Challenge (20-35 minutes)
Have students follow the “Hour of Code” tutorial.  They should read the instructions on the left and carry them out.  When they’ve followed all the instructions on one panel, click the button to move on to the next part.

Circulate throughout the room to troubleshoot and keep students moving through the instructions.

Sharing (10 minutes)
Publish all the projects and look at them all together. Whose stands out? Whose looks like yours? 

Stand up and go talk to someone whose project is similar to yours. 
Now go talk to someone whose project is different. 
Talk about why you chose those features, and what they say about your personality.

Imagine a world in which everyone made the same choices. Would that world be interesting? Diversity makes the world better!

Reflection: (5 minutes)
Who’s a programmer? You are! 
Does code look like you expected?  Is it easy, hard, straightforward, confusing?
What is a function? (An action that has a name.)
What is an argument?  (More information about what or how much the function should do.)
Does the order of the arguments matter? (Yes!)



Lesson Plan 2
Download PDF

Final Feature - Reviewing Conditionals

Conditionals are the final, and most difficult part of this project. Use the guide below to expand your students' introduction to them in this Hour of Code.

Big Idea - A conditional checks IF something is true. 
Add a graphic to your video. Use an IF statement to switch the source of the graphic. 
Time 60-90 minutes

  • 10 minutes background
  • 60 minutes coding
  • 5 minutes sharing
  • 5 minutes reflection

Background (10 minutes)
Cinderella’s stepmother told her, “IF you finish your chores, THEN you can go to the ball.” This is an example of an if-statement, or conditional. It means, “You can go to the ball ON THE CONDITION that you finish your chores.”

As a class, think of other rules in your life or stories that have IF...THEN. Write them as sentences on the board.

Conditions come up in code all the time. We use them to check IF a certain thing is true, and THEN (and only then) do a particular action. 

if (x = 1){
// do something

The code for a conditional may remind you of a loop. “If” is the keyword that starts the conditional. Inside parentheses you write the thing you’re checking. It has to be an equation that can be true or false (like a yes/no question). Inside the curly braces you put the code that you want to run if your equation is true. You can write as many lines of code as you want inside the curly braces, and you have to end the whole thing with a semicolon.  

We have a whole set of new operators that compare numbers: 

  • == “Equals Equals” if two numbers are equal
  • > “Greater Than” if the first number is greater than the second
  • < “Less Than” if the first number is less than the second
  • >= “Greater Than or Equal To” if the first number is greater than or equal to the second
  • <= “Less Than or Equal To” if the first number is less than or equal to the second
  • != “Not Equals” if two numbers are different

Practice using this syntax to rewrite the IF...THEN sentences from earlier in a JavaScript style. 

if (chores == done){

Code Challenge (60 minutes)
Have the students complete the Hour of Code tutorial with a focus on the final two features (switching out graphics) in the “Hour of Code” project. 

Sample Solution

//switch out graphic
if(movie.currentTime > 6){
inset.source = "star.png";
  else if(movie.currentTime > 3){
  inset.source = "meme-1.png";
  inset.source = "create.png";
}, 1);

Sharing (5 minutes)
Take turns presenting finished projects to the class. Explain how your conditional works. What are you checking? What do you do if that’s true?

Reflection (5 minutes)
What is a conditional? (code that checks if something is true)
How did we use conditionals today? (to reset the position IF the text went off the edge)
Why did we put the conditional inside a loop? (to make it keep checking over and over)
Are you impressed that your code is looking more advanced? (Pat on the back, programmer!)





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


CT.L2-01 - Use the basic steps in algorithmic problem-solving to design solutions (e.g., problem statement and exploration, examination of sample instances, design, implementing a solution, testing, evaluation).
CT.L2-03 - Define an algorithm as a sequence of instructions that can be processed by a computer.
CT.L2-04 - Evaluate ways that different algorithms may be used to solve the same problem.
CT.L2-07 - Represent data in a variety of ways including text, sounds, pictures, and numbers.
CT.L2-12 - Use abstraction to decompose a problem into sub problems.
CT.L3A-01 - Use predefined functions and parameters, classes and methods to divide a complex problem into simpler parts.
CT.L3A-11 -Describe how computation shares features with art and music by translating human intention into an artifact.
CL.L2-01 - Apply productivity/ multimedia tools and peripherals to group collaboration and support learning throughout the curriculum.
CL.L2-02 -  Collaboratively design, develop, publish, and present products (e.g., videos, podcasts, websites) using technology resources that demonstrate and communicate curriculum concepts.
CL.L2-03 - Collaborate with peers, experts, and others using collaborative practices such as pair programming, working in project teams, and participating in group active learning activities.
CL.L2-04 - Exhibit dispositions necessary for collaboration: providing useful feedback, integrating feedback, understanding and accepting multiple perspectives, socialization.
CL.L3A-01 - Work in a team to design and develop a software artifact.
CL.L3A-02 - Use collaborative tools to communicate with project team members (e.g., discussion threads, wikis, blogs, version control, etc.).
CL.L3A-03 - Describe how computing enhances traditional forms and enables new forms of experience, expression, communication, and collaboration.
CL.L3B-01 - Use project collaboration tools, version control systems, and Integrated Development Environments (IDEs) while working on a collaborative software project.
CL.L3B-03 - Evaluate programs written by others for readability and usability.
CPP.L2-07 - Identify interdisciplinary careers that are enhanced by computer science.
CD.L3A-04 - Compare various forms of input and output.


What is Computer Science Education Week?

Computer Science Education Week is a chance to inform students about and celebrate computer science (CS). Only 5% of schools nation-wide offer students the opportunity to take a rigorous CS course.  CS Education Week is meant to provide a time for schools, teachers, and communities to set aside a small amount of time devoted to exposing students to a greater realm of CS opportunities than they experience every day. For students in a CS class, CS Education Week is a way to enrich the course content with information from colleges and companies, and where students can meet professionals from outside the school who use CS to solve problems.


Teachers, sign up for Hour of Code News & Updates

(not required)