Grade Levels: 3-5, 6-8

This lesson plan, adaptable for grades 4-8, features Creative Coding, a project-based approach to coding that prompts students to show what they know about a topic by using BrainPOP assets. This lesson focuses specifically on the Newscast project in which students use JavaScript to create a scrolling news headline to correspond with a video.  

 

Lesson Plan Common Core State Standards Alignments

Students will:

  1. Program in JavaScript
  2. Apply knowledge of loops and functions to create a scrolling news headline
  3. Understand that a conditional is code that checks if something is true
  4. Use conditionals to reset the position if the text goes off the screen
  5. Apply their knowledge of a BrainPOP topic

Materials:

Vocabulary:

conditionals, functions, loops, operators, properties, sequence, strings, variables

Preparation:

Preview the Newscast tutorial screencast.

Preview and play with the Newscast project. To access, click the Creative Coding button on a BrainPOP topic page. NOTE: You must be logged in with My BrainPOP on individual accounts.

For help getting started and other support resources, such as differentiation and collaboration tips, review the Creative Coding Teaching Resources.

Preview the associated BrainPOP topic movie.

Lesson Procedure:

  1. Discuss with students the function or purpose of a newscast. They should understand that newscasts are useful for making important announcements and communicating a specific message to the public. A newscast can be about current events, history, discoveries, controversies, or anything else that is newsworthy. For the purposes of this project, they can also do a public service announcement (PSA).
  2. Tell students that today they will code a scrolling headline for a newscast using an IF statement--or conditionals--to reset the headlines position on the screen.  Explain the concept of conditionals by giving the following explanation: 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.

    Tell students that 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. Share the following code on the board:

    if (x == 1){

    // do something

    };

    Point out to students that the code for a conditional may remind them 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.

  3. Display the Newscast project for the topic you’re studying on the whiteboard. Read aloud the prompt at the top of the screen. Explain that there is more than one way to respond to the prompt, and that they should be as creative as they can.
  4. Before beginning their Newscast projects, show the related BrainPOP movie on the whiteboard for the whole class to watch.
  5. Working individually or in pairs, have students review the video options in the assets panel on the lower right. While they’re deciding, distribute the Newscast Planning Sheet.
  6. After selecting their video and graphics, have students flip over the planning sheet and  and write ideas for the headline that will scroll over the video. You might want to have students work in pairs to come up with ideas together.

    As they plan, have them consider what would be a newsworthy event that they would want to report about? You can have students report on real events, or for some topics, you might want to ask them to come up with their own event (even if it hasn’t happened yet. For example, they can make a “future newscast” about finding intelligent life on Mars.) You might also challenge them to create a public service announcement, such as “Bicycle Safety 101: Wear Your Helmet.”

    Once students decide on the headline, they can then flip to the front and start sketching out how their text will fit in with the video.

  7. If necessary, you can model the first few steps of the project on the whiteboard as students follow along at their computers or devices. Circulate as students work, providing support as needed.
  8. After everyone has completed and shared their Newscast projects, come together as a class and discuss these questions: 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) Ask students how they would change a conditional to make it do the opposite.  Encourage this discussion, then share this example:

    The opposite of

    if (clock < 12){ dance(); } Would be

    if (clock > 12){ runHome(); }

    Then ask, what will the code do if (clock == 12)? How could you change the code to include this case? (Nothing will happen! You can change clock > 12 to clock <= 12 to include 12)

Extension Activities:

After coding their Newscast projects, have students take on the role of news reporters. First, each student can write a brief news report script. Then, you can project each student’s project up on an interactive whiteboard and invite them come up and act as the reporter while their newscast plays on a loop behind them. Alternatively, have each student be the news reporter for a classmate’s newscast instead of their own.

What’s a news station without a logo? Challenge students to create a logo using code for their news station using shapes and text. Students can go to the “drawing shapes” section in the “Need Help?” tab and type the code for creating rectangles and/or circles into the code editor. They can customize the size and style of the shapes, and then add text over their shapes as well by clicking on the “text” block in the effects tab. Encourage them to customize their text, too!