The Random Quote Generator - How to build it.

You've probably noticed the quotes that show on right-hand side of the the banner. The java script that runs behind it is pretty simple and can be used to give some 'dynamic' content to a web-page. For example, you could replace the quotes with whatever text you wanted or get rid of the text and replace it with some images.

The actual code looks like this:

    <script type="text/javascript"> 
    var quote = new Array()
    quote[0] = 'HTML for quote number 1'
    quote[1] = 'HTML for quote number 2'
    quote[2] = 'HTML for quote number 3'
    quote[3] = 'HTML for quote number 4'

    var randomquote = Math.floor(Math.random()*(quote.length));
    function printquote(){
    document.write(quote[randomquote]);
    }
    </script>

Of course, if you want to use the code, you are more than welcome to cut & paste it straight out of the page. Either place the javascript code in the <head> section of your page or - and this is my preferred method - you can copy the code between the <script> tags into a separate *.js file and reference the file in the <head> section of your page like this:

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

To place the quote, add the following to your page:

    <script type="text/javascript>"
    printquote();
    </script>

If you like your pages to validate correctly with the w3c, you are better off putting the javascript into a separate file and including it in the <head> section of your page. If not, any HTML tags that you include in your script will be included in the validation - even if they are not output on the final page - which may give some unexpected results.

That's all there is to it! However, if you would like to understand how it does what it does, read on!

The Random Quote Generator - How it works.

(For the nit-pickers.)

The first thing that I should point out is that it doesn't actually generate quotes, it just randomly picks a quote out of a selection of pre-defined quotes. (Maybe I'll try to build a real quote generator at some point. If I do, I'll rename this the Random Thing Picker.) The second thing that I should say is that this is based on a pseudo-random number generator, not a true-random number generator. See this Wikipedia article for more on this subject.

Getting started.

Step one is to create an array to hold your quotes - 'quote' seems as good a name as any - then add an element to the array for each quote.

    var quote = new Array()
    quote[0] = 'HTML for quote number 1'
    quote[1] = 'HTML for quote number 2'
    quote[2] = 'HTML for quote number 3'
    quote[3] = 'HTML for quote number 4'

Bear in mind that the HTML text that you use in 'HTML for quote number X' needs to have any single quote mark escaped with a backslash so that they are not interpreted in javascript as the end of the quote. Also, you should use HTML entities where appropriate. As an example, see the entry for the Charles M. Schulz quote below:

'"There\'s a difference between a philosophy and a bumper sticker."<br />Charles M. Schulz (1922 - 2000)'

Pick a number, any number...

Next, we need to create a variable and give it a random number that references one of the quotes in our array.

    var randomquote = Math.floor(Math.random()*(quote.length));

The math.floor() function takes a floating-point number and rounds it down to the nearest whole number.

The math.random() function generates a random number from 0 to <1. (i.e. 0 to 0.9999999999).

quote.length, returns the number of elements in the 'quote' array as an integer. In our example here, we have four elements so quote.length returns 4.

Looking at the table below, we can now see how a quote is picked by multiplying the total number of available quotes by result of math.random and then rounding that result down to the nearest whole number. The highlighted row shows an example result if math.random() had returned '0.37'. If we add or remove elements to our array in the future, the result of quote.length will increase or decrease automatically.

math.floor	(	Math.random()	*	quote.length	)
0	(	0 to <0.25	*	4	)	'HTML for quote number 1'
1	(	0.25 to <0.5	*	4	)	'HTML for quote number 2'
2	(	0.5 to <0.75	*	4	)	'HTML for quote number 3'
3	(	0.75 to <0.99	*	4	)	'HTML for quote number 4'

Now all we need to do is create a function to output the chosen array element.

    function printquote(){
    document.write(quote[randomquote]);
    }

That's it! Feel free to use these snippets 'as is' or modified, it's up to you. If you have any comments or additions that you feel could be helpful - or you have any corrections - let me know.

Corrections & lessons learned (so far)!

The original version used math.round() to generate the whole number until a colleague pointed out to me that the first and last quote would - in all probability at least - not be picked as often as the others.

The math.round() function takes a floating-point number and rounds it up or down to the nearest whole number.

If I recreate the table above, you can see that the first and last quotes will only be shown if math.random() returns '0 to <0.5' and '2.5 to <3' respectively. The others will stand a much higher chance of being picked. Note that the we use 'quote.length -1' here to count from 0 to 3 not 1 to 4.

math.round	(	Math.random()	*	quote.length -1	)
0	(	0 to <0.5	*	3	)	'HTML for quote number 1'
1	(	0.5 to <1	*	3	)	'HTML for quote number 2'
1	(	1 to <1.5	*	3	)	'HTML for quote number 2'
2	(	1.5 to <2	*	3	)	'HTML for quote number 3'
2	(	2 to <2.5	*	3	)	'HTML for quote number 3'
3	(	2.5 to <3	*	3	)	'HTML for quote number 4'