For example, the first lessons let you change the position co-ordinates of boxes, as well as width and height of the boxes. It’s easy to adjust the numbers then watch as the boxes shift right or left, up or down, based upon what numbers you change. It’s also easy to make the connection between the order of numbers and their connection to up/down, left/right, and the width/height of the boxes. It’s also possible to type in new co-ordinates for a new box using the two bits of code provided.
1. Go to http://www.crunchzilla.com/code-monster with your web browser. I used the Google Chrome browser. Currently the default lesson is about Getting Started. Click the monster’s green text bubble up top to display instructions and the Back button, on the bottom right, to return to the last lesson.
You’ll see one black rectangle box, as shown below. On the left is an area where you can type code. On the right are the results of your code. The default code, for example, c.fillRect(20, 20, 50, 75); creates the box on the right side of the screen shot below. The 20, 20, 50, 75 corresponds to left, right, width, height as measured in pixels.
2. Use your mouse to highlight one of the numbers in c.fillRect(20, 20, 50, 75); and change the number. For example, change the number 50 to 150. Watch the box expand to the right 100 pixels for a box with a total of 150 pixels of width measured from the left edge (50 = 50 + 100). Here’s what you see on your screen.
3. You also can change other values in c.fillRect(20, 20, 50, 75); Here’s what happens when I add a 100 pixels all four co-ordinates, changing them to 120, 120, 150, and 175. Now the black box is 120 pixels over from the left edge, 120 pixels down from the top edge, and 150 pixels wide and 175 pixels tall (high).
You also can create two boxes using the c.fillRect(20, 20, 50, 75); code then changing the number values for the second instance of c.fillRect(100,100,60,80); code. Here’s the start point with the second box co-ordinates changed to 100, 100 160, and 180.
When you’re done playing with the Getting Started lesson, click the Lesson Sections link below your work area. The list of lessons will appear in a pop-up. Click a lesson link to display that lesson.
Because it is easy to reset Code Monster by clicking the Back button, located bottom right of the work area, this is a great way to get comfortable with the basics of code and adapting code. You can see the connection between numbers and results. And clicking the top green speech bubble leads to the next lessons.
Includes Code Monster and three other online programs for older kids.
Also In The April 2016 Issue
The iDTech summer camp recently posted 102 questions. Here are a few with links to the full list.
The choice of a first programming language can be overwhelming, from simple drag and drop to full languages.
10 steps you can take to improve your skills as a programmer.
REST is a standard way for software applications to work with each other to do things.
Blockchain software technology works as a distributed ledger to record what was done and when.
This online emulator lets you learn and try out a little of the Ruby programming language.
Here's a fun way to learn about telnet and watch the original Star Wars movie in ASCII format.
Believe it or not, computers and keyboards were not invented together.
Learn the basics of Go plus neat math details about Go and AlphaGo, the computer that beat a human playing Go.
If you were a wizard, wouldn't you want to know how to scale your spells for maximum effect?
This programming language is both easy to learn and teaches excellent coding form.
A phone and tablet app exposes the invisible world of radio, phone, and satellite waves that connect our computers.
ASCII is a set of letters, numbers, and characters computers use to communicate accurately.
Links from the bottom of all the April 2016 articles, collected in one place for you to print, share, or bookmark.
Computing at School (CAS) provides resources and support for computer science teachers and parents.
Interesting stories about computer science, software programming, and technology for April 2016.