EdGurus
  • Best Practices and Tips
    • Design Decision Wizard
    • The Basics
    • Ed Sites Doing It Right
  • Guru to Guru
    • Advice from Others
    • Share Your Wisdom
    • Discussion Forums
  • Experts' Corner
    • Online Students
    • Online Courses
    • Online Lessons
  • In the News
  • About
  • Contact
  • Terms of Use
  • Reports and Resources

Codecademy: A great example of how to use worked examples online

8/26/2014

1 Comment

 
Author: Roy Stripling
Disclaimers: This in an opinion piece. The opinions expressed in this review are those of its author (and anyone who happens to agree with him). Other than completing some online courses, the author is not in any way affiliated with
 Codecademy.

Note: Images in this post may contain copyrighted material used under the educational and criticism fair use exemptions to the U.S. copyright law.

PictureCodecademy User Home Page
The internet is fundamentally an interactive environment. With an abundance of multimedia formats and modes of interactivity, the Internet would seem a natural place to teach learners through worked examples and interactive learning practices.

What are worked examples?
"Worked examples" is basically just giving examples of problems that are partly worked out. The goal is to reduce  mental effort that isn't directly involved in learning something new. Worked examples can be "scaffolded" so that at first they there is little if any information for the learner to fill in. Then, as the learner progresses, less information is provided for them. This gives them more and more opportunities to recall and reinforce the parts they've already learned, and add to that knowledge the new parts they're being asked to learn. In general, research suggests that worked-examples are best for initial acquisition of skills or concepts.

So what's Codecademy and what does it do?
Codecademy is a free online education portal dedicated to teaching beginning computer programming skills. It distinguishes itself from MOOCs such as Udacity, Udemy, and Coursera, by skipping instructional videos and lectures and starting learners almost immediately on interactive educational activities. In fact, Codecademy's instructional experience is entirely delivered through a page with three sections. The left section contains instructional content (all in text) and step by step instructions for completing the worked code example presented in the middle section. This middle section presents the actual computer code (minus whatever element the learner is asked to fill in) that executes in the right panel. The right panel displays the results of the code present in the middle panel. If errors are made in the middle panel, the resulting erroneous behavior or error messages are visible in the right panel, and a red-tinted feedback box pops-up at the bottom of the screen explaining the problem and a hint for correcting the error. If the entered code is correct, a green check icon appears at the bottom of the screen along with encouraging feedback and a green button enabling progression to the next step in the lesson. It all seems pretty simple, but given the range of code entries a learner might submit, providing meaningful feedback is likely no small challenge. Also making all of this work in a web browser is even more impressive.


Picture
Codecademy Instructional Interface: Incorrect Answer
Picture
Codecademy Instructional Interface: Correct Answer
PictureCodecademy: Searchable Q&A Forum
It doesn't always work perfectly, though. Occasionally, I found the tool would not process a correct entry if it was a fix of an incorrect entry. In these cases, I reloaded the page (which did not cause me to lose my progress, but did reset the code in the middle panel to its original content), entered the correct code, and everything worked well. Also the feedback for wrong entries doesn't always provide a useful hint. In an early Python lesson, I was asked to create a variable called, "my_bool" and set it equal to "True". I entered "my_bool = true" (lower case "t") instead of "my_bool = True" to see what would happen. I got an error message and a pop-up feedback box asking me if I had created a variable called my_bool. Since I knew the real source of my error, I corrected "true" to "True" and got my green check icon and was able to move forward in the lesson. If I hadn't been able to figure out the problem, I could have clicked the "Q&A forum" button at the bottom of the first section. This opens a new browser tab with a searchable forum of every question that's been posted on this part of the course so far. It's often the case that someone's already posted your question and someone else has already answered it, so getting the hint you need is pretty easy. But if it's not there, you can post a new question and go back to trying to figure it out while you wait for someone to respond to your post.

So they're using worked examples. How's that going?
The good: Codecademy does everything it can to make the most of worked examples, and they use it to great effect. The first few steps in a lesson might be just introductory information (getting oriented to their three panels, for example). Generally, in those cases you're only asked to look over the middle and right sections before clicking the continue button. But before too long they'll have you filling in missing information or adding multiple lines of code. Initially, they  tell you almost exactly what to fill in and where. Instead of telling you to type in "my_age = 12" on line 8, they'll tell you to create a variable on line 8 called "my_age" and set it equal to 12. These are lessons meant for beginners, so the simplicity of the task seems reasonable. However, if you've got some prior experience programming in other languages, these early lessons can be helpful as each language has slightly different ways of doing basic things like this. This approach makes it easy to learn these differences and their short, focused tasks makes it easy to move through them very quickly.

Eventually, though, you're filling in your own code for entire "for", "if-else", "while", or "case" structures or complete functions called by other elements of your code. If you're a true coding novice, these lessons deliver exactly what you need. If they come up short in any way its not providing enough opportunities to practice and reinforce these fundamental coding logic concepts. Later lessons walk you through the development of simple task oriented programs that do things like track deposits and withdrawals from an imaginary bank account, or play a game of blackjack. These also are very useful for beginners as they introduce the novice coder to basic concepts for creating a more complex and complete programs out of smaller building blocks of code. 

The not so good: More complex programming skills still seem to be a bit beyond Codecademy's reach, however. Object-oriented practices, for example, seem impractical given their browser-based instructional environment. They do teach building and calling functions, but -- likely because of the limitation of teaching through one browser window -- they don't call to functions saved in other files (or even simulate this... actually doing this through a web browser would probably cause serious security vulnerabilities). Nor do they advise on how, when, or why one might want to save general purpose/frequently called functions in separate files. Other higher level programming practices are also not taught.

More recently they've introduced short courses on using application programming interfaces (APIs). [APIs are rules for how your program can to send or receive information to/from other programs.] I recently took the course on using the YouTube API, but don't feel I learned too much from it. It seemed more like a quick walk-through of the basic elements of the YouTube API. It used a single, scaffolded worked example that showed how to link to YouTube, submit search terms and receive search results. But it didn't cover how to request, receive, embed, and display YouTube videos. Also, after only one worked example, I was left feeling that, even if I had a site where I wanted to replicate the functions they demonstrated (seaching YouTube), I could do that, but only because I could copy and paste their code, not because I knew how to do it myself.

So what happens when I'm done with their worked examples?
First a brief confession: All of my programming skills are entirely self-taught. I learned my first two programming languages (LabView and Java) using text books and suitable
integrated development environments (IDE). The approach that worked best for me was to type the book's code examples into the IDE as I read their lessons. That and start writing code for a completely different project of my own vision as soon as I understood enough to do so. I really feel this deepened my learning, made it last longer, and made it much easier to transfer it to new projects I thought of later. Perhaps with similar thinking in mind, Codecademy more recently added a "Codebits" tool, which provides a free-form coding and output sections (like the middle and right panels from their instructional interface) that supports HTML, CSS, and JavaScript code.

In the future, they may expand Codebits to include other languages. However, I'm not sure that it is critical for the learner's further development. Once you've finished your Codecademy introductory lessons, you'll be ready for more advanced training that's going to require more than either worked examples or free-form play can offer. You'll want to read in more depth about higher design concepts and best practices. If you have a project in mind, you'll do well to try to identify key concepts you're still lacking (things like APIs for third party software, security considerations, or when to use server-side versus client-slide processing) and search for good books or online lessons that cover those topics. If you've already jumped in and started coding a project of your own creation, you'll often find answers to smaller problems you're struggling with just by searching the Internet at large. So basically, I'd say that once you've finished your Codecademy course(s), you should download a free IDE. I'm a big fan of the Komodo Edit IDE. It allows you to develop code in every programming language I've ever thought about using (except LabView).

What's your bottom line?

Codecademy is a compelling interactive learning environment and makes great use of worked examples. Its a great example of how to make that approach work for online education in general. I much prefer it over viewing recorded lectures that generally cover all the same introductory material, but have you to take it all in passively and at their pace. Interactivity in those kinds of online courses are generally limited to answering a few quiz questions from time to time. In my experience, this is not a sufficient learning experience to deliver deep, lasting learning that transfers to real-world use.

1 Comment

    Archives

    August 2014
    July 2014

    Categories

    All

    RSS Feed

EdGurus.com | Best Practices and Tips | Guru to Guru | Experts' Corner | In the News | About us | Contact | Terms of Use
All content CC-BY SA 2.0, except where noted otherwise.
Photo used under Creative Commons from mikecogh