FANDOM


m (Removed unwanted padding)
m
Line 1: Line 1:
<div style="padding:2px; border-radius:10px; text-align:center; font-family: Gill, Helvetica, sans-serif; color:red; background-color:white; font-size:32px; float:right; width:300px; margin-bottom:12px; box-shadow:5px 5px 5px #888888;">
+
<div style="text-align:center; font-family: Gill, Helvetica, sans-serif; color:red; background-color:white; font-size:32px; float:right; width:300px;">
 
{{#ifexpr:{{CURRENTTIMESTAMP}} < 20170326060000 |
 
{{#ifexpr:{{CURRENTTIMESTAMP}} < 20170326060000 |
 
<span class="countdown" style="display:none;">
 
<span class="countdown" style="display:none;">

Revision as of 03:05, May 8, 2017

No race data loaded


Documentation

This is the documentation page for Template:Countdown, which features on the main page. It details the syntax and inner-workings of the template, and describes how to adjust it, add more races, or remove old races. NOTE: This is quite a complex template, and adjustments should not be made without prior authorisation from one of this wiki's Administrators or a member of Wikia Staff.

Template Summary

Template:Countdown is a self-updating countdown which shows the days, hours, minutes and seconds until the start of the next Grand Prix. Using Javascript and information about dates and times, it is set to always update to the next race once the previous date and time have passed. If there are no remaining races loaded, it will show "No race data loaded". In order to do this, it utilizes a nested if-statement to work out which race to load.

#ifexpr and nested-ifexpr

An IFEXPR statement takes a piece of information and function, and executed one command if the statement is true, or another if the statement is false, for example:

{{#ifexpr:{{{Variable}}} < {{{Comparison Value}}}|{{{Value if True}}}|{{{Value if False}}}}}

A nested IFEXPR takes one if statement and nests it within another, so that the inner-if statement will be executed if the outer-if statement is false (or true, depending on which part it is nested into). An example of a nested false-ifexpr statement is:

{{#ifexpr:{{{Variable}}} < {{{Comparison Value}}}|{{{Value if True}}}|{{#ifexpr:{{{Variable}}} < {{{Next Comparison Value}}}|{{{Value if True}}}|{{{Value if False}}}}}}}

Here, the first if-statement will be executed and, if it is false, the second if-statement will then be executed. If the first is true, the {{{Value if True}}} result will be shown, and the second if-statement will be skipped.

It is possible to nest several if-statements within each other, or to nest both TRUE and FALSE sides if necessary. Please note, however, that each statement must be ended with }}. The following example is a complex version of this, but it follows the same rules. It is followed by a flowchart diagram of the statement to illustrate its output. The nested if-statement is of the same style which will be used in the Countdown template.

{{#ifexpr:{{{Variable}}} < {{{Comparison Value}}}|OUTPUT|{{#ifexpr:{{{Variable}}} < {{{Second Comparison Value}}}|OUTPUT2|{{#ifexpr:{{{Variable}}} < {{{Third Comparison Value}}}|OUTPUT3|{{#ifexpr:{{{Variable}}} < {{{Fourth Comparison Value}}}|OUTPUT4|{{#ifexpr:{{{Variable}}} < {{{Fifth Comparison Value}}}|OUTPUT5|{{#ifexpr:{{{Variable}}} < {{{Sixth Comparison Value}}}|OUTPUT6|{{#ifexpr:{{{Variable}}} < {{{Seventh Comparison Value}}}|OUTPUT7|{{#ifexpr:{{{Variable}}} < {{{Eighth Comparison Value}}}|OUTPUT8|OUTPUT9}}}}}}}}}}}}}}}}

IF Statement Flowchart


Countdown Statements

Each IF statement of Template:Countdown compares the current date and time (given by {{CURRENTTIMESTAMP}} with a 14 digit stamp representing the start time of a particular event (in yyyymmddhhmmss format) by the GMT timezone. For example, for the event occurring at 7pm GMT on 23rd November 2012, the stamp would be 20121123190000. The TRUE branch of this statement leads to a countdown to this date (discussed shortly). The FALSE branch leads to another IF statement for the following event. NOTE: These events must be entered in order, from earliest to latest. Placing them into the wrong order may lead to events being skipped. The syntax of this part is:

{{#ifexpr:{{CURRENTTIMESTAMP}} < 20121123190000|Countdown code for this date/time|if statement for next event}}

The countdown code contains a number of necessary code snippets, which turn the raw date into a countdown. The actual javascript program is installed to MediaWiki:Common.js and should not be altered except by admins. The code is as follows:

<span class="countdown" style="display:none;">
<span class="countdowndate">event date in long format with time zone</span>.
</span>
<div style="padding:5px; text-align:center; font-family:Comic Sans; color:#0000ff; font-size:12px;">
until the [[EVENT NAME]]
</div>

While this may look very complicated, in reality the only changes to make for a new event are to the Event Date and Event Name. For example, for the 2013 Australianb Grand Prix at 6am GMT on the 17th March 2013:

<span class="countdown" style="display:none;">
<span class="countdowndate">March 17 2013 06:00:00 GMT</span>.
</span>
<div style="padding:5px; text-align:center; font-family:Comic Sans; color:#0000ff; font-size:12px;">
until the [[2013 Australian Grand Prix]]
</div>

The final part is just an identical IF statement for another event.

After all known races have been entered, the template needs a default output in case it runs out of events. For this, we have:

<div style="padding:5px; text-align:center; font-family:Comic Sans; color:#0000ff; font-size:12px;">
No race data loaded
</div>

This simply places "No race data loaded" in the countdown box if there are no more races to show.

So, for example, if the next two races were:

  • 2012 Brazilian Grand Prix: 25th November 2012 at 4pm GMT
  • 2013 Australian Grand Prix: 17th March 2013 at 6am GMT

then the code would be:

{{#ifexpr:{{CURRENTTIMESTAMP}} < 20121125160000 |
<span class="countdown" style="display:none;">
<span class="countdowndate">November 25 2012 16:00:00 GMT</span>.
</span>
<div style="padding:5px; text-align:center; font-family:Comic Sans; color:#0000ff; font-size:12px;">
until the [[2012 Brazilian Grand Prix]]
</div> |
{{#ifexpr:{{CURRENTTIMESTAMP}} < 20130317060000 |
<span class="countdown" style="display:none;">
<span class="countdowndate">March 17 2013 06:00:00 GMT</span>.
</span>
<div style="padding:5px; text-align:center; font-family:Comic Sans; color:#0000ff; font-size:12px;">
until the [[2012 Australian Grand Prix]]
</div> |
<div style="padding:5px; text-align:center; font-family:Comic Sans; color:#0000ff; font-size:12px;">
No race data loaded
</div>
}}}}

The number of }s at the end is equal to twice the number of events in the list.

A more complicated version (for the entire 2013 season) would be:

{{#ifexpr:{{CURRENTTIMESTAMP}} < 20121125160000 |
<span class="countdown" style="display:none;">
<span class="countdowndate">November 25 2012 16:00:00 GMT</span>.
</span>
<div style="padding:5px; text-align:center; font-family:Comic Sans; color:#0000ff; font-size:12px;">
until the [[2012 Brazilian Grand Prix]]
</div> |
{{#ifexpr:{{CURRENTTIMESTAMP}} < 20130317060000 |
<span class="countdown" style="display:none;">
<span class="countdowndate">March 17 2013 06:00:00 GMT</span>.
</span>
<div style="padding:5px; text-align:center; font-family:Comic Sans; color:#0000ff; font-size:12px;">
until the [[2013 Australian Grand Prix]]
</div> |
{{#ifexpr:{{CURRENTTIMESTAMP}} < 20130324080000 |
<span class="countdown" style="display:none;">
<span class="countdowndate">March 24 2013 08:00:00 GMT</span>.
</span>
<div style="padding:5px; text-align:center; font-family:Comic Sans; color:#0000ff; font-size:12px;">
until the [[2013 Malaysian Grand Prix]]
</div> |
{{#ifexpr:{{CURRENTTIMESTAMP}} < 20130414090000 |
<span class="countdown" style="display:none;">
<span class="countdowndate">April 14 2013 09:00:00 GMT</span>.
</span>
<div style="padding:5px; text-align:center; font-family:Comic Sans; color:#0000ff; font-size:12px;">
until the [[2013 Chinese Grand Prix]]
</div> |
{{#ifexpr:{{CURRENTTIMESTAMP}} < 20130421100000 |
<span class="countdown" style="display:none;">
<span class="countdowndate">April 21 2013 10:00:00 GMT</span>.
</span>
<div style="padding:5px; text-align:center; font-family:Comic Sans; color:#0000ff; font-size:12px;">
until the [[2013 Bahrain Grand Prix]]
</div> |
{{#ifexpr:{{CURRENTTIMESTAMP}} < 20130512120000 |
<span class="countdown" style="display:none;">
<span class="countdowndate">May 12 2013 12:00:00 GMT</span>.
</span>
<div style="padding:5px; text-align:center; font-family:Comic Sans; color:#0000ff; font-size:12px;">
until the [[2013 Spanish Grand Prix]]
</div> |
{{#ifexpr:{{CURRENTTIMESTAMP}} < 20130526120000 |
<span class="countdown" style="display:none;">
<span class="countdowndate">May 26 2013 12:00:00 GMT</span>.
</span>
<div style="padding:5px; text-align:center; font-family:Comic Sans; color:#0000ff; font-size:12px;">
until the [[2013 Monaco Grand Prix]]
</div> |
{{#ifexpr:{{CURRENTTIMESTAMP}} < 20130609170000 |
<span class="countdown" style="display:none;">
<span class="countdowndate">June 9 2013 17:00:00 GMT</span>.
</span>
<div style="padding:5px; text-align:center; font-family:Comic Sans; color:#0000ff; font-size:12px;">
until the [[2013 Canadian Grand Prix]]
</div> |
{{#ifexpr:{{CURRENTTIMESTAMP}} < 20130630120000 |
<span class="countdown" style="display:none;">
<span class="countdowndate">June 30 2013 12:00:00 GMT</span>.
</span>
<div style="padding:5px; text-align:center; font-family:Comic Sans; color:#0000ff; font-size:12px;">
until the [[2013 British Grand Prix]]
</div> |
{{#ifexpr:{{CURRENTTIMESTAMP}} < 20130714120000 |
<span class="countdown" style="display:none;">
<span class="countdowndate">July 14 2013 12:00:00 GMT</span>.
</span>
<div style="padding:5px; text-align:center; font-family:Comic Sans; color:#0000ff; font-size:12px;">
until the [[2013 German Grand Prix]]
</div> |
{{#ifexpr:{{CURRENTTIMESTAMP}} < 20130728120000 |
<span class="countdown" style="display:none;">
<span class="countdowndate">July 28 2013 12:00:00 GMT</span>.
</span>
<div style="padding:5px; text-align:center; font-family:Comic Sans; color:#0000ff; font-size:12px;">
until the [[2013 Hungarian Grand Prix]]
</div> |
{{#ifexpr:{{CURRENTTIMESTAMP}} < 20130825120000 |
<span class="countdown" style="display:none;">
<span class="countdowndate">August 25 2013 12:00:00 GMT</span>.
</span>
<div style="padding:5px; text-align:center; font-family:Comic Sans; color:#0000ff; font-size:12px;">
until the [[2013 Belgian Grand Prix]]
</div> |
{{#ifexpr:{{CURRENTTIMESTAMP}} < 20130908120000 |
<span class="countdown" style="display:none;">
<span class="countdowndate">September 8 2013 12:00:00 GMT</span>.
</span>
<div style="padding:5px; text-align:center; font-family:Comic Sans; color:#0000ff; font-size:12px;">
until the [[2013 Italian Grand Prix]]
</div> |
{{#ifexpr:{{CURRENTTIMESTAMP}} < 20130922120000 |
<span class="countdown" style="display:none;">
<span class="countdowndate">September 22 2013 12:00:00 GMT</span>.
</span>
<div style="padding:5px; text-align:center; font-family:Comic Sans; color:#0000ff; font-size:12px;">
until the [[2013 Singapore Grand Prix]]
</div> |
{{#ifexpr:{{CURRENTTIMESTAMP}} < 20131006070000 |
<span class="countdown" style="display:none;">
<span class="countdowndate">October 6 2013 07:00:00 GMT</span>.
</span>
<div style="padding:5px; text-align:center; font-family:Comic Sans; color:#0000ff; font-size:12px;">
until the [[2013 Korean Grand Prix]]
</div> |
{{#ifexpr:{{CURRENTTIMESTAMP}} < 20131013060000 |
<span class="countdown" style="display:none;">
<span class="countdowndate">October 13 2013 06:00:00 GMT</span>.
</span>
<div style="padding:5px; text-align:center; font-family:Comic Sans; color:#0000ff; font-size:12px;">
until the [[2013 Japanese Grand Prix]]
</div> |
{{#ifexpr:{{CURRENTTIMESTAMP}} < 20131027070000 |
<span class="countdown" style="display:none;">
<span class="countdowndate">October 27 2013 07:00:00 GMT</span>.
</span>
<div style="padding:5px; text-align:center; font-family:Comic Sans; color:#0000ff; font-size:12px;">
until the [[2013 Indian Grand Prix]]
</div> |
{{#ifexpr:{{CURRENTTIMESTAMP}} < 20131103140000 |
<span class="countdown" style="display:none;">
<span class="countdowndate">November 3 2013 14:00:00 GMT</span>.
</span>
<div style="padding:5px; text-align:center; font-family:Comic Sans; color:#0000ff; font-size:12px;">
until the [[2013 Abu Dhabi Grand Prix]]
</div> |
{{#ifexpr:{{CURRENTTIMESTAMP}} < 20131117190000 |
<span class="countdown" style="display:none;">
<span class="countdowndate">November 17 2013 19:00:00 GMT</span>.
</span>
<div style="padding:5px; text-align:center; font-family:Comic Sans; color:#0000ff; font-size:12px;">
until the [[2013 United States Grand Prix]]
</div> |
{{#ifexpr:{{CURRENTTIMESTAMP}} < 20131124180000 |
<span class="countdown" style="display:none;">
<span class="countdowndate">November 24 2013 18:00:00 GMT</span>.
</span>
<div style="padding:5px; text-align:center; font-family:Comic Sans; color:#0000ff; font-size:12px;">
until the [[2013 Brazilian Grand Prix]]
</div> |
<div style="padding:5px; text-align:center; font-family:Comic Sans; color:#0000ff; font-size:12px;">
No race data loaded
</div>
}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}

NOTE:All dates are currently provisional. Times are currently unavailable, and are estimates based on the 2012 events.

Finally, the box which surrounds the countdown is produced by adding:

<div style="padding:2px; border:1px solid red; text-align:center; font-family: Gill, Helvetica, sans-serif; color:red; background-color:white; font-size:32px; float:right; width:300px;">

at the top, an </div> at the end.

Community content is available under CC-BY-SA unless otherwise noted.