# Help:Wiki Tricks

(Difference between revisions)
 Revision as of 13:37, 23 May 2011 (edit) (→Numbering Equations)← Previous diff Current revision (15:48, 15 June 2012) (edit) (undo) (→Subscripts and Superscripts) (17 intermediate revisions not shown.) Line 1: Line 1: + {{{!}}border=0 cellpadding=5 cellspacing=5 align=center + {{!}} + __TOC__ + {{!}}{{!}}
Welcome to the Wiki Tricks page. Here you can find how to reproduce some of the cool functionality you've seen on this wiki.
Welcome to the Wiki Tricks page. Here you can find how to reproduce some of the cool functionality you've seen on this wiki.
-

The Basics

+ + + You may also want to check out [[Top 5 things you need to know how to do on the wiki]], a page that covers fewer things but goes more in-depth. + +

+ {{!}}} + + =The Basics= + + [[User:Smaurer1|Smaurer1]] 21:37, 11 May 2012 (EDT) + + Actually, I don't think this page starts so basically. For even more basic examples, go to to this [http://en.wikipedia.org/wiki/Help:Wiki_markup wikepedia page]. Also, if you open the editing page (click on the little edit tab at the top of the page), + try using the little icons at the top to see what code they put in. Further, you can study the source code you see in the edit window to see what to type - except that sometimes you should type something else shorter and it gets converted after your edit is accepted. For instance, to get my userid and time stamp at the start of this entry, I typed 4 tildes; I didn't type what you see in the edit window. ==Images== ==Images== Line 88: Line 104: }} }} + ==Inline Math== - ==Subscripts and Superscripts== + Unfortunately, the font used for TeX is bigger than the font used by wikis for our normal text. So we have agreed that very short math expressions can be written inline (that is, in paragraphs) simply by using italics and the basic math capabilities of html. However, beware: parentheses and numbers should not be italic. Also, the hyphen does not produce a long enough minus sign. Finally, spacing of parentheses around expressions doesn't look good without some additional space. ===Subscripts=== ===Subscripts=== Line 105: Line 122: For more information, see [http://en.wikipedia.org/wiki/Help:Wiki_markup| http://en.wikipedia.org/wiki/Help:Wiki_markup]. For more information, see [http://en.wikipedia.org/wiki/Help:Wiki_markup| http://en.wikipedia.org/wiki/Help:Wiki_markup]. + ===Spacing around Expressions=== + + + + + + + (''n &ndash; r''&thinsp;) yields + + (''n – r'' ) + + (''n &ndash; r'' ) (full space) yields + + (''n – r'' ) + + (''n &ndash; r''&#x200A;&#x200A;) yields + + (''n – r''  ) + + (''n &ndash; r'') (no space) + + (''n – r'') + + (''n &ndash; r''&#x200A;) hairspace in hex + + (''n – r'' ) + + (''n &ndash; r''&#8202;) hairspace in decimal + + (''n – r'' ) + + I (Smaurer1) think thinspace looks best, but many of you thought hairspace looks best. ==Boxes== ==Boxes== Line 200: Line 249: {{EasyBalloon|Link=text for mouseover|Balloon=text inside the balloon, for instance, $x^2+y^2=z^2$ and images [[image:TmipClear.png]]}} {{EasyBalloon|Link=text for mouseover|Balloon=text inside the balloon, for instance, $x^2+y^2=z^2$ and images [[image:TmipClear.png]]}} + which generates {{EasyBalloon|Link=text for mouseover|Balloon=text inside the balloon, for instance, $x^2+y^2=z^2$ and images [[image:TmipClear.png]]}}. which generates {{EasyBalloon|Link=text for mouseover|Balloon=text inside the balloon, for instance, $x^2+y^2=z^2$ and images [[image:TmipClear.png]]}}. Line 208: Line 258: This gives text for mouseover This gives text for mouseover + + + (3) A sticky mouseover with math, but without a template because I (Smaurer1) don't know enough to create one: + + My Sticky mouse over! + + + which generates + My Sticky mouse over! + + For more information and more interesting applications, visit [http://www.mediawiki.org/wiki/Extension:Balloons here]. For more information and more interesting applications, visit [http://www.mediawiki.org/wiki/Extension:Balloons here]. Line 273: Line 334: In this case, change the PreviewText so that either the preview shows all of the math or doesn't show any math at all. You can do this either by changing the content of the PreviewText or by changing NumChars. In this case, change the PreviewText so that either the preview shows all of the math or doesn't show any math at all. You can do this either by changing the content of the PreviewText or by changing NumChars. - - ==Math Reference Page== - - http://en.wikipedia.org/wiki/Help:Displaying_a_formula#Forced_PNG_rendering ==Align Your Equal Signs== ==Align Your Equal Signs== Line 355: Line 412: and {{EquationNote|Pythagorean Theorem|Equation 2}} will refer you back to the original equation. and {{EquationNote|Pythagorean Theorem|Equation 2}} will refer you back to the original equation. + + So, what should you do, while writing a rewriting a page with numbered equations, given that there is no automatic renumbering and you will be inserting and deleting equations to be numbered? + + '''Answer:''' Initially name the equations with mnemonics and the 2-part command, e.g., {{EquationRef2|PythagThm}} $...$, and refer to them with 2-part commands, e.g. {{EquationNote|PythagThm}}. When you think the page is finalized, go back and add a third part with equation numbers in order. For instance, if the PythagThm was your third labeled equation, you could now extend the commands to {{EquationRef2|PythagThm|Eq. (3)}} and {{EquationNote|PythagThm|Eq. (3)}}. ==Tables== ==Tables== Line 428: Line 489: To see an example, check out [[Template:Anchor]]. To see an example, check out [[Template:Anchor]]. -

Embedding Videos, Applets, Etc.

+ ==Helper Pages== + + Place the following text at the top of helper pages: + {{HelperPage|}} + or + {{HelperPage|1=Law of Sines|2=Congruent triangles|3=Solving Triangles}} + + This does two things: + # displays the helper box (optionally with a list of "helped" pages) + # adds this page to the [[:Category:Helper Pages|category/list]] of helper pages + + + ==Notices== + + Placing a notice on a page like this: + {{notice|this is a notice}} + will show up like this: + {{notice|this is a notice}} + + =Embedding Videos, Applets, Etc.= ==Embedding Videos== ==Embedding Videos== Line 481: Line 561: Note: For more advanced Java applets, specifically ones that use [http://www.javaview.de JavaView], contact a site moderator for help on embedding it on this site. Note: For more advanced Java applets, specifically ones that use [http://www.javaview.de JavaView], contact a site moderator for help on embedding it on this site. -

For Image Pages

+ =For Image Pages= ==Showing the "More Mathematical Explanation"== ==Showing the "More Mathematical Explanation"== Line 490: Line 570: To do this, add the line '''|HideMME = No''' to your page within the Image Description template. To do this, add the line '''|HideMME = No''' to your page within the Image Description template. - =How to do Citations= + =Mediawiki Reference Pages= - We have a references template! This is how it works: + - + - The first time you want to reference a source, you provide all the information, and (if you're going to use this source more than once) give the source a name. You do this like so: + - Here is the fact that I want to add a reference to Author, A. (1900). Title. Place of publication:Press name. + - + - After that, you can refer to a source by using its name: + - This sentence also uses a fact from my first source. + - + - Finally, in the reference section of your paper, you write: + - + - + - All of this ends up looking like this: + - :Here is the fact that I want to add a reference to[[Wiki_Tricks#How_to_do_Citations|[1]]]. This sentence also uses a fact from my first source[[Wiki_Tricks#References_and_Footnotes|[1]]]. + - :'''References:''' + *[http://www.mediawiki.org/wiki/Help:Formatting Basic Formatting] - :
1.↑ [[Wiki_Tricks#References_and_Footnotes|1.0]]Author, A. (1900). Title. Place of publication:Press name. + -

## Contents

Welcome to the Wiki Tricks page. Here you can find how to reproduce some of the cool functionality you've seen on this wiki.

You may also want to check out Top 5 things you need to know how to do on the wiki, a page that covers fewer things but goes more in-depth.

# The Basics

Smaurer1 21:37, 11 May 2012 (EDT)

Actually, I don't think this page starts so basically. For even more basic examples, go to to this wikepedia page. Also, if you open the editing page (click on the little edit tab at the top of the page), try using the little icons at the top to see what code they put in. Further, you can study the source code you see in the edit window to see what to type - except that sometimes you should type something else shorter and it gets converted after your edit is accepted. For instance, to get my userid and time stamp at the start of this entry, I typed 4 tildes; I didn't type what you see in the edit window.

## Images

To put an image on a page, like: , use the code:

[[Image:Example.jpg]]


after you have uploaded it. You can also specify that you want the image to be aligned right or left of text by writing:

[[Image:Example.jpg|right]] OR  [[Image:Example.jpg|left]]


and you can scale the image by giving it a pixel number, like this

[[Image:Example.jpg|350px]]


produces something like

If you want to put a frame around the image, put a caption in, and be able to change the size of the image, use :

[[Image:Example.jpg|put caption here|thumb|150px|left]]


which will produce

put caption here

However, this method can somewhat disrupt the organization/ position of the image and text, just like it is shown right now.

For links to pages in this wiki such as "Newton's Basin", use the code:

[[Page Name| text you want shown]] OR [[Page Name]]


the latter code is used when the text you want shown is simply the page name. And, yes, when specifying the page name, cAsE MaTTerS.

For a link to an outside webpage, such as wikipedia, use the code:

[PageURL textYouWantShown] OR [PageURL]


the second will just show the URL as the link.

## Lists

### Bulleted Lists

Use asterisks before the items in the list. More asterisks indent the item further. For example:

 * First item
* Second item
** A subcategory of the second item
*** A deeper subcategory
* Back to the main list
The end.



• First item
• Second item
• A subcategory of the second item
• A deeper subcategory
• Back to the main list

### Numbered lists

 # First item
# Second item
## A subcategory of the second item
### A deeper subcategory
# Back to the main list
The end.


1. First item
2. Second item
1. A subcategory of the second item
1. A deeper subcategory
3. Back to the main list

## Inline Math

Unfortunately, the font used for TeX is bigger than the font used by wikis for our normal text. So we have agreed that very short math expressions can be written inline (that is, in paragraphs) simply by using italics and the basic math capabilities of html. However, beware: parentheses and numbers should not be italic. Also, the hyphen does not produce a long enough minus sign. Finally, spacing of parentheses around expressions doesn't look good without some additional space.

### Subscripts

x<sub>subscript</sub> yields:

xsubscript

### Superscripts

x<sup>superscript</sup> yields:

xsuperscript

### Spacing around Expressions

(''n &ndash; r''&thinsp;)  yields


(n – r )

(''n &ndash; r'' )   (full space)  yields


(n – r )

(''n &ndash; r''&#x200A;&#x200A;)  yields


(n – r  )

(''n &ndash; r'')    (no space)


(n – r)

(''n &ndash; r''&#x200A;)  hairspace in hex


(n – r )

(''n &ndash; r''&#8202;)   hairspace in decimal


(n – r )

I (Smaurer1) think thinspace looks best, but many of you thought hairspace looks best.

## Boxes

To put content in a box, simply begin the line with a space.

The result looks like this:

 Text of the box


Note that text is NOT automatically wrapped in boxes. You need to manually put in the line breaks, and put a space before each new line.

## Sections and subsections

To create a section or subsection of a page, surround the section name with equals signs. The more equals signs, the smaller the section. The major sections of a page use one equals sign on each side:

=Major section title=
This is a main section of the page, with several subsections.

==Subsection 1==
This is the first subsection.

==Subsection 2==
Here's the second.

===Sub-subsection===
It has its own subsection!

=Another major section=



Note that normal wiki formatting (such as including links) may be applied to section names.

## Splitting Text into Columns

### Two Columns

• To format text into two columns, do the following:
 <div style="float: left; width: 50%">
Info for first column
</div><div style="float: left; width: 50%">
Info for second column
</div>


Info for first column

Info for second column

### Three Columns

• And, to get text into three columns, use the following code:
 <div style="float: left; width: 33%">
Info for first column
</div><div style="float: left; width: 33%">
Info for second column
</div><div style="float: left; width: 33%">
Info for third column
</div>



Info for first column

Info for second column

Info for third column

## Mouse Overs

### Mouse overs for text only

To generate a "balloon", use the code:

<balloon title="Text you want in balloon.">text for mouseover</balloon>


### Mouse overs for math and images

(1) For an easier mouse over with math and images included, use the code :

{{EasyBalloon|Link=text for mouseover|Balloon=text inside the balloon, for instance, $x^2+y^2=z^2$ and images [[image:TmipClear.png]]}}


which generates text for mouseover.

(2) Another way of doing this is to use the code :

 <balloon title="load:title of content">text for mouseover</balloon><span id="title of content" style="display:none">Text, links, math, images you want in the balloon</span>


This gives text for mouseover

(3) A sticky mouseover with math, but without a template because I (Smaurer1) don't know enough to create one:

<balloon hover="Click!" title="load:onewordtitle" click="1">My Sticky mouse over!</balloon>
<span id="onewordtitle" style="display:none">Text, links,  $x^2 e^x = math$, images you want in the balloon, etc.</span>


which generates My Sticky mouse over!

## Hide/Show

### Basic Hide/Show

To hide a block of text, for example:

Like this!

use the code:

{{hide|Text you want hidden}}


if your text contains an "=" sign, you must use the code:

{{hide|1=Text you want hidden}}


otherwise it appears as {{1}} in your page, which is silly.

### HideShowThis (Customized Hide / Show messages)

If you want the text that you click on to reveal or re-hide the hidden content to say something different than "show more" and "hide", use the HideShowThis code. For example, the code:

{{HideShowThis|ShowMessage=Click to reveal the hidden message|HideMessage=Click to conceal the hidden message|HiddenText=This is the exciting hidden text.}}



looks like this:

This is the exciting hidden text.

### HideThis (slightly less customized Hide / Show messages)

If you want the text that you click on to reveal or re-hide the hidden content to say "show BLAH" and "hide BLAH", where BLAH is the same thing in both cases, you can use the HideThis option.

The HideThis option allows you to specify what it is you want to hide. For example,

{{HideThis|1=<text to follow "hide"/ "show">|2=<hidden text>}}

Note that you can achieve the same effect by using the HideShowThis option, above, and simply making ShowMessage="show BLAH" and HideMessage="hide BLAH".

### SwitchPreview

Using most of these hide/show templates preview some of the hidden text, even when it is hidden. If you have two sets of text that you'd like to switch between--for example, one for the preview and one for the actual content, the code for this is:

{{SwitchPreview|ShowMessage=Click to expand|HideMessage=Click to hide|PreviewText=Text to be shown as preview|FullText=The actual text different from the preview|NumChars=75}}

• Note that NumChars determines the number of characters that will be shown in the preview. You can omit this argument, and the template will use a default number of characters.

which produces:

Text to be shown as preview

The actual text different from the preview

### HideShow for equations

When you want to show some math as a preview to Hide/Show and want some mathematical equations to show in gray as other preview text, use the same SwitchPreview above and specify the color of the equations by :

{{SwitchPreview|ShowMessage=Click to expand|HideMessage=Click to hide|PreviewText=Hi there, this is a sample ${\color{Gray}a^2+b^2 = c^2}$ equation.|FullText=Hi there, this is a sample ${a^2+b^2 = c^2}$ equation. I might follow it with a proof. Maybe.|NumChars=75}}


This will produce :

Hi there, this is a sample ${\color{Gray}a^2+b^2 = c^2}$ equatio [...]

Hi there, this is a sample ${a^2+b^2 = c^2}$ equation. I might follow it with a proof. Maybe.

One thing to be careful is that when the preview shows a part of the math equation, the preview will appear very weird, such as

This will cut the equation in the middle. UNIQ6a9bda6a34bf2c5e-math-000000 [...]

The preview cut the equation in the middle. ${a^2+b^2 = c^2}$.

In this case, change the PreviewText so that either the preview shows all of the math or doesn't show any math at all. You can do this either by changing the content of the PreviewText or by changing NumChars.

If you have several equations that you want to fit on multiple lines with the equals sign lined up in a column, you can use the template "AlignEquals":

Example:

 $3/2$ $=$ $1.5$ $2/3$ $=$ $0.3333...$ $13/8$ $=$ $1.625$

To do this, you should use the code:

 <template>AlignEquals
|e1l=3/2
|e1r=1.5
|e2l=2/3
|e2r=0.3333...
|e3l=13/8
|e3r=1.625
</template>



where you fill in e1l with the content of the left side of your first equation, e1r with the content on the right side of your first equation, etc. Currently, the template handles up to 10 equations.

## Numbering Equations

We can number equations using either a two-part code or a three-part code.

Two-part code

When using the two-part code, use :

{{EquationRef2|label or equation number}}


For instance, when you can use the code :

{{EquationRef2|Eq. 1}}  $x^2+y^2=z^2$


and it will appear as :

Eq. 1        $x^2+y^2=z^2$

When later referring back to the numbered equation, use the code :

{{EquationNote|label or equation number}}


An important thing to remember is that the 'label or equation number' part should be exactly the same for EquationRef and EquationNote. For instance, we can write

{{EquationNote|Eq. 1}}


and clicking on Eq. 1 will refer us back to the original equation.

Three-part code

When using a three-part code, use:

{{EquationRef2|label that you will remember|label that will appear on the page}}


For instance, you can label a equation as pythagorean theorem but make it appear as Eq. 2 by using :

{{EquationRef2|Pythagorean Theorem|Eq. 2}}$x^2+y^2=z^2$


and it will appear as :

Eq. 2         $x^2+y^2=z^2$.

When later referring back, as long as you make the 2nd part of the "EquationRef2" the exact same, you can change the 3rd part, and you will still be able to refer back to the equation. For instance, you can use :

{{EquationNote|Pythagorean Theorem|Equation 2}}


and Equation 2 will refer you back to the original equation.

So, what should you do, while writing a rewriting a page with numbered equations, given that there is no automatic renumbering and you will be inserting and deleting equations to be numbered?

Answer: Initially name the equations with mnemonics and the 2-part command, e.g., {{EquationRef2|PythagThm}} $...$, and refer to them with 2-part commands, e.g. {{EquationNote|PythagThm}}. When you think the page is finalized, go back and add a third part with equation numbers in order. For instance, if the PythagThm was your third labeled equation, you could now extend the commands to {{EquationRef2|PythagThm|Eq. (3)}} and {{EquationNote|PythagThm|Eq. (3)}}.

## Tables

### basic table

 1 2 3 4 5 6

### merge columns or rows

• merge columns
 1 2 3 4
• merge rows
 1 2 3 4 5 6 7

For greater detail, see Wikitables. Just replace | with {{!}} and you are good to go. Tables are fantastic for formatting pages and position and labeling pictures. They keep the position of the pictures constant with the text and no matter how much you shrink the page or expand, the pictures' relative positions will not change with respect to the text. On the contrary, if you use [[image:example|border|100px|left]], it will bump other texts and headings when the window size changes. The tables are extremely versatile. Once you have used enough, you will love it and cannot get away with it.

You can put pictures in the cell and label them as well like shown below.

 $i=1...101$ $10^7(1-\frac{1}{10^7})^{i-1}$ $i=1$ $10^7$ $i=2$ $10^7(1-\frac{1}{10^7})=9999999$ $i=3$ $10^7(1-\frac{1}{10^7})^2=9999998.0000001$ $i=4$ $10^7(1-\frac{1}{10^7})^3=9999997.00000029999999 \approx 9999997.0000003$ $i=5$ $10^7(1-\frac{1}{10^7})^4=9999996.000000599999960000001 \approx 9999996.0000006$ $i=...$ $...$ Image X[1] $i=101$ $10^7(1-\frac{1}{10^7})^{100} \approx 9999900.00049505$

If you don't want the borders, just delete class="wikitable" border="1". For an example of a more comprehensive use of tables, see Straight Line and its construction. In there, all the borders were not show.

## Pausing GIF Animations

To enable pausing of gif animations, use the code:

<pausegif id="1" wiki="no">Hypotroc2.gif</pausegif>


where id can be anything, as long as multiple paused gifs on the same page DO NOT have the same name.

Click to stop animation.

## Anchoring Images

Usage: Use this template to create anchors to images, sections, etc. To use this template, you must include two things:

1. Use this next to the image: {{Anchor|Reference=anchor1|Link=[[Image:Rabbit.jpg|100px]]}}
• anchor1 is an example of a possible "reference word" for the anchor.
2. Use this when you wish to refer to the image [[#anchor1|Image 1]]
• The part that says #anchor1 must begin with a # and match the "reference word" you chose for the image.
• The part that says Image 1 is what will be displayed in the body text. It could be something along the lines of "Image 1" or "the image of rabbits".

To see an example, check out Template:Anchor.

## Helper Pages

Place the following text at the top of helper pages:

{{HelperPage|}}


or

{{HelperPage|1=Law of Sines|2=Congruent triangles|3=Solving Triangles}}


This does two things:

1. displays the helper box (optionally with a list of "helped" pages)

## Notices

Placing a notice on a page like this:

{{notice|this is a notice}}


will show up like this:

this is a notice

# Embedding Videos, Applets, Etc.

## Embedding Videos

You can embed youtube videos by using the code

{{#ev:youtube|xI2eEcqz46E}}


where the xI2eEcqz46E represents the id assigned by youtube (you can find it in the URL of your video (e.g. www.youtube.com/watch?v=xI2eEcqz46E).

...and you can embed parts of youtube videos by using the code:

{{#ev:tubechop|xI2eEcqz46E&start=10&end=20}}


where start and end are the value (in seconds) of where in you want the clip to start and end.

## Embedding Flash Movies

To embed flash movies (.swf files) on a page, first upload your file, then use the code:

<flash>file=filename.swf|attribute=value|...</flash>


"attributes" include width,height,scale,id. For example:

flash>file=cool.swf|width=200|height=300|bgcolor=#FDE742|scale=exactfit</flash></wiki>


## Embedding Java Applets

To embed Java Applets on a page, first upload your file(s) and then use the code:

<java_applet code="Example.class"  height="150" width="150" archive="Example.jar" />


{{#iframe:http://java.sun.com/applets/jdk/1.4/demo/applets/WireFrame/example2.html|330|333}}


put the web address of the applet after #iframe: . The numbers at the end set the size of the applet.

This will give an applet like :

Note: For more advanced Java applets, specifically ones that use JavaView, contact a site moderator for help on embedding it on this site.

# For Image Pages

## Showing the "More Mathematical Explanation"

Here at The Math Images Project, we want our pages to be accessible to as many people as possible. That's why we, by default, hide the 'More Mathematical Explanation' on all of our image pages. However, if you would like to show the section, there is a way around this.

Note: We strongly encourage you to only use this option when the majority of the text in the section is hidden. We don't want to turn people away with scary math!

To do this, add the line |HideMME = No to your page within the Image Description template.

# Mediawiki Reference Pages

• Table Help
• Note: use {{!}} instead of the verticle bar ( | ) when creating tables on this website.

# Sources

1. Napier, 1616, p. 46