Webmaker: “Education Friendly” Tutorials in Thimble

I can take no credit at all for the development of the tutorials pane of Thimble (that goes to Tom Park for development and Pomax for reviewing), but I was so excited by it that as soon as it was pushed out into production (before it was officially announced), I decided to try it by “converting” one of the existing starter makes.

A Little Background

I don’t know the whole story, but I do know the tutorial addition to Thimble has been in the works for quite a while. In particular, a lot of user testing was done to par down the choices, then again and again, to refine the chosen model to its “final” version. Bonus: Tom wrote up the process on his blog along with the prototypes he did.

The Old Way vs. The New Way

Starter makes (basically templates with instructions to help) are a great way to get people started on making webpages. However, because there was no tutorial feature, all the instructions were done using HTML and CSS inline comments.

Inline HTML Instructions for Movie Poster Starter Make

There were a number of issues with this method of providing a tutorial to users using inline comments. By separating the tutorial from the code, you can immediately see a number of benefits (image below):

  • ability to hide tutorial instructions (e.g. if you’re already familiar with HTML/CSS)
  • cleaner code (without all the comments)
  • shorter code, meaning you can see more of the actual webpage code
Tutorial with Inline Instructions Removed
Tutorial with Inline Instructions Removed

In addition, some nice added bonuses with the tutorial feature:

  • instructions are chunked into manageable blocks (makes it easier to process)
  • instructions can point to specific lines of code (as seen in the screenshot above)
  • make it look nicer e.g. use actual links instead of having to paste the URL into the instructions
  • you can do a lot more, because it’s just a normal webpage

A Simple Process

The great part of the tutorial system is that it’s very easy to do your own. Check out the tutorial make to start making a tutorial and for the full set of instructions.

If you want to modify an existing make into a tutorial, simply add the code below into your <head>,

<!-- this stylesheet provides default styles for tutorials -->
<link href="//thimble.webmaker.org/learning_projects/tutorial/tutorial.css" rel="stylesheet">
<!-- these scripts turn your make into a tutorial -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="//thimble.webmaker.org/learning_projects/tutorial/tutorial.js"></script>
<script>
   jQuery(document).ready(function($){
     $('body').tutorial();
   });
</script>

then:

  1. Separate your instructional text into <section>s.
  2. Publish your tutorial.
  3. Add your tutorial to a make by tagging that make with tutorial-{your tutorial link}. You can even add more than one!
Tag Your Make to Add a Tutorial
Tag Your Make to Add a Tutorial

That’s it!

Converting Some Starter Makes

I thought I would give it a try by “converting” the most popular starter makes. In both cases, I kept most of the tutorial the same with some changes to the wording to fit the tutorial. I also cleaned up the inline instructions and the code just a little.

The Keep Calm tutorial was actually the second one I did, but is simpler. If you remix my version of the Keep Calm Poster make, the tutorial is not integrated.

When I did it with the movie poster starter make, I made a couple of other changes, namely:

  • changed the order of the tasks to start with the easiest (change title & subtitle)
  • added changing the background image (because that’s a big part of a movie poster)

For these reasons, the Movie Poster Tutorial will look a little different, but otherwise, the Movie Poster make is the same.

What Next?

Use it!

One of the big things that needs to be changed is having a different way to refer to the source code, because the tutorial in a remix of a remix will no longer necessarily have the same line numbers and they are not automatically updated.

If you have any feedback, consider filing a bug or you might tweet at Thomas.

One thought on “Webmaker: “Education Friendly” Tutorials in Thimble

Leave a Comment

Please log in using one of these methods to post your comment:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s