1 Correct code vs Buggy Code vs Smelly

1 Correct code vs Buggy Code vs Smelly code & Primary Pedagogy Helping primary pupils know how to improve their programs. Jane Waite What is correct code? Do you have a checklist for pupils to self-assess the quality of their code? This session brings international research on smelly code, 'a grain of correctness', instructional approaches and design into the class with practical activities. A hands-on session marking and making smelly code. A simple ordering activity to get you and your pupils thinking about what makes 'good code'. Please bring a couple of PRINTED (or on a laptop) primary block based programming examples to mark (perhaps a 'good one' and 'needs improving') as we develop self-assessment criteria for improving programs and think about the difference between a bug and a smell @janewaite @cas_london_crc #Smelly. Code #casconf 2018

2 Objectives of this session Handout 1 Consider how we view correct code – and how this relates to progression. • What is ‘Smelly’ Code? • What is ‘Buggy’ Code? • What is ‘Correct’ Code? • What is a ‘grain of correctness’ • What criteria do you use for marking code? @janewaite @cas_london_crc #Smelly. Code #casconf 2018 RAG your current confidence/knowledge of each. Colour or triangle.

3 Spot Smelly Code https: //scratch. mit. edu/projects/164525941/ @janewaite @cas_london_crc #Smelly. Code #casconf 2018

Improvements 1 Handout 3 @janewaite @cas_london_crc #Smelly. Code #casconf 2018 4

5 Improvements 2 @janewaite @cas_london_crc #Smelly. Code #casconf 2018

The code does what your design says it should. 1 The sprite names make it easy to know what they do. 2 There are no duplicate commands 5 There is a set up ‘code’ for each sprite 6 Broadcast only used to coordinate action across sprites 9 There are comments that make the code easy to understand 10 The code is short 13 Used cool sounds 14 There are no bugs 17 @janewaite @cas_london_crc #Smelly. Code #casconf 2018 There are no unused commands in the code area. 3 All sprites, backgrounds and costumes are used 7 6 The variable names tells you what the Handout 3 variables is for 4 There are comments that link back to the design. 8 The code is very long 11 Player found it easy to use 12 The code is easy to understand 15 Used difficult blocks 18 The code is easy to change 16

7 Find bugs and smells in the code you brought Start to list a criteria for marking. @janewaite @cas_london_crc #Smelly. Code #casconf 2018

Geography Quiz (example code) 8 The task for this program is : Make a quiz that asks a few questions. The design is : • Ask for the user name and whether they want an easy or hard quiz. • If the say they want easy questions ask several easy questions and add 1 to the score when the player gets a correct answer but take a point away when they get it wrong. Show the correct answer if they get it right or wrong. • Do the same for the hard questions. • At the end, show the player how many points they got and include their name and whether they did the easy or hard quiz. @janewaite @cas_london_crc #Smelly. Code #casconf 2018

Investigate – answer questions about the code Investigate Name it – name the constructs/concepts used Match it – match code to design, running the code to code, design to running the code etc Spot the difference – compare 2 programs and spot the difference Identify the algorithm – identify the algorithm that it implemented …. Mark it – evaluate a program against criteria Guided exploration – change specific aspects of the program (AS DIRECTED) to find things out Unguided exploration – trial and error changes to find things out (tinkering) Modify it (Guided or unguided) • Clone it – make a copy and change visual/data aspects (e. g. change the sprite costumes in an animation, change the questions in a quiz, change the number of times something repeats in a game) • Add to it– make a copy and add more of the same thing e. g. add more questions, add more sprites doing similar things • Tidy it/ Fix it – if there were smells or bugs • Mess it up - add bad smells • Ruin it – add bugs • Simplify it – gradually remove the complexity over a number of versions of the code • Extend it – add further functionality/ complexity e. g. add a timer, use lists, add procedures etc 7. Make something new#casconf 2018 (Guided or @janewaite @cas_london_crc #Smelly. Code unguided) Writing 6. • • Imitate 5. design Innovate Unplugged – link the concepts to real life Play it (and identify the features) - run the code (and identify the design) ‘Being read to’ Predict/Run Read and predict – read the code (before you run it) & predict what it will do Make a design from the code - run the code & draw the design, read the code & annotate the Reading & comprehension 1. 2. 3. 4. 9 Invent Create Modify/remix Use Using Example Programs

11 The code is shown on the next few pages or look online. https: //scratch. mit. edu/projects/20 7255264/ @janewaite @cas_london_crc #Smelly. Code #casconf 2018

12 @janewaite @cas_london_crc #Smelly. Code #casconf 2018

13 @janewaite @cas_london_crc #Smelly. Code #casconf 2018

14 @janewaite @cas_london_crc #Smelly. Code #casconf 2018

15 @janewaite @cas_london_crc #Smelly. Code #casconf 2018

16 What might we call? Code that does not do what we want. Buggy Code that ‘does what we want’. ‘Quality’ ‘Smelly’ ‘Correct’ Code ‘Correct Code’ - Grain of correctness Efficient? Elegant? Easy to read? Easy to change? Progression? @janewaite @cas_london_crc #Smelly. Code #casconf 2018

17 How do we know what we want? @janewaite @cas_london_crc #Smelly. Code #casconf 2018

18 Top-down or bottom-up Add, remix, change code Run it (Bers et al 2010) A ‘top-down’ approach @janewaite @cas_london_crc #Smelly. Code #casconf 2018 A ‘bottom-up’, tinkering approach

Criteria (When do you expect each of these? Which is smelly (s) , buggy (b) or progress (p)? ) 19 Have you: 1. Cleaned up your scripting area? 2. Cleaned up unused sprites and costumes? 4. Removed duplicated commands e. g. move 20 followed by move 10? 5. Renamed your sprites, backgrounds etc so it is easy to know what they do? 6. Made sure your code does what you/ your user wanted/designed? 7. Created a start up ‘make your own block’ for every sprite? 8. Used a loop rather than repeated code? 9. Used a procedure to decompose your code into parts that are easy to change? @janewaite @cas_london_crc #Smelly. Code #casconf 2018

Code reading, code tracing From university studies, code tracing is a pre-cursor to being able to write code. There is evidence that novices must be able to read 50% of their code (tracing code accuracy) before they can independently write code with confidence (Lister, 2011). . @janewaite @cas_london_crc #Smelly. Code #casconf 2018 20

21 Objectives of this session Handout 1 Consider how we view correct code – and how this relates to progression. • What is ‘Smelly’ Code? • What is ‘Buggy’ Code? • What is ‘Correct’ Code? • What is a ‘grain of correctness’ • What criteria do you use for marking code? @janewaite @cas_london_crc #Smelly. Code #casconf 2018 RAG your current confidence/knowledge of each. Colour or triangle.