Vidcode: Climate Clock

Educator Resource

60-90 minutes

JavaScript

STUDENTS: START YOUR HOUR OF CODE TUTORIAL HERE

“The Climate Clock counts down to a specific day in the future. After this day human-induced climate change will have caused a temperature increase of 1.5℃, which is irreversible, and has bad consequences for everyone. We know this because of the data on the current rate of emissions, and the level of human-induced warming we’re already seeing.

How long will it be before the remaining allowable emissions for 1.5℃ are used up?”

- theconversation.com

The Activity

The Climate Clock project, created by the Human Impact Lab of Concordia University and variously implemented, is a culturally relevant intersection of math, environmental science, and computer science. It exists in multiple physical and digital manifestations around the world, from the portable version carried by Greta Thunberg to the live installation in Berlin. 

In this Hour of Code activity, students will be guided through the construction of their own climate clock that they can share with friends and family, post on social media, and embed in their websites. 

They will engage with objects, properties, variables, functions, and loops, and customize their message to convey their message for the world and their hopes for the future.

Big Idea: The projects you make with code spread a message and make a difference!

  • CSTA 1B.DA.07 Use data to highlight or propose cause-and-effect relationships, predict outcomes, or communicate an idea.
    CSTA 1B.IC.18 Discuss computing technologies that have changed the world, and express how those technologies influence, and are influenced by, cultural practices.

    CSTA 3-5.AP.08 Compare and refine multiple algorithms for the same task and determine which is the most appropriate.

    CSTA 6-8.AP.11 Create clearly named variables that store data, and perform operations on their contents.

    CSTA 6-8.AP.13 Decompose problems and subproblems into parts to facilitate the design, implementation, and review of programs.

    CSTA 6-8.AP.16
    Incorporate existing code, media, and libraries into original programs, and give attribution.

    CSTA 6-8.AP.19
    Document programs in order to make them easier to follow, test, and debug.

    CSTA 9-10.AP.13
    Create prototypes that use algorithms to solve computational problems by leveraging prior student knowledge and personal interests.

Lesson plan

Time: 90 minutes

1 hour:

  • 10 minutes background

  • 60 minutes coding

  • 10 minutes sharing

  • 10 minutes reflection

Background (10 minutes)

From The Mercator Institute, Berlin: “Global economic growth has led to the overuse of natural resources like the atmosphere, land and forests” – greenhouse gas emissions and deforestation have changed the balance of the global climate. 

  • As a species we emit too much carbon dioxide gas that breaks down our atmosphere, and there are too few forests to absorb the excess carbon dioxide.

The Mercator Institute goes on to say about things like the atmosphere or the land, “these special assets are called global commons, because they need worldwide cooperation for their sustainable use”. 

  • That cooperation isn’t happening yet, because of the following question: whose responsibility is The Commons?

  • Big things like companies and countries change the atmosphere, land, and forests a lot more than individual people. 

  • But companies and countries are only responsible for taking care of certain groups of people; their citizens, their employees, the people who invest money in the company – not all people, not The Commons. 

  • Next to the scientific and technological difficulties in stopping climate change, the difficulties between groups of people with competing interests are some of the most difficult. 

  • The study of these difficulties is called economics, the conflicts and cooperation that arise from these difficulties is called politics. 

  • Things like The Climate Clock are important and helpful because they remind people that something needs to be done. We need a change, and soon.

    • Humans are very adaptable and creative, and also highly social. We care for each other, we learn. Climate change is a problem that we can solve.

There are many examples of climate clocks:

Code Challenge (60 minutes)

In this lesson students will be making their own climate clock by using JavaScript’s built-in Date object to keep track of years, months, days, hours, seconds, and even milliseconds. 

  • Date(); is a special function in JavaScript, without any inputs it is equal to the current date and time.

  • new Date(); creates a new Date object, which then can be given a name and referenced as a variable, e.g. var my_date = new Date();

  • To express a full date with years, months, and days in an equivalent format, we can pass the appropriate values for each measure into the Date(); function as properties

  • For example: new Date(2032, 10, 25); corresponds to 11/25/2032

  • getTime() returns the number of milliseconds that have passed since January 1st 1970

    • This is another example of a special function in JavaScript

    • It’s useful for keeping a millisecond-accurate count between any two Date objects

Modulo

The math behind keeping these units straight involves learning about a new operator (like divide, add, multiply, or subtract), called the Modulo. 

    • The symbol of Modulo is the percentage sign: %

    • The Modulo takes a division problem and returns the remainder 

    • This looks like: remainder = dividend % (say “modulo”) divisor;

    • Another example 8 % 3 = 2 

      • 3 goes into 8 two times, with a remainder of 2 (or, 8 - 2*3 = 2)

Displaying the Climate Clock

Students then learn to make a dynamic graphic, which constantly updates with a Loop to display the accurate countdown. 

There is then an opportunity to customize the appearance of the graphic by changing its properties.

  • //November 25, 2032

    movie = video();

    movie.source = "night-stars.mp4";

    var last_day = new Date(2032, 10, 25, 14, 45, 46).getTime();

    var title = text("Time Left to Act:");

    title.size = 30;

    title.y = 50;

    title.x = 20;

    var clock = text();

    clock.color = "#7DF0E6";

    clock.size = 70;

    clock.x = 10;

    clock.y = 100;

    repeat(function() {

    var my_date = new Date().getTime();

    var time_left = last_day - my_date;

    var second = Math.floor(time_left / 1000);

    var minute = Math.floor(second / 60);

    second = second % 60;

    var hour = Math.floor(minute / 60);

    minute = minute % 60;

    var day = Math.floor(hour / 24);

    hour = hour % 24;

    var year = Math.floor(day/365);

    day = day % 365;

    clock.message = year + " Y " + day + " D " + hour + ":" + minute + ":" + second;

    }, 5);

Sharing (10 minutes)

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

  • Was the exercise more of a challenge or less of a challenge than you expected?

    • What parts were the most challenging?

  • What is some other information or data that would fit in well with this Climate Clock? 

    • What else do you think it’s important to keep track of? 

    • Why do you think these things relate, and how would you show their relationship?

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?

  • How can engaging in work like this make a difference?

  • What things can we and can’t we do as individuals?

Screen Shot 2020-09-30 at 10.14.26 PM.png

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