Actually I haven't had any luck so far getting it to work even with text. I thought I followed the directions in the manual, and Javascript appears to be enabled (the "Test!" script works, a popup appears), but the black screen showing the text doesn't appear...pressing E or I doesn't have any effect (see the screenshot). I don't know javascript so don't know where to start debugging it. If it helps I've pasted the page source below...
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "
www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd
">
<html xmlns="
www.w3.org/1999/xhtml
" xml:lang="en" lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<link rel="stylesheet" type="text/css" href="/lime/styles-public/lime-progress.css" />
<link rel="stylesheet" type="text/css" href="/lime/templates/default/jquery-ui-custom.css" />
<link rel="stylesheet" type="text/css" href="/lime/templates/default/template.css" />
<script type="text/javascript" src="/lime/third_party/jquery/jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="/lime/third_party/jqueryui/js/jquery-ui-1.10.3.custom.min.js"></script>
<script type="text/javascript" src="/lime/third_party/jquery-touch-punch/jquery.ui.touch-punch.min.js"></script>
<script type="text/javascript" src="/lime/scripts/survey_runtime.js"></script>
<script type="text/javascript" src="/lime/scripts/expressions/em_javascript.js"></script>
<script type="text/javascript">
/*<![CDATA[*/
LSvar={"bFixNumAuto":1,"bNumRealValue":0,"sLEMradix":"."}
showpopup=1;
startPopups=[];
/*]]>*/
</script>
<title>Demo - IAT Concept</title>
<meta name="generator" content="LimeSurvey
www.limesurvey.org
" />
<!-- The following line includes jquery-ui.css or jquery-ui-custom.css from template dir, template.css and needed specific css file for survey -->
<!--[if lte IE 6]>
<link rel="stylesheet" type="text/css" href="/lime/templates/default/ie_fix_6.css" />
<![endif]-->
<!--[if IE 7]>
<link rel="stylesheet" type="text/css" href="/lime/templates/default/ie_fix_7.css" />
<![endif]-->
<!--[if IE 8]>
<link rel="stylesheet" type="text/css" href="/lime/templates/default/ie_fix_8.css" />
<![endif]-->
<!-- The following CSS hides visual elements of the progress bar from screen readers. -->
<style type="text/css" media="aural tty">
progress-graph .zero, progress-graph .graph, progress-graph .cent { display: none; }
</style>
<!-- The following line includes jquery.js, jquery-ui.js, survey_runtime.js , template.js and needed specific js file for survey -->
<link rel="shortcut icon" href="/lime/templates/default/favicon.ico" />
</head>
<body class="default lang-en questionbyquestion showprogress showqnumcode-X"><script type="text/javascript" src="/lime/templates/default/template.js"></script>
<script type="text/javascript">
/*<![CDATA[*/
setJsVar();
/*]]>*/
</script>
<div class="outerframe">
<table class="innerframe">
<tr>
<td>
<script type="text/javascript">
$("body").addClass("page-odd");
</script>
<form id="limesurvey" name="limesurvey" autocomplete="off" action="/lime/index.php/survey/index" method="post">
<div style="display:none"><input type="hidden" value="a3e5f6dae07c62db9d09fd6f4e05ade799581b8e" name="YII_CSRF_TOKEN" /></div>
<!-- INPUT NAMES -->
<input type='hidden' name='fieldnames' value='941186X11X175apple_key|941186X11X175apple_time|941186X11X175orang_key|941186X11X175orang_time|941186X11X175pear_key|941186X11X175pear_time|941186X11X175banan_key|941186X11X175banan_time|941186X11X175peach_key|941186X11X175peach_time|941186X11X175grape_key|941186X11X175grape_time' id='fieldnames' />
<button type="submit" id="defaultbtn" value="default" name="move" class="submit noview" style="display:none">default</button><table class="survey-header-table">
<tr>
<td class="survey-description">
<h2>Demo - IAT Concept</h2><br />
<p></p>
</td>
</tr>
<tr>
<td class="graph">
<script type="text/javascript">
$(document).ready(function() {
$("#progressbar").progressbar({
value: -100
});
;});
</script>
<div id="progress-wrapper">
<span class="hide">You have completed -100% of this survey</span>
<div id="progress-pre">0%</div>
<div id="progressbar"></div>
<div id="progress-post">100%</div>
</div>
</td>
</tr>
<tr>
<td class="language-changer">
</td>
</tr>
</table>
<input type='text' id='runonce' value='0' style='display: none;'/>
<!-- START THE GROUP -->
<div id='group-0'>
<table class="group">
<tr>
<td align="center">
<span class="group-name">P1</span>
<!-- PRESENT THE QUESTIONS -->
<div id="question175" class="array-multi-flexi-text">
<table class="question-wrapper">
<tr>
<td class="questiontext">
<span class="asterisk"></span><span class="qnumcode"> </span><p>
You will be presented with a series of words. As each word appears, press <strong>E</strong> to classify it as <strong>Black </strong>or <strong>I</strong> to classify it as <strong>White </strong>(case does not matter).</p>
<p>
Press <strong>E</strong><strong> </strong>or <strong>I</strong> to start.</p>
<script type="text/javascript" charset="utf-8">
// Apply the IAT plugin to this question
implicitAssociation('#question175', true);
</script><br /><span class="questionhelp"></span>
<span class="questionhelp" id="vmsg_175"></span>
</td>
</tr>
<tr>
<td class="answer">
<table class="question subquestions-list questions-list " summary="An array of sub-question on each cell. The sub-question text are in the table header and concerns line header. ">
<colgroup class="col-responses">
<col class="answertext" width="20%" />
<col class="odd" width="30%" />
<col class="even" width="30%" />
</colgroup>
<thead>
<tr class="dontread">
<td width='20%'> </td>
<th class="answertext">Key Pressed</th>
<th class="answertext">Elapsed Time (ms)</th>
</tr>
</thead>
<tbody>
<tr id='javatbd941186X11X175apple' class='array2 subquestion-list questions-list'>
<th class="answertext">
Apple
<input type="hidden" name="java941186X11X175apple" id="java941186X11X175apple" value="" />
</th>
<td class="answer_cell_00key answer-item text-item">
<label class="hide read" for="answer941186X11X175apple_key">Key Pressed</label>
<input type="hidden" name="java941186X11X175apple_key" id="java941186X11X175apple_key" />
<input type="text" name="941186X11X175apple_key" id="answer941186X11X175apple_key" class="" size="20" value="" />
</td>
<td class="answer_cell_00time answer-item text-item">
<label class="hide read" for="answer941186X11X175apple_time">Elapsed Time (ms)</label>
<input type="hidden" name="java941186X11X175apple_time" id="java941186X11X175apple_time" />
<input type="text" name="941186X11X175apple_time" id="answer941186X11X175apple_time" class="" size="20" value="" />
</td>
</tr>
<tr id='javatbd941186X11X175orang' class='array1 subquestion-list questions-list'>
<th class="answertext">
Orange
<input type="hidden" name="java941186X11X175orang" id="java941186X11X175orang" value="" />
</th>
<td class="answer_cell_00key answer-item text-item">
<label class="hide read" for="answer941186X11X175orang_key">Key Pressed</label>
<input type="hidden" name="java941186X11X175orang_key" id="java941186X11X175orang_key" />
<input type="text" name="941186X11X175orang_key" id="answer941186X11X175orang_key" class="" size="20" value="" />
</td>
<td class="answer_cell_00time answer-item text-item">
<label class="hide read" for="answer941186X11X175orang_time">Elapsed Time (ms)</label>
<input type="hidden" name="java941186X11X175orang_time" id="java941186X11X175orang_time" />
<input type="text" name="941186X11X175orang_time" id="answer941186X11X175orang_time" class="" size="20" value="" />
</td>
</tr>
<tr id='javatbd941186X11X175pear' class='array2 subquestion-list questions-list'>
<th class="answertext">
Pear
<input type="hidden" name="java941186X11X175pear" id="java941186X11X175pear" value="" />
</th>
<td class="answer_cell_00key answer-item text-item">
<label class="hide read" for="answer941186X11X175pear_key">Key Pressed</label>
<input type="hidden" name="java941186X11X175pear_key" id="java941186X11X175pear_key" />
<input type="text" name="941186X11X175pear_key" id="answer941186X11X175pear_key" class="" size="20" value="" />
</td>
<td class="answer_cell_00time answer-item text-item">
<label class="hide read" for="answer941186X11X175pear_time">Elapsed Time (ms)</label>
<input type="hidden" name="java941186X11X175pear_time" id="java941186X11X175pear_time" />
<input type="text" name="941186X11X175pear_time" id="answer941186X11X175pear_time" class="" size="20" value="" />
</td>
</tr>
<tr id='javatbd941186X11X175banan' class='array1 subquestion-list questions-list'>
<th class="answertext">
Banana
<input type="hidden" name="java941186X11X175banan" id="java941186X11X175banan" value="" />
</th>
<td class="answer_cell_00key answer-item text-item">
<label class="hide read" for="answer941186X11X175banan_key">Key Pressed</label>
<input type="hidden" name="java941186X11X175banan_key" id="java941186X11X175banan_key" />
<input type="text" name="941186X11X175banan_key" id="answer941186X11X175banan_key" class="" size="20" value="" />
</td>
<td class="answer_cell_00time answer-item text-item">
<label class="hide read" for="answer941186X11X175banan_time">Elapsed Time (ms)</label>
<input type="hidden" name="java941186X11X175banan_time" id="java941186X11X175banan_time" />
<input type="text" name="941186X11X175banan_time" id="answer941186X11X175banan_time" class="" size="20" value="" />
</td>
</tr>
<tr id='javatbd941186X11X175peach' class='array2 subquestion-list questions-list'>
<th class="answertext">
Peach
<input type="hidden" name="java941186X11X175peach" id="java941186X11X175peach" value="" />
</th>
<td class="answer_cell_00key answer-item text-item">
<label class="hide read" for="answer941186X11X175peach_key">Key Pressed</label>
<input type="hidden" name="java941186X11X175peach_key" id="java941186X11X175peach_key" />
<input type="text" name="941186X11X175peach_key" id="answer941186X11X175peach_key" class="" size="20" value="" />
</td>
<td class="answer_cell_00time answer-item text-item">
<label class="hide read" for="answer941186X11X175peach_time">Elapsed Time (ms)</label>
<input type="hidden" name="java941186X11X175peach_time" id="java941186X11X175peach_time" />
<input type="text" name="941186X11X175peach_time" id="answer941186X11X175peach_time" class="" size="20" value="" />
</td>
</tr>
<tr id='javatbd941186X11X175grape' class='array1 subquestion-list questions-list'>
<th class="answertext">
Grape
<input type="hidden" name="java941186X11X175grape" id="java941186X11X175grape" value="" />
</th>
<td class="answer_cell_00key answer-item text-item">
<label class="hide read" for="answer941186X11X175grape_key">Key Pressed</label>
<input type="hidden" name="java941186X11X175grape_key" id="java941186X11X175grape_key" />
<input type="text" name="941186X11X175grape_key" id="answer941186X11X175grape_key" class="" size="20" value="" />
</td>
<td class="answer_cell_00time answer-item text-item">
<label class="hide read" for="answer941186X11X175grape_time">Elapsed Time (ms)</label>
<input type="hidden" name="java941186X11X175grape_time" id="java941186X11X175grape_time" />
<input type="text" name="941186X11X175grape_time" id="answer941186X11X175grape_time" class="" size="20" value="" />
</td>
</tr>
</tbody>
</table>
<script type="text/javascript">
<!--
$('#question175 .question').delegate('input[type=text]:visible:enabled','blur keyup',function(event){
checkconditions($(this).attr('value'), $(this).attr('name'), $(this).attr('type'));
return true;
})
// -->
</script>
</td>
</tr>
<tr>
<td class="survey-question-help">
<img src='/lime/images/help.gif' alt='Help' align='left' />Black||White||Press E to classify as Black or I to classify as White||Done
</td>
</tr>
</table>
</div>
<input type='hidden' name='lastanswer' value='941186X11X175' id='lastanswer' />
<!-- END THE GROUP -->
</td>
</tr>
</table>
</div>
<script type='text/javascript'>
<!--
var LEMmode='question';
var LEMqid=175;
function ExprMgr_process_relevance_and_tailoring(evt_type,sgqa,type){
if (typeof LEM_initialized == 'undefined') {
LEM_initialized=true;
LEMsetTabIndexes();
}
if (evt_type == 'onchange' && (typeof last_sgqa !== 'undefined' && sgqa==last_sgqa) && (typeof last_evt_type !== 'undefined' && last_evt_type == 'TAB' && type != 'checkbox')) {
last_evt_type='onchange';
last_sgqa=sgqa;
return;
}
last_evt_type = evt_type;
last_sgqa=sgqa;
relChange175=false;
relChangeG0=false;
}
//-->
</script>
<input type='hidden' id='relevance175' name='relevance175' value='1'/>
<input type='hidden' id='relevanceG0' name='relevanceG0' value='1'/>
</form>
</td>
</tr>
</table>
</div>
</body>
</html>