====== Single Factorial Experimental Design ======

This guide explains how to implement a simple, unifactorial questionnaire experiment (Split Ballot) with SoSci Survey without [[en:create:php|PHP code]]. In addition, the basics of randomization are explained here. Please read this guide first, even if you want to use an experimental design. In further instructions, more complex implementations are then explained ([[en:create:randomization]]).


===== Basics =====

Randomization (without repetition) means that a participant is randomly assigned to an experimental group. Depending on the assigned group, a question, a text, image or video is then varied (the treatment or the stimulus).

**Note:** Even if the goal is "only" that, for example, half of the participants should answer question A and the other half of the participants should answer question B (random selection) or that the groups are presented with different stimuli, a conceptual division into experimental groups A and B.

The assignment of participants in groups (randomization) can be imagined as if each participant were drawing a lot from a large lottery drum. On this lot there is first a number (code) for the experimental group. Then it goes on to the experimental laboratory - laboratory 1 for all with the code 1, laboratory 2 for all with the code 2, etc.

In the questionnaire, this is a little easier with the notes: Here you only need a question type [[en:create:questions:random]] in which it is entered which "notes" there are. In addition, it is immediately noted what is hidden behind the code. You can enter here, for example, the name of the group, the stimulus (if it is a short text) or its file name (if it is an image). The random generator is then placed on one page in the questionnaire like a normal question. When the participant comes to the page, one of these notes is assigned to him.

During the draw, the random generator writes the code of the drawn note into the record. This is required for the evaluation and possibly also for more demanding variants of randomization. The next step is now the application of the experimental treatment, in the online survey usually the presentation of a stimulus. The experimental variation of images, audio and video is explained below. If questions and texts (not just words) need to be randomized, you need the [[en:create:randomization-php|Randomization with PHP-Code]] later.

===== Preparation =====

Images, videos and audios are basically randomized the same way, only the HTML codes for displaying them look slightly different. This tutorial first describes how to randomize images, and then explains what changes for videos and audio files.

==== Step 1: Stimuli Upload ====

=== Images, Audio, Video, Names ===

If you want to use images, you may first need to save them in a web-ready format with a suitable pixel size. This is explained in more detail under [[en:create:images]].


The media files (images, videos, audio files) are uploaded to the survey server under **Image and Media Files**. More about this under [[en:create:media|Media files in the questionnaire (audio, video, documents)]].

**Note:** After uploading, write down the file names, as you will need them in a later step!

=== Texts, tables, questions ===

If you want to vary texts (i.e. more than a single word) or HTML content (for example tables) as a stimulus, please create these texts with add text in a section of your choice (see also[[[:en:create:texts]]) and then follow the [[:en:create:randomization-php]].

This guide also describes how to display questions or questionnaire pages as a stimulus.


==== Step 2: Random Generator ====

For the next step you have to create a random generator. A random generator is a question type, which means that you need to create a **New Question** of the type "random generator".
To do this, create a new section in the **List of Questions** or open one of the existing sections. In the section you create a **New Question**. As //Type// select the "Random Generator".

**Tip:** You can simply click the selection field for the //Type// and enter the name. The question type will already be suggested to you after a few letters.

Now give your question (i.e. the random generator) a name. After saving, the random generator receives an identifier. Using this identifier, you can also find the corresponding variable later in the data record.

**Note:** If you have difficulties creating questions, or have never done this before, please read the chapter [[en:create:basics|]].

In order for the random generator to display one of the uploaded images directly in the questionnaire, you must (3) enter the file names of the images in the random generator and (4) enter a little HTML code in the random generator so that the image is also displayed.


==== Step 3: Enter File names ====

In the random generator you have just created, now enter the file names of the images in the //Codes (contents):// field (see [[#step_1stimuli_upload|step 1]]). This could look like this, for example:

<code>
giraffe.jpg
car.jpg
books.jpg
</code>

**Important:** Pay precise attention to upper and lower case, also for the file name extension. If the filename is  ''Giraffe.JPG'', neither ''giraffe.JPG'' or ''Giraffe.jpg'' would work!

After saving ({{:button.save.png?nolink|button to save}}), the random generator automatically assigns a numerical code to the images. It will look like this:

<code>
1 = giraffe.jpg
2 = car.jpg
3 = books.jpg
</code>

**Note:** If you do not want to show any image at all to an experimental group (control group), enter a tilde (~) in one line. The tilde ensures that the random generator does not display any HTML code (see below) when this note is dragged.

<code>
1 = giraffe.jpg
2 = car.jpg
3 = books.jpg
4 = ~
</code>


==== Step 4: HTML-Code ====

The random generator can now drag one of the file names - but it doesn't know what you want to do with them yet. In the present case, we would like to display the image stored under the file name in the questionnaire. To achieve this, we use a small snippet of HTML code

Enter the following HTML code in [[en:create:questions:random]] under //Display Contents//:

<code html>
<div>
  <img src="%random%" alt="">
</div>
</code>

But maybe you want to make sure that the image is centered (''text-align: center''), and that there is a little space at the top and bottom (''margin: 3em 0'') and that oversized images (e.g. also when displayed on mobile devices) are automatically reduced to the page width (''max-width: 100%'')? Therefore you can use the following refined HTML-Code:

<code html>
<div style="text-align: center; margin: 3em 0">
  <img src="%random%" style= "max-width: 100%" alt="">
</div>
</code>

When the random generator is then displayed in the questionnaire, it replaces the [[:en:create:placeholders]] ''%random%'' with the drawn note.

==== Step 5: Questionaire ====

Finally, you must tell SoSci Survey at which point the image should be displayed in the questionnaire at all. To do this, Drag the random generator to the desired location under **Compose Questionnaire** (for further reading: [[:en:create:questionnaire]]).

For testing, start the questionnaire on the page with the random generator ({{:button.debug.here.gif?nolink|Start questionnaire from current page}}).

**Tip:** If you just reload the questionnaire page in the browser (F5 key), the questionnaire will always show the same image. Under **Compose Questionnaire**, start a new interview ({{:button.debug.here.gif?nolink|Start Questionnaire from Current Page}}) so that a new note is drawn.


===== Variants: Audio und Video =====

Videos and audio files can in principle be integrated in the same way as images. But the HTML code in [[en:create:questions:random]] looks different. More about this in the tutorial [[en:create:media|Media files in questionnaire]].

==== Stimulus: Video ====

Enter the file names of the videos under //Codes (Contents)// in the random generator, e.g.

<code>
slow01.mp4
slow02.mp4
fast01.mp4
fast02.mp4
</code>

Under //Display contents// you then have to enter an HTML code which will embed the corresponding video into the questionnaire. This could look like the following for videos: 

<code HTML>
<video width="512" height="288" controls controlsList="nodownload" style="max-width: 100%">
  <source src="%random%"  type="video/mp4">
</video>
</code>

When it comes to the HTML code for embedding videos, you have numerous design options. For example, you can show/hide certain controls or start the video automatically. You can read more about this in [[:en:create:media#embedding_videos_using_HTML5|Embedding Videos using HTML5]] and in the many documentations on the HTML tag ''<video>'', e.g. [[https://www.w3schools.com/html/html5_video.asp|w3schools.com: HTML video]].


==== Stimulus: Video-Variants ====

For videos, it is possible to offer the browser different file formats (e.g. mp4, webm and ogg). This is also possible if you have prepared the corresponding files and uploaded them to the survey project.


Make sure that the front part of the file name is always the same for the different formats of a video, e.g. ''fast01.mp4'', ''fast01.webm'' and ''fast01.ogg''. Then enter in the random generator only the front part of the file name as //Code (contents)//:

<code>
slow01
slow02
fast01
fast02
</code>

In the HTML code, you then add the file extensions after the placeholder ''%random%''.

<code HTML>
<video width="512" height="288" controls controlsList="nodownload" style="max-width: 100%">
  <source src="%random%.mp4"  type="video/mp4">
  <source src="%random%.webm"  type="video/webm">
  <source src="%random%.ogg"  type="video/ogg">
</video>
</code>


==== Stimulus: Audio ====

After uploading the audio files (see [[#Preparation]]), enter the file names of the audio files in the random generator under //Codes (contents)//. With a tilde (''~'') you can also prevent the inclusion of the audio file for a control group here.

<code>
mozart.mp3
bach.mp3
schubert.mp3
~
</code>

Under //Display Contents// enter HTML code that embeds audio files:

<code HTML>
<audio id="audio_with_controls" preload="auto" autoplay controls controlsList="nodownload">
  <source src="%random%" type="audio/mpeg" />
</audio>
</code>

Extensive customizations are also possible for audio files, e.g. whether playback should start automatically, whether and how the player should be displayed. You can read more in: [[en:create:media#embedding_of_an_mp3_using_html5|Media: Embedding of an mp3 using HTML5]].


===== Notes =====

==== Present stimulus again ====

You want to display the drawn stimulus not only once, but repeat it again on a later page?

If you have stored HTML code in the random generator, you can simply drag the random generator back into the questionnaire page on later pages. You will then see a hint in debug mode that the variable has already been "queried" on a previous page. However, the random generator will not change/overwrite the once drawn random value.

Alternatively, you can use PHP code to display the stimulus matching the drawn random number: [[:en:create:randomization-php]]