PALS3004: Web Programming Demo 7-3

<html>
<head>
<title>PALS3004: Web Programming Demo 7-3</title>
<script>
// experiment data
var stimtab=[];
var stimcnt;
var stimpos;
var stimtime;
// randomise array order
function shuffleArray(array) {
  for (var i=array.length-1; i>0; i--) {
    var j = Math.floor(Math.random()*(i+1));
    var temp=array[i];
    array[i]=array[j];
    array[j]=temp;
  }
}
// initialise experiment
function initialise() {
  // condition 1=congruent, 2=incongruent
  for (var i=0;i<4;i++) stimtab.push({ condition:1, stimulus:"Red", colour:"red" });
  for (var i=0;i<2;i++) stimtab.push({ condition:2, stimulus:"Red", colour:"green" });
  for (var i=0;i<2;i++) stimtab.push({ condition:2, stimulus:"Red", colour:"blue" });
  for (var i=0;i<4;i++) stimtab.push({ condition:1, stimulus:"Green", colour:"green" });
  for (var i=0;i<2;i++) stimtab.push({ condition:2, stimulus:"Green", colour:"red" });
  for (var i=0;i<2;i++) stimtab.push({ condition:2, stimulus:"Green", colour:"blue" });
  for (var i=0;i<4;i++) stimtab.push({ condition:1, stimulus:"Blue", colour:"blue" });
  for (var i=0;i<2;i++) stimtab.push({ condition:2, stimulus:"Blue", colour:"red" });
  for (var i=0;i<2;i++) stimtab.push({ condition:2, stimulus:"Blue", colour:"green" });
  stimcnt=stimtab.length;
  shuffleArray(stimtab);
  stimpos=0;
  clearStimulus();
  alert("Click OK to Start");
  setTimeout(displayStimulus,1000+1000*Math.random());
}
// record response
function recordResponse(rtype) {
  stimtab[stimpos].rt=performance.now()-stimtime;
  stimtab[stimpos++].response=rtype;
  if (stimpos>=stimcnt)
    finishTest();
  else {
    clearStimulus();
    setTimeout(displayStimulus,1000+1000*Math.random());
  }
}
// clear the stimulus back to a grey cross
function clearStimulus() {
  var txt=document.getElementById("stimtext");
  txt.style.color="LightGray";
  txt.innerHTML="+";
}
// display the stimulus
function displayStimulus() {
  var txt=document.getElementById("stimtext");
  txt.style.color=stimtab[stimpos].colour;
  txt.innerHTML=stimtab[stimpos].stimulus;
  stimtime=performance.now();
}
// display test results
function finishTest() {
  var sum1=0,cnt1=0;
  var sum2=0,cnt2=0;
  for (var i=0;i<stimcnt;i++)
    if (stimtab[i].response==stimtab[i].colour) {
      if (stimtab[i].condition==1) {
        sum1 += stimtab[i].rt;
        cnt1++;
      }
      else {
        sum2 += stimtab[i].rt;
        cnt2++;
      }
    }
  alert("Congruent RT=" + (sum1/cnt1).toFixed(1) + ", Incongruent RT=" + (sum2/cnt2).toFixed(1));
}
</script>
<style>
#stimtext { font-family:sans-serif; font-size:32pt; }
</style>
<body onload="initialise()">
  <h2>Demo 7-3: Demonstrate Reaction Time Measurement</h2>

<p align="center"><strong>Identify the colour of the text</strong>
  <p align="center"><span id="stimtext">+</span>
  <p align="center">
  <button onclick="recordResponse('red')">Red</button>
  <button onclick="recordResponse('green')">Green</button>
  <button onclick="recordResponse('blue')">Blue</button>

</body>
</html>

Demo 7-3: Demonstrate Reaction Time Measurement

Identify the colour of the text