CZ:How To

This CZ:How To page illustrates the wiki code needed to perform certain tasks and also lists many useful articles.

How to make a new template

Before creating a new template, there are several things that must be taken into consideration:

• How will it be used?
• Where will it be used?
• How should it look?
• How flexible will it be?
• Is it needed?
• What need is it fufilling?

Templates are extremely powerful tools for creating dynamic content that you want reproduced or changed with very little effort across a large number of pages. Templates can also be very data sensitive; that is, what kind of data you want to present may determine how your template looks and feels.

The best templates are very flexible, very dynamic, and present information in a "clean" way. This increases their reusability. Templates that limit the information you can change are usually very poor, and have limited use.


Starting a template

The first step in starting a template is determine what it should be called. This is more important than you think! After all, if you create a template called {{infobox_for_different_Wheat_germs_and_their_DNA_structures}} NOBODY will use it. It's too much of a hassle to implement.

Additionally, if you misname your template, it confuses people upon its use. For example, if you create a template called {{paper_colors}} and it actually shows paper dimensions, you will also confuse users (and possibly incite arguments!)

Once you have predetermined these factors, you start your template by creating a new document within the template namespace. Let's call this example "add". It will be used to add two numbers. The location is as follows:

http://en.citizendium.org/wiki/Template:add , or Template:Add


Making the template work

After you've created the new page, it's now ready for programming. After all, a blank template will do nothing.

Let's consider what we want the template to do. We're going to take two values, X and Y, and combine their values to produce a third value Z. In order to do this, we have to define these two variables, X and Y. We do this below:

{{{X}}} {{{Y}}}

Now, we have to input the logic to add the numbers. To make mathematical evaluations in wiki software, you must use the {{#expr:}} or "expression" template. It is implemented as such:

{{#expr: {{{X}}} + {{{Y}}} }}

This tells the template to evaluate the expression "{{{X}}} added to {{{Y}}}". Once this is complete, the template can be called as such:

{{add
|X=3
|Y=7
}}

Using the template, we should see the answer below is ten.

Of course, we could have just used the following within the template:

{{#expr: 3 + 7}}

But the problem with this design, is that using the template {{add}} will then always have produced "10", which isn't very flexible, is it? This way, any user can use the Add template to add any two numbers they'd like!

From here on, templates can get more complex. There is a great potential for their use. In fact, you can combine many of the elements found in the CZ:How to page to create some fantastic and highly dynamic templates. Be aware though, that the more complex and dynamic your template becomes, the more difficult it may be to implement. Balancing function with design and usability is a tricky feat, as is with all elements of programming.


Please feel encouraged to test out our new template below, by clicking the "edit" next to the subheading.

How to create a basic table (manually)

The table creation process uses the syntax below:

To create the actual table, use

{|

At this point, you can specificy specific style elements about your table, such as

• having a border (by adding border="1")
• setting border colors
• setting table width
• other CSS elements

After the table has been established, use

|

to create your first data cell. This also begins a new column. At this point, you can also

• specify it's alignment
• specify how many columns it will cover
• apply other CSS style elements

To create a new row, simply use

|-

After creating as many columns and rows you wish, close your table by using

|}

A sample table code is below

{|border="1" width=40px 
|column 1, row 1
|align="center"|column 2, row 1
|-
|align="left"|column 1, row 2
|align="right"|column 2, row 2
|}

The table looks like this:

column 1, row 1	column 2, row 1
column 1, row 2	column 2, row 2

How to checklist articles

The basic instructions are located at CZ:Using the Subpages template. A weekly list of unchecklisted articles needing attendtion can be found at CZ:Unchecklisted_Articles.

How to delete an article

You can ask a constable to delete an article by using the speedydelete template. You can simply add {{speedydelete|Insert some reason here}} to the article/image space.

How to find editors

To find a list of editors in a particular Workgroup, go to the CZ:Workgroups page and clink on the editors link for the workgroup.

How to make arrows

Some arrows can be inserted by clicking on the appropriate arrow located on the bottom of edit pages. They can also be typed as shown by the examples below. Note that the math begin (<math>) and math end (</math>) tags do not need to immediately surround the arrow functions, they only need to be at the beginning and end of equations.

$\rightarrow$ is made from <math>\rightarrow</math> or <math>\rarr</math> or &rarr;

$\leftarrow$ is made from this <math>\leftarrow</math> or <math>\larr</math> or &larr;

$\leftrightarrow$ is made from this <math>\leftrightarrow</math> or <math>\harr</math> or &harr;

${\stackrel {\textstyle \leftarrow }{\rightarrow }}$ is made from <math>\stackrel{\textstyle \leftarrow}{\rightarrow} </math>

$\uparrow$ is made from this <math>\uparrow</math>
$\downarrow$ is made from this <math>\downarrow</math>

How to make chemical equations

Note that buttons for superscripts and subscripts are located immediately above and below the edit text box when editing a page. To subscript something, just hi-light the text and click the subscript button.

This text

: 4NaPO<sub>3</sub> + 2SiO<sub>2</sub> + 10C → 2Na<sub>2</sub>SiO<sub>3</sub> + 10CO + P<sub>4</sub>

OR THIS TEXT

:<math> 4 \mathrm{NaPO}_3 + 2 \mathrm{SiO}_2 + 10\mathrm{C} \rarr 2 \mathrm{Na}_2\mathrm{SiO}_3 + 10\mathrm{CO} + \mathrm{P}_4 </math>

provides the following equation (note that colons indent the equation)

4NaPO₃ + 2SiO₂ + 10C → 2Na₂SiO₃ + 10CO + P₄

How to make math equations (italic variables)

Simple algebraic equations

This text

:<math>\left(p + \frac{n^2 a}{V^2}\right)\left(V-nb\right) = nRT</math>

provides this mathematic formula

$\left(p+{\frac {n^{2}a}{V^{2}}}\right)\left(V-nb\right)=nRT$

How to make integral equations

:<math>F(t) = \int_0^t f(x) \, dx.</math> gives this equation:

$F(t)=\int _{0}^{t}f(x)\,dx.$

and this text, :<math>\int_a^b f(x) \, dx = F(b) - F(a).</math>, gives this equation:

$\int _{a}^{b}f(x)\,dx=F(b)-F(a).$

How to make differential equations in dot notation

This text, :<math>\dot{x} = \sigma(y - x)\ ,</math> give this equation in dot notation

${\dot {x}}=\sigma (y-x)\ ,$

This text, :<math>\dot{x}=\frac{dx(t)}{dt}\ .</math> gives this equation

${\dot {x}}={\frac {dx(t)}{dt}}\ .$

How to make summation equations

This text
:<math> X = \sum_{J=1|}^{n} \ c_JV_J. </math>

provides this equation:

$X=\sum _{J=1|}^{n}\ c_{J}V_{J}.$

How to make matrix equations

This text
:<math>M = \begin{pmatrix} 7 & 4.3 & 9 & -3 \\ 0 & 6 & 18 & 42 \\ -10 & 9.5 & 16 & 0 \end{pmatrix}</math>

provides this matrix equation:

$M={\begin{pmatrix}7&4.3&9&-3\\0&6&18&42\\-10&9.5&16&0\end{pmatrix}}$

How to make subscripts

Note that buttons for superscripts and subscripts are located immediately above and below the edit text box when editing a page. To subscript something, just hi-light the text and click the subscript button.

Or, you can type the code yourself, thus X₂ yields X₂.

Alternatively, you can use the template {{d}} (as in "down").

X{{d|2}}

produces

XTemplate:D

How to make superscripts

Note that buttons for superscripts and subscripts are located immediately above and below the edit text box when editing a page. To subscript something, just hi-light the text and click the subscript button.

Or, you can type the code yourself, thus X² yields X².

Alternatively, you can use the template {{u}} (as in "up").

X{{u|2}}

produces

X2

How to start a new article

Instructions for all methods are located at CZ:How to start a new article.

How to start a new proposal

Instructions for starting a new proposal can be found at CZ:Proposals/New.

How to make lowercase article titles

Some pages, like pH and e (mathematics) require lower case titles, which are done like this:
{{lowercase|title=pH}} gives the correct title form for pH
{{lowercase|title=e (mathematics}} gives the correct title form of e (mathematics).

How to use the imagemap extension

Imagemaps are a way to deliniate a part of or an entire image into a reference link. It is usually incorporated into such languages as HTML, Java/Script, Ajax, but a mediawiki extension has been added that does the bulk of the complicated work, enabling you to use it with just a few parameters.

The first thing to do is to choose your image. In this case, we'll use "Image:Crystal_Clear_action_bookmark.png" or

Before you apply the imagemap code, you have to know the size of the image in pixels, and the size you're going to use. For example, clicking on the image above takes you to the image wiki page, where it says the image size is "128 x 128" pixels.

You can actually resize the image to any size you'd like by using the regular wikimarkup for image tags:

[[Image:Crystal_Clear_action_bookmark.png|100px|left|thumb|This is a thumbnail with a caption]]

produces

This is a thumbnail with a caption

[[Image:Crystal_Clear_action_bookmark.png|75px|left]]

produces

In this case, we don't want to use the thumbnail version (a.k.a. the "polaroid" frame). To begin, we use

<imagemap>
Image:Crystal_Clear_action_bookmark.png|left|100px
rect 1 1 128 128 [[star]]
desc none
</imagemap>

• The <imagemap> tag begins the script for imagemap.
• Next, you specify the image location, along with its orientation and size. In this case, we chose "left" justification and 100 pixels.
• Now, you specify the imagemap shape. For most square images, you simply use "rect", and define the "rectangle" size. Geometrically, a rectangle has practically the same properties of a square, but we simply redefine the rectangle height and width to make it into a square-shape. It's important to note here that you use the exact same dimensions as the original image size, and not the image size you specify. If you try to use "rect 1 1 100 100" for the imagemap, you will only get a portion of the picture as a clickable region since its been shrunk down from its original 128x128 by the image specification. Think of it like a "Shrinky dink" (you may have to look that one up!)
• After defining the area, place the link that it should point to next to the size. It's important that everything is spaced correctly. Not leaving spaces between each argument will make this not work.

Let's see what happens when we put this all together:

Notice when you use the cursor to "hover" over the image, it will say "Star" and clicking it will send you to Star

By changing the "desc" area, you will modify where the imagemap starts and ends. It's best not to change this unless you really know what you're doing or making extremely complicated areas, in which case you're on your own!

|width=10% align=center style="background:#F5F5F5"|  |}