Random Number Widget

Random Number Widget allows you to easily generate random numbers between two values.

This component requires a minimum of two elements. An element to act as a button, and at least one other element to populate with the randomly generated number.

Simple usage

Proper use of the Random Number Widget class requires the setting of a min and max value. Where 'min' specifies the minimum value of the of the random number to be returned and 'max' the maximum value:

<button id="question1" class="randomNum" min="1" max="100">num</button>
<span>X = </span><span class="randomNode" master="question1"">?</span>
try X = ?

Decimals

The class also works with decimal points:

<button id="question2" class="randomNum" min="0.001" max="0.9">num</button>
<span>X = </span><span class="randomNode" master="question2"">?</span>
try X = ?

Specify decimal places directly

We can also leave the decimal place open to specify decimal places. For example a min of 1.0000, acts like 1 but returns 4 decimals, try it:

<button id="question3" class="randomNum" min="1.0000" max="10">try</button>
<span>X = </span><span class="randomNode" master="question3">?</span>
try X = ?

Two nodes for one random

In some cases you may want to use a single random variable in multiple places. For example given 'X = Y * 5 + Y' we could set Y in both places:

<button id="question4" class="randomNum" min="1" max="10">try</button>
<span>X = </span><span class="randomNode" master="question4">Y</span>
<span> * 5 + </span><span class="randomNode" master="question4">Y</span>
try X = Y * 5 + Y

Unlmited nodes

As you might have quessed there is no limit to nodes:

<button id="question5" class="randomNum" min="1" max="10">try</button>
<span>X = </span><span class="randomNode" master="question5">?</span>
<span class="randomNode" master="question5">?</span>
<span class="randomNode" master="question5">?</span>
<span class="randomNode" master="question5">?</span>
try X = ????

Bootstrap Skins

The random number generator's components can be applied to any element and thus can easily use bootstrap skins. The following is a simple example:

(long code sample see Bootstrap docs for use of default bootstrap styles)
Bonus!

Self as node

These classes can be added to nearly any element. Here is an example of using a button as both the random number generator and the 'randomNode':

<button id="question7" class="randomNum randomNode" min="1" max="100" master="question7">try</button>
try

Error handling

Below we have an example where developer forgot to specify a min value and another example where min is set to puppies:

<button id="question8" class="randomNum randomNode" max="100" master="question7">try</button>
<button id="question8" class="randomNum randomNode" min="puppies" max="100" master="question7">try</button>
try try

Custom Skin

Skins can be added by including an extra class such as 'clock' to the text we want styled:

<button id="question10" class="randomNum" min="1" max="100">num</button>
<span class="clock">
<span>X = </span><span class="randomNode" master="question10">?</span>
</span>
try X = ?

Advanced Skins

We can also provide custom skins for these components. Click play to go to a custom skin example:

Goto sample