The Puzzle and Comments

We present the web-based version of our GraphSlider app that is currently available for Android phones on the Android Market. The version given here runs in a standard browser window. The complete source code for the puzzle is provided in a zip file linked below. Click the screen shot below or this link to open the applet in a new window:

Download

  • Download all source files corresponding to this effect: sliderweb.zip

In the zip package, you will find a fla file with well-commented Timeline code and an xml file, puzzles.xml. The xml file has to be in the same directory as the fla file and the swf file. The xml file is loaded by the swf file at runtime.

The Puzzle

In this applet a mathematical graph with 5 to 8 nodes is given. Each node is labeled 0,1, 2, 3, ... around the outside, and there are numbered sliding tiles within all but one of the nodes. A "move" is initiated by clicking a tile, which slides the tile from its current node to an empty node along an edge of the graph. The puzzle is solved once each numbered tile matches the label of the node it is on. The point is to solve the puzzle and to do it in as few moves as possible. In the applet presented here, we provide 30 puzzles of increasing level of difficulty, from very easy to very complex. You receive 1 to 3 star rating depending on how many moves it took you to solve the puzzle in comparison with the minimal possible solution. A three-star rating means that you solved the puzzle in the minimum possible number of moves. A two-star rating means you did it pretty well, and a one-start rating is the consolation prize for solving it at all. There are 30 puzzles specified in the puzzle.xml file that is included in the zip package linked above. See below for commentary on the structure of this xml file.

If you are interested in our GraphSlider Android app open the Android Market on your phone, search for flashandmath, and choose GraphSlider from the list of our apps.

If you are interested in our GraphSlider Android app's source code go to our AIR for Android tutorial:   Flash CS5 AIR for Android GraphSlider Application - Saving Puzzle State. In the Android app, the star rating is saved as you exit the app.

Comments on the xml data file

The file puzzles.xml looks like this:

<graphpuzzles>

<puzzle num="1" min="6">

    <mat>

    0,1,1,0,1;

    1,0,1,0,0;

    1,1,0,1,1;

    0,0,1,0,1;

    1,0,1,1,0

    </mat>

   <strt>

    0,2,1,4,3

    </strt>

</puzzle>

:

:

</graphpuzzles>

In this file, the <puzzle> ... </puzzle> tags indicate a puzzle. The graph itself is defined by the data given inside the <mat>...</mat> tags, which are in the form of an adjacency matrix for the graph. The list of numbers within the <strt>...</strt> tags describe the starting order of the tiles, starting at the bottom and going around the graph clockwise. In this list the number 0 refers to the blank space and the other numbers refer to the numbered tiles.

The value of the attribute "num" is simply the number of the puzzle in the sequence, but it can be used to use letters or other labels as well. The attribute "min" is the least number of moves necessary to solve the puzzle.

The puzzle presented here is a generalization of the famous Fifteen Puzzle that was thoroughly discussed in the mathematics paper, "Graph puzzles, homotopy, and the alternating group ", by Richard M. Wilson, which appeared in the Journal of Combinatorial Theory. Series B in 1974.

Back to Flash CS5 Tutorials              Back to Flash and Math Home

We welcome your comments, suggestions, and contributions. Click the Contact Us link below and email one of us.

Adobe®, Flash®, ActionScript®, Flex® are registered trademarks of Adobe Systems Incorporated.