Vidcode: Super-Secret Coded Message

Vidcode Educator Resourse

60 minutes

JavaScript


STUDENTS: START CODING HERE

The Activity

Creating your own functions with parameters can make your code easier to reuse!


Lesson Plan

Time: 45-60 minutes

  • 10 minutes background

  • 20-35 minutes coding

  • 10 minutes sharing

  • 5 minutes reflection

Background

Review:

  • Strings

  • Event Listeners

  • Functions

You know that when you call certain functions, you can specify what arguments it takes by typing them in the parentheses. When you create your own functions you can decide what arguments your function will take by defining parameters.

If you define parameters for your functions, you can enter any value to the function when you call it as long as the value is the correct data type (string, number, array, etc.)

Creating your own functions with arguments make your code more reusable. Instead of creating a function like this:

function greeting(){
  myText.message = "Hello, " + myInput1.message;
}
You can write it like this:
function greeting(name){
  myText.message = "Hello, " + name;
}

Since you set a parameter, the second function could be used with an argument like "Emily" or myInput1.message or myInput2.message. This means the code is more reusable!

When you look up functions in the Vidcode reference, it actually lists their parameters! That's why the code doesn't work right away when you copy and paste it. You have to put values in as arguments for the code to work!

Another important thing you will do in this activity is use event listeners on shapes. You can have an event listener that only responds when you click on a specific shape. This means you can make your code do different things when a user clicks on different parts of the video. These can be helpful when taking values from two text inputs!

Code Challenge

Students will create code that takes a word and converts it into numbers and code that takes numbers and converts them into a word. Students can use the functions they create to transmit messages in a secret code!

Sample Solution

https://www.vidcode.com/share/fQmO1EFycF

Sharing

Share your project with your classmates. See if you can figure out how your classmates' code works without looking at the JavaScript!

Reflection

Computers use can perform hundreds of tasks in a matter of milliseconds. How could passing values through hundreds of steps in the process of encoding be useful for encryption?

jason-leung-mZNRsYE9Qi4-unsplash.jpg