PALS3004: Web Programming Demo 7-1

<html>
<head>
<title>PALS3004: Web Programming Demo 7-1</title>
<script>
var numstim;      // number of stimuli
var choices=[];   // stimulus responses
var name;         // subject name
// display page N
function displayPage(n) {
  document.getElementById("page1").style.display="none";
  document.getElementById("page2").style.display="none";
  document.getElementById("page3").style.display="none";
  document.getElementById("page"+n).style.display="block";
}
// show last page with results
function showPage3() {
  // switch to page 3
  displayPage(3);
  // count the number of each choice
  var n1=0,n2=0;
  for (var i=0;i<choices.length;i++) {
    if (choices[i]==1) n1++; else n2++;
  }
  // report score
  var score=document.getElementById("score");
  score.innerHTML=name + ", you pressed Choice One " + n1 
    + " times, and Choice Two " + n2 + " times.";
}
// update page 2 as test progresses
function updatePage2() {
  if (choices.length==numstim) 
    showPage3();
  else {
    var stimulus=document.getElementById("stimulus")
    stimulus.innerHTML="Stimulus " + (choices.length+1) + " of " + numstim;
  }
}
function button1click() {
  // get name
  name=document.getElementById("textbox1").value;
  numstim=5;
  // switch to page 2
  displayPage(2);
  updatePage2();
}
function button2click() {
  choices.push(1);
  updatePage2();
}
function button3click() {
  choices.push(2);
  updatePage2();
}
</script>
<style>
#page1 { display: block; }
#page2 { display: none; }
#page3 { display: none; }
</style>
</head>
<body>
  <h2>Demo 7-1: Demonstrate Page Switching</h2>

  <div id="page1">
    <h3>Page 1 - Welcome</h3>
    <p>Enter your name: <input type='text' id="textbox1" size="20">
    <p><button onclick="button1click()">Start Test</button>
  </div>
  <div id="page2">
    <h3>Page 2 - Running the test</h3>
    <h3 id="stimulus"></h3>
    <p><button onclick="button2click()">Choice One</button>
    <button onclick="button3click()">Choice Two</button>
  </div>
  <div id="page3">
    <h3>Page 3 - Finished</h3>
    <p><span id="score"></span>
  </div>
  
  <p><hr>
  <p align="right">&copy; 2016 University College London

</body>
</html>
Demo 7-1: Demonstrate Page Switching

Page 1 - Welcome

Enter your name: