How to Create a Drag and Drop Jigsaw Puzzle

In this tutorial I show how to turn any photograph into a drag and drop jigsaw puzzle in Adobe Captivate.  All you need to complete this task is Captivate 4, 5, or 5.5 and the latest version of our Infosemantics Drag and Drop Lite question widget.  You'll also need a suitable photograph to use for the jigsaw, and at least a basic graphics software package that allows you to slice an image into pieces (think Adobe Photoshop, Photoshop Elements, or Fireworks).

Just to whet your appetite, here's what the finished product will look like.  Can you complete it in under a minute?

 

Creating the Photo Jigsaw Puzzle

  1. Open Captivate and create a new project file.  I've used 640x480 as the screen size for the example above due to the available space on this web page, but you can use any size you want.
  2. Insert the Drag and Drop Lite question widget to create a new widget question slide.  If you don't already own this widget, you can purchase a license from our website.  Make sure you have the latest version of the widget by checking your current version shown on the About tab in Widget Properties with the current version listed here.  Only version 1.2.2 or greater will allow you to create this jigsaw.
  3. Select the photograph you intend to use for the jigsaw.  It will need to be cropped or sized to fit the area available on your widget question slide.  In the example above I selected a rather dramatic Microsoft Clip Art image that was 600 pixels wide by 400 pixels high because that's the area I had to work with.  Since the dimensions divide exactly into hundreds, it was easy to break the image up into drag objects and targets of exactly 100x100 pixels.
  4. OPTIONAL STEP: Insert a copy of the complete image to the slide and position it in the lowest layer on the timeline.  Set it's Visibilty to OFF so that this image will not appear at runtime.  This image is just a guide to use when positioning targets and drag objects later in the task. If you are confident you can position everything without this visual aid, you can skip this step, but I recommend it anyway because I found it much easier to position everything.
  5. Add a highlight box to the slide as a target object and then copy/paste as many times as required to cover the background image with target objects.  By default, new highlight boxes are exactly 100x100 pixels, which means I didn't need to resize them at all.  I did however need 24 of them for my 600x400 jigsaw.  
  6. Position the highlight boxes very carefully above your background guide image.  It's critical for the success of the final jigsaw that they are pixel perfect in placement and snug against each other.  No gaps.
  7. Change the Item Name of each highlight box to indicate its position in the jig saw.  For my example I named the boxes in the top row from left to right as t1, t2, t3, t4, t5, t6.  The next row was t7-t12, then t13-t18, and the last row t19-t24.  This naming schema enables me to easily match each target with its relevant drag object later.
  8. Now load the photograph you intend to use into your graphics editing application to slice it up into pieces.  I've used Adobe Fireworks in this example, but Photoshop, Photshop Elements or similar would also be suitable.  If you don't know how to slice an image, search the online help files for the term "slice".  For my jigsaw puzzle, I sliced the 600x400 pixel photo into 24 separate images each exactly 100x100 pixels square.  It's not necessary to use squares, but I think it looks better.  It's best to make all drag objects and targets exactly the same size because as you can see from the example above, when you drag one object to a new location, it swaps places with the object currently residing there.  Unless all objects are the same size you'll end up with gaps showing. 
  9. Open the Captivate Library panel and click the small icon to Import objects. The Import dialog opens.
  10. Browse to the folder containing your image slices and select all of them, then click Open.  All selected images are added to the library.
  11. Drag and drop the image slices from the library onto their relevant targets on the question slide.  Ironically, although it's imperative to have the target objects positioned perfectly, you don't need to be pixel perfect with the drag objects on the Edit screen because we'll be using Snap to Targets in Preferences. 
  12. Change the Item Names for all drag objects just as you did for all target objects, making sure to use a matching naming convention.  For example, if you used Target1 as your first target's name, then the matching drag object might be Drag1.  Either way, it must be very obvious which ones go together once we add all objects into the Widget Properties.  And that's exactly what we need to do next.
  13. Now that you have dozens of objects sitting on top of your widget slide, getting to the widget it'self might be difficult.  But all you need to do is click the small eye icon at the top of all timeline layers to hide all objects on the slide.  Then you can easily double-click your widget to open the Widget Properties dialog.
  14. Click the Add Drag Objects button and enter the Item Name of a drag object then click Add to add it to the Drag Objects list.  You can add multiple objects at once just by separating their item names with commas.
  15. Click the Add Target Object button and repeat the previous step to add all targets (highlight boxes) according to their item names.
  16. Click the Success tab and drag each item from the upper Drag Objects list to its respective partner in the lower Target Objects list.
  17. Click the Preferences tab and configure the settings as shown below:
  18. Click OK to close down the Widget Properties dialog.
  19. Preview your project to test how the jigsaw works.  If you've followed these directions correctly, you should be presented with a jumbled photograph.  You can drag parts of the photo to different locations and they will swap places with the object currently occupying that spot.  Keep moving sections around until you have successfully reassembled the photograph.

It took me about one hour to create this jigsaw puzzle (and a lot longer to type out these instructions).  It took this long mainly because I chose to break the image into so many chunks.  Less pieces (e.g. 12) would allow faster construction, and an easier jigsaw for users to complete.  However, I wanted this one to be more challenging, so I chose 24 pieces.

To make the overall project look better, I also added an opening slide with a completed version of the photograph that the users could study before clicking the Start button to attempt the jigsaw.

When to use a jigsaw in an elearning course

Jigsaw puzzles are a great way to add visual interest to any elearning course.  They are particularly useful if you need to train your users to recognise some visual layout (e.g. a control panel layout full of dials and buttons, a business process, circuit board layout, etc).  By forcing the user to concentrate on the graphic in the jigsaw, you are embedding that pattern in their mind.  Please note that you do NOT need to use a photograph for the jigsaw.  Any diagram, graphic, or even a sketch will do.  The trick is to select something that the users NEED to know, and make it engaging.

Bear in mind that not everyone loves jigsaw puzzles and some people might not see the point.  So you may need to canvas your target audience to see if this would be an appropriate interaction to include.  Run the idea by your manager before you invest a lot of time.

If you have any questions about this tutorial, drop me an email via the Contact page on this website or leave a comment below.

 

 

IF YOU LIKE WHAT YOU'VE READ ABOVE, THERE'S PLENTY MORE!

Join more than 2500 other Adobe Captivate users just like yourself and receive regular troubleshooting tips, illustrated tutorials, technical information, and creative solutions to real-world e-learning development issues. (See an example here.) Click the button below to join our community.  It's completely FREE!