User:DoctorOkay/Tutorials/Checklists

Intro

Checklists on BGWiki are making use of Transculsion, <noinclude> blocks, switch statements, and variables to control styling. Ultimately, the checklists are just fancy tables.

Basic Example

Add a template to a page using curly braces, like this

{{Summoner Spell Checklist
}}

That will embed the checklist on the page like so:

Avatar Checklist
[X] Carbuncle [X] Fenrir [X] Ifrit [X] Titan [X] Leviathan [X] Garuda [X] Shiva [X] Ramuh [X] Diabolos [X] Alexander [X] Odin [X] Caitsith [X] Siren	[X] Fire Spirit [X] Ice Spirit [X] Air Spirit [X] Earth Spirit [X] Thunder Spirit [X] Water Spirit [X] Light Spirit [X] Dark Spirit

Note that you don't need to include all of the checklist items when you embed the template in order for it to appear properly.

You can add items to checklist to check them off. Generally this is done by adding Complete to a list item. So for example this:

{{Summoner Spell Checklist
| Carbuncle = Complete
| Siren = Complete
| Fire Spirit = Complete
| Ice Spirit =
}}

Will embed this checklist to the page:

Avatar Checklist
[Check] Carbuncle [X] Fenrir [X] Ifrit [X] Titan [X] Leviathan [X] Garuda [X] Shiva [X] Ramuh [X] Diabolos [X] Alexander [X] Odin [X] Caitsith [Check] Siren	[Check] Fire Spirit [X] Ice Spirit [X] Air Spirit [X] Earth Spirit [X] Thunder Spirit [X] Water Spirit [X] Light Spirit [X] Dark Spirit

Note that even though I added "Ice Spirit" to the list in the checklist, it doesn't appear checked off because I did not set it equal to Complete.

Complete is an arbitraty string. If you are creating a template from scratch, you can use a different string to mark off checklist items.

How It Works

Take a look at the source for the Template:Summoner Spell Checklist we are using here

Let's take a look at this piece by piece.

Noinclude

<noinclude>'''USAGE:''' Define Complete-Color (the color for obtained spells) and Default-Color (for spells that have not been obtained yet). Each spell obtained should be notated with "Complete."  Omission of any spell, or writing anything other than "Complete", will result in the spell being marked as default/unobtained.

<pre>{{Summoner Spell Checklist
|Complete-Color = green
|Default-Color = black
| Carbuncle = 
| Fenrir = 
| Ifrit = 
| Titan = 
| Leviathan = 
| Garuda = 
| Shiva = 
| Ramuh = 
| Diabolos = 
| Alexander = 
| Odin = 
| Caitsith = 
| Siren =
| Fire Spirit = 
| Ice Spirit = 
| Air Spirit = 
| Earth Spirit = 
| Thunder Spirit = 
| Water Spirit = 
| Light Spirit = 
| Dark Spirit = 
}}</pre>
</noinclude>

The first thing to note is the <noinclude> block. This tag prevents whatever is inside of it from rendering when the tempate is embedded in a page. This ensures that the template page can instruct a user on the usage, but include only the table when the template is embedded.

For example,

Using <noinclude> lets me hide certain things from appearing when this page is embedded.

Using <noinclude> lets me hide certain things like this text here from appearing when this page is embedded.

Table Styling

Now let's look at the stuff beneath the <noinclude> block.

{| cellpadding="5" style="max-width: 1200px; min-width: 350px; border-spacing: 5px;" class="bdrdarkblue collapsible collapsed"
! colspan="4" style="background: #4696CF; color: #FFFFFF; padding: 3px; font-size: large; width: 100%; " | Avatar Checklist
|-
| style="background: #F5F5F5; width: 25%; vertical-align: top;"|
{{#switch: {{{Carbuncle}}}
 | Complete = *[{{Check}}] [[Carbuncle|<font color={{{Complete-Color}}}>Carbuncle</font>]]
 | #default = *[{{X}}] [[Carbuncle|<font color={{{Default-Color}}}>Carbuncle</font>]]
}}
|}

I've simplified the table code to include only one row, just to make it easier to read. Also, for now don't worry about the {{#switch: {{{Carbuncle}}} bit. I'm just going to start with the table styling.

So this is basically just a plain old wiki table with a couple of added bits. First there is some CSS styling added into the table generally and top row. Here's what it looks like without that, just using the standard wikitable class.

Avatar Checklist
Check Carbuncle

You can change the class and add some styling options to the the table header and rows.

Avatar Checklist
Check Carbuncle

Right now most of the templates have styling on an item-by-item basis, probably it could be cleaner to put those declarations at the top and override where necessary. To make reading the upcoming code easier.

Avatar Checklist
Check Carbuncle

Switch Statements

So here is where the checklist logic comes into play.

{{#switch: {{{Carbuncle}}}
 | Complete = *[{{Check}}] [[Carbuncle|<font color={{{Complete-Color}}}>Carbuncle</font>]]
 | #default = *[{{X}}] [[Carbuncle|<font color={{{Default-Color}}}>Carbuncle</font>]]
}}

If you have some experience in software programming you probably recognize the outline of a switch statement here. You can take time to read up on the switch parser function if you want to understand the whole thing. I am simply going to pull this one apart so you can understand it.

First we have the switch variable, in this case Carbuncle

{{#switch: {{{Carbuncle}}}...

Depending on what value we pass when we include the template, a different line will be written onto the page. If you pass the Complete parameter, this code will execute:

 | Complete = *[{{Check}}] [[Carbuncle|<font color={{{Complete-Color}}}>Carbuncle</font>]]

and it will show up as [Check] Carbuncle

or if you pass aything else (or nothing) you get the default case:

 | #default = *[{{X}}] [[Carbuncle|<font color={{{Default-Color}}}>Carbuncle</font>]]

which appears as [X] Carbuncle

Eagle-eyed readers will have noticed that there is another parameter being used here. They are Complete-Color and Default-Color. You can pass this parameter into the template to change up the font colors if you'd like. So adding something like the following to the top of the template:

{{Summoner Spell Checklist
| Complete-Color = orange
}}

will show this [X] Carbuncle. Note that these parameters are pre-defined in the template, but can be overwritten when including the template in a page.

And then you copy this switch statement over and over and over again for as many items as you have in the checklist.

And that is pretty much it. Now you should know enough to go ahead and make a template of your own. I would advise starting with getting the checklist looking like you want before adding in the switch logic.

Ideas For Improvement

1. Use an external stylesheet to make styling look cleaner so the templates are more readable.
2. Change from a #switch to #ifelse for possible page performance improvement.