Imagine you want to display a small tournament called the "utopian open" on your web site. You need to download Tournabox, create an HTML page, include the Tournabox javascript and css in your page, and then create three HTML elements.
Save these files in your web site, and remember where they are.
Create an html page and insert these lines in the <head> element (first change them to point to your newly installed files).
<script src="http://<your-server>/your-js-path/tournabox.js"></script> <link href="http://<your-server>/your-css-path/tournabox.css" rel="stylesheet"></link>
This is the element your readers will see, containing the tournament results. It looks like this:
<div class="tournabox-container" id="utopian-open"> </div>
The container must have class tournabox-container.
The id is used to find the entry and outcome elements (see below).This element contains the names of all the entries (players or teams) in the tournament. Entries are listed in order: the first entry plays the second entry, the third entry plays the fourth entry, etc. In the second round, the winner of the match between #1 and #2 will play the winner of the match between #3 and #4, etc.
<script type="text/plain" id="utopian-open-entries"> DJOKOVIC, Novak SRB [1] SCHWARTZMAN, Diego ARG MULLER, Gilles LUX BAGNIS, Facundo ARG (Q) GONZALEZ, Maximo ARG QUERREY, Sam USA LU, Yen-Hsun TPE GARCIA-LOPEZ, Guillermo ESP [28] </script>
An entry looks like this:
NAME OPTIONAL-COUNTRY [OPTIONAL-SEED] (OPTIONAL ATTRIBUTE)
Where the optional country is a three letter country code (taken from this list), the optional seed is a number, and the optional attribute is a letter, such as 'w' for "withdrew" or 'q' for "qualifier."
Note that if you are not using countries, you must not show the country group.
The entries are found by starting from the id of the container, here "utopian-open," and adding the string "-entries." Thus, by giving the entries element the id "utopian-open-entries," you tell Tournabox which element contains the entries for the container "utopian-open."
This element contains the record of wins and losses. Each line lists the name of a winner, and Tournabox figures out whom that winner was playing based on the order you provided in the entries element.
The name can be abbreviated to save typing, as long as there is only one name matching the abbreviation. Abbreviations can come from anywhere in the name, and case does not matter. For example, to abbreviate "Joe Smith" you could enter "joe" or "mith".
If one entry's full name is entirely contained in another entry's full name, and you want to select the shorter one, then enter its full name. For example, to select "Joe Smith" over "Joe Smithson", enter "Joe Smith".
Note that Sam Querrey (abbreviated 'qu') is listed twice below. This means that he won in the first round, and then won again in the second round.
<script type="text/plain" id="utopian-open-outcomes"> DJOKOVIC mull qu lu, y qu </script>
Much like entries, outcomes are found by starting from the id of the container, here "utopian-open," and adding the string "-outcomes". Thus, by giving the outcomes element the id "utopian-open-outcomes," you tell Tournabox which element contains the outcomes for the container "utopian-open."
As a special case, you may enter the phrase -bye- as an entry. This means that the player who plays against this entry has a "bye," and will automatically win. Two byes facing each other will extend the bye to the second round, and so on for 4, 8, 16, etc. For example, if a tournabox has the following entries:
<script type="text/plain" id="bye-example-entries"> -bye- -bye- -bye- b c d e f </script>Then b will get a bye in the first and second rounds.
The resulting tournabox at the beginning of the tournament, before any contests are decided:
Sometimes, you want to show several tournaboxes for a single tournament. You might be blogging a tournament and giving several updates a day, as the tournament progresses. Or you might want to analyze a tournament from different angles, using different tournaboxes to focus on different aspects of play.
In these situations, Tournabox's default connection between a container and its entries and outcomes is insufficient. You need a way of saying, "I want this container to use these entries and these outcomes." You can do this by setting the attributes tournabox-entries and tournabox-outcomes on your container element. If you do this, Tournabox will ignore your container's id, and look for elements whose id's equal the values of tournabox-entries and tournabox-outcomes. When it finds these elements, Tournabox will connect them to your container. If no elements with these id's exist, Tournabox will complain.
See below for an example.
Sometimes, you want to show the grouping checkboxes -- the ways of grouping a tournabox -- in a different order. Other times, you don't want to show very many ways of grouping a tournabox. You can do these things by adding the attribute tournabox-groups to your container element. This attribute's content is the name and order of the grouping checkboxes you want to show.
You can also set the initial filter string using the attribute tournabox-filters.To give more than one filter string, separate each filter string by a comma, as in term 1,term2. Matches will be shown if they match any of the strings.
Here's an example which only shows the "by country" and "By seed" group checkboxes, in that order, with an initial filter showing Russian and Serbian players.
<div class="tournabox-container" tournabox-entries="women-usopen-2014-entries" tournabox-outcomes="women-usopen-2014-outcomes" tournabox-groups="By Country,By Seed" tournabox-filters="russia,serbia"></div>
Sometimes, you might need to insert a space or a comma: , in your filter text. To do that, you need to put quotes around the entire filter text.
For example, to search for the string "Williams, S", enter: "Williams, S" in the filter box. To initialize your container with such a filter text,
use a single quote to wrap the double quotes:
tournabox-filters='"Williams, s"'.
See Below, section "Hiding the Menu Bar" for an example.
Especially when setting custom filters, you might want to hide the menu bar, to get a cleaner look. To do that, set the attribute tournabox-hide-menubar to true.
Here's an example which only shows a single player's road to the finals
<div class="tournabox-container" id="single-player-road" tournabox-entries="women-usopen-2014-entries" tournabox-outcomes="women-usopen-2014-outcomes" tournabox-hide-menubar="true" tournabox-groups="By Performance" tournabox-filters='"Williams, s"'></div>
Like any web component, Tournabox uses CSS for styling. Designers and others are invited to modify and customize these styles, and publish their work for others to use, or for inclusion in future versions of Tournabox!
Although the raw CSS is available, the preferred way to edit Tournabox styles is with Less CSS.