Simple Jigsaw Demo

Sep 04, 2012

Good evening!

I got bored sitting in front of the TV (never anything good on) and wondered if it was possible to make a simple jigsaw interaction for kids.

I started off with a picture and a jigsaw template in GIMP to make the pieces and then assembled them in Storyline using the drag and drop interaction as a template.

It's very rough around the edges but it took less than an hour to put together.  You can take a look here on PC or iPad >



PS - the beautiful model used for this project is my little girl!

17 Replies
Alphonso Hendricks

Good one Mike.

Have also tried my hand at producing games as a way to advance my learning Storyline. Thus far I have completed a Jeopardy type game (listed initially by Tim Hillier) and a TicTacToe game.

Have uploaded Jeopardy (based on arbor Day talk at local school "Starting an Earthworm farm" 

Since i have used my physicstutor MOODLE to display game - it requires you to sign in with

Username : game


Password: game123*  

Will upload TicTacToe game as well if anyone interested

P.S. How do I share code so that my attempts can be improved upon by community?


eLearning Development


You have taken my idea and made it much better.  The password is Game123*.  I use moodle as well so was able to figure it out.

to add a story file to share with others use the paper clip icon abobe the text area.  it will allow you to upload a file.

Thanks for sharing your work.  It looks good.  I would like to see your tic tac toe version as well.


Mike Walters

This is a fairly old thread now but I've had a few people email me asking about the Jigsaw Puzzle demo.

Sadly the old link no longer works and the .story file is lost deep in the RedTwenty archives but I've had a slow day so I thought I'd try to create a newer, better version...

It's actually a bit big (unless you are running a large resolution), I might fix that later. I used the same principle as before but this time created a puzzle template in Powerpoint by grouping shapes. The colors help to not only identify the pieces but also help the fuzzy select tool to select each piece individually.

So, the build in Storyline goes like this:

  1. The whole puzzle template goes as a bottom layer
  2. Each colored piece is then placed over the template
  3. The photo puzzle pieces are then stacked up top
  4. Convert the slide to freeform drag and drop
  5. Set the photo pieces as the drag item and the corresponding puzzle piece as the drop hotspot.

I added a few effects like the drop shadow when the piece is "lifted" and a small bevel on the photo pieces to give them some shape. The submit button (renamed "FINISH") goes to a blank results slide that has a message and framed copy of the complete picture. By setting a nice slow fade transition the jigsaw lines appear to fade and merge into the finished picture.

I'll attach the template and .story file so you can have a play if you want to...



PS - I only appear to be able to attach one file to a post so you can get the other files here:

This discussion is closed. You can start a new discussion or contact Articulate Support.