Users who know HTML, CSS, and JavaScript for the web can customize the workflow pages for their own classes:
- 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.
- 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.)
- 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.)
- 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”).
- In the JavaScript, edit the following:
- Suggestions? Contact the Authors: Thomas Hoffmann-Walbeck (programming) • Rich Adams (design)
← 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. |
firstCardNo | Number of the first card in the sequence, e.g. 101 |
noOfCards | Number of cards in the game (without starting point), e.g 5 | startingPoint | The fifth argument should be the first card of this game (e.g. card101) |
Cards | Please 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]. |
cardObject | Array of the objects. Fill in the names of all card objects (without starting point). |