![Page 1: Visual programming languages in the Digital Technologies ......Analysing Designing Developing Evaluating ... E.g. A recipe . Branching Branching occurs when an algorithm makes a choice](https://reader034.vdocuments.site/reader034/viewer/2022050114/5f4b83a0ef40be2ea57d3f71/html5/thumbnails/1.jpg)
Visual programming languages
in the Digital Technologies curriculum
(F-6)
Darrel Branson - VCAA Digital Coding Specialist Teacher
![Page 2: Visual programming languages in the Digital Technologies ......Analysing Designing Developing Evaluating ... E.g. A recipe . Branching Branching occurs when an algorithm makes a choice](https://reader034.vdocuments.site/reader034/viewer/2022050114/5f4b83a0ef40be2ea57d3f71/html5/thumbnails/2.jpg)
In this session
• Where is visual programming in the curriculum?
• Some key programming concepts
• Introduction to visual programming
‒ Solving a problem
– Applying the problem solving methodology (PSM)
• Resources
![Page 3: Visual programming languages in the Digital Technologies ......Analysing Designing Developing Evaluating ... E.g. A recipe . Branching Branching occurs when an algorithm makes a choice](https://reader034.vdocuments.site/reader034/viewer/2022050114/5f4b83a0ef40be2ea57d3f71/html5/thumbnails/3.jpg)
Where is visual programming in the
curriculum?
![Page 4: Visual programming languages in the Digital Technologies ......Analysing Designing Developing Evaluating ... E.g. A recipe . Branching Branching occurs when an algorithm makes a choice](https://reader034.vdocuments.site/reader034/viewer/2022050114/5f4b83a0ef40be2ea57d3f71/html5/thumbnails/4.jpg)
Digital Systems
hardware
networks
Data and Information
representing data
projects
Creating Digital Solutions
analysing
designing
developing
evaluating
Image credit: Paula Christophersen
4
The Strands
![Page 5: Visual programming languages in the Digital Technologies ......Analysing Designing Developing Evaluating ... E.g. A recipe . Branching Branching occurs when an algorithm makes a choice](https://reader034.vdocuments.site/reader034/viewer/2022050114/5f4b83a0ef40be2ea57d3f71/html5/thumbnails/5.jpg)
Explores processes and skills by which students create digital
solutions
Four stages: Analysing
Designing
Developing
Evaluating
Creating Digital Solutions requires:
‒ skills in using digital systems
‒ different ways of thinking (computational, design and systems thinking)
‒ interacting safely by using appropriate technical and social protocols.
Problem Solving
Methodology
Creating Digital Solutions
5
![Page 6: Visual programming languages in the Digital Technologies ......Analysing Designing Developing Evaluating ... E.g. A recipe . Branching Branching occurs when an algorithm makes a choice](https://reader034.vdocuments.site/reader034/viewer/2022050114/5f4b83a0ef40be2ea57d3f71/html5/thumbnails/6.jpg)
Creating Digital Solutions Levels F-6 Levels F-2 Levels 3 and 4 Levels 5 and 6
Define simple problems Define problems in terms of data and functional requirements, drawing on previously solved problems to identify similarities
Design a user interface for a digital system, generating and considering alternative design ideas
Follow, describe and represent a sequence of steps and decisions (algorithms) needed to solve simple problems
Describe and follow a sequence of steps and decisions involving branching and user input (algorithms) needed to solve them
Design, modify and follow simple algorithms represented diagrammatically and in English, involving sequences of steps, branching, and iteration
Develop simple solutions as visual programs
Develop digital solutions as simple visual programs
Explore how people safely use common information systems to meet information, communication and recreation needs
Explain how student-developed solutions and existing information systems meet common personal, school or community needs
Explain how student-developed solutions and existing information systems meet current and future community and sustainability needs
![Page 7: Visual programming languages in the Digital Technologies ......Analysing Designing Developing Evaluating ... E.g. A recipe . Branching Branching occurs when an algorithm makes a choice](https://reader034.vdocuments.site/reader034/viewer/2022050114/5f4b83a0ef40be2ea57d3f71/html5/thumbnails/7.jpg)
Some key programming
concepts
![Page 8: Visual programming languages in the Digital Technologies ......Analysing Designing Developing Evaluating ... E.g. A recipe . Branching Branching occurs when an algorithm makes a choice](https://reader034.vdocuments.site/reader034/viewer/2022050114/5f4b83a0ef40be2ea57d3f71/html5/thumbnails/8.jpg)
What are …
• visual programs?
• algorithms?
• control structures?
![Page 9: Visual programming languages in the Digital Technologies ......Analysing Designing Developing Evaluating ... E.g. A recipe . Branching Branching occurs when an algorithm makes a choice](https://reader034.vdocuments.site/reader034/viewer/2022050114/5f4b83a0ef40be2ea57d3f71/html5/thumbnails/9.jpg)
Visual programming
A programming language or environment where the
program is represented and created visually rather than as
text.
Examples of visual programming languages include: Alice,
GameMaker, Kodu, Lego Mindstorms, MIT App Inventor,
Scratch (Build Your Own Blocks and Snap).
![Page 10: Visual programming languages in the Digital Technologies ......Analysing Designing Developing Evaluating ... E.g. A recipe . Branching Branching occurs when an algorithm makes a choice](https://reader034.vdocuments.site/reader034/viewer/2022050114/5f4b83a0ef40be2ea57d3f71/html5/thumbnails/10.jpg)
Visual programming
https://scratch.mit.edu/
https://edu.sphero.com
![Page 11: Visual programming languages in the Digital Technologies ......Analysing Designing Developing Evaluating ... E.g. A recipe . Branching Branching occurs when an algorithm makes a choice](https://reader034.vdocuments.site/reader034/viewer/2022050114/5f4b83a0ef40be2ea57d3f71/html5/thumbnails/11.jpg)
Algorithms
A description of the steps and decisions required to solve a problem.
Flowcharts are often useful in visualising an algorithm.
We use them everyday!
Procedural text
Solving a mathematical equation
Recipes
Our everyday routine
![Page 12: Visual programming languages in the Digital Technologies ......Analysing Designing Developing Evaluating ... E.g. A recipe . Branching Branching occurs when an algorithm makes a choice](https://reader034.vdocuments.site/reader034/viewer/2022050114/5f4b83a0ef40be2ea57d3f71/html5/thumbnails/12.jpg)
Control structures
Control structures are the way a computer works it way through the
coded instructions. All problems can be solved using control structures.
Sequence Branching/Selection Iteration/Looping
Start
Get a verb
Add suffix ‘ing’
Write new word
End
![Page 13: Visual programming languages in the Digital Technologies ......Analysing Designing Developing Evaluating ... E.g. A recipe . Branching Branching occurs when an algorithm makes a choice](https://reader034.vdocuments.site/reader034/viewer/2022050114/5f4b83a0ef40be2ea57d3f71/html5/thumbnails/13.jpg)
Sequence
Following step-by-step instructions, sequentially.
E.g. A recipe
![Page 14: Visual programming languages in the Digital Technologies ......Analysing Designing Developing Evaluating ... E.g. A recipe . Branching Branching occurs when an algorithm makes a choice](https://reader034.vdocuments.site/reader034/viewer/2022050114/5f4b83a0ef40be2ea57d3f71/html5/thumbnails/14.jpg)
Branching
Branching occurs when an algorithm makes a choice to do
one of two or more actions depending on sets of
conditions and the data provided.
Making a decision! If this is true, then do that, otherwise do something else
![Page 15: Visual programming languages in the Digital Technologies ......Analysing Designing Developing Evaluating ... E.g. A recipe . Branching Branching occurs when an algorithm makes a choice](https://reader034.vdocuments.site/reader034/viewer/2022050114/5f4b83a0ef40be2ea57d3f71/html5/thumbnails/15.jpg)
Branching
Visual code blocks may look similar to these:
![Page 16: Visual programming languages in the Digital Technologies ......Analysing Designing Developing Evaluating ... E.g. A recipe . Branching Branching occurs when an algorithm makes a choice](https://reader034.vdocuments.site/reader034/viewer/2022050114/5f4b83a0ef40be2ea57d3f71/html5/thumbnails/16.jpg)
Iteration
Repetition of a process or set of instructions in computer
programming.
Doing something over and over again!
Visual code blocks may look similar to these:
![Page 17: Visual programming languages in the Digital Technologies ......Analysing Designing Developing Evaluating ... E.g. A recipe . Branching Branching occurs when an algorithm makes a choice](https://reader034.vdocuments.site/reader034/viewer/2022050114/5f4b83a0ef40be2ea57d3f71/html5/thumbnails/17.jpg)
Visual programming
![Page 18: Visual programming languages in the Digital Technologies ......Analysing Designing Developing Evaluating ... E.g. A recipe . Branching Branching occurs when an algorithm makes a choice](https://reader034.vdocuments.site/reader034/viewer/2022050114/5f4b83a0ef40be2ea57d3f71/html5/thumbnails/18.jpg)
Programming stages
1. Define a Problem
2. Apply Problem Solving Methodology
a. Analyse problem
(Decompose, Abstraction)
b. Design solution/s
(Algorithm, Interface)
c. Develop solution/s (Implement in Programming Language)
d. Evaluate solution/s
(Does it meet the needs of the problem?)
![Page 19: Visual programming languages in the Digital Technologies ......Analysing Designing Developing Evaluating ... E.g. A recipe . Branching Branching occurs when an algorithm makes a choice](https://reader034.vdocuments.site/reader034/viewer/2022050114/5f4b83a0ef40be2ea57d3f71/html5/thumbnails/19.jpg)
Thinking about what to program (Defining a problem)
![Page 20: Visual programming languages in the Digital Technologies ......Analysing Designing Developing Evaluating ... E.g. A recipe . Branching Branching occurs when an algorithm makes a choice](https://reader034.vdocuments.site/reader034/viewer/2022050114/5f4b83a0ef40be2ea57d3f71/html5/thumbnails/20.jpg)
Defining a problem
Something that needs to be solved.
May need to…
...break it down into smaller parts (decomposition)
...identify the relevant parts (abstraction)
An Example:
Draw a regular hexagon with sides
that are 50 steps long.
50 steps
![Page 21: Visual programming languages in the Digital Technologies ......Analysing Designing Developing Evaluating ... E.g. A recipe . Branching Branching occurs when an algorithm makes a choice](https://reader034.vdocuments.site/reader034/viewer/2022050114/5f4b83a0ef40be2ea57d3f71/html5/thumbnails/21.jpg)
What is the problem asking us to do? (Analyse the problem)
![Page 22: Visual programming languages in the Digital Technologies ......Analysing Designing Developing Evaluating ... E.g. A recipe . Branching Branching occurs when an algorithm makes a choice](https://reader034.vdocuments.site/reader034/viewer/2022050114/5f4b83a0ef40be2ea57d3f71/html5/thumbnails/22.jpg)
Analyse the problem
What do we know about hexagons?
What are the specifics of our problem?
• How many sides does a hexagon have?
• How many angles are there in a hexagon?
• What is the angle of adjoining sides?
• How long are the sides?
• Where will I need to start drawing from?
SIX, equal length
SIX, equal angles
60 degrees
50 steps
![Page 23: Visual programming languages in the Digital Technologies ......Analysing Designing Developing Evaluating ... E.g. A recipe . Branching Branching occurs when an algorithm makes a choice](https://reader034.vdocuments.site/reader034/viewer/2022050114/5f4b83a0ef40be2ea57d3f71/html5/thumbnails/23.jpg)
What might a solution look like? (Design solutions to the problem)
![Page 24: Visual programming languages in the Digital Technologies ......Analysing Designing Developing Evaluating ... E.g. A recipe . Branching Branching occurs when an algorithm makes a choice](https://reader034.vdocuments.site/reader034/viewer/2022050114/5f4b83a0ef40be2ea57d3f71/html5/thumbnails/24.jpg)
Draw a hexagon algorithm 1:
1. Begin
2. If user wants a hexagon • draw a 50 step line
• turn right 60 degrees
• draw a 50 step line
• turn right 60 degrees
• draw a 50 step line
• turn right 60 degrees
• draw a 50 step line
• turn right 60 degrees
• draw a 50 step line
• turn right 60 degrees
• draw a 50 step line
• turn right 60 degrees
3. Stop
Creating a design (Algorithm) –
Levels 3 & 4
Consider:
Other Control structures?
• Repetition? How many
times is the same
thing performed?
• Efficiency?
Check it. Does it work?
![Page 25: Visual programming languages in the Digital Technologies ......Analysing Designing Developing Evaluating ... E.g. A recipe . Branching Branching occurs when an algorithm makes a choice](https://reader034.vdocuments.site/reader034/viewer/2022050114/5f4b83a0ef40be2ea57d3f71/html5/thumbnails/25.jpg)
Draw a hexagon - algorithm 2:
1. begin
2. If user wants a hexagon repeat 6 times
draw a 50 step line
turn right 60 degrees
3. stop
Check it. Does it work?
Creating a design (Algorithm) –
Levels 5 & 6
Iteration
![Page 26: Visual programming languages in the Digital Technologies ......Analysing Designing Developing Evaluating ... E.g. A recipe . Branching Branching occurs when an algorithm makes a choice](https://reader034.vdocuments.site/reader034/viewer/2022050114/5f4b83a0ef40be2ea57d3f71/html5/thumbnails/26.jpg)
Moving from algorithms to a program (Developing solutions using a programming language)
![Page 27: Visual programming languages in the Digital Technologies ......Analysing Designing Developing Evaluating ... E.g. A recipe . Branching Branching occurs when an algorithm makes a choice](https://reader034.vdocuments.site/reader034/viewer/2022050114/5f4b83a0ef40be2ea57d3f71/html5/thumbnails/27.jpg)
Code in Scratch Levels 3 & 4
How might this
look as a visual
program?
Draw a hexagon algorithm 1:
1. Begin
2. If user wants a square
• draw a 50 step line
• turn right 60 degrees
• draw a 50 step line
• turn right 60 degrees
• draw a 50 step line
• turn right 60 degrees
• draw a 50 step line
• turn right 60 degrees
• draw a 50 step line
• turn right 60 degrees
• draw a 50 step line
• turn right 60 degrees
3. Stop
Let’s revisit our first algorithm.
Using Branching
![Page 28: Visual programming languages in the Digital Technologies ......Analysing Designing Developing Evaluating ... E.g. A recipe . Branching Branching occurs when an algorithm makes a choice](https://reader034.vdocuments.site/reader034/viewer/2022050114/5f4b83a0ef40be2ea57d3f71/html5/thumbnails/28.jpg)
Code in Scratch
Levels 3 & 4
Using Branching
![Page 29: Visual programming languages in the Digital Technologies ......Analysing Designing Developing Evaluating ... E.g. A recipe . Branching Branching occurs when an algorithm makes a choice](https://reader034.vdocuments.site/reader034/viewer/2022050114/5f4b83a0ef40be2ea57d3f71/html5/thumbnails/29.jpg)
Code in Scratch Levels 5 & 6 Adding iteration
How might this
look as a visual
program?
Draw a hexagon - algorithm 2:
1. begin
2. If user wants a hexagon
repeat 6 times
draw a 50 step line
turn right 60 degrees
3. stop
Let’s revisit our second algorithm.
![Page 30: Visual programming languages in the Digital Technologies ......Analysing Designing Developing Evaluating ... E.g. A recipe . Branching Branching occurs when an algorithm makes a choice](https://reader034.vdocuments.site/reader034/viewer/2022050114/5f4b83a0ef40be2ea57d3f71/html5/thumbnails/30.jpg)
Iteration
Code in Scratch Levels 5 & 6 Adding iteration and user input
![Page 31: Visual programming languages in the Digital Technologies ......Analysing Designing Developing Evaluating ... E.g. A recipe . Branching Branching occurs when an algorithm makes a choice](https://reader034.vdocuments.site/reader034/viewer/2022050114/5f4b83a0ef40be2ea57d3f71/html5/thumbnails/31.jpg)
Does our solution solve the problem? (Evaluating the solution to ensure it meets the problem’s requirements)
![Page 32: Visual programming languages in the Digital Technologies ......Analysing Designing Developing Evaluating ... E.g. A recipe . Branching Branching occurs when an algorithm makes a choice](https://reader034.vdocuments.site/reader034/viewer/2022050114/5f4b83a0ef40be2ea57d3f71/html5/thumbnails/32.jpg)
Evaluating the solution
Considerations:
• Has the solution solved the problem?
• Does it work? (Every time!)
• Does it do what it is supposed to do?
• Does is meet ALL of the requirements specified in the problem?
If the evaluation process determines that the solution does not
satisfy the problem, then it may be necessary to revisit stages of
the problem solving methodology again. This could continue until
an accurate solution is reached.
![Page 33: Visual programming languages in the Digital Technologies ......Analysing Designing Developing Evaluating ... E.g. A recipe . Branching Branching occurs when an algorithm makes a choice](https://reader034.vdocuments.site/reader034/viewer/2022050114/5f4b83a0ef40be2ea57d3f71/html5/thumbnails/33.jpg)
Taking it further! (Adding to our original problem)
What about some other shapes?
Triangle Rectangle
Circle What might the
algorithms look like?
Square
![Page 34: Visual programming languages in the Digital Technologies ......Analysing Designing Developing Evaluating ... E.g. A recipe . Branching Branching occurs when an algorithm makes a choice](https://reader034.vdocuments.site/reader034/viewer/2022050114/5f4b83a0ef40be2ea57d3f71/html5/thumbnails/34.jpg)
Taking it even further. Any shape?
Given the number of sides, identify the shape by name and
then draw it.
Might include code to: • Get more input from user (eg. number of sides)
• Determine the name of the shape
(outputs name to user)
• Get more input from user (eg. length of sides)
• Calculate angle between adjoining sides
(based on number of sides)
• Draw the shape
![Page 35: Visual programming languages in the Digital Technologies ......Analysing Designing Developing Evaluating ... E.g. A recipe . Branching Branching occurs when an algorithm makes a choice](https://reader034.vdocuments.site/reader034/viewer/2022050114/5f4b83a0ef40be2ea57d3f71/html5/thumbnails/35.jpg)
Common
visual programming
languages
![Page 36: Visual programming languages in the Digital Technologies ......Analysing Designing Developing Evaluating ... E.g. A recipe . Branching Branching occurs when an algorithm makes a choice](https://reader034.vdocuments.site/reader034/viewer/2022050114/5f4b83a0ef40be2ea57d3f71/html5/thumbnails/36.jpg)
Some visual programming languages
Language Mobile Device Windows/Mac Possible Level Notes
Scratch Pyonkee (iPad) Web-based or
standalone
Level 3+ Easily accessible for schools
Scratch Jnr iPad, Android Level 1 + No branching/selection.
Hopscotch iPad Level 3+
MIT App Inventor Web-based Web-based Level 5+ Creates Apps for Android devices
Alice Cross-platform Level 5+
Kodu Windows Level 3+
Snap! Cross-platform Level 5+ Similar to Scratch. For devices.
Tynker iPad, Android Web based Level 3+ Similar to scratch.
![Page 37: Visual programming languages in the Digital Technologies ......Analysing Designing Developing Evaluating ... E.g. A recipe . Branching Branching occurs when an algorithm makes a choice](https://reader034.vdocuments.site/reader034/viewer/2022050114/5f4b83a0ef40be2ea57d3f71/html5/thumbnails/37.jpg)
Extending visual
programming to devices!
![Page 38: Visual programming languages in the Digital Technologies ......Analysing Designing Developing Evaluating ... E.g. A recipe . Branching Branching occurs when an algorithm makes a choice](https://reader034.vdocuments.site/reader034/viewer/2022050114/5f4b83a0ef40be2ea57d3f71/html5/thumbnails/38.jpg)
Block programming - Robotic devices
Sphero Edu App Microbit.org Ozoblockly.com
![Page 39: Visual programming languages in the Digital Technologies ......Analysing Designing Developing Evaluating ... E.g. A recipe . Branching Branching occurs when an algorithm makes a choice](https://reader034.vdocuments.site/reader034/viewer/2022050114/5f4b83a0ef40be2ea57d3f71/html5/thumbnails/39.jpg)
Visual programming languages
Some ‘Digital Devices’ that use block-based programming
• Sphero robot
• Edison robot
• Dash & Dot robot
• Ozobots
• mBot robot
• Micro:bit
• Hummingbird
![Page 40: Visual programming languages in the Digital Technologies ......Analysing Designing Developing Evaluating ... E.g. A recipe . Branching Branching occurs when an algorithm makes a choice](https://reader034.vdocuments.site/reader034/viewer/2022050114/5f4b83a0ef40be2ea57d3f71/html5/thumbnails/40.jpg)
Resources
![Page 41: Visual programming languages in the Digital Technologies ......Analysing Designing Developing Evaluating ... E.g. A recipe . Branching Branching occurs when an algorithm makes a choice](https://reader034.vdocuments.site/reader034/viewer/2022050114/5f4b83a0ef40be2ea57d3f71/html5/thumbnails/41.jpg)
Learning more about visual programming
• Code.org - https://studio.code.org – Start with ‘Classic Maze’
• Scratch - http://scratch.mit.edu – Introduction to Scratch tutorial and activity cards
• CoderDojo (Resources)
- https://coderdojo.com/resources/ – Beginner Scratch (dojo and sushi cards)
• Code.org - https://studio.code.org/