Vidcode: Code the News!

Educator Resources

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”

Big Idea: You are a 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

    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.

LESSON PLAN

Time: 60-90 minutes

  • 10 minutes background

  • 45-60 minutes coding

  • 10 minutes sharing

  • 10 minutes reflection

Background (10 minutes)

Code Challenge (45-60 minutes)

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

  • // 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);

Sharing (10 minutes)

Be prepared to share what you created and share/explain how it worked.

Reflection (10 minutes)

  • What things did other students create that you'd like to know how to do?

  • What things did you create that you are proud of figuring out?

vidcode_520x390_news.jpg

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