Experiment templates

(Page still under construction)

Templates are a simple way to achieve your goal to design an experiment's front end. These templates enable you to aquire different types of 'answers' without having to write the code yourself, e.g. a text answer panel or a slider answer panel. We're going to describe what these answer types look like and how you can use them (e.g., fill in an instruction or the relevant question that you want to ask your participants). If you want to use any of these answer types, you can copy the code that is provided for every type, and insert it in this file:

lingoturk/app/views/ExperimentRendering/YourExperiment/YourExperiment_render.scala.htm

(tba.)

Text answer panel

Text answer panels are the most simple but also most common form of answer panels. They consist of some text (in our case a short story) and an input field that is used to type in your answer. In addition to that, you can specify a title text (heading) and a short instruction sentence between the text and the input panel. What that looks like as code is shown below:

<text-answer 
  answer = "question.answer" 
  restrict-answer="^[A-Za-z ]{5,}$"
>
</text-answer>

This code comprises of the following individual parts:

element/attribute	meaning
<text-answer-panel>...</text-answer-panel>	defines the text answer panel itself
answer="question.answer"	The answer attribute takes a variable as argument. The participant's answer is stored automatically in that answer. You should copy that attribute as it is here if you don't need a more advanced experiment setup.
restrict-answer=<exp>	opt. The user's input will be checked against the regular expression specified by <exp>. The question.answer will be set to "" if the answer does not match the expression. This can be used to verify participants input before they progress, e.g. ^[A-Za-z ]{5,}$ (taken from the example above) enforces that the input consists only of alphabetic characters or spaces and is at least 5 chars long.

Star answer panel

Star answer panels are quite similar to text answer panels except that they have a star rating system instead of a text input field. Their main use case is coarse-grained rating experiment (e.g. very unlikely/unlikely/likely/very likely). What that looks like as code is shown below:

<star-answer 
  answer = "question.answer" 
  max-stars="4"
>
</star-answer>

This code comprises of the following individual parts:

element/attribute	meaning
<star-answer-panel>...</star-answer-panel>	defines the star answer panel itself
answer="question.answer"	The answer attribute takes a variable as argument. The participant's answer is stored automatically in that answer. You should copy that attribute as it is here if you don't need a more advanced experiment setup.
max-stars="<nr>"	the max-stars attribute takes an integer <nr> that specifies the number of stars in the panel

Slider answer panel

Slider answer panels are quite similar to star answer panels except that they have a slider rating system instead of a star rating. These sliders enable participants make a more fine-grained choice compared to the star rating panels. What that looks like as code is shown below:

<slider-answer 
  answer = "question.answer"
>
</slider-answer>

This code comprises of the following individual parts:

element/attribute	meaning
<slider-answer-panel>...</slider-answer-panel>	defines the text answer panel itself
answer="question.answer"	The answer attribute takes a variable as argument. The participant's answer is stored automatically in that answer. You should copy that attribute as it is here if you don't need a more advanced experiment setup.

Drag and Drop template

The drag and drop template allows you to create simple drag and drop based experiment. It comprises of two texts with an empty slot in between. The user can choose a connective from a predefined list and drag it into that slot. What that looks like as code is shown below:

<drag-and-drop
  click="RC.nextQuestion"
  answer="question.answer"
  context1="question.context1"
  sentence1="question.sentence1"
  sentence2="question.sentence2"
  context2="question.context2"
  connectives="because, as a result, as an illustration, more specifically, in addition, even though [...]"
  [...]
>
</drag-and-drop>

This code comprises of the following individual parts:

element/attribute	meaning
<drag-and-drop>...</drag-and-drop>	defines the text answer panel itself
click="RC.nextQuestion"	The click attribute takes a function as an argument. That function is called when a participant completed a question. You should always copy that attribute as it is here.
answer="question.answer"	The answer attribute takes a variable as argument. The participant's answer is stored automatically in that answer. You should copy that attribute as it is here if you don't need a more advanced experiment setup.
context1="<context1>"	opt. some context for the first sentence. It will be displayed in light gray to indicate it's less important than the first sentence.
sentence1="<sentence1>"	The first sentence. It will be displayed before the empty slot.
sentence2="<sentence2>"	The second sentence. It will be dispalyed after the empty slot.
context2="<context2>"	opt. some context for the second sentence. It will be displayed in light gray to indicate it's less important than the second sentence.
connectives="[...]"	A comma separated list of possible connectives.
randomize-connectives="[...]"	opt. Can be either true or false. If set to true, the connectives will be randomized. (Set to false by default)
instructions1="[...]"	opt. The instructive sentence that will be shown if not connective has been chosen yet. If not presenet, a default message will be displayed
instructions2="[...]"	opt. The instructive sentence that will be shown if the participant wants to choose a second connective. If not present, a default message will be displayed
box-title="[...]"	opt. The title of the box that contains the connectives. If not present, a default message will be displayed

Checkbox answer

The checkbox answer template allows you to create a list of checkboxes by providing a list of answer possibilites. The user can tick as many answers as s/he wants. The answer variable will store that information for each possibility. What that looks like as code is shown below:

<checkbox-answer 
  options="[
    'The three strongest retail markets are all located in Texas.',
    'Employement in Texas grew a relatively strong 1%'
  ]"
  answer = "question.answer" 
>
</checkbox-answer>

This code comprises of the following individual parts:

element/attribute	meaning
<checkbox-answer>...</checkbox-answer>	defines the radio answer panel itself
answer="question.answer"	The answer attribute takes a variable as argument. The participant's answer is stored automatically in that answer. You should copy that attribute as it is here if you don't need a more advanced experiment setup.
options="<list>"	The list of different choices that are shown. <list> is an array of strings. (i.e. the list is surrounded by brackets, divided by commas and each individual list item is surrounded by '.)
add-none="true"	opt. Adds a "none" checkbox which can be used if none of the other options fit but the user should be forced to check something (all other options will be disabled)

Radio answer

The radio answer template allows you to create a radio button group. The participant can choose only one of the given options. What that looks like as code is shown below:

<radio-answer
  options="['Arizona','Texas','Oregon']"
  answer = "question.answer" 
>
</radio-answer>

This code comprises of the following individual parts:

element/attribute	meaning
<radio-answer>...</radio-answer>	defines the radio answer panel itself
answer="question.answer"	The answer attribute takes a variable as argument. The participant's answer is stored automatically in that answer. You should copy that attribute as it is here if you don't need a more advanced experiment setup.
options="<list>"	The list of different choices that are shown. <list> is an array of strings. (i.e. the list is surrounded by brackets, divided by commas and each individual list item is surrounded by '.)
inline="true"	opt. If present, the choices will be aligned horizontally instead of vertically.