Thursday, January 29, 2015

Day 12 (or so) - 30 Day Learning Challenge

How to Visualize Program Execution/Step Debugging

So this post was trigger by looking at TurtleJS by Walter Bender.  In playing with TurtleJS (which by the way has a rather nice interface design to support both mouse, touch, large screen and iphone size screens) I made a comment that
... would also be nice to have a "Step" button/icon.  Where kids could step through the scripts.  I often do this when kids don't understand a bug in there code.  Allowing them to step through one tile at a time (and ideally having them narrate what they think should be happening) often helps them debug without me really doing anything other than getting them to slow down and observe what each tile actually does.

So I started to think about different ways this could be implemented in TurtleJS and I prototyped some in Etoys.   Below is the current visualization:

What is hard to see in this image is that the block is highlighted in both scripts.  Here not only is the executing block "highlighted" (actually the block color is lightened to indicate executing), but also the blocks (as the execution is within each repeat) and the block which is waiting for "return" from .

So in effect this implementation is not only showing the "executing" block, but also the "call stack".  I wonder whether showing both the executing block and the "call stack" is a bit much visual/cognitive overload.

The following is my first attempt at prototyping a different visualization:
What I was trying to do here is make it more visually apparent which block is executing and what "script/block" called .   One thing I felt was missing was showing that we were in the loops so I tried the following:

I think I would have preffered to make the "repeat lines" dashes here and not really cray about the "calling arrow" from as I think it is a big.  The whole thing is also a bit too busy as the eye should be drawn to the action and the "main character" (suggested reading -

The Illusion of Life: Disney Animation: Ollie Johnston, Frank Thomas

great book on design).

So here is my last prototype for the day:

The point is to "gray out" the uniteresting parts to help the user's eye focus on the main action (watch some Disney animation and look at the "lighting").  I wound up "greying out" the "non executing" blocks and using a slighlty less grey mask for the blocks.  I would probably also do a light grey for the .

Last few notes:
1) I think it would be nice if the executing block's grew larger as they executed.  But the particular block library Walter is using apparently messes up layout when you do this.
2) The actions on stepping happen to fast. Ideally when stepping and there is a concrete execution of a block (ie: forward or turn vs. an arithemetic function) it might be good if the concrete action was slowed down so that the forward 100 did took a 1 sec instead of "instantly" (something similar to the way the scratch Glide tile works). Of course if you implemented a glide, that might need to glide slower and could mess up certain debugging cases that rely on timing.  Even if you didn't implement a glide block, someone could conceivably implement their own glide action.

The main problems I am trying to solve are:
1) Getting the students to slow down their thinking
2) Getting the students to pay attention to what they actually told the computer to do vs what they intended to/think they told the computer to do.
3) Providing a more concrete representation of code execution
4) Getting the kids to think about what's going on inside the computer (more on this when I describe how the online Python tutor tries to solve the step debugging problem).


Saturday, January 17, 2015

Day ~11 - 30 Day Learning Challenge

Too busy with work, which takes a large cognitive load, so at the end of the day I need diffusion/space out time.  Focused thinking after a day of focused thinking is hard.

I did find time while waiting at the bank to re-watch some AngularJS videos and try and apply some of the knowledge.  Below is my updated answer to #5:

5) Applying knowledge of research findings or learning techniques to help me overcome my challenges.
  1. Spaced Learning - Well I finally started trying this by re-watching the AngularJS videos and thinking about why they do certain things and what problems they are trying to solve, etc.
  2. Pomodoro Technique - Well total failure in applying this.  But this week I will do it.
  3. Don't just glance at it and think you know - I am recongizing this problem and admitting it to myself.  Part of the reason I am re-watching the AngularJS videos is to not only for spaced learning, but also to try and get a deeper understanding.
  4. Use different problem solving techniques - Well the lessons did go through various ways to produce the same HTML and behaviors, so I could see the advantages of directives and controllers.  Yet, it would be better to compare to completely different ways to solve similar problems.
  5. Powers of 10 thinking - I just do this naturally, but again too much time in the clouds trying to generalize and not enough going down deep.

Tuesday, January 13, 2015

Day 10 - 30 Day Learning Challenge

As part of my Learning How to Learn course I have an assignment due by the 15th.  It is to writ a "Reflective Essay about a Learning Challenge"  Below is a draft:

1) Current learning career and trajectory. 
I am a Director of Customer Support and Operations at a Telecommunications company and also work on "learning software" for OLPC.   I have taken on a 30 Day learning challenge and part of that is to learn about AngularJS for a project at work and also to experiment with implementing something similar to Dan Ingals Lively Web demonstrations using connectors.  I have always been fascinated with how people learn and how you can create learning experiences that facilitate learning.
2) The learning aim that is of importance to me. 
I enjoy programming and do not have much opportunity to do it.  I manage some folks who write code and occasionally write some myself, so I want to be able to ask good questions and challenge my team and myself to think more deeply about the problems they are solving and how they are solving them using AngularJS.  Also as part of my volunteer work with schools I want to explore how to create better learning software and experiences.
3) Biggest mental challenges in achieving your learning aim.  
Managing my time, given a full time job, four home schooled kids and volunteer work.  The biggest mental challenge is having the discipline to spend at least an hour a day working on learning.  The other challenge getting a deep into understanding AngularJS model of writing code.  I am a quick study and can get going quickly, but need to be more persistent in understanding at a deeper level why things work. 
4) Outline existing research or learning techniques that are relevant to your challenges.
  1.         Carpenter, S. K., Cepeda, N. J., Rohrer, D., Kang, S. H. K., & Pashler, H. (2012). Using spacing to enhance diverse forms of learning: Review of recent research and implications for instruction. Educational Psychology Review, 24(3), 369-378. This paper tells us that it is very important to space your learning out over several days.
  2.         Procrastination--the Pomodoro technique.  This technique involves setting a timer for 25 minutes and focusing only on the topic at hand without being distracted.
  3.         Merely glancing at a problem's solution and thinking you know how to do it —as per the “10 Rules of Learning” page.  Being a quick study I often fool myself.
  4.        Alternate different problem-solving techniques during your practice - as per the "10 Rules of Learning” page. This I think will help me learn deeper. "You don't understand anything until you learn it more than one way" - Marvin Minsky
  5.        The following is a tip from Dr. Robert Bilder on how to learn effectively: Uses the "Powers of 10" way of thinking about a problem.  Where you "zoom out and then zoom back in" when thinking about a problem.  Below is the video that inspired the idea.

5) Applying knowledge of research findings or learning techniques to help me overcome my challenges.
  1. Spaced Learning - 
  2. Pomodoro Technique - 
  3. Don't just glance at it and think you know - 
  4. Use different problem solving techniques - 
  5. Powers of 10 thinking - 

Regarding AngularJS (remember I was learning Angular ;)  I did a code review today.  One way to learn is to study great literature.  I don't know that what this person wrote was great, but it is good.


Monday, January 12, 2015

Days 8-9 - 30 Day Learning Challenge

Well figuring this is a Learning Challenge I signed up for the Coursera course: Learning How to Learn: Powerful mental tools to help you master tough subjects.  Unfortunately I just got back late this afternoon and the first quiz was due this week.  Fortunately I was able to watch all the videos and pass the quiz.  That said I violated one of the principles which is "not to cram" but to do spaced repetitions.  So I will try and go back over the week and review what they taught.

I also completed CodeSchool's Discover Dev Tools course during the train ride from Florida to Lorton VA.  I took this as I figured having tools to help me debug and analyze my Javascript/HTML/CSS would be useful for the Angular work.  Couple of learning design issues I noticed.  While the course wasn't that old, some of the Chrome Dev Tools had changed so the video and challenges did not always match the current version.  That is part of the challenge of designing learning materials for something that is evolving and doesn't maintain backward compatibility.   You need to continuously update your learning materials.  That is one thing I appreciate about Etoys and the community of developers.  There strong commitment to ensuring things don't break.   I once got a fraction project from Alan that was 10+ years old and it still ran on a new machine in the latest version of Etoys (which wasn't even called Etoys at the time).


Friday, January 9, 2015

Day 7 - 30 Day Learning Challenge

Completed Shaping up with AngularJS course.
Forcing myself to do this everyday has been a challenge, mostly because we are on vacation.  I may skip a day or two as we are now in Orlando.


Tuesday, January 6, 2015

Day 6 - 30 Day Learning Challeng

Continuing with AngularJS at CodeSchool.  I sometimes get answers "wrong" because I added or am missing an extra semicolon.  This can be annoying and frustrating and it would be good if the "computer" would tell me visually (like some editors do).  These are the kinds of things that can frustrate students and use up time and cognitive load better spent on other tasks.

Here is an example that did not "pass" as correct:
The following code did not "pass":
  app.controller('GalleryController', function(){
    this.current = 0;
    this.setCurrent = function(imageNumber){
      this.current = imageNumber || 0;

Yet by simply adding a semi-colon it did pass (see below):
  app.controller('GalleryController', function(){
    this.current = 0;
    this.setCurrent = function(imageNumber){
      this.current = imageNumber || 0;

Now add to this from what I have read on recommendations "You shouldn’t put a semicolon after a closing curly bracket"

Of course any automated learning program that has to do checks will have issues as there is usually more than one right way to do things.  Now, it seems Code School is looking for specific formats and commands which limits the possible "right" answers.   But since there can be more than one way to do things it would be better to simply pass a set of tests and if they pass the tests you have solved the problem.  That said in the cases I am seeing for Angular the "end result" is exactly the same, but they are trying to teach you a specific way to code so I can see why they check the way they do.

I have also been thinking if Domain Specific Objects/Languages might be better approach for learning environments and also for providing ways for non-experts to "program" as part of expressing themselves and/or playing with ideas.  But right now that is just an idea germinating lets see where it leads.


Sunday, January 4, 2015

Day 5 - 30 Day Learning Challenge

Try Blockly!!!  I tried it when it first came out and thought well, it has some potential but needs work.  Well they did a lot of work since I last looked at it.

As far as a tool for allowing students to learn about programming using tile scripts while providing a way to switch to Javascript (and I believe also Python, but need to double check that).

I haven't tried building projects with it yet, only played the games and watched some videos.  I recommend the following two videos:
First for educators check out: 

CS4HS Blockly with Ellen Spertus

Second for a great tutorial on how to create your own blocks:

The second is rather well done and the type of supporting documentation that students and teachers need.

Plus it also does Logo see the Turtle example and it can be run Offline!!!

P.S. I am having too much fun (mostly with Blockly and thinking about learning/teaching/doing programming.  Oh I also made some more progress at Code School