Custom HTML forms

The inline_html item allows you to implement forms using custom HTML.

• The name attribute of input tags corresponds to an experimental variable. Therefore, the text that is entered into the text input of Example 1 will be stored as the experimental variable text_response.
• For checkbox and radio elements, you can use the id attribute to assign a specific value to the associated experimental variable.
• You can use the required attribute to indicate that a form cannot be submitted before a field has been filled out.
• The form is closed when the participant clicks on an input of type submit.
• To include images from the file pool in a custom HTML form, first retrieve the URL to the file, assign it to an experimental variable, and then use this variable as the source for the <img> tag (see Example 3).

Example 1:

A very basic text input form:

<input type='text' name='text_response'>
<input type='submit' value='click here to continue'>

Example 2:

A form with multiple radio buttons:

<p>Please select your age:</p>
<input type="radio" id="age1" name="age" value="30" required>
<label for="age1">0 - 30</label><br>
<input type="radio" id="age2" name="age" value="60">
<label for="age2">31 - 60</label><br>  
<input type="radio" id="age3" name="age" value="100">
<label for="age3">61 - 100</label><br><br>
<input type="submit" value="Submit">

Example 3:

You can include variable references (except within <script> tags, where curly braces are simply interpreted as part of JavaScript code):

<p>You age group is {age}</p>
<input type='submit' value='ok'>

Example 4:

You can JavaScript through <script> tags. For example, you can get an image from the file pool and assign to an initially empty <img> tag like this:

<img id='capybara'>
<input type='submit' value='ok'>

<script>
document.getElementById('capybara').src = pool['capybara.png'].data.src
</script>