Day 13 - 30 Day Learning Challenge - Debugging/Simulations Play

Not much to show today.  I spent a good deal of time working on some dice simulations/modeling. My goal was to think about how students might write a dice simulation in various languages and how one could facilitate understanding/learning about the underlying principles involved in dice simulation along with the concepts and ideas that can be explored in this process.

I looked at dice simulations in Scratch, TurtleArt and Python.  I also explored ways I could create dice simulations in Etoys.  As I mentioned in an earlier post I find "step by step" execution useful for not only teaching, but also for myself when the code doesn't do what I think it should.

I also played with various ways to write the simulation.  Partly to think about how kids might do this. Side note - I found it really hard to overcome my pre-existing knowledge as I instantly went to more "advanced" ways of implementing simulations, rather than ways a novice might start out. I also tried various approaches to think about how to create some "good examples" that students can learn from.

These examples ideally would also show the evolution of my thought and try and convey that we don't start out with a thing of beauty but how refactoring and rethinking the problem can help improve your results (although admittedly I have on occasion wound up making things worse by over complicating ;)

Cheers,
Stephen

Post Script - Another way to think about simulations check this Scratch Studio - "Just like real life!" a more "real world" way kids think about simulations/modeling.

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).

Cheers,
Stephen

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.

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.

Cheers,
Stephen

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).

Cheers,
Stephen

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.

Cheers,
Stephen

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.

Cheers,
Stephen

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!!!

Cheers,

Stephen

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

Day 4 - 30 Day Learning Challenge

AngularJS vs Etoys 

(as a tool for younger people to work very deeply by programming and building stuff)

First this is not a fair comparison, as Etoys was designed for this purpose and Angularjs was not.  Yet I understand the desire to have a tool to that can be used for exploring ideas, communicating and expressing themselves.  I also understand the request to have tool that can be used in a browser.

First I will start with AngularJS’s advantages:

1. It has the support of Google
2. There is a large community of people who use AngularJS and an even larger community who know JavaScript
3. There are many resources on the Web for learning about AngularJS and very good support groups willing to help beginners
4. There are lots of code examples one can learn from and play with on Plunker and JSfiddle.

The challenges of AngularJS:

1. You have to spend a lot of time learning about AngularJS and how to do things in AngularJS which takes away from the time spent  on learning/expressing/exploring.
2. It is built around the Web in particular the DOM.  Ie: you are restricted to what the DOM can do.  Okay not completely true you can blow a hole in the DOM and using SVG or Canvas but the libraries available to do things here (think D3 et al) are very specific and require high learning curves.
3. While the learning curve when compared to other Web Frameworks is not quite as steep, there is a steep learning curve for students especially if they do not have a lot of programming experience.
4. It is a text based language (as opposed to a tile based one) which means syntactical errors are easy to make and take time and cognitive load to understand and correct.

The advantages of Etoys:

1. It was designed for construction and learning by students
2. It supports tile based scripting and lets you switch to text based.
3. It lets you directly manipulate objects and extend their functionality.
4. The community to support learners is responsive and helpful.
5. There are some good educational resources for students and teachers to explore.

The challenges of Etoys:

1. There is no large organization or funding supporting Etoys.
2. The community while supportive and helpful is not large.
3. Etoys currently does not run in browsers or on tablet or phones (Yes, I know it can and there are projects which show its possible, but there is no “supported” fully functional and fast enough version that does so for all “modern” browsers).
4. Etoys is not as popular as AngularJS
5. JavaScript is more popular than Squeak (and thus has a larger base of people who could potentially support teachers and students).

So all this aside perhaps the best tests are how easy is it to:

1. For a teacher to build an educational tool for students
2. For a student to create a form of expression
3. For a student to explore certain ideas

Now to quote Seymour Papert “It’s hard to think about thinking without thinking about something.”  So I will try to think about some things and how they could be done in AngularJS and Etoys (and perhaps some other ways of doing things).  So at some point I will try and think about "something" more concrete.

Ideas and suggestions welcome for “what to build”.

Cheers,

Stephen

P.S. Also made some progress at Code School but poor internet connectivity has limited my time on the computer and increased the time spent with family :)

Day 3 - 30 Day Challenge

Well coding while driving is not easy and since we spent most of the day driving my coding was limited to a few minutes just before I crashed at the hotel.

I did think about coding though while driving which was challenging.  It forced me to a higher level rather than specific code, I thought about the general problem and how I would approach it.  My goal is to take a number of concrete examples of data sources (csv and JSON for now) and visualizations (table and graph) and "connect" those together.  Then see what general patterns I can determine/code from that.  I did manage a brief period to figure out how to walk through a javascript object to get the Keys I would need to tie a JSON feed to a visualization.  My thought is to inspect the data to determine the fields/keys that are available to connect to either a table (will look at using smart table for first attempt, since some folks I know are using that) and also either HighCharts and/or D3.

I plan on creating the data structures, directives, and controllers to allow me to connect the data source to a visualization.  Then the next step after that will be to think about and perhaps try to implement some simple user interfaces that allow a lively like drag and drop connection between the data-source and visualizations.

Cheers,
Stephen

Day 2 - 30 Day Challenge

I completed lesson 3 from Shaping Up With Angularjs.

Since we will be driving to Florida over the next two days I will be thinking about code rather than writing it.  I plan to think about how I can implement something like the lively demo using Angular.  In particular how to "connect" a data source to a visualization and allow for converter code that is all in one place.