...Processing...
error
big error
Using short codes at TutnIQ - TutnIQ
Table of contents X

Using short codes at TutnIQ

Learn how to enhance your tutorials with shortcodes.

  • Shortcodes are shortcuts which allow advanced users to do useful things in their tutorials, FAQs or glossaries, which would not otherwise be possible using TutnIQ. TutnIQ shortcodes work in tutorial text blocks, FAQ answers and glossary definitions.

  • Introduction: Shortcodes at TutnIQ

    In this section we will learn about shortcode syntax, the different shortcodes available at TutnIQ, and the limitations of shortcodes.

  • Shortcodes are shortcuts or commands, which we can use to add features to our tutorials, FAQs and glossaries.

    TutnIQ offers a number of different shortcodes which can be used to do different things, for example:

    ShortcodeDescription
    [note]Create an information box
    [spoiler]Hide the answer from the user
    [jump]Create an url to a specific section of a tutorial
    [table]Create a table (like this one)
    [spreadsheet]Create a table which looks like a spreadsheet
    [finance]Create a plain table (ideal for financial statements)

    We will be adding more, so watch the blog for announcements!

    Syntax

    At TutnIQ most shortcodes require an opening and closing tag: [shortcode]<-This is the opening shortcode tag and this is the closing shortcode tag ->[/shortcode] (notice that the closing tag has a forward slash /).

    Some shortcodes can be self-terminating: [shortcode /], but this is rare at TutnIQ.

    TutnIQ does not currently use standalone shortcodes: [shortcode] (no terminating tag).

    Some shortcodes can be given attributes which modify the way the shortcode operates, for example: [shortcode attribute1="blah" attribute2="etc"]Content[/shortcode]. Specific attributes are discussed in the section dealing with the individual shortcodes.

    Rules / limitations of shortcodes

    • Shortcodes must be enclosed with [square brackets].

    • Shortcodes cannot be self nested. Self nested tags confuse the shortcode parser which will result in the shortcode not working correctly. Example of self nested shortcode:

      [shortcode]
        The next shortcode tag is identical to the preceding shortcode tag 
        [shortcode]
            This will NOT work properly
        [/shortcode]
       [/shortcode]
      
    • Do not forget the forward slash (/) in the closing tag! Example: [/closingtag].

    Note: Please be very careful when using shortcodes - they are a powerful feature - incorrect use may result in a mangled page! You won't lose any data, but it will not look pretty! Tip: Use the preview function in the course builder to make sure that your tutorial / FAQ / glossary displays correctly.

    We may disable shortcodes for users who do not use them correctly.

  • Information boxes, spoilers and jump codes

    In this section we will learn how to use the information box, spoiler and jump shortcodes.

  • Information boxes

    An information box can be used to draw attention to particular information, for example:

    This is an information box!

    It can contain markdown, for example:

    • A list item
    • Another list item

    A block quote!

    The markup for the above information box:

    [note]
      This is an information box!
    
       It can contain markdown, for example:
    
        - A list item 
        - Another list item
    
        >A block quote!
    [/note]
    

    This is very similar to the 6-hash header discussed in our Markdown tutorial, but can include Markdown elements like links, lists and block quotes. It can also contain other shortcodes, but not another information box. This shortcode does not have any special attributes.

  • Spoilers

    If you want to share information without spoiling the story, or hide an answer to a question while the reader thinks about the solution, the spoiler shortcode may be useful. This is illustrated below.

    How do spoilers work?

    The answer(Click to show)

    Spoilers can contain Markdown and other shortcodes (but not another spoiler).

    The [spoiler] shortcode has two optional attributes:

    • title: default value = 'The answer'; and
    • show: default value = 'Click to show'.

    This:

    [spoiler title="This is the title" show="Click to reveal"]
      Nothing to see here folks!
    [/spoiler]
    

    Will appear as:

    This is the title(Click to reveal)
  • Jump codes

    Jump codes allow you to refer to a specific section of a tutorial, without having to worry about the exact URL. They are discussed in more detail in the 'How to create your first TutnIQ course' tutorial.

    The above link was created by inserting the following shortcode into the text block:

    [jump course='80' section='textblocks']How to create your first TutnIQ course[/jump]
    

    This is less brittle than using the actual url for this particular section, http://www.tutniq.com/s/course/80/3, as it is not affected by sequencing changes.

    Jump codes can be set or edited in the 'Add section header / break' dialog box in the course builder. For new sections / breaks this is accessed via the 'Add content' drop-down box in the course builder. For existing sections, jump codes can be set or modified via the section's edit link in the course builder. The jump code for a particular section (in shortcode and html format) can be retrieved by clicking the 'Get Jump Codes' link for any section in the course builder.

    The jump shortcode has 2 mandatory attributes:

    • course = course id; and
    • section = specified section jump code.
  • Tables

    In this section we will learn how to add tables to our tutorials, FAQ's and glossaries using one of TutnIQ's table shortcodes.

  • Introducing tables

    We offer a number of different shortcodes to create tables. The internal syntax for each is the same, but the appearance of the table displayed differs.

    Types of table at TutnIQ
    ShortcodeDescription
    [table]Simple table (like this one!)
    [spreadsheet]Spreadsheet styled table.
    [finance]Plain black and white table with no grid lines.

    Basic usage

    • Create a table by enclosing your tabular data with the appropriate table shortcode tags (see above). There must be an opening and a closing tag.
    • Each table row must be on a new line.
    • The first row is treated as the table header by default (this can, however, be overridden - see advanced table features below).
    • The cells of the row must be separated with the 'pipe'( | ) character.
    • A blank row can be created by setting a single 'pipe' character on the line, with no other content.
    • You can have a maximum of 5 columns and 50 rows - data outside of these bounds will not be displayed.
    • Column widths are automatic.

    For example:

    [table]
     ::Description          |   Amount::
     Sales                  |1 000 000
     Less: Cost of sales    |  500 000
     Gross Profit           |--500 000==
    [/table]
    

    Will appear as:

    DescriptionAmount
    Sales1 000 000
    Less: Cost of sales500 000
    Gross Profit500 000

    It is not necessary to align the columns as neatly as we have done above, the following will also work:

    [table]
     ::Description|Amount::
     Sales|1 000 000
     Less: Cost of sales|  500 000
     Gross Profit|--500 000==
    [/table]
    

    Advanced features

    The above table demonstrates 2 advanced features:

    • Column alignment; and
    • Cell borders (single / double under- / over-line);

    Column alignment

    Alignment is set by column, and must be set in the first row. We use double colons :: to indicate alignment:

    • No colons = centered (default).
    • Double colon on the left of the cell = left align.
    • Double colon on the right of the cell = right align.
    • Double colon on both sides of the cell = centered.

    For example:

    ::left aligned::centered::right aligned::
    LukeFebruaryApple tart
    DanielJuneCheese and wine
    CodySeptemberIce cream

    Cell borders

    Cells can be given a top border and / or a bottom border. The border can be single-line or double-line. We use double minus signs (--) and double equal signs (==) to indicate single and double lines respectively. For example:

    DescriptionMarkupDemonstration
    Double overline==Cell contentDouble equal - left
    Double underlineCell content==Double equal - right
    Single overline--Cell contentDouble minus - left
    Single underlineCell content--Double minus - right
    For the accountants--Cell content==9 999 999

    Headers and captions

    By default, the first row of the table is treated as the header row. This can be disabled by setting the header attribute to false: [table header="off"]table content goes here [/table].

    You can set a table caption by setting the caption attribute: [table caption="Caption, my caption" header="off"]table content goes here [/table]. This will appear as a heading at the top of the table:

    Caption, my caption
    tablecontent
    goeshere

    By default tables do not have captions. The header row cannot have cell borders.

    Markdown and shortcodes in tables

    • We do not allow Markdown in tables, except for emphasis of text (italics, bold, etc) using * and _; and
    • Simple links ([Link description](http://example.com))

    Shortcodes will not work either.

    Escaping table characters

    Table characters can be escaped as follows:

    • \==
    • \--
    • \::
    • \|

    This is only necessary if you need to display a literal table character when using the table shortcodes and will have no effect anywhere else. For example

    Characters with significance in tables
    CharacterDescriptionUse
    ::Double colonAlignment
    |PipeCell divider
    --Double minusSingle line border
    ==Double equalDouble line border

    Finance tables

    We can use the [finance] table shortcode to create a table without grid lines and a plain white background:

    [finance header="off" caption="Gross profit for the year"]
    ::Sales                |1 000 000::
    Less: Cost of sales    |  500 000
    Gross Profit           |--500 000==
    [/finance]
    

    Will appear as:

    Gross profit for the year
    Sales1 000 000
    Less: Cost of sales500 000
    Gross Profit500 000

    The attributes and syntax are the same as those for a normal table.

    Spreadsheet tables

    We can use the [spreadsheet] table shortcode to create a table styled to look like a spreadsheet. This is useful if you need to refer to cell references. For example:

    [spreadsheet]
    ::Expense           |Actual($)::|Budget($)::
    Telephone           |    500    |    300
    Rent                |  2 000    |  2 200
    Entertainment       |    300    |    350
    Travel              |  1 000    |    900
    Total               |--3 800==  |--3 750==
    [/spreadsheet]
    

    Will appear as:

    ABC
    1ExpenseActual($)Budget($)
    2Telephone500300
    3Rent2 0002 200
    4Entertainment300350
    5Travel1 000900
    6Total3 8003 750

    Please note that the spreadsheet shortcode does not generate a real spreadsheet! There will be NO resizable columns, number formatting or formulas, etc. The attributes and syntax are the same as those for a normal table.

    Alternatives to tables:

    Tables should only be used to represent tabular data. Tabular data is data which can be represented in rows and columns.

    The table shortcode has a number of alternatives:

    • Embed a Google Docs spreadsheet.
    • Use a Markdown list for lists of information which are not tabular in nature.
  • Getting technical

    In this section we learn how to refer to shortcodes literally (escaping) and briefly discuss the various technical, niche shortcodes available at TutnIQ.

  • Escaping shortcodes

    If you need to refer to a literal shortcode (i.e. without the shortcode being processed) we recommend that you use Markdown inline code snippets and code blocks.

    For example, if we wanted to refer to the [table] shortcode in a code snippet, we could simply enclose the code snippet with back ticks ( ` ). Typed as: `[table]`.

    No special escaping is required when referring to shortcodes in Markdown code snippets or blocks.

    There are other ways of escaping shortcodes, however, we do not recommend their use as:

    • We told you not to! (What works today might not work tomorrow because of changes to our software - we will not warn you if we change undocumented features).
    • TutnIQ only supports shortcodes in tutorial / course textblocks, FAQ answers and glossary defininitions - Markdown can be more widely used.
    • Undocumented "features" or methods may be buggy.
  • Other shortcodes

    TutnIQ offers a number of shortcodes which serve niche or technical purposes

    Break out of Markdown lists: [listbreak /]

    Create Markdown code blocks immediately after Markdown lists by breaking out of the list with the listbreak shortcode. Find out how to use the listbreak shortcode at our Markdown tutorial

    Create chessboards: [chess]

    Create chessboards with the chess shortcode. Check out the tutorial to find out how!

    Chess pieces : [cp]

    Insert chess pieces into your tutorials, FAQs and glossaries with the cp shortcode. Study the tutorial to find out how!

    Compatibility with other shortcode API's

    Our shortcode API is based on that of Wordpress, but may deviate where necessary to meet the needs of the TutnIQ platform.

    Bugs

    If you notice any bugs please contact support.

ad placeholder

Sharing is caring!

About the author

Course stats

My progress

Find related courses