Vidcode: Code the News!

Vidcode Educator Resource

60-120 minutes

JavaScript

STUDENTS: START YOUR HOUR OF CODE TUTORIAL HERE

Principles

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”

Things to do

1. Select an unadorned newscast video

2. 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)

3. 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)

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;

repeat(function(){ 
  //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);

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

Standards

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

CSTA
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.