Wiki; Wikitext Leitfaden

Einführung

Wikitext is incredibly important for spicing up wiki pages, and it often goes underused despite its usefulness. This guide aims to make Wikitext more understandable and to increase its general usage across pages. Not everything is achievable with Wikitext alone; HTML code is much more expansive in use than Wikitext, however it can be more complicated. If something is not on this list, try to look for it on the Coding Help Wiki.

Basic Page Composition

Headings

Headings are meant as titles for major page sections, such as a level description, or a section listing colonies. Think of these as chapter titles for a book. For example, the "Basic Page Composition" header directly above is a Heading. Surrounding text with two equal signs on both sides makes it a heading, which will display larger than other text and add it to the table of contents for the page. These are formatted in the Source Editor as:

==Example Heading==

Sub-Headings
Sub-Headings are meant to further organize pages, as a sub-category under Headings. For example, the text above reading "Headings" and "Sub-Headings" are both formatted as Sub-Headings, under the main Heading of "Basic Page Composition". These are formed with three equal signs on both sides of text, formatted as:

===Example Sub-Heading===

Sub-Heading 2
Sub-Heading 2 is meant for very finely organizing a page; it is the same concept as a Sub-Heading being a sub-category to a Heading, but instead, it is a sub-category to a Sub-Heading. It is less common to reach this level of organization in most pages, but if it is warranted, it can prove to be a useful tool. Sub-Heading 2 is formatted as:

====Example Sub-Heading 2====

Title Headings
You may be wondering: if headings are two equal signs and sub-headings are three equal signs and so on, what does one equal sign result in? Well, surrounding text with one equal sign results in a Page Title, which makes the text massive and distracting. These should be avoided in pages, as contrary to their name, they don't change the actual title of the page; they just make very large and distracting text. For the sake of cleanliness, a Page Title will not be used here, but an example of it can be found at the top of the page; text formatted as a Page Title will appear the way "Wikitext Guide" does. A better way to achieve large text is via the <big> and </big> feature.

Basic Text Editing

This is a section regarding the most basic part of text editing: the top formatting options in the Visual Editor.

Bold Text

Bold text in articles is primarily used for the name of a specific level or entity whenever it is mentioned in its own article. For example, in Level 0 EN's article, every time "Level 0" is said, it is bolded. This allows for better organization and gives a cleaner feel to the page.

Bold text in Source Editor:

'''Text'''

Result: Text

Italicized Text

Italicized text is less commonly used in pages, but it still has its uses. Stressing a point in an article is better achieved with italicized text rather than, say, fully capitalizing it; text like "Do NOT, by any means, enter this level" looks unfitting in articles. If something is that important to stress, it is recommended to italicize it.

Italicized text in Source Editor:

''Text''

Result: Text

Underlined Text

While being one of the three simple formatting options listed at the top of the Visual Editor, underlined text is written in the Source Editor by surrounding text with <u> and </u>, rather than with apostrophes.

Underlined text in Source Editor:

<u>Text</u>

Result: Text

Strikethrough Text

If you want text that looks like it has been crossed out, surround it with <s> and </s>. This can be used for information that has, in-lore, been changed following a new discovery.

Strikethrough text in Source Editor:

<s>Text</s>

Result: Text

Intermediate Text Editing

Text can be further edited in many interesting and useful ways, such as adding shadows, code, or even colored text. These are less commonly used in articles, but can still serve a purpose every once in a while (avoid overusing them).

Code Text

Surrounding text with <code> and </code> will change its font to a more computer code-look. This can be used for many different things, like in the case of this page, where all examples of Source Editing code is set to the code font. In rare circumstances, the font of an entire page could be set to this look, changing its feel entirely.

Code text in Source Editor:

<code>Text</code>

Result: Text

Blurred Text

This recently-added feature makes it possible to blur text until it is hovered over. There are many creative uses for this!

Blurred text in Source Editor:

<span class="spoilerblur">Example Text</span>

Result: Example Text

Colored Text

You can even color text using Source Editing, with many different options. This should only be used in very specific circumstances, like collapsible text, which will be addressed later. Do not color the entire text of a page; it is hard on the eyes and makes your page look like a blog from 2008.

Colored text in Source Editor:

<span style="color:green;">Text</span>

Result: Text

There are many color options beside green, such as: blue, red, and yellow. However, coloring text is not just limited to simple colors; with HTML color codes you can make text any specific shade you wish. Just replace "color:COLORNAME;" with any HTML hex, formatted as "color:#FFFFFF;" (do not forget the "#" before the hex code, as the color will not appear without it).

Wavy Text

While not commonly used, text can be made

wavy

! Just use the following code in the Source Editor:

<div class="wavy-text"><span>letter-1</span><span>letter-2</span><span>letter-3</span><span>letter-nth</span></div>

Note: All resulting letters will be capitalized, and the font cannot be changed. The text color, however, can be changed, along with shadows.

wave

<span style="color: #3A3A3A; text-shadow: 2px 1px 0 #7A7A7A"><div class="wavy-text"><span>w</span><span>a</span><span>v</span><span>e</span></div></span>

Text Shadows

Adding shadows to text can make it stand out and appear much more unique! Here are just a few examples of the many things that can be done with text shadows:

Basic Shadow
Basic shadow in Source Editor:

<span style="color: #3A3A3A; text-shadow: 2px 1px 0 #7A7A7A">Example text</span>

An example of text with a basic shadow.

> Open List of Shadow Styles

> Close List of Shadow Styles

Distant Shadow
Distant-shadowed text in Source Editor:

<span style="color: white; text-shadow: 1px 3px 0 #969696, 1px 9px 5px #aba8a8">Example text</span>

An example of text with a distant shadow.

Thick Glow
Glowy text in Source Editor:

<span style="color: red; text-shadow: 0em 0em 1.0em red, 0em 0em 1.0em red">Example text</span>

An example of red text with a thick red glow.

Fiery Shadow
Fiery text in Source Editor:

<span style="color: red; text-shadow: 0 -1px 4px #FFF, 0 -2px 10px #ff0, 0 -10px 20px #ff8000, 0 -18px 40px #F00;">Example text</span>

An example of text on FIRE.

Outline using Shadow
Outlined text in Source Editor:

<span style="color: white; text-shadow: 2px 2px 0 #000000, 2px -2px 0 #000000, -2px 2px 0 #000000, -2px -2px 0 #000000, 2px 0px 0 #000000, 0px 2px 0 #000000, -2px 0px 0 #000000, 0px -2px 0 #000000">Example text</span>

An example of outlined text using a shadow.

Comic-Styled Shadow
Spaced Shadow in Source Editor:

<span style="color: white; text-shadow: 0 1px 0px #378ab4, 1px 0 0px #5dabcd, 1px 2px 1px #378ab4, 2px 1px 1px #5dabcd, 2px 3px 2px #378ab4, 3px 2px 2px #5dabcd, 3px 4px 2px #378ab4, 4px 3px 3px #5dabcd, 4px 5px 3px #378ab4, 5px 4px 2px #5dabcd, 5px 6px 2px #378ab4, 6px 5px 2px #5dabcd, 6px 7px 1px #378ab4, 7px 6px 1px #5dabcd, 7px 8px 0px #378ab4, 8px 7px 0px #5dabcd">Example text</span>

An example of comic-looking text.

Spaced Shadow
Spaced Shadow in Source Editor:

<span style="color: white; text-shadow: -3px 3px 0px #00e6e6, -8px 8px 0px #01cccc, -13px 13px 0px #00bdbd">Example text</span>

An example of spaced, shadowy text.

Layered Shadow
Layered Shadow in Source Editor (added <big> to compensate for size):

<big><span style="color: red; text-shadow: 0 -1px 0 #fff, 0 1px 0 #2e2e2e, 0 2px 0 #2c2c2c, 0 3px 0 #2a2a2a, 0 4px 0 #282828, 0 5px 0 #262626, 0 6px 0 #242424, 0 7px 0 #222, 0 8px 0 #202020, 0 9px 0 #1e1e1e, 0 10px 0 #1c1c1c, 0 11px 0 #1a1a1a, 0 12px 0 #181818, 0 13px 0 #161616, 0 14px 0 #141414, 0 15px 0 #121212, 0 22px 30px rgba(0,0,0,0.9)">Example text</span></big>

An example of awesome layered text.

Text Positioning

Text can be positioned in many different ways, such as:

Left,

center,

and right!

Positioned text in Source Editor:

<div style="text-align:left">

"Left" can be replaced with "center" and "right" to achieve the positioning you want! Additionally, one may use <center> and </center> to center text in a quicker manner, but this shortcut does not work with left or right.

Fonts

Custom fonts are a recent addition to this wiki; these fonts include: IM Fell English, Kavivanar, Akaya Telivigala, Pacifico, and Major Mono Display, just to name a few. As their name implies, they replace the default Fandom article font.

> Open List of Fonts

> Close List of Fonts

Georgia

Georgia in Source Editor:

<span style="font-family:Georgia;">Example Text</span>

Result: This is an example sentence.

IM Fell English

IM Fell English in Source Editor:

<span style="font-family:IM Fell English;">Example Text</span>

Result: This is an example sentence.

Kavivanar

Kavivanar in Source Editor:

<span style="font-family:Kavivanar;">Example Text</span>

Result: This is an example sentence.

Akaya Telivigala

Akaya Telivigala in Source Editor:

<span style="font-family:Akaya Telivigala;">Example Text</span>

Result: This is an example sentence.

PT Mono

PT Mono in Source Editor:

<span style="font-family:PT Mono;">Example Text</span>

Result: This is an example sentence.

Mate SC

Mate SC in Source Editor:

<span style="font-family:Mate SC;">Example Text</span>

Result: This is an example sentence.

Pacifico

Pacifico in Source Editor:

<span style="font-family:Pacifico;">Example Text</span>

Result: This is an example sentence.

Lobster

Lobster in Source Editor:

<span style="font-family:Lobster;">Example Text</span>

Result: This is an example sentence.

Qahiri
Qahiri in Source Editor (using "font-size:30px;" as well because the font is very small by default):

<span style="font-family:Qahiri;font-size:30px;">Example Text</span>

Result: This is an example sentence.

Major Mono Display

Major Mono Display in Source Editor:

<span style="font-family:Major Mono Display;">Example Text</span>

Result: This is an example sentence.

Intermediate Page Composition

Divboxes

Colored Boxes

Colored boxes that contain text can be utilized in order to convey a certain "feel" within your page, or to organize your page into easily discernible sections. Always make sure that the text color, and the background color do not mix in well together, or the text will be hard to read.

<div style="background-color: (This is the color the background is going to be. Use either hex code, or color name.); color: (This is the color that the text will be. Just as the background color, use either hex code, or color name.); margin:2em; padding:5px 10px; border:2px solid #FFFFFF; (This is where you change the border color. It is recommended to make it either black or white, but you may change it as you please.) border-radius: 3px"> (This changes the curvature of the border. The higher the number, the more round the edges are.)

Colored box in Source Editor (White):

<div style="background-color:#FFFFFF; color: black; margin:1em; padding:5px 10px; border:2px solid #000000; border-radius: 3px">Example Text</div>

Result:

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Colored box in Source Editor (Black):

<div style="background-color:#000000; color: white; margin:1em; padding:5px 10px; border:2px solid #FFFFFF; border-radius: 3px">Example Text</div>

Result:

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

For a more stylized alternative to simple colored boxes, there are several types of div-boxes with different designs available for use, so mix-and-match them to your heart's content!

Quote Boxes

This is Template:Blurquote!

Any text may be put inside the template — even other divs!

Usage: {{Blurquote|image=imagename.imagefile|quote-text=text|person=name}}

See also: Template:Blurimage

Personalization:
Use |size=###px| in this template to change the image size
<div class="blurquote-noperson">{{Blurquote}}</div>: Removes "~ Name" at the bottom
<div class="blurquote-noborder">{{Blurquote}}</div>: Removes the top and bottom border
<div class="blurquote-noborder blurquote-noperson">{{Blurquote}}</div>: Does both

~ Name

Theme Boxes

These boxes mirror the theme of the wiki, which makes them fit quite well into pages. In fact, they actually change their color to fit whether you are in light mode or dark mode!

Lighter themebox in Source Editor:

<div class="lightblock">Example text</div>

Result:

Example text

Darker themebox in Source Editor:

<div class="darkblock">Example text</div>

Result:

Example text

Lines can also be added to the side of the boxes to make them appear like "quote blocks".

This div is called "styled-quote"

This div is called "dark-styled-quote"

> Open Box Styles

> Close Box Styles

Logo Blocks

This div is called "logoblock"

---

This div is called "light-logoblock"

---

This div is called "border-logoblock"

---

This div is called "light-border-logoblock"

Border Blocks

This div is called "borderblock"

---

This div is called "light-borderblock"

Title Blocks

TITLE TEXT
This div is called "titleblock"
To add the title, add <span class="titlebox">TITLE TEXT</span> after <div class="titleblock">

---

TITLE TEXT
This div is called "dark-titleblock"
To add the title, add <span class="dark-titlebox">TITLE TEXT</span> after <div class="dark-titleblock">

Group Blocks

This div is called "kauer-block"

---

This div is called "kauer-logoblock"

---

This div is called "meg-fandom-block"

---

This div is called "meg-fandom-logoblock"

---

This div is called "backrooms-pioneers-block"

---

This div is called "backrooms-pioneers-logoblock"

---

This div is called "mountain-coalition-block"

---

This div is called "mountain-coalition-logoblock"

---

This div is called "aea-block"

---

This div is called "aea-logoblock"

Magic Words

Magic Words refer to keywords in Wikitext that can change or represent data in a page. They have a wide variety of uses, such as changing the title of a page, getting rid of the Table of Contents, and much more.

Changing the Page Title

{{DISPLAYTITLE}}, as the name implies, can be used to change a page's title. It is used in scenarios where an author wants a page's display name to differ from its URL title. It is most commonly used in naming levels, formatted as such:

{{DISPLAYTITLE: Level ##: "Level Name"}}

Removing the TOC

__NOTOC__ is used to remove the Table of Contents from a page. This command is useful in pages that are on the shorter side, or that do not require organization to that degree. The command can be placed anywhere in a page, though it is typically placed at the bottom.

Moving the TOC

__TOC__ does exactly the opposite of __NOTOC__; it places the Table of Contents exactly where it is entered in a page. This has very few applications, but it may prove useful in rare cases.

Tooltips

The possibilities are truly endless when it comes to text customization on Fandom! This next feature adds hover-tooltips to text, useful for adding in those extra details that can go a long way.

Tooltips in Source Editor:

<span class="top-tip" data-tips="I'm a tooltip!">Hover over me!</span>

Result: Hover over me!

Advanced Page Composition

Custom Page Backgrounds

The backgrounds of pages can actually be altered to anything one may desire! Normal images and GIFs both work, so get creative!

Custom image background in Source Editor:

{{Background|File=IMAGENAME.FILE}}</div>

The result will not be displayed, as the image provided is simply an example file. Make sure the ratio of the image/GIF used is 16:9 so it entirely fills the background!

Tables

Tables are useful tools meant for organizing data into even boxes. They have various applications, but are not usually seen in typical articles. The "background-color: #ffffff" can be changed to any hex color code you wish.

Tables in Source Editor:

{| class="article-table"

! style="background-color: #d3d3d3" |Example 1
! style="background-color: #d3d3d3" |Example 2
! style="background-color: #d3d3d3" |Example 3
! style="background-color: #d3d3d3" |Example 4
|-
| style="background-color: #ffffff" |Sub-Example 1
| style="background-color: #ffffff" |Sub-Example 2
| style="background-color: #ffffff" |Sub-Example 3
| style="background-color: #ffffff" |Sub-Example 4
|-
| style="background-color: #ffffff" |Sub-Sub-Example 1
| style="background-color: #ffffff" |Sub-Sub-Example 2
| style="background-color: #ffffff" |Sub-Sub-Example 3
| style="background-color: #ffffff" |Sub-Sub-Example 4

|}

Result:

Example 1	Example 2	Example 3	Example 4
Sub-Example 1	Sub-Example 2	Sub-Example 3	Sub-Example 4
Sub-Sub-Example 1	Sub-Sub-Example 2	Sub-Sub-Example 3	Sub-Sub-Example 4

Stylized Tables
As seen above, the colors and styles of tables can be changed to anything one may wish! An example of this is:

{| class="article-table" style="border: 2px solid #d8ad26; margin:0;"
|+
|Example Text
|style="border-left:solid 2px #d8ad26" | Text
| More Text
|-
|Example Text
|style="border-left:solid 2px #d8ad26" | Text
|More Text
|-
|Example Text
|style="border-left:solid 2px #d8ad26" | Text
|More Text
|}

Result:

Example Text	Text	More Text
Example Text	Text	More Text
Example Text	Text	More Text

Tabbers

In longer pages, solely using headers for organization may not always cut it. Tabbers are very a powerful tool meant to nicely shrink down information into sleek and readable chunks. Circumstances where they may be necessary will be explained after this example.

Tabbers in Source Editor:

<tabber>

|-| Tabbers=
Word
|-| Look=
Word2
|-| Like=
Word3
|-| This=
Word4

</tabber>

This text in the Source Editor would yield the following format: <tabber> |-| Tabbers=

Word1

|-| Look=

Word2

|-| Like=

Word3

|-| This=

Word4 </tabber>

Anything can be put inside tabbers, including other tabbers! However, they should be used with a bit of caution; first of all, if a page is built with headers, it may be meant to be read top-to-bottom, but due to tabbers making the reader switch left-to-right between tabs, that style may clash. In addition, tabbers take some of the "meat" from a page, substantially decreasing the length of it; this makes it seem like your page has little content, even if it has a decent amount, and overall makes it feel half-baked.

Stylized Tabbers
Alternatively, tabbers can come in two other forms, both appearing more "modern" than the default tabber. One of these forms is a vertical tabber!

Modern tabber in the Source Editor:

<div class="tabs">
<ul class="tabs__caption">
<li class="active">Tab 1</li>
<li>Tab 2</li>
<li>Tab 3</li>
</ul>
<div class="tabs__content active">Text 1</div>
<div class="tabs__content">Text 2</div>
<div class="tabs__content">Text 3</div>

</div>

Result:

• Tab 1
• Tab 2
• Tab 3

Text 1

Text 2

Text 3

The code for a vertical modern tabber in the Source Editor is identical to the previous code segment, but it uses <div class="tabs vertical"> instead of <div class="tabs">

Result:

• Tab 1
• Tab 2
• Tab 3

Text 1

Text 2

Text 3

Use these to your heart's content as a nice-looking replacement for normal tabbers!

Dropdowns

Dropdown Selection

An optional alternative to tabbers is dropdown content selection, where options are able to be chosen via an opening box! This would be inputted into the Source Editor as follows:

<div class="sel-container"></div>
<div class="fields">
<div class="name">Field 1</div>
<div class="field">Field 1 content</div>
<div class="name">Field 2</div>
<div class="field">Field 2 content</div>
<div class="name">Field 3</div>
<div class="field">Field 3 content</div>
</div>

Result (this feature can be slow; reload the page if the list does not appear):

Field 1

Field 1 content

Field 2

Field 2 content

Field 3

Field 3 content

Interactive Lists

In addition to using them to choose page content, dropdowns can also take the form of clickable lists that direct the reader elsewhere. This can be achieved with a template, which could be inputted into the Source Editor as follows:

{{Dropdown|<big>Levels</big>|[[Level 0]]|[[Level 1]]|[[Level 2]]}}

Result:

This could be used in many different ways, so get creative with it!

Progress Bars

Progress bars are a niche but nice-looking feature that can be useful in certain cases! They have many customizable options which are not exclusive from one-another, but able to be mix-and-matched! These styles are listed below:

Basic
Code in Source Editor:

<div class="progress"><span class="text">A basic bar without a label</span><span class="bar" style="width: 50%">50%</span></div>

Result:

A basic bar without a label50%

> Open Progress Bar Styles

> Close Progress Bar Styles

Textless
Code in Source Editor:

<div class="progress"><span class="text"></span><span class="bar" style="width: 50%">50%</span></div>

Result:

50%

Dark
Code in Source Editor:

<div class="progress dark"><span class="text">A dark progress bar</span><span class="bar" style="width: 50%">50%</span></div>

Result:

A dark progress bar50%

Fancy
Code in Source Editor:

<div class="progress gradient"><span class="text">A fancy progress bar</span><span class="bar" style="width: 50%">50%</span></div>

Result:

A fancy progress bar50%

Rounded
Code in Source Editor:

<div class="progress round"><span class="text">A progress bar with round borders</span><span class="bar" style="width: 50%">50%</span></div>

Result:

A progress bar with round borders50%

Animated
Code in Source Editor:

<div class="progress animated"><span class="text">An animated progress bar</span><span class="bar" style="width: 50%">50%</span></div>

Result:

An animated progress bar50%

Combined Styles
Code in Source Editor:

<div class="progress dark round animated"><span class="text">A dark, rounded, and animated progress bar</span><span class="bar" style="width: 50%">50%</span></div>

Result:

A dark, rounded, and animated progress bar50%

Have fun mixing and matching these various styles to your liking!

Collapsible Text

Collapsible text is a very useful tool in articles. It can be used for things such as recovered documents and files, where the reader has to click on something like "OPEN FILE: RECOVERED DOCUMENT" to access its content. This can be very finnicky and Wikitext likes to mess it up often. It is dictated by the use of <div> and </div> with classes indicating collapsibility. Here is an example of collapsible text (bolded so it is obvious one can interact with it):

<div class="mw-customtoggle-first">'''OPEN ADDENDUM'''</div><div class="mw-collapsible mw-collapsed" id="mw-customcollapsible-first">EXAMPLE CONTENT</div>

This will make the text "OPEN ADDENDUM" interactable. Once clicked, it will reveal the text "EXAMPLE CONTENT", but this could be replaced with anything you desire! Ending the string with </div> will allow you to continue the page text after it, without it being included in the collapsible. Here is how the text would work in practice:

Open Addendum

EXAMPLE TEXT

To include multiple collapsibles in one document, just do the same thing again, but replace the "first" in "mw-customtoggle-first" and "mw-customcollapsible-first" with "second," and so on. You can get fancy with collapsibles, such as layering them within one another, adding underlined or colored text, and even having the collapsible's title change when opened and closed! An example of this would be this large heap of code:

<span class="mw-customtoggle-finalchanging mw-customtoggle-initialchanging"><div class="mw-collapsible" id="mw-customcollapsible-initialchanging">

<span style="color:green">'''> Open Addendum'''</span></div></span> <div class="mw-collapsible mw-collapsed" id="mw-customcollapsible-finalchanging"> <div class="mw-customtoggle-finalchanging mw-customtoggle-initialchanging"> <span style="color:green">'''> Close Addendum'''</span></div> </div> <div class="mw-collapsible mw-collapsed" id="mw-customcollapsible-finalchanging"> EXAMPLE TEXT

<div>

Result:

> Open Addendum

> Close Addendum

EXAMPLE TEXT

Collapsible Login Box

Some lore-heavy pages include a fake "login" box that prompts the user to input a passcode. However, no real input is needed, as clicking the box will reveal the next section of content and "autofill" the password. This can be achieved with this mess of code:

<div style="background-color:white; color:#AAAAAA; margin:1em; padding:5px 10px; border:2px solid #000000; border-radius: 3px">

<span class="mw-customtoggle-password mw-customtoggle-password2"><div class="mw-collapsible" id="mw-customcollapsible-password2">Input Password</div></span>
<div class="mw-collapsible mw-collapsed" id="mw-customcollapsible-password"><div class="mw-customtoggle-password mw-customtoggle-password2"> EXAMPLE AUTOFILLED PASSWORD</div></div></div>

<div class="mw-collapsible mw-collapsed" id="mw-customcollapsible-password"><big>Auto-filled cached password. Welcome, {{USERNAME}}.</big><br /><br />[EXAMPLE CONTENT]</div>

...Just don't think about it. In practice, that code would create this result:

Input Password

EXAMPLE AUTOFILLED PASSWORD

Auto-filled cached password. Welcome, Gary.

[EXAMPLE CONTENT]

In some instances, the page can sometimes mess up collapsible text when saving it, such as adding an [Expand] button next to it, which looks messy. If this occurs, just replace the <div> text around it again with the code provided in this page. Collapsible text has many possibilities and its usefulness cannot be understated.

Randomization

Randomization is possible with Wikitext as well! To randomize a text result, format code as follows:

<choose>

<option> Option1 </option>

<option> Option2 </option>

<option> Option3 </option>

<option> Option4 </option>

<option> Option5 </option>

</choose>

This is the <choose> function, and it is used to randomly generate from a list of defined options. Using it would yield the following randomized result:

<choose> <option> Option1 </option> <option> Option2 </option> <option> Option3 </option> <option> Option4 </option> <option> Option5 </option> </choose>

This outputs one randomized option every time the page is refreshed, and could be used to make a "roulette" type of page, where it dynamically changes.

Time-Based Events

While functions like these are interesting to mess around with, they are very rare in usage. For example, the current date and time can be output in an article like so:

It is currently {{#time: g}}:{{#time: i}}:{{#time:s}} {{#time: A}} {{#time: e}} on {{#time: l}}, {{#time: F}}, {{#time: j}} .

This creates the following text:

It is currently 5:39:49 AM UTC on Samstag, September, 21.

The current year may also be added with the function

{{#time: Y}}

Time-based events on Wikitext are incredibly flawed, and Javascript is required to create anything more than a rudimentary system. If we wanted to make a page that changes on a 30 minute basis, we'd use this system:

{{#ifexpr {{#time: i}} > 30 | page content 1 | page content 2}}

The most glaring flaw is that this is not executed every time a page is loaded, but rather when a page is parsed. This means it would realistically take about two days to change to the second version of the page content if the page is not edited. Overall, Javascript does the job much better, but in a pinch, this function can work.

Functions

There are many basic tools that you can use to build your page. The first of these is {{#expr}}. This executes a basic logic or math command and prints the answer. The data printed from this command cannot be used in another function, and only shows up when viewing a page.

{{#ifexpr}} is a simple true/false function, printing something based on whether an {{#expr}} command is true or false. It is formatted {{#ifexpr (Insert logic/math here to get a result) | True text | False text}}. For instance, if you did {{#ifexpr 40 = 50 | True Text | False Text}}, you would get False Text. This text can be replaced with anything, up to an entire level.

{{#ifeq}} Compares whether two things are equal. It is formatted as {{#ifeq input1 | input2 |output1 |output2}}, and can be used for both text and numbers.

The {{#switch}} function is extremely complex and will rarely, if ever, be used. It runs down a list of case statements. However, until user inputs become a thing, this will likely only be used on time-based events if there are three or more outcomes. The syntax is {{#switch: (Input) |(Case 1) = (Output 1)|(Case 2) = (Output 2)|…(Case k) = (Output k) | (Output if none of the cases are true)}}. For example, {{#switch: x |1 = True|2 = False|Invalid}} would return True if x=1, False if x=2, and Invalid if x is not equal to either.

---

> Open Author & Licensing Information

> Close Author & Licensing Information

Authors: Egglord1, PuppyBorkbutaccountgotwiped, and SkyCityXD3.
Themeboxes and stylizations by scutoid.