embedding scriptingRT SWFs in HTML

in recent weeks, we switched to embedding SWFs using the swf object, and it works well. here is how to do it:

the page describing swfobject, and providing all downloads: http://code.google.com/p/swfobject/

We put a copy of swfobject.js on our server scriptinrt.net: http://scriptingrt.net/swf/swfobject.js

and also a copy of the handy generator html page

in Qualtrics, we paste this code, which also transmits two flashvars (You can delete these two lines if you don’t need them)

<script type="text/javascript" src="http://scriptingrt.net/swf/swfobject.js"></script>
  <script type="text/javascript">
   var flashvars = {};
   flashvars.mtwid = "${e://Field/mtwid}";
   flashvars.mturkcode = "${e://Field/mturkcode}";
   var params = {};
   params.play = "true";
   params.loop = "false";
   params.menu = "true";
   params.allowfullscreen = "true";
   params.allowscriptaccess = "always";
   var attributes = {};
   swfobject.embedSWF("http://dl.dropbox.com/u/1009114/scriptingrt/mturk.swf", "myAlternativeContent", "800", "600", "9.0.0", false, flashvars, params, attributes);
  </script>
  <div id="myAlternativeContent">
   <a href="http://www.adobe.com/go/getflashplayer">
    <img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player">
   </a>
  </div>
<p>Click on the START button above to begin the task.</p>
<p>Only proceed to the next page after you are told that the data are saved.</p>

 

careful with mx:Text width in scriptingRT

We had a problem today that I want alert users to. A compiled scriptingRT study was somehow larger than it was supposed to be: Even though compiled with width and height set to 640 and 480 and embedded in an object of the same size, scroll bars appeared on the HTML page, and the flash object seemed to be “bigger”. We traced the error to a mx:Text object, for which width was set to “100%”. When we removed this width attribute, or set it to “640″, everything was fine. mx:Text‘s width attribute expects numbers of pixels, and does funny things with %. If you want to use percent, use the attribut percentWidth

connecting mturk to qualtrics to scriptingrt

After describing how to get the mturk worder ID into qualtrics, how to get qualtrics data into scriptingRT, and how to use a code number to give mturk workers something to submit, I now put it all together in one template.

This qualtrics survey

- takes the mturk worker id as a value in the url (here 888888) and puts it in an embedded data field called mtwid; the full link is http://isctecis.us2.qualtrics.com/SE/?SID=SV_bOVwgxx4d2aFvJG&mtwid=888888

- generates a code number mturkcode

- embeds the flash file using swfobject, and transmits mtwid and mturkcode as flashvars

The scriptingRT file imports mtwid and mturkcode, displays it, and appends it to the data it saves.

I exported the qualtrics survey, maybe that’s useful. See also the examples page for for the mturk.swf and mturk.html files.

Survey Flow should look like this. Note that all of these variable names are case sensitive, if you put mturkcode here, it cannot be MTurkCode later.

HTML to put into a text field in HTML View:

<script type="text/javascript" src="http://scriptingrt.net/swf/swfobject.js"></script>
  <script type="text/javascript">
   var flashvars = {};
   flashvars.mtwid = "${e://Field/mtwid}";
   flashvars.mturkcode = "${e://Field/mturkcode}";
   var params = {};
   params.play = "true";
   params.loop = "false";
   params.menu = "true";
   params.allowfullscreen = "true";
   params.allowscriptaccess = "always";
   var attributes = {};
   swfobject.embedSWF("http://dl.dropbox.com/u/1009114/scriptingrt/mturk.swf", "myAlternativeContent", "800", "600", "9.0.0", false, flashvars, params, attributes);
  </script>
 </head>
 <body>
  <div id="myAlternativeContent">
   <a href="http://www.adobe.com/go/getflashplayer">
    <img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player" />
   </a>
  </div>
<p>Only proceed to the next page after you are told that the data are saved.</p>

new feature in scriptingRT

we learned how to use flashvars to transmit data from HTML (e.g, a qualtrics page) to scriptingRT. See a running example on qualtrics, example files here, and an explanation in the manual.

mistake for timout corrected

ScriptingRT update:

We found a mistake in the manual and some examples: When you want to specify a timeout for items in a testpart, use noresponse=”Time.3000″ (or similar), not an additional response= attribute.

doubletest in the examples section shows the correct syntax.

When this even occurs, “miss” is saved in the data.

How to connect Qualtrics and mturk, Part II

(Updated 15.02., with a description on how to add the confirmation number as a safety net.)

Some time ago, I posted our simple method on how to connect mturk and Qualtrics data. The idea was then to generate a random number in Qualtrics, save that in the dataset as an embedded data field, tell it to the participants at the every end of the study, after which they copy it into a text field in mturk and hit submit.

This method worked reasonably well in many studies, but it has its weaknesses, most importantly that wrong codes end up in the mturk database for probably many reasons. Sometimes, people forget to copy, or don’t see the code, or loose connection to Qualtrics, etc. In short, it would be nice to have a more automated backup connection.

Here I describe how this can be achieved with the workerId. This ID is unique for every MTurk worker, and Amazon makes it available as soon as a worker accepts a HIT (thanks to Winter Mason for suggesting this).

First the technical background:

The workerId is accessible in the source of the frame that presents the HIT. You can try this by accepting a HIT, then (using Firefox) right-click on the frame with the HIT, choose This Frame –> Frame Info, and then look at the location.

Here is an example:

https://s3.amazonaws.com/mturk_bulk/hits/54314710/xIpb71zULpXQALR7MKF2DA.html?assignmentId=27VV0FK0COK270BOW2BKGLRW87KIPY&hitId=2CZ8MZ9O9Z6KKQ9OZC8HYRLFQZ9A1G&workerId=A31DOCT85I******&turkSubmitTo=https%3A%2F%2Fwww.mturk.com

You see the workerId (which is mine, and I masked the end with asterisks) in the middle of the path.

To extract this workerId and submit it to Qualtrics, I wrote a little javascript that has to go into the mturk task.

The html and script:

<p>Go to <a href="http://isctecis.us2.qualtrics.com/SE/?SID=SV_bOVwgxx4d2aFvJG"
 target="_blank" onClick="addId()">this website and work on the task there</a>
 (link opens new page).

<p>At the end, you will get a confirmation number. Copy that number and
paste it into the field below, and then submit the HIT.</p>

<script type="text/javascript">
//from here on leave everything as it is
function addId(){
    //setting default values. If the parsing of the workerId fails,
    //99999 will be transmitted.
    var workerId="99999";
    var iFrameURL=document.location.toString();
    var temp="";
    //parsing and extracting the workerId
    if (iFrameURL.indexOf("workerId") > 0){
        if (iFrameURL.indexOf("?") > 0){
            temp=iFrameURL.split("?")[1];
            if (temp.indexOf("&") > 0){
                temp=temp.split("&")[2];
                if (temp.indexOf("=") > 0){
                    workerId=temp.split("=")[1];
                }
            }
        }
    }
    //appending the workerId to the link
    document.links[0].href+="&mtwid=" + workerId;
}
</script>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>confirmation number:</p>
<p><textarea rows="3" cols="80" name="answer"></textarea></p>

The first two paragraphs are HTML and simply add the link. The link contains an onClick event handler that executes the javascript function in the script before the link is followed. If the browser has no javascript activated, the link is followed without the workerId being added.

The javascript function takes the location of the frame, and tries to extract the workerId. If the extraction fails, the workerId keeps the default value of 99999. The workerId is appended to the link, using the syntax that Qualtrics expects.

If it works, the link will call: http://isctecis.us2.qualtrics.com/SE/?SID=SV_bOVwgxx4d2aFvJG&mtwid=99999, with the correct workerId instead of 99999.

How to actually do it:

1. Create your HIT in mturk. Make sure you do that via creating a HIT template, not by “create HIT manually” – in the latter case, the workerID does not seem to be available. When designing the layout, switch to “Edit HTML Source” and enter the code above. Obviously, you want to change the link to the actual link to your Qualtrics survey, but be careful to leave all quotes etc. as they are.

When you preview the HIT, it will look like this:

This is also what workers will see.

In Qualtrics, add an embedded data field and call it mtwid – this is what is appended to the link in the form of … .html?mtwid=999999. It will look like this:

That’s already it. The embedded data field is saved in your data file.

For testing purposes, you can ask Qualtrics to display the content of the embedded data field, like this:

When the link is followed, this will produce this qualtrics page:

 

Adding a safety net: Giving a confirmation number.

I still recommend that in the end, Qualtrics should give a confirmation number that has to be pasted back into qualtrics. It directs participants back to mturk and make sure they actually submit and don’t loose their HIT because of going over the time limit. Also, if a worker has javascript turned of, the transmission will fail, and the confirmation number is then a backup to match datasets.

In a nutshell, here is how to do this:

In the survey flow, add a web service element that gets a random number from a qualtrics web service, and stores it in an embedded data field that we call mturkcode

It’s important to place this at the beginning of your survey, before the actual question blocks.

The web service URL is http://reporting.qualtrics.com/projects/randomNumGen.php. You can choose any name for the embedded data field you like (instead of mturkcode), but the “random” has to be exactly that. min and max will be the limits of the returned random number.

Then, at the end of the survey, you tell the generated number to your participants. This is done by using the piped text function, which you can easier click on while editing a text field, or directly entering the text as shown below:

or, in plain text: “Thank you for taking part in this study. Your validation code for mTurk is ${e://Field/mturkcode}. Please press on the continue button >>> one more time.”

In MTurk, you then ask for this confirmation number before people submit the HIT.

For more info, see the earlier post on this.

Some additional notes:

  • I hope this is not violating any mTurk policies. I read them carefully and don’t think it does. If you think otherwise, please let me know.
  • Testing this in the mturk Sandbox does not work, as no workerId is assigned there for a task.
  • While creating this, I learned something that might be useful in the future: To store a value in an embedded data field in Qualtrics from Javascript, it’s possible to use a hidden input field: <input type=hidden id=’myField’ name=’ED~myED’ value=’remember_this’> will save “remember_this” in the embedded data field myED, which has to be created in the survey flow.

How to repeatedly assign participants to conditions in Qualtrics

In one of our studies using Qualtrics, we came across the problem of randomly assigning participants to different experimental conditions repeatedly.

The point was that we wanted everybody to experience a manipulation depending on condition, then have everybody fill in the same measures, and then present some more materials again depending on condition.

Randomizing the experimental conditions ONCE is easy, but how to do that repeatedly?

Our quite simple solution was to create embedded data fields that store the assignment to condition, and then branch according to that field.

To do this, in the survey flow you set up in the beginning a randomizer

Click survey flow and add a new element: Randomizer

Under this element, add the conditions you want to randomize by pressing add new element here: Embedded data.

On the embedded data element, type “condition” and the label of the condition (e.g. number) on the value field. Do this for every condition.

Go back to the randomizer and choose to “randomly present 1 of the following elements” and tick “evenly present elements“.

At this point, it should look like this (example with four conditions):

Below, add a new element: Branch

In branch, select “If” Embedded Data, type “condition” and select Is Equal To, and type the name/number of the condition

something like this:

Under the branch add a new element, that will be the block containing the desired stimulus for that condition

Do the same for all the experimental conditions.

it should look like this (again, example with four conditions):

In this example, the Blocks Entitativity and ManCheck are done for all participants in the same manner.

After that, you can then repeat the branching and do more condition-specific manipulations or measures.

If you have the problem that there is only very little change between your conditions, for instance a different label, there is alternative: Store the label itself in an embedded data field and insert it with Piped Text.

(written by Pedro Marques and Thomas)

editing scriptingRT in FlashBuilder

In our projects so far, we used the free Notepad++ to edit our .mxml files. It does nice syntax coloring (if you add .mxml as an extension for XML in the style configurator).

But now, in the mailing list the question came up whether you can also use Adobe’s professional editing software FlashBuilder. In fact, Adobe is giving Flash Builder away for free to the education sector.

The answer is yes, you can use FlashBuilder to create scriptingRT experiments.

After download and install, simply create a new project, then save a copy of scriptingrtXXX.swc in the libs folder, and you are ready to edit your .mxml file. To test, use Run, to export the finished script, Export a Release Build from the Project menu. This also builds a html page.

I haven’t tested this much, but I can see two immediate advantages: The syntax coloring works for both XML and ActionScript in the same file, while in Notepad++ the embedded ActionScript is not colored. I imagine that you also get enhanced debugging options this way.

why flex instead of html5 & javascript

the question why we use flex instead of javascript keeps coming up after the PR debacle around flash.

here is an interesting post on the future of flex and its advantages over html5. It’s actually written by a Portuguese flex developer whose office is probably within walking distance from my university iscte, and who even studied here.

and: flex is now called apache flex instead of adobe flex

Follow

Get every new post delivered to your Inbox.

Join 165 other followers