2.7 Essential Technological Pedagogical Content Knowledge [TPCK]
Debugging 101
Debugging is an essential skill for coders to develop as they learn to fix small syntax errors and more global program structure issues. The key word here is develop. No one is good at spotting errors when they are new to debugging code as it is a skill that takes patience, persistence, and time to hone. Lots of practice is the only cure!
Most of your class time as a coding teacher will probably be spent coaching students through the debugging process. This will sharpen your debugging skills very quickly so that, eventually, you can spot errors at a glance while students pour over their code for half the class without seeing it.
However, as a teacher it's important to help them develop debugging skills; don't point out errors immediately but provide scaffolded support with suggestive hints toward the bug. If students discover it themselves they are more likely to catch such errors in the future. |
As you work toward this level of proficiency, here are a few tips for debugging your own code as well as students' when teaching p5.js.
Watch for incomplete bracket sets. In the 'buggy' sample shown on the right the open '{' at the end of Line 5 does not have a closing bracket. This could be inserted either at the end of Line 8 or at the beginning of Line 9. This is also a common mistake for functions. For example, a student might use fill(240,180,180 and forget to close the function with the final ')'. |
Spell check function names. Most of us rely on the spell checking capabilities of word processors to help us catch spelling errors. Though specialized text editors and IDEs will help identify these, it is great practice to try and find these without such support by using a plain text editor. I find that ellipse() is typically the most often misspelled function by students learning p5.js.
Talk through the program in human language. This is usually an effective approach for catching structure or logic issues. For example, a student might show me this section of code and tell me that their circle is not appearing even though they've checked their ellipse() function "like a million gabillion times."
Can you see the error? First we create a black canvas with the background(0) function inside the draw(). Then we set the colour for the shape using fill() and draw the circle using ellipse(). But what colour is fill(0,0,0)? No red, green, or blue means that this colour will fill with black as well. So the circle IS showing up, it's just that the student can't see it because it is the same colour as the background. By changing the colour in the fill() function the circle will become visible. |
File Storage Conundrums
Nothing has given me more headaches while teaching coding than trying to support students with saving their work in the right location consistently. I find that students need constant reminders to save at the end of the block. Further, they also need help remembering which locations they can save to in order to retrieve their work for next class. So many students nod their head and tell me they have saved their work only to be confounded the next day when they can't find it because it was saved on the Desktop area or in Downloads which get wiped after each user session.
|
Digital storage options will depend on your situation, whether teaching in a lab with desktops or with a portable iPad cart, but this is a major consideration that should be worked into your end-of-class routine. It may also be helpful to explicitly walk the whole class through the process for the first few classes by navigating through the correct folders and checking in with every student one-on-one to make sure they saved their code in the right location.
Let the groove move you. Get up and stretch before scrolling down!
Conceptual Quandaries
This topic deserves much more time than I will give it here, but for the limited scope of Codegogy I will highlight a few conceptual challenges that I find students encounter when learning to code with p5.js:
- Visualising the Digital Canvas
- Executing Code After Changes
- Managing Multiple Windows
- The Nature of Code Development
Visualizing the Digital Canvas
Working with the digital canvas in p5.js is tricky for students because the horizontal 'x' values increase from left to right like a normal Cartesian grid in math. However, the vertical 'y' values increase as one moves from the top of the screen to the bottom, backwards when compared to how they work in math. Eventually, most students develop an intuitive sense of how the shapes move around the grid. Students often like to experiment with large values so will set the 'x' value to something like 1 000 000. Of course, the canvas we set in our previous examples was only 600 pixels wide and even the best desktop monitors do not have a 1 000 000 pixel width. |
Executing Code After Changes
Once students make a change to their Javascript they may expect that the shapes on their canvas will immediately reflect that change. That is not the case as the file being displayed is the Javascript file as it was when the HTML index file was clicked and opened in a web browser. In order to see the change students first must save the Javascript file. Then they must refresh or re-open the web page created by the HTML index file that called the Javascript file into action. So, in general the progression is:
Once students make a change to their Javascript they may expect that the shapes on their canvas will immediately reflect that change. That is not the case as the file being displayed is the Javascript file as it was when the HTML index file was clicked and opened in a web browser. In order to see the change students first must save the Javascript file. Then they must refresh or re-open the web page created by the HTML index file that called the Javascript file into action. So, in general the progression is:
- Make a change
- Save your Javascript file
- Refresh or reload your web page
Managing Multiple Windows
I think it is conceptually beneficial to use a plain text editor to code with a web browser as the compiler while learning to code with p5.js, especially within a school setting for administrative reasons. However, in most Integrated Development Environments (IDEs), a programmer can view their code and the 'result' on the same screen. This is also possible using the method we have implemented throughout Codegogy by splitting the screen between two windows as shown below. This way students do not need to waste time or cognitive energy on switching between the two programs.
I think it is conceptually beneficial to use a plain text editor to code with a web browser as the compiler while learning to code with p5.js, especially within a school setting for administrative reasons. However, in most Integrated Development Environments (IDEs), a programmer can view their code and the 'result' on the same screen. This is also possible using the method we have implemented throughout Codegogy by splitting the screen between two windows as shown below. This way students do not need to waste time or cognitive energy on switching between the two programs.
The Nature of Code Development
I won't say too much on this topic except that one of the biggest misconceptions that students have around developing code is that genius coders, such as legendary 10X coders, spit out perfect code at 100 kilometers per hour. This is not true. Most code development progresses through small, incremental changes that are slowly iterated upon and improved. Writing large sections of code or making multiple changes without testing it in between can lead to a rat's nest of criss-crossing bugs that can be all but impossible to untangle. Encourage students to create their code using this slower incremental method with careful and constant testing.
I won't say too much on this topic except that one of the biggest misconceptions that students have around developing code is that genius coders, such as legendary 10X coders, spit out perfect code at 100 kilometers per hour. This is not true. Most code development progresses through small, incremental changes that are slowly iterated upon and improved. Writing large sections of code or making multiple changes without testing it in between can lead to a rat's nest of criss-crossing bugs that can be all but impossible to untangle. Encourage students to create their code using this slower incremental method with careful and constant testing.
Freeze & Reflect (2.7a):
|
This concludes our overview of TPACK Essentials! Now we will walk through the planning and implementation of a coding lesson.