Random Tables🔗
Intro🔗
This page contains a script which reads a "random table" and picks (randomnly) an item from it. To do this by yourself, you need:
- A random table
- A markup to identify your markup table
- A trigger (like a button) to pick an item from the wished table.
- Basic state
- Packaging things
- Source (how to see how this site is made)
You can also directly look at the source of this page or website to see how things are done.
Random table🔗
A table, in markdown format has to respect a certain format. Without going into details, here is an example, here is an example for defining a table:
| Chances | Result
| - | -
| 1-50 | Yes
| 51-100| No
Identification🔗
This is all nice and fun but there's a limit: it is not allowed to identify programmaticaly the table. FOr this, we have to cheat. We add an invisible object in the page. This object has an id.
<div id="rtodds5050"></div>
| Value | Result
| - | -
| 1-50 | Yes
| 51-100| No
Why rtodds5050
? It's just my choice. It's a Random Table with 50/50 chances. This only thing about this value is that it has to be unique.
Trigger🔗
In markdown, there's not really things like buttons. The work around is to have links with some details on them:
- We have to take no action when the link is clicked (normally, we are sent to a new page): we use as URL
javascript:;
. - We need to say which random table has to be used: we add an attribute
data
with the value of the identifier of the random table:data="rtodds5050"
- We also need to say that this link has to trigger the resolution of a random table: we add the class
random-table-resolve
. - We want to have this link easy to find: we add some nice packaging (optionnal :) )
md-button
So we need to add this in the document:
[Give yes/no on a 50/50 basis](javascript:;){ .md-button .random-table-resolve data="rtodds5050" }
<div id="rtodds5050"></div>
| Value | Result
| - | -
| 1-50 | Yes
| 51-100| No
Basic state🔗
With the previous piece of code we obtain:
Example
Value | Result |
---|---|
1-50 | Yes |
51-100 | No |
Even if its value is changing with the result, you can reclick the link (which look like a button to be fare).
Packaging things🔗
With long tables🔗
This is nearly all of what you need to know to use this functionnality. In may case, I don't want to see all the time the random table. I want the link, click on it and get the value. With the Yes/No value, I never will check the table. But when it is for other value, I may want to see it some times. So I hide the random table in a collapsed part:
Example: Longger table
Random table
Value | Result |
---|---|
1 | Stoic |
2 | Attractive |
3 | Passive |
4 | Aloof |
5 | Affectionate |
6 | Generous |
7 | Smug |
8 | Armed |
9 | Clever |
10 | Brave |
11 | Ugly |
12 | Sociable |
13 | Doomed |
14 | Connected |
15 | Bold |
16 | Jealous |
17 | Angry |
18 | Active |
19 | Suspicious |
20 | Hostile |
21 | Hardhearted |
22 | Successful |
23 | Talented |
24 | Experienced |
25 | Deceitful |
26 | Ambitious |
27 | Aggressive |
28 | Conceited |
29 | Proud |
30 | Stern |
31 | Dependent |
32 | Wary |
33 | Strong |
34 | Insightful |
35 | Dangerous |
36 | Quirky |
37 | Cheery |
38 | Disfigured |
39 | Intolerant |
40 | Skilled |
41 | Stingy |
42 | Timid |
43 | Insensitive |
44 | Wild |
45 | Bitter |
46 | Cunning |
47 | Remorseful |
48 | Kind |
49 | Charming |
50 | Oblivious |
Fancy demo?🔗
A full demo of what I use now. There's one extra feature: it is possible to have link to trigger other linksm making it possible to roll several tables at once. You will have to check the source of this page to discover how to replicate this :)
Multiple tables
You can Roll add Odds at once here.
Almost Certain | Likely | 50/50 | Unlikely | Small Chance |
---|---|---|---|---|
Roll | Roll | Roll | Roll | Roll |
Random tables
Odds Almost Certain (90%)
Value | Result |
---|---|
1-10 | No |
11-100 | Yes |
Odds Likely (75%)
Value | Result |
---|---|
1-25 | No |
26-100 | Yes |
Odds 50/50 (50%)
Value | Result |
---|---|
1-50 | Yes |
51-100 | No |
Odds Unlikely (25%)
Value | Result |
---|---|
1-75 | No |
76-100 | Yes |
Odds Small Chance (10%)
Value | Result |
---|---|
1-90 | No |
91-100 | Yes |
Source🔗
If you want to recreate this, look at the other page of the repo and click on the upper right corner, it will send you to github, when all the source is accessible and can be cloned (we say forked) at will.