Support Home Troubleshooting and Technical Info Formatting in Gorilla

Formatting in Gorilla

  • Overview
  • Text formatting
  • Markdown
  • HTML
  • Scaling
  • Image scaling
  • Text Scaling

Overview

There are ways to fine tune the formatting in your Questionnaire and Tasks, for example with custom text formatting in both Markdown and HTML.

We also have a guide to image scaling to help you control the size of your image stimuli.

Markdown

Markdown is used throughout Gorilla in the Task Builder and Questionnaire Builder to add styling and to format text.

It is a very simple 'markup' language that can be used to format sections of text, providing a similar set of functionality to text editors such as Word. For example, you can create titles, embolden or italicise text or create numbered/bullet-pointed lists, among many other things.

The other key feature of Markdown is that you can include regular HTML code.

Below is a guide for common formatting in Markdown:

Markdown Syntax: What it looks like when displayed:
Creating Titles

# My Title

My Title

## My Subtitle

My Subtitle

### My Subtitle

My Subtitle

#### My Subtitle

My Subtitle

This is a my paragraph of text.

This is a my paragraph of text.

Styling and formatting Text

You can also make text **bold**

You can also make text bold

and use *italics*

and use italics

Inserting Line Breaks (Task Builder 2/Questionnaire Builder 2)

You can easily create separate paragraphs.

<br><br>

Just insert two <br> tags between the lines!

You can easily create separate paragraphs.


Just insert two <br> tags between the lines!

Inserting Line Breaks (Task Builder 1/Questionnaire Builder 1)

You can easily create separate paragraphs.

Just press return and leave a clear new line!

You can easily create separate paragraphs.

Just press return and leave a clear new line!

Adding in Links to other web-pages

Adding in a [Link](https://gorilla.sc/support) is nice and neat!

Adding in a Link is nice and neat!
Creating Lists

You can use bullet points:
* First
* Second
* Third

You can use lists, which will be numbered automatically

  1. First
  2. Second
  3. Third

You can use bullet points:
1. First
1. Second
1. Third

And lists, which will be numbered automatically:

  1. First
  2. Second
  3. Third
Using HTML within Markdown

You can use HTML within markdown and it will usually work pretty well:

<img src='/support/images/gorilla_logo_red.png'>

Just be sure to use single ' quotation marks within your html code.

If you use double quotation marks in your html it may not always work!

You can use HTML within markdown and it will usually work pretty well:

Gorilla Logo

Just be sure to use single ' quotation marks within your html code.

If you use double quotation marks in your html it may not always work!


HTML

HTML, like Markdown, can be used to format sections of text within your Questionnaires or Tasks. HTML, or HyperText Markup Language, is an 'extensive language' which is used by all websites to communicate how information on a web page should be displayed within a browser.

In Gorilla HTML can be used instead of markdown to add styling to text, such as to embolden, italicise, colour or text alignment. Create titles, numbered/bullet-pointed lists and tables. It can also be used to link to external pages or embed images or videos.

When writing HTML 'elements' we must always use what is known as an opening tag (e.g. <p>) and a closing tag (e.g. </p>).

Markdown is a simpler language for formatting text content. However, you may wish to use HTML if you are more familiar with it, or if you need more flexibility in formatting things in a way Markdown can’t, such as adding colour to text.

Below is a guide to basic formatting in HTML:

HTML code elements: What it looks like when displayed:
Creating Titles and Text Blocks

<h1>My Title</h1>

My Title

<h2>My Subtitle</h2>

My Subtitle

<h3>My Subtitle</h3>

My Subtitle

<h4>My Subtitle</h4>

My Subtitle

<p>My paragraph would go here if I were writing one</p>

My paragraph would go here if I were writing one.

Styling and formatting Text

<p>You can create <strong>bold</strong> text.</p>

You can create bold text.

<p>Using <em>Italics</em> text is fun!</p>

Using italics is fun!

<p>Sometimes you will want to <u>underline</u> you text.</p>

Sometimes you will want to underline your text.

<p style="color: blue;">You can change the colour of your text by naming colours</p>

<p>Or specify the colour using
<span style="color: rgb(155,30,210);">'decimal code'(R,G,B)</span></p>

<p>Alternatively you can use <span style="color: #1b9513;">
Hex code to pick a colour</span>.</p>

You can change the colour of all your text by naming colours

Or specify the colour using 'decimal code' (R,G,B).

Alternatively you can use Hex Code to pick a colour.


<p style="font-size: 150%;">You can change the font size by %</p>

<p style="font-size: 16px;">Or specify the number of pixels (px) for your new font size.</p>

You can change the font size by %

Or specify the number of pixels (px) for your new font size.

<p style="font-family: courier, sans-serif;">
You can also change the font style.</p>

You can also change the font style.


Note: If you use a font that the participant’s browser/operating system does not support, the text will not appear. Its good practice to add in a backup after your first font style. Separate this back-up font from the first by using a comma. Sans-serif usually works.

<p>You can combine different formatting e.g.
<em><span style="color: orange; font-family: courier, sans-serif; font-size: 20px;"> colour, font size and style</em></span> by listing your formatting elements one after another, separated by semi-colons.</p>

You can combine different formatting e.g. colour, font size and style by listing your formatting elements one after another, separated by semi-colons.

Aligning Text

<p style="text-align: left;">
This text is aligned to the left.</p>

This text is aligned to the left.

<p style="text-align: center;"> This text is centre aligned.</p>

This text is centre aligned.

<p style="text-align: right;">
This text is aligned to the right.</p>

This text is aligned to the right.

<p style="text-align: justify;"> This text is justified.
You may wish to use this when writing longer paragraphs.</p>

This text is justified. You may wish to use this when writing longer paragraphs.

Adding in Links to other web-pages

<a href="https://gorilla.sc/support/">My Link</a>

My Link

<a href="https://gorilla.sc/support/" target="_blank">
Open My Link in a New Tab</a>

Open My Link in a New Tab
Inserting Line Breaks

<h4>This is how to insert a line break</h4>
<br/>
<p>between other html elements</p>

This is how to insert a line break


between other html elements.

<p>Sometimes you want to separate text with a horizontal rule</p>
<hr/>
<p>like this!</p>

Sometimes you need to separate text with a horizontal rule


like this!

Creating Lists and Tables

<ul>
<li> my first bullet-point item (or unordered list)
<li> my second bullet-point item
</ul>

  • my first bullet-point item (or unordered list)
  • my second bullet-point item

<ol>
<li> my first numbered list item (or ordered list)
<li> my second numbered list item
</ol>

  1. my first numbered list item (or ordered list)
  2. my second numbered list item

<h4>This is how to create a score table:</h4>

<table class="table table-bordered">

<thead>

<tr>

<th>My Heading</th>

<th>Score1</th>

<th>Score2</th>

</tr>

</thead>

<tbody>

<tr>

<th>My Row Label</th>

<td>value 1</td>

<td>value 2</td>

</tr>

<tr>

<th>My Next Row Label</th>

<td>value 3</td>

<td>value 4</td>

</tr>

</tbody>

</table>

This is how to create a score table:

My Heading Score1 Score2
My Row Label value 1 value 2
My Next Row Label value 3 value 4

How Does Image Scaling Work?


Within an Image component, we show the image at the maximum size taking into account the file size and aspect ratio. Some scenarios:

  • If you have a large object size, and a tiny image uploaded we show the image at 100% resolution. This will be smaller than the overall size of the object.
  • If the component and image are a similar size but different aspect ratio then we maximise the size of the image within the object while maintaining the aspect ratio.
  • If you have an image larger than the object's size we maximise the size of the image within the object while maintaining the aspect ratio.

If you can, go through the Task on both 4:3 and 16:9 normally and in full screen mode. To get in and out of full screen mode press F11. Then you'll see all the permutations!

You'll see that the XL 4:3 image is indeed full screen on 4:3 monitor. The issue with videos is that they are often 16:9, but we have to present it within a 4:3 envelope.


How Does Text Scaling Work?

When any component that contains text is added to a Task Builder 2 task, the Autoscale setting will automatically be toggled on. This setting means that the Text size defined in the configuration setting is anchored at the Large Desktop screen size. Then, when participants complete the experiment on devices with different screen sizes, the text will be automatically scaled based on the screen size.

In the video below, you can see two Markdown Text components: one where the Autoscale setting is toggled on and another where the setting is off. As the screen changes size, you can see that text scales accordingly. This helps to avoid your text from overlapping on smaller screens.