Welcome to Hedy! ### Welcome to Hedy! Welcome to the Hedy programming language! Teachers, please press S on your keyboard to see the speakersnotes. <aside class="notes">Ask your students to write down some words that they associate with programming. Do a quick round to hear the answers.</aside>

Programming ### Programming Programming is giving instructions to a computer, using the language of the computer. Such a language is called a "programming language". <aside class="notes">Unfortunately, computers don't understand normal people language, like English, but they speak in their own language. Don't panic, you don't have to type in a string of zeros and ones, but we are going to learn to give the computer instructions in a programming language.</aside>

Programming Language ### Programming Language Maybe you already know some programming languages? Some examples are: * Scratch * Python * HTML <aside class="notes">Ask the students about their own programming experience, or if they perhaps know someone who works in IT.</aside>

Programming ### Programming If you can program, you can do many cool things: * Build interactive stories * Create computer drawings and draw these on paper or fabric * Build your own apps to use on your phone <aside class="notes">This may sound really difficult, but we are going to learn programming step-by-step.</aside>

Programming in Hedy ### Programming in Hedy In Hedy we use special 'keywords', like `print`. <iframe class="fragment" src="/render_code/0?code=print%20Welcome%20to%20Hedy%21"></iframe> <aside class="notes">Let's take a look at Hedy. In Hedy we use code words (keywords) to give the computer an instruction. We type these instructions in the left screen. This is what we call code, or a program.</aside>

Programming in Hedy ### Programming in Hedy Keywords will be shown in pink. <iframe class="fragment" src="/render_code/0?code=print%20Welcome%20to%20Hedy%21"></iframe> <aside class="notes">As you can see, the code words (or keywords) turn pink if you use them correctly.</aside>

Programming in Hedy ### Programming in Hedy We start the code with the Run code button underneath the code. <iframe class="fragment" src="/render_code/0?code=print%20Welcome%20to%20Hedy%21"></iframe> <aside class="notes">To make the computer follow the instructions you have to 'run' the code. Press the button to show the students what happens.</aside>

Programming in Hedy ### Programming in Hedy Output appears on the right-hand side. <iframe class="fragment" src="/render_code/0?code=print%20Welcome%20to%20Hedy%21"></iframe> <aside class="notes">When we run the code, output appears. Output is the result of running our program. The right screen where the output appears, is called the output screen.</aside>

Programming in Hedy ### Programming in Hedy The output can also be a drawing. <iframe class="fragment" src="/render_code/0?code=forward%20100%0Aturn%20left"></iframe> <aside class="notes">In Hedy we don't only make text appear, but output can also be a drawing, or....</aside>

Programming in Hedy ### Programming in Hedy Or the output can be music! <iframe class="fragment" src="/render_code/0?code=play%20C4%0Aplay%20D4%0Aplay%20E4"></iframe> <aside class="notes">Let's go to the first level to get started!</aside>

Go to the next adventure using the menu ### Go to the next adventure using the menu Use the menu to move on to the next adventure or next level. <iframe class="fragment" src="/hedy/1"></iframe> <aside class="notes">Sometimes students don't know how to go to the next adventure, show them in Hedy how to do so.</aside>

Programming in Hedy ### Programming in Hedy Sometimes you make a mistake in your code. You can use the debugger to find the mistake (bug) and fix it. <iframe class="fragment" src="/render_code/0?code=print%20Debugging%20means%20finding%20a%20mistake%0Aprint%20You%20can%20run%20the%20code%20line-by-line%0Aprint%20This%20makes%20it%20easy%20to%20find%20the%20bug%0Aprint%20And%20fix%20it%21%0Aprint%20Or%20click%20on%20eye%20icon%20to%20disable%20a%20line%20of%20code"></iframe> <aside class="notes">**How to debug a code** Watch this <a href="https://www.youtube.com/watch?v=jwitgommeRY;t=2s" target="_blank">video</a> to see how the debugger works, or read the instructions. Of course you could just look at the code and find the mistakes yourself, but we also have some tools to help you. Click on the ladybug 🐞 button beneath your input field. This starts the **debugger**. With the debugger you can run a program line-by-line. If there is a big mistake in your code (like in the debugging adventures) the debugger will tell you to fix the big mistakes first. Read the error messages to find out how to fix the mistakes. If the major mistakes are gone, the debugger will run your program line by line. To run the next line, click on the ⏭️button on the right. Is the line doing what it's supposed to do? Great! Click the button again to run the next line until your program is working perfectly. To stop the debugger, click on the 🛑 button in the middle. To start running your code from the top, click the 🔁 button on the left. Did you get stuck on a line of code and do you want to try your program without that line? You can disable a line of code by clicking on the eye icon in front of the line number. The line will be crossed out. The line will now be skipped when running the code. To reactivate the line, simply click the eye icon and the line won't be skipped anymore.</aside>