Cryptogram Script

How good are you at secret codes? The following cryptogram has been encrypted using a simple substitution cipher. Can you work out what letter in the encrypted code represents what letter in clear text and work out what the message actually says?

Not sure how to work the above cryptogram? Well all you have to do is to select the blue letters to identify which letter you think has been substituted for what. Select the letter from the cryptogram from the top set of letters and the letter you think it represents from the bottom set. It doesn't matter which you select first. Once you have selected a letter from both sets the page will automatically update. If you make a mistake you can either just select the right letter or change letters back to dashes. If you really stuff it up you can always select <reset>.

The frequency chart underneath will assist you in working out what is what by displaying the number of occurrences of each of the encrypted letters in the entire phrase. It also displays those letters you have already decrypted.

There are no prizes for decrypting the cryptogram, just the satisfaction that you will feel once you get the last letter in place.

Oh, and if you are having trouble figuring this one out, the second sentence is almost the same as a typical typing phrase that uses all the letters of the alphabet.

There are two scripts that you need to incorporate into your web page to put a cryptogram on the page. The first of these is the is the one that does most of the work. To get this script copy the below code and save it as crypto.js.


Next add the following to the bottom of your page to attach the script.

<script src="cryptoarray.js" type="text/javascript"></script>
<script src="crypto.js" type="text/javascript"></script>

The next step is to set up the array script that selects the cryptogram to be displayed. Enter the texts to be encrypted into the form below. Don't worry about whether you enter upper or lower case because all of the letters are going to be encrypted in uppercase anyway. Anything you enter that are not letters will be retained intact in the output. Once you have entered each individual text select the "Add" button to add the encrypted version to the array.

Continue adding as many texts as you require. You can add as many as you like but if you add too many then your quiz page may take a long time to load. If you are going to set up a daily cryptogram page then you will need 31 texts in the array.

The script code for the cryptogram array will appear in the text box below with an additional statement being added for each text you add. Don't worry if you make a mistake as you can always delete lines from the resulting code if you want to remove questions. If you decide you want to start over, simply refresh the current page.

Please note that you can't enter HTML into the text to be encrypted because that will get encrypted as well.

Generate Cryptograms

Once you have finished entering your texts, copy the code from the above text box and save it as a file called cryptoarray.js. You can rearrange the lines if you want to change the order of the texts or delete lines to remove texts you decide not to include. The only limitations are that you cannot change the first four lines of the code and you must have at least one text for the crypto script to work.

Select whether you want the script to display a different cryptogram daily or whether you want to use random selection and remove the // from the appropriate line at the bottom of the script. Otherwise just leave the last five lines alone and pass in the number of the code to display.

The final two steps to install our cryptogram script into out web page are to install the stylesheet file and to add the HTML into the body of the page where we want the cryptogram to appear.

Let's start with the stylesheet. All you need to do is to copy the following code and save it as crypto.css.


You can then add it to the head of your page using:

<link rel="stylesheet" href="crypto.css"  type="text/css">

The final step is to put the following HTML into your page where you want the cryptogram to appear.


I am sure that visitors to your site will enjoy trying to decrypt the texts that you place in your cryptograms. Of course some of them may find that they are unable to solve them while others may want to know if they have got the answer right. I'll leave it to you to decide how you want to deal with those situations.


This article written by Stephen Chapman, Felgall Pty Ltd.

go to top

FaceBook Follow
Twitter Follow