Text elements

To enter texts independently from a certain question, the most convenient way is this:

1. Go to Text elements and labels at the sidebar under Questionnaire
2. Click on New text element
3. Enter a short ID for internal use (e.g. “welcome”)
4. Enter the text. You can format it using HTML (see below)
5. Save the text block by clicking on OK
6. To insert it into the questionnaire, go to Compose questionnaire. The newly created text element is now visible on the right under Texts, images, audio. You can drag-and-drop the text element into the questionnaire page. You can position it above, between or beneath questions or alone on an own page.

There are 4 different ways how to implement texts into the questionnaire.

• Text elements
  Try to always use text elements for texts. The questionnaire will stay clean and slim, and you are able to use functions like multilingual surveys.
  • Dragging and dropping text elements into the questionnaire-
  • Implementing text elements using the php function text().
• HTML-Code directly in the questionnaire
  Use HTML-code only to insert short snippets of code (e.g. when placing questionnaire elements) or if you have to insert dynamically created content without using placeholders.
  • Drag a HTML-code-element into the questionnaire and enter your HTML-code.
  • Insert HTML-code using the PHP-function html(). The following example shows HTML-code divided into several lines for better legibility.

html('
  <h1> Heading <br>
  Instruments for online surveys </h1>
');

There are two ways to format texts: a wiki-format for simple formatting (e.g. in question texts) and HTML-format for advanced formatting (e.g. in welcome texts). You may mix both notations as desired.

Use double underscores (_), slashes (/) and asterisks (*) to highlight words or sentences. At some places, use the enter key to break lines.

Tip: Use highlighting very sparingly. A homogenous layout looks much more professional. You should not use more than 3 accentuations per page - otherwise the layout will be more confusing than helpful.

If you want text parts to show in the questionnaire, but not as variable labels in your dataset, use double curly brackets ({ and }). Texts marked like this also won't show up using the query value() in correspondence with the format code label.

Technically, you enter HTML-code at any position in the questionnaire. HTML (HyperText Markup Language) is the standard format for websites in the internet. Don't be afraid - you won't need to know everything about HTML to use it for simple tasks like implementing pictures or texts. It just may be helpful to know the structure.

HTML-Code is made out of two parts: The actual information that is to be displayed in the browser and tags around this information that define how to display the information. Tags are written in pointy brackets. The following example highlights the tags:

HTML-Code

<h1>Hello world</h1>
<p>How are you, world?</p>

Translated into human language, this example says nothing else, but:

• Write “Hello world”. Write it as a first-degree-heading (h1).
• Write “How are you, world?”. Write it as a paragraph (p).

The output would look like this:

Usually, every HTML-tag needs a starting tag (e.g. <h1>) and a closing tag (</h1>). The tag <p> marks the beginning of a paragraph and </p> its end. The only relevant exceptions are the line break <br /> (which is more like a command (“break the line here!”) than a tag) and the image <img>.

Tip: The <br>-Tag is especially helpful when labels are not line-breaking correctly in a scale.

HTML-Code

<p>Here should be a<br>line break</p>

Output of the example above

Sometimes, you will need to define additional attributes to tags. The <img>-tag, for example, needs to know where to find the image (src, “source”) and which text to show in case the image can't be displayed (alt, alternative),

HTML-Code

<img src="https://www.soscisurvey.de/help/layout/logo.SoSci-oFb.150.png" alt="Logo">

Output of the example above

Along with texts output trough html(), you can use HTML-tags for Question titles, explanations and scale labels. This is an overview over the most important tags:

Tag	Meaning	Example	Output
<p>	Paragraph	<p>Paragraph 1</p><p>Paragraph 2</p>
<br>	line break	this line will break<br>here
<strong>	highlighted (depending on browser, usually bold)	Text, now <strong>highlighted</strong>	Text, now highlighted
<b>	bold	Text, partly <b>bold</b>.	Text, partly bold.
<i>	italic	This text is <i>italic</i>.	This text is italic.
<u>	underlined	You can <u>underline</u> texts!	You can underline texts!
<small>	Set text smaller	This is a sentence<br> <small>And this could be its explanation</small>
<h1>	First-degree headline	<h1>A. Main part</h1>
<h2>	Second-degree headline	<h2>A.1. Definition</h2>
<a>	Hyperlink to a website	<a href="https://www.soscisurvey.de" target="_blank">SoSciSurvey</a>	SoSciSurvey
<span>	Text part that can be formatted using CSS	This is <span style="color: #FF0000">red Text</span>
<div>	Text block that can be formatted using CSS	<div style="border: 2px solid #FF0000; background-color: #FFCCCC">Text in a red box</div>

Tags are better used for textual highlightning than for layouting and design. However, the <span> and the <div> tag are “empty” containers that do not style texts themselves. You can use them to style text (parts) using CSS-formatting. Have a look at w3schools for further tutorials on this.

In case you need colored text, you can use the color-code in the example and replace it with your color of choice. For example, #FF0000 is FF(=255) red, 00 green, 00 blue, on a scale from 00=none to FF=brightest (the scale goes a little like 0123456789ABCDEF). The color calculator can help you with this. You'll find it when editing your Questionnaire Layout.

“Common” tags like the <p> or <h1> tag don't have a defined appearance. The font-style and -size is being defined by scoscisurvey through a main CSS. Depending on the Questionnaire Layout a headline may be smaller or larger, or have a different color.

Example for highlighted Text

<h1>Demonstration of HTML-Tags</h1>
<!-- Highlightning -->
<p>This paragraph contains a <strong>highlighted</strong> word.</p>
<!-- Color -->
<p>This paragraph contains words in several colors: a<span style="color: #00FF00">light</span>, a 
  <span style="color: #009900">medium</span> and a
  <span style="color: #006600">darker green</span></p>
<p>
<!-- Font size and style-->
<p>This is a <span style="font-size: 32px;">large</span> word,</p>
<div style="font-size: 24px; color: #FF0000; font-weight: bold;">
  and a large, bold, red text.
</div>
<div style="margin-top: 32px; padding: 20px; border: 1px solid #FF9900; ">
  <p>Using div's, you can define the margins to the outside of the div (e.g. on the top of the div) and borders </p>
  <p>Using padding, you can define the margins on the inside of the div (e.g. between the border and the text. Here: all around</p>
</div>

Output demonstration of the example above

Tip: Sometimes a certain text is formatted bold by default. If, at a single point, you need it in standard weight, you can use <span style=“font-weight: normal”>Text</span>. If you want this element never to be bold, you should edit the questionnaire layout.

Tags are defined using angle brackets, like explained above. Sometimes you need to use angle brackets in your text. For this case, there are the HTML-Entities: &lt; ('less than', <) and &gt; ('greater than', >):

Other HTML-Entities are the & fort the ampersand (&) and " for the quotation mark (“). More helpful Entities like • (•) are listed at w3schools.