Eposic JavaScript D6 Dice Code

Part One: Installing the Dice Code and Images

This and the following pages describe how to install the Eposic D6 JavaScript dice code and images on your web site, how to set up a dice roller on your web page, and how to instruct the dice roller to send your visitors to particular pages on your site (or call specified JavaScript functions) depending on the result of the dice roll. The code only supports six-sided dice. If you're JavaScript-savvy, you can upgrade the code yourself to handle other dice types, as long as you abide by the licensing requirements:

The JavaScript code is licensed under the Open Software License version 2.1.

The accompanying dice images are licensed under a Creative Commons Attribution-NonCommercial-ShareAlike 2.5 License.

To start, download the Eposic dice code and dice images. Unzip the files, and upload all the unzipped files to your web site, preferably all to the same directory (especially if you want to run the test file).

Download the JavaScript code

Download the dice images

Before you start using the code, check out your installation. A test page, testdice.html, is included in the zip file. To use it, make sure you have uploaded it to your web site along with the other files. You can run the test on my eposic.org server first, to see what it's supposed to look like. Then enter the URL for the test file on your web site in your browser, and see if you get a page that looks and behaves like the test page on my site. If you do, then all is installed correctly.

Some browsers might have a problem animating the dice images. So I make an allowance for the code to perform animation using either the gif images or ascii text. The test file is set up to use the gif images.

If you have problems with the test page, make sure that all of the contents of both zip files are uploaded to the same directory, as the test page assumes the images and the code are in the same directory as the test file. If you have double checked all of this, if you are using a modern browser, and the test page still doesn't load/work, you can contact me (use the Contact link in the left margin of my site), and if I'm not too swamped, I'll try to help you to get the test page on your site to load correctly.

Once you get the test page to load, you should see a 'Roll Dice' button. Click the button, and a couple of dice should animate and roll numbers. Keep clicking, and the dice will continue to roll different random numbers. When that happens, you know you've installed everything correctly.

Note: It may take a while for the images all to load the first time. After that, if your browser caches the images properly, it shouldn't take any time for the images to load on subsequent visits to the page. But it's because of this caching problem that I allow for plain ascii text to be used instead of images, if caching becomes a problem for you in any given dice roller project.

Once you get the test page to load and the dice to roll, you're ready to create or modify your own web pages to make use of the newly installed code and images! When you're ready, proceed to Part Two: Creating Your First Dice Roller!

Part Two: Creating Your First Dice Roller -->