We have been struggling with the definition of abstraction. Unit 3 the intro to programming section has a simple abstraction example of creating a function to turn the turtle right by turning left 3 times. It makes sense but doesn’t hit the nail on the head. So I have created two examples to show them.
The first is a version of the clicker game Unit 5 lesson 5 puzzle 21. Specifically, I have created a set of functions to abstract each step of the game. I then use that abstraction to fill in my onEvent calls. Find it here https://studio.code.org/projects/applab/uNpONL2XGa-9wtwp4cOD-wvEO20FQsDfYPLI_t7WgR0
Here is another example to show. https://studio.code.org/projects/applab/1l9gJvt6IpglAu4-mn0b7OJUhzs9SBWbGkrUm8t5gdg What I have done there is create an abstraction for drawing a diagram that consists of colored squares. The drawing itself doesn’t matter. I have two sections of code following that. The first section implements the abstraction using turtle graphics. The second is commented out to start with and implements the exact same abstraction but with drawing commands on a canvas.
You can show them how the abstraction is first created using turtle graphics. Run it. You then comment out the turtle part and un-comment the canvas part and run it again. That shows them that the actual drawing portion of the program remains unchanged because of the abstraction. By hiding the details of how the drawing is made you can easily switch from turtle graphics to canvas and back. You can even add to the drawing without knowing if it will use turtle or canvas drawing. That is the very definition of abstraction.
Easy instructions to switch implementations: Go into text mode. Take out the / at the end of “turtle graphics */” so it becomes “turtle graphics *”. That causes the turtle section to turn green and become a comment. Add a / at the end of “the diagram *” so it becomes “the diagram */”. That section changes from green comment to purple, blue, and black code.