Custom Items

Overview

MediaLab allows you to create your own custom items using HTML. Using the Custom item type, you can specify any web browser file (local or internet) in the Question Wording/File Name field. If and when a post event occurs, MediaLab will save any submitted data that you like and then continue on to the next item in the questionnaire. In order for a posted variable to be saved with the regular data files, its variable name simply needs to match that of the Custom item or any other item in the current experiment.

HTML Items vs Custom Items

An HTML file (e.g., mydoc.htm) is a document. In the same way that a .doc file is meant to be viewed in Microsoft Word, an .htm file is meant to be viewed in a web browser like Internet Explorer, Chrome, or Firefox. An .htm file is also a simple text file which means you can open and edit it in any text editor such as the Windows Notepad. When you open an .htm file in a text editor you will see code that you don't see when viewing it in a web browser--these are all the instructions that tell the web browser what to present and what to do with user actions.

Both Custom and HTML items in MediaLab may contain pretty much any HTML code you like. This means that anything that can be displayed in Internet Explorer, whether it's on the web or on your local computer, can also be used. This can include pictures, movies, formatted text, hyperlinks, flash animations, interactive java applets, scripts, and so on. However, there is a limit to the HTML item type--you can't collect any data with it. You can include questions but there has never been a way to get MediaLab to save those data in the regular data files. Contrariwise, the Custom item type allows you to do just that through the use of standard HTML form code.

Note that a useful introduction to HTML is beyond the scope of this documentation. For a general introduction see:

www.w3schools.com/html/html_intro.asp

What is an HTML Form?

Forms are the basic ingredient for asking questions on the Internet. A single question or set of questions can be asked in any HTML document by surrounding some question code (discussed shortly) with the <form> tag like this:

<form method="post">
questions and variable names for responses go here
</form>

The <form method="post"> tag tells the browser to keep track of any data that is collected within the form and make it available for saving when the user clicks a button to submit their responses. Although it can get more complicated, this is the gist of how most questions are asked when you are surfing the internet.

For more information regarding HTML forms, see:

www.w3schools.com/html/html_forms.asp

How it Works - MediaLab Intercepts!

If you present a Custom item rather than an HTML item, then MediaLab will monitor the posting of any form data. If it finds any data being submitted where the variable name matches the name of any item in any questionnaire file in your MediaLab experiment, then that intercepted value will be written to your standard data files under that name. That's all there is to it.

Example

What is the mysterious code that goes between the <form> tags? This item below presents a text box in which subjects can enter a response. When they click Continue, MediaLab will check to see if any variables in the experiment are called textBox1. If so, the response will be saved to the data files under that name. We can handle that easily by assigning the variable name textBox1 to the Custom item itself when we list it in the questionnaire.

<form method="post">
What is your answer?
<input name="textbox1">
<input type="submit" value="Continue">
</form>

How it looks in a browser:

clip0039

Try It!

To create your first custom item you can copy the code above (everything from <form> to </form>) into a blank text file (e.g., via Notepad). Save it somewhere as myTextBox.htm. Voila! You have just created a custom item! You can view it in Internet Explorer if you like by double clicking on it.

To use it with MediaLab, open a questionnaire file and add an item--choosing Custom as the item type, myTextBox.htm as the file name, and textBox1 as the variable name. That's it! Try running the questionnaire and then view your data to see if the posted response was written to your data file. Remember that if you have made changes that will affect your data files, you'll want to click the Clear Data button to delete the old data files and start fresh (after backing them up if there are data you want to save).

Hint: You can see these samples already prepared in the C:\MediaLab\Samples\Sample 5 Custom Items folder.

Advanced Hint: Colours, fonts, & focus

Adding a few lines to your HTML file can make life a little easier. The additions are in black:

<style><ml.style></style>
<body onload="document.form.textbox1.focus();">
<form name="form" method="post">
What is your answer?
<input name="textbox1">
<input type="submit" value="Continue">
</form>
</body>

The first line allows you to preview the HTML file in Internet Explorer without any kind of warnings popping up. The second asks MediaLab to apply the colors and fonts used in the current session. The third line requests that the screen cursor appear within the specified input area. In this example, we are asking that the cursor automatically appear within the textbox1 field so that the users does not need to click on it to start typing. To try the example above, see C:\MediaLab\Samples\Sample5 custom items\myTextBox2.

Advanced Hint: Continuing without a Continue Button.

MediaLab will not display the standard Continue button when a custom item is used. Instead, it will wait until some data is posted via a submit button. In some cases though you may not want this to happen automatically. An alternative is to use the password parameter. In this case the password can be a variable name, e.g., (xvarname). If you do this, MediaLab will not proceed to the next item unless the password variable is included in the post. This is especially handy if you want to make a multi-page custom item with multiple postings.