Vidcode: Code the News!
Educator Resources
60-120 minutes
JavaScript
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?
Sign up to our Hour of Code Newsletter for additional resources and updates!