Users who know HTML, CSS, and JavaScript for the web can customize the workflow pages for their own classes:

  1. Use Print Game 4 for your modified workflow. Use your browser’s Web Inspector view to see and copy the code from the page you want to customize.
  2. Be sure to link to the jQuery code and jQuery UI code, as shown in the first two <script> tags. If you want the jQuery cards to be draggable on a tablet or smartphone, also download the jQuery Touch-Punch code. (The publisher asks users to host it on your site and link to it there, and not to link to their site.)
  3. Each card was drawn in Adobe Illustrator (artboard size, 93×61 px) and exported as PNG-8 using Illustrator’s File > Export > Save for Web dialog box. (See link to the Illustrator file below.)

    4. ← Right-click > Download Linked File on an image at left to download the Illustrator file used to draw the puzzle pieces and customize for your own workflow.
  4. After customizing the puzzle piece labels in Illustrator, export a PNG with File > Export > Save for Web. Label each PNG file with “cardx,” where x is a natural number starting from one. Each card must have a unique x. To make the JavaScript a bit shorter, the numbers must be consecutive. That is, there must not be a gap like card1, card2, card4. Call the start card “card0.” The numbers have a hidden interpretation. Store the card file into the same folder as the HTML-page (e.g., “print.html”).
  5. In the JavaScript, edit the following:
    6. firstCardNoNumber of the first card in the sequence, e.g. 101
    noOfCardsNumber of cards in the game (without starting point), e.g 5
    startingPointThe fifth argument should be the first card of this game (e.g. card101)
    CardsPlease define the cards like in this example c101= new Card ('card101','card101.png', 93, 61,'card102', info text');
    argument 1: card id
    argument 2: image name
    argument 3: width of image
    argument 4: height of image
    argument 5: object name of next card
    argument 6: info text
    There should be a sequence, like c101, c102, to make the code shorter. If cx is a new card, the x should be in the interval [1,2000].
    cardObjectArray of the objects. Fill in the names of all card objects (without starting point).
  6. Suggestions? Contact the Authors: Thomas Hoffmann-Walbeck (programming) • Rich Adams (design)