Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

📜 Slides update #5918

Draft
wants to merge 12 commits into
base: main
Choose a base branch
from
Draft

📜 Slides update #5918

Changes from 2 commits
Commits
Show all changes
12 commits
Select commit Hold shift + click to select a range
dc17ca1
level 0 and 1
MarleenGilsing Nov 7, 2024
ca281b1
level 2
MarleenGilsing Nov 7, 2024
bfff607
Annelies' comments
MarleenGilsing Dec 6, 2024
a18876b
Level 3 slides update
MarleenGilsing Dec 6, 2024
4d7f8d7
adds Learning objectives from the workbook
MarleenGilsing Dec 6, 2024
f6ecbdc
Matching the workbook exercises with the slides
MarleenGilsing Dec 6, 2024
8490d54
debugging in level 0
MarleenGilsing Dec 6, 2024
7b7f035
Level 5
MarleenGilsing Dec 6, 2024
2494fcf
level 6
MarleenGilsing Dec 11, 2024
13865c2
small fix
MarleenGilsing Dec 11, 2024
29b68dc
Level 7
MarleenGilsing Dec 11, 2024
6526e24
Level 8
MarleenGilsing Dec 11, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
249 changes: 221 additions & 28 deletions content/slides/en.yaml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,12 +3,17 @@ levels:
1:
header: Welcome to Hedy!
text: Hedy is a programming language.
notes: |-
Ask your students to write down some words that they associate with programming. Do a quick round to hear the answers.
2:
header: Programming
text: |-
Programming is giving instructions to a computer, using the language of the computer.

Such a language is called a "programming language".
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.
3:
header: Programming Language
text: |-
Expand All @@ -17,35 +22,59 @@ levels:
* Scratch
* Python
* HTML
notes: |-
Ask the students about their own programming experience, or if they perhaps know someone who works in IT.
4:
header: Programming
text: |-
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
notes: |-
This may sound really difficult, but we are going to learn programming step-by-step.
5:
header: Programming in Hedy
text: In Hedy we use special codes, like `{print}`.
code: '{print} Welcome to Hedy!'
notes: |-
Let's take a look at Hedy. In Hedy we use code words (commands) to give the computer an instruction.
We type these instructions in the left screen. This is what we call code, or a program.
6:
header: Programming in Hedy
text: Code words will be shown in pink.
code: '{print} Welcome to Hedy!'
notes: |-
As you can see, the code words (or commands) turn pink if you use them correctly.
7:
header: Programming in Hedy
text: We start the code with the Run code button underneath the code.
code: '{print} Welcome to Hedy!'
notes: |-
To make the computer follow the instructions you have to 'run' the code. Press the button to show the students what happens.
8:
header: Programming in Hedy
text: Output appears on the right-hand side.
code: '{print} Welcome to Hedy!'
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.
9:
header: Programming in Hedy
text: The output can also be a drawing.
code: |-
{forward} 100
{turn} {left}
notes: |-
In Hedy we don't only make text appear, but output can also be a drawing, or....
10:
header: Programming in Hedy
text: Or the output can be music!
code: |-
{play} C4
{play} D4
{play} E4
notes: |-
Let's go to the first level to get started!
1:
1:
header: Welcome to level 1!
Expand All @@ -60,6 +89,8 @@ levels:

`{print}` is used to show text on the screen.
code: '{print} Show text on the screen'
notes: |-
MarleenGilsing marked this conversation as resolved.
Show resolved Hide resolved
Run the code to show the students what happens when a `print` code is run.
3:
header: The {print} command
text: |-
Expand All @@ -69,6 +100,8 @@ levels:
code: |-
{print} Welcome to Hedy!
{print} Start programming now!
notes: |-
Run the code and then change to code to something yourself. Show that you can print whatever you like.
4:
header: '{ask}'
text: |-
Expand All @@ -78,57 +111,121 @@ levels:
code: |-
{print} Welcome to your own rock scissors paper!
{ask} What will you choose?
notes: |-
Show that the computer now asks you a question. Fill in an answer and also show that once you fill in the answer, nothing happens.
Make your students aware that the computer will only follow your instructions, it will not do anything by itself. This means that if you want the computer to print the answer, you have to give that instruction.
MarleenGilsing marked this conversation as resolved.
Show resolved Hide resolved
5:
header: '{echo}'
text: |-
As you could see in the previous example. If you use the `{ask}` command, you can ask a question.
The answer, however doesn't show in the output screen.

If you do want the answer to show, you can use the final command of this level: `{echo}`.
`{echo}` is used to repeat the answer of an `{ask}`.
To show the answer in the output screen, you can use: `{echo}`.
`{echo}` is never used by itself, always with an `{ask}`.
code: |-
{print} Hello!
{ask} What is your name?
{echo} hello
notes: |-
To make the computer repeat the answer back to you, you use the `echo` command. Point out that the answer you've typed in will appear at the end of the sentence.
6:
header: Programming!
text: |-
With `{print}`, `{ask}` and `{echo}` you can already create a little story.
This is a good time to try the Parrot, Story and Rock, Paper Scissors adventures.
text: Here you can find a list of the adventures.
editor: /hedy/1
notes: |-
Before we start, show the students the adventures. Don't forget to point out the exercises. This is where the students will have to read what to do exactly in an adventure.
7:
header: Programming!
text: Adventures are shown in tabs.
editor: /hedy/1
8:
header: Programming!
text: The yellow arrow buttons can be used to copy examples.
editor: /hedy#print_command
notes: |-
Lastly show the students that they can copy the example code into their programming field by pressing the yellow button.
8:
header: Let's get started!
text: |-
This is a good time to try the Parrot, Haunted House, Story and Rock, Paper Scissors adventures.
editor: /hedy/1
notes: |-
These are the first adventures to start with. Once (most of) the students are done, you can introduce the drawing turtle and the `{play}` command.
Copy link
Collaborator

@AnneliesVlaar AnneliesVlaar Nov 15, 2024 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We don't mention the debug slide here. When is good moment to show debugging?

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I thought about doing the debugger first as well, but then I thought the instructions would take way too long and it would be better to first get the students to work and later show the debugger. They don't really need it in the first level anyway because the programs are only a couple of lines.

9:
header: Drawing with the turtle
text: Now that we have seen at text codes, we will now look at drawing codes next.
header: Debugging
MarleenGilsing marked this conversation as resolved.
Show resolved Hide resolved
text: Debugging a code means getting rid of mistakes in the code. Let's debug this code together. Click the ladybug button to start the debugger.
code: |-
I am DJ Hedy
{print} What song would you like to hear?
{ask} I like that song too!
{print} Next up... {echo}
debug: 'True'
10:
header: Playing music
text: |-
Play musical notes with `{play}`
The notes go: C - D - E - F - G - A - B
Place a number behind the note to pick a scale, the scales go from 1 to 10.
code: |
{play} C4
{play} D4
{play} E4
{play} F4
{play} G4
{play} A4
{play} B4
{play} C5
notes: |-
Show the students how to use the `{play}` command in Hedy. This is also a good time to review the classroom rules about headphone usage.
The students can now continue with the music adventure.
11:
header: 'Drawing with the turtle: {forward}'
text: '`{forward}` is used to move the turtle forward.'
code: '{forward} 50'
11:
notes: |-
Now that we have seen at text codes, we will now look at drawing codes next. Show the students how to use the forward command.
12:
header: 'Drawing with the turtle: {forward}'
text: 'How do we go backwards?'
code: '{forward} -50'
notes: |-
Ask the students if they have any idea how to go backwards. The answer is using a negative number, like -50.
13:
header: 'Drawing with the turtle: {turn}'
text: '`{turn}` is used to make the turtle turn left or right.'
code: |-
{forward} 50
{turn} {left}
12:
14:
header: Debugging
text: Debugging a code means getting rid of mistakes in the code. Let's debug this code together. Click the ladybug button to start the debugger.
text: Using the debugger when drawing
code: |-
I am DJ Hedy
{print} What song would you like to hear?
{ask} I like that song too!
{print} Next up... {echo}
{forward} 50
{turn} {left}
{forward} 100
{turn} {left}
{forward} 50
{turn} {left}
debug: 'True'
13:
header: Let the programming fun begin!
text: Enjoy the adventures in level 1!
notes: |-
The debugger can come in handy when making a drawing. The students can now continue with the rest of the adventures of this level.
MarleenGilsing marked this conversation as resolved.
Show resolved Hide resolved
15:
header: Let's review!
text: What did you learn today?
notes: |-
Ask the students to list what they've learned today.
16:
header: Let's review!
text: |-
Which adventure did you like best? Why?

Which adventure did you like least? Why?

notes: |-
Ask the students for their opinion.
17:
header: Show and tell!
text: Would anyone like to show the class a program they've made?
notes: |-
Let some students show their work to the class.
MarleenGilsing marked this conversation as resolved.
Show resolved Hide resolved
18:
header: Sneak peek into the next level...
text: |-
In the next level you'll learn how to use a variable to make your programs even more interactive!
And you'll learn to use the `{sleep}` command to pause your code!
2:
1:
header: Welcome to level 2
Expand All @@ -138,13 +235,19 @@ levels:
A variable is a word that can be used to store information.

For example: a name, age or favorite sports team.
notes: |-
Students might have a hard time understanding the concept of a variable. We found that giving the students multiple examples of variables will help them grasp the concept better.
2:
header: Variables
text: To make or 'set' a variable we use the `{is}` command
text: To make or 'set' a variable we use the `{is}` command. The name of the variable comes before the `{is}` and the value of the variable behind it.
code: |-
name {is} Hedy
age {is} 15
{print} name is age years old
notes: |-
Show the students how the variables work. Point out that the names of the variables in the last line are replaced with the values of the variable.
Ask students if they could think of another variable (length, shoe size, haircolor etc.) and add your own examples to the code.
The students can now make the Rock, paper, scissors adventure.
3:
header: Interactive
text: |-
Expand All @@ -156,6 +259,9 @@ levels:
code: |-
name {is} {ask} What is your name?
{print} Hello name
notes: |-
Now our programs can get really interactive. The user can give input that is used in the program.
Ask the students to come up with their own examples.
4:
header: Multiple variables
text: Now that we use variables, we can use multiple variables instead of just one `{echo}` command.
Expand All @@ -164,13 +270,19 @@ levels:
{print} Hello name
age {is} {ask} How old are you?
{print} name is age years old.
notes: |-
Point out that the `{echo}` command is no longer needed, so it will no longer work in Hedy.
The students can now make Rock, Paper Scissors part 2 and Haunted House.
5:
header: Sleep
text: You can also use the `{sleep}` command to pause the code for a while.
code: |-
{print} My favorite colour is...
{sleep} 2
{print} green!
notes: |-
Show the students the sleep command. Ask them what they think the 2 stand for.
Change the 2 into another number to show that they can decide how long the code will be paused.
MarleenGilsing marked this conversation as resolved.
Show resolved Hide resolved
6:
header: Sleep 5
text: |-
Expand All @@ -182,7 +294,66 @@ levels:
{print} My favorite colour is...
{sleep} pause
{print} green!
notes: |-
Show the code and if you want you can even change the 10 to an {ask} command.
The students can now work on these adventures: Parrot, Story, Music and Restaurant.
7:
header: Drawing with variables
text: |-
In level 1 you've learned how to use {forward} 100.
Now you can use a variable too.
code: |-
distance {is} {ask} Hwo far should i go?
{forward} distance
notes: |-
Show the students that they can use variables with the drawing turtle now too!
Run the code multiple times with different answers, to show the use of variables.
8:
header: Drawing with degrees
text: |-
Before you could {turn} {left} or {turn} {right}, now we can use degrees!
code: |-
{forward} 100
{turn} 45
{forward} 100
notes: |-
Show the students the code. In the next slide we'll show multiple angles.
9:
header: Degrees
text: |-
A full circle is 360 degrees.
Half a circle is 180 degrees.
A right turn is 90 degrees.
A left turn is 270 degrees.

You can fill in any number you want.
code: |-
{turn} 90
{forward} 100
notes: |-
Make sure the students understand degrees. They may have learned this already in maths, but it might be completely new to them.
If the students have never heard of degrees before, it might be nice to show them a degree wheel. You could even print one out for them.
Use the example code on the slides to show the students multiple angles.
10:
header: Degrees and variables
text: |-
Degrees can be variables too!
code: |-
degrees {is} {ask} How many degrees should the turtle turn?
{turn} degrees
{forward} 100
notes: |-
Show the students that you can make the amount of degrees a variable as well.
11:
header: Drawing with color
text: |-
You can now use `{color}` to set a color when drawing.
code: |-
{color} green
{forward} 100
notes: |-
Show the students that they can use multiple colors. They can use the white color to make 'invisible' lines (as the background is white as well).
12:
header: Debugging
text: Debugging a code means getting rid of mistakes in the code. Let's debug this code together. Click the ladybug button to start the debugger.
code: |-
Expand All @@ -195,9 +366,31 @@ levels:
{print} Here you go! A filling donut with toping!
{ask} Have a nice day!
debug: 'True'
8:
header: Let the programming fun begin!
text: Enjoy the adventures in level 2!
notes: |-
The students can now finish all the adventures of this level.
13:
header: Let's review!
text: What did you learn today?
notes: |-
Ask the students to list what they've learned today.
14:
header: Let's review!
text: |-
Which adventure did you like best? Why?

Which adventure did you like least? Why?

notes: |-
Ask the students for their opinion.
15:
header: Show and tell!
text: Would anyone like to show the class a program they've made?
notes: |-
Let some students show their work to the class.
16:
header: Sneak peek into the next level...
text: |-
In the next level you'll learn how to make a list and let the computer pick a random item of that list!
3:
1:
header: Welcome to level 3
Expand Down
Loading