SlumsTesterV1 - SafeWithDownload.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="user-scalable=1.0,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="format-detection" content="telephone=no">
    <script src="http://code.jquery.com/jquery-2.1.0.min.js"></script>
    
    <title>SLUMS Examination</title>
    <!--script src="//code.jquery.com/jquery-1.10.2.js"></script-->
    
    <script type="text/javascript">
    var now = new Date(Date.now());


    //Function used by moveEventFunction to detect where on the appplication canvas the event has taken place.
    //Takes into account different platforms - Firefox, Chrome, Safari.
    function getCoords(e) {
      if (e.offsetX) {
        // Works in Chrome / Safari (except on iPad/iPhone)
        return { x: e.offsetX, y: e.offsetY };
      }
      else if (e.layerX) {
        // Works in Firefox
        return { x: e.layerX, y: e.layerY };
      }
      else {
        // Works in Safari on iPad/iPhone
        return { x: e.pageX - currentDrawCanvas.offsetLeft, y: e.pageY - currentDrawCanvas.offsetTop };
        }
    }

    function clearLocalData(){
      if(confirm("really?")){
        localStorage.setItem("all_items", "[]");
        localStorage.setItem("current_item", "[]");
        seeDatabase();

      }
    }

    function exportTableToCSV($table, filename) {

      var keys = []
      var content = ""
      $("input,select,textarea,checkbox").each(function(i,e){
        if($(e).attr("name")){
          name = $(e).attr("name")            
          keys.push(name)
          content += name + "\t"
        }
      });
      content += "\n"
      if(localStorage.getItem("all_items")){
        var allAnswers = JSON.parse(localStorage.getItem("all_items"))
        for(a=0;a<allAnswers.length;a++){
          var line = ""
          for(i=0;i<keys.length;i++){
            var val = allAnswers[a][keys[i]]
            line += val + "\t"
          }
          line += "\n"
          content += line
        }
      }
      body = encodeURIComponent(content);
      // Data URI
      csvData = 'data:application/csv;charset=utf-8,' + body;
     
            
      $(this)
        .attr({
          'download': filename,
          'href': csvData,
          'target': '_blank'
      });
    }

    function submitData(){
      mail = "chihchun_chen@yahoo.co.uk"
      subject = encodeURIComponent("SLUMSData")

      var keys = []
      var content = ""
      $("input,select").each(function(i,e){
        if($(e).attr("name")){
          name = $(e).attr("name")            
          keys.push(name)
          content += name + ","
        }
      });

      content += "\n"

      if(localStorage.getItem("all_items")){
        var allAnswers = JSON.parse(localStorage.getItem("all_items"))
        for(a=0;a<allAnswers.length;a++){
          var line = ""
          for(i=0;i<keys.length;i++){
            var val = allAnswers[a][keys[i]]
            line += val + ","
          }
          line += "\n"
          content += line
        }
      }

      body = encodeURIComponent(content);
      window.location.href = "mailto:"+mail+"?subject="+subject+"&body="+body
    }

    function seeDatabase(){
      $(".question").hide()
      $("#local_database").show()

      var tr = $("<tr></tr>")

      $("thead").html("").append(tr)

      var keys = []
      $("input,select").each(function(i,e){
        if($(e).attr("name")){
          //console.log(i,e)
          name = $(e).attr("name")
            
          keys.push(name)

          tr.append("<th>"+name+"</th>")
        }
      });

      if(localStorage.getItem("all_items")){
      var allAnswers = JSON.parse(localStorage.getItem("all_items"))
        for(a=0;a<allAnswers.length;a++){
          var tr = $("<tr></tr>")
          $("tbody").append(tr)
          for(i=0;i<keys.length;i++){
            var val = allAnswers[a][keys[i]]
            tr.append("<td>"+val+"</td>");
          }
        }
      }

    }


    function saveCurrent(){
        
      if(!jQuery.isEmptyObject(currentQuestion)){

        if(localStorage.getItem("all_items")){
          var allAnswers = JSON.parse(localStorage.getItem("all_items"))
          console.log("Loaded current objects:", currentQuestion)
        }
        else{
          var allAnswers = [];
        }

        allAnswers.push(currentQuestion);
        localStorage.setItem("all_items", JSON.stringify(allAnswers));
       
        currentQuestion = {};
        alert("results saved in db.")

        location.hash = "#q0";
        location.reload();
      }
      seeDatabase();

    }


    var p1; //Coordinates for location on the application canvas that has been touched.
    var currentDrawCanvas; //Current canvas.
    var ctx; //Drawing canvas.
    var responses = [];//Array to hold all the responses.
    var mouseX;
    var mouseY;

    
    //Sets the p1 variable to reflect position of the touch event.
    function moveEventFunction(e) {

      if(currentDrawCanvas){
        ctx = currentDrawCanvas.getContext("2d");  

        if (e.touches) {
          for (var i = 1; i <= e.touches.length; i++) {
            var p = getCoords(e.touches[i - 1]); // Get info for finger i
            console.log(p.x,p.y)
            if(!p1){
              p1 = p
            }else{
              ctx.beginPath();
              ctx.strokeStyle = "#F00";
              ctx.moveTo(p1.x,p1.y);
              ctx.lineTo(p.x,p.y);
              ctx.stroke();
              p1 = p;
              
            }
          }
        }
      }
      else {

        sketchpad_mouseMove(e);
      }
      
            
      return false; // Stop event bubbling up and doing other stuff (like pinch zoom or scroll)
    }

    // Get the current mouse position relative to the top-left of the canvas
    function getMousePos(e) {
        if (!e)
            var e = event;

        if (e.offsetX) {
            mouseX = e.offsetX;
            mouseY = e.offsetY;
            console.log("offsetX: " + mouseX)
            console.log("offsetY: " + mouseY)
            
        }
        else if (e.layerX) {
            console.log("layerX: " + mouseX)
            console.log("layerY: " + mouseY)
            

            mouseX = e.layerX;
            mouseY = e.layerY;
        }
        //p1 = {x: mouseX, y: mouseY};
     }


    //Adds the coordinates to the array of cooridnates for q8
    function recordClockCoords(coords) {
      q8.append(coords);
    }

   
    //Draws a circle on the application canvas.
    function drawCircle(domElement){
      $(domElement).attr("width", 500)
      $(domElement).attr("height", 500)

      ctx = domElement.getContext("2d");
      
      ctx.clearRect(0, 0, domElement.width, domElement.height);
      ctx.strokeStyle = "black";
      ctx.arc(domElement.width / 2, domElement.height / 2, 200  , 0, Math.PI * 2);
      ctx.stroke();
      if (ctx) {
        domElement.addEventListener('mousedown', sketchpad_mouseDown, false);
        domElement.addEventListener('mousemove', sketchpad_mouseMove, false);
        window.addEventListener('mouseup', sketchpad_mouseUp, true);
      }
    }

    //Draws a box on the application canvas. 
    function drawBoxes(domElement){
      console.log("drawBoxes")

      $(domElement).attr("width", 700)
      $(domElement).attr("height", 210)
          
      ctx=domElement.getContext("2d");

      ctx.clearRect(0, 0, domElement.width, domElement.height);
      //Draws the square
      ctx.strokeRect(1,1,200,200);

      var d = 500;
      //Draws the rectangle
      ctx.strokeRect(1+d,1,100,200);

      var tX = 350;
      ctx.beginPath();
      ctx.moveTo(tX,1);
      //Draws the triangle
      ctx.lineTo(tX+100,200);
      ctx.lineTo(tX-100,200);
      ctx.lineTo(tX,1);
      ctx.stroke();

      if (ctx) {
        domElement.addEventListener('mousedown', sketchpad_mouseDown, false);
        domElement.addEventListener('mousemove', sketchpad_mouseMove, false);
        window.addEventListener('mouseup', sketchpad_mouseUp, true);
      }
    }

    if(localStorage.getItem("current_item")){
      var currentQuestion = JSON.parse(localStorage.getItem("current_item"))
      console.log("Loaded current object:", currentQuestion)
    }else{

      console.log("No current object.")
      var currentQuestion = {};
    }

    //Attaches the event handler 'touchmove' to the document.
    $(document).bind('touchmove', false);

    //Holds off function execution till DOM completely loaded.
    $(document).ready(function(){

      $(".export").on('click', function (event) {
        // CSV
        exportTableToCSV.apply(this, [$('#dvData>table'),  now.getFullYear().toString() + "_" + now.getMonth().toString() + 'Data.tsv']);
        
        // IF CSV, don't do event.preventDefault() or return false
        // We actually need this to be a typical hyperlink
    });

      $("input, select").change(function(evt){
          
        currentQuestion[evt.target.name] = evt.target.value;
        localStorage.setItem("current_item", JSON.stringify(currentQuestion));
        console.log("saved:", currentQuestion)
      });


      //Applies function to every element with class='question'
      $(".question").each(function(i,e){
        $(e).attr("id","q"+i)
        //The 'Next' button
        var btn = $('<input type="button" class="next" value="Next">'); //Creates the 'Next' button
        console.log(i)
        btn.attr("data-to",i+1) //'Next' Button associated with next page (question).          
        btn.attr("data-id",i) //Let the 'Next' button know what page (question) it's currently on.

        if (i===15) {

            downloadCanvas("canvas1", "firstattempt.png")
            console.log("We tried to download")
            console.log(i)
        }

        //Binds the event handler 'click' to the event where the 'Next' button is clicked.
        btn.bind('click', function(ev){
          var toId = $(ev.target).data("to")
          $(".question").hide()//Hide previous page
          $("#q"+toId).show()  //Show next page
          location.hash = "#q"+toId //Moves to next page.
        });
        $(e).append(btn) //'Next' button now listens for events

        //The 'Previous' button
        var btn3 = $('<input type="button" class="previous" value="Previous">'); //Creates the 'Previous' button
        btn3.attr("data-to",i-1) //'Previous' Button associated with Previous page (question).          
        btn3.attr("data-id",i) //Let the 'Previous' button know what page (question) it's currently on.

        //Binds the event handler 'click' to the event where the 'Previous' button is clicked.
        btn3.bind('click', function(ev){
          var toprev = $(ev.target).data("to")         
          $(".question").hide()//Hide previous page
          $("#q"+toprev).show()  //Show next page
          location.hash = "#q"+toprev //Moves to next page.
        });
        $(e).append(btn3) //'Previous' button now listens for events */

        //The 'Start over' button
        var btn2 = $('<input type="button" class="over" value="start over">'); //Creates the 'Start over' button.
        //Binds the event handler 'click' to the event where the 'Start over' button is clicked.
        btn2.bind('click', function(ev){
          //Display a pop-up box that asks user to confirm action
          if(confirm("really start over?")){
            //Reset the page (question) number
            location.hash = "#q0";
            //Reload the page.
            location.reload();
          }
        });
        $(e).append(btn2) //'Start over' button now listens for events (i.e. detects when it is clicked)
      });


      //START
      if(location.hash){
        //Logs the question (page) number to the console
        console.log(location.hash)
        //Introduce a variable holding the question identifier representing the current question number, e.g. q1 will be the identifier if we are on question 1.
        var hId = location.hash
      }else{
        //Introduce a variable holding the question identifier representing the start of the test, q0.
        var hId = "#q0"
      }

      //Display the question identifier
      $(hId).show()

      var can = document.getElementById("canvas1");
      
      //Draws circle on 'canvas1'
      drawCircle(can);
      //When canvas1 is touched, associate it wth currentDrawCanvas so we know it is now available to act on.
      can.ontouchstart = function(e){
        currentDrawCanvas = document.getElementById("canvas1");
      }
      can.onmousedown = function(e){
        currentDrawCanvas = document.getElementById("canvas1");
      }
      //Handle different types of input.  
      can.ontouchmove = moveEventFunction; //Associates touch with moveEventFunction.
      can.onmousemove = moveEventFunction; //Associates mouse movement with moveEventFunction.
      
      //When canvas interaction has ended, no more cooordinates recorded.
      can.ontouchend = function(e){
          //Resets p1
        p1 = null;
      };
      can.onmouseup = function(e) {
        mouseDown = 0;
        p1 = null;
      }
      mouseDown = 0;


      var can2 = document.getElementById("canvas2");
      //Draws boxes on 'canvas2'
      drawBoxes(can2);
      //When canvas2 is touched, associate it with currentDrawCanvas so we know it is available to act on.
      can2.ontouchstart = function(e){
        currentDrawCanvas = document.getElementById("canvas2");
      }
      can2.onmousedown = function(e) {
        currentDrawCanvas = document.getElementById("canvas2");
      }
      //Handle different types of input.  
      can2.ontouchmove = moveEventFunction; //Associates touch with moveEventFunction.
      can2.onmousemove = moveEventFunction; //Associates mouse movement with moveEventFunction.
      
      //When canvas interaction has ended, no more cooridnates recorded.
      can2.ontouchend = function(e){
        //Resets p1
        p1 = null;
      };
      can2.onmouseup = function(e) {
        mouseDown = 0;
        p1 = null;
      }
    });

    //Drawing functions:
    // Draws a dot at a specific position on the supplied canvas name
    // Parameters are: A canvas context, the x position, the y position, the size of the dot
    function drawDot(ctx,x,y,size,e) {
      
      ctx.fillStyle = "#F00";
      ctx.beginPath();
      ctx.arc(x, y, size, 0, Math.PI*2, true); 
      ctx.closePath();
      ctx.fill();
      
    } 

    // Keep track of the mouse button being pressed and draw a dot at current location
    function sketchpad_mouseDown() {
        mouseDown=1;
        drawDot(ctx,mouseX,mouseY,2, e);
    }

    // Keep track of the mouse button being released
    function sketchpad_mouseUp() {
        mouseDown=0;
    }

    // Keep track of the mouse position and draw a dot if mouse button is currently pressed
    function sketchpad_mouseMove(e) { 
        // Update the mouse co-ordinates when moved
        getMousePos(e);

        // Draw a dot if the mouse button is currently being pressed
        if (mouseDown==1) {
            drawDot(ctx,mouseX,mouseY,2,e);
        }
    }

  function creatingfilename (first_name, surname) {
    var filename = (first_name + surname + ".png")
  }

  function downloadCanvas(canvasId, filename) {
            var link = document.createElement('a')
            link.href = document.getElementById(canvasId).toDataURL();
            link.download = filename;
        }

       
</script>
  
    <style>

    /*Default font*/
      *{
        font-family:'Arial Rounded MT Bold';
      }
      /*Formatting for questions (pages)*/
      /*.info{
        text-align: center;
        padding: 30px;
      }*/

      .question{
    		
        text-align: center;
    		display: none;
    		padding: 30px;
    	}


        #header {
       background-color:black;
       height:100px;
       color:white;
        text-align:center;
        padding:5px;
       }

       #section {
        float:left;
        float:top;
        padding:10px;  
        text-align: "center";
        width:100%;
        }

        #testee {
        color:#4169E1;
        }

        #tester {
        font-weight: bold;
        }

       .headerclass {
        background:#000000;
        border:1px solid #CCC;
        width:fixed:100%;
        margin:0px auto;
        top:0px;
      }

      .number{
        position: absolute;
        top:0px;
        right:0px;
        width:50px;
        height:50px;
        font-size: 18px;
      }

      .next{
        position: absolute;
        right:0px;
        top:10px;
      }   

      .previous{
        position: absolute;
        left:0px;
        top:10px;
      }  
       

      .over{
        position: absolute;
        right:0px;
        bottom:10px;
      }

      a.export, a.export:visited {
        text-decoration: none;
        color:#000;
        background-color:#ddd;
        border: 1px solid #ccc;
        padding:8px;
      }

      
      #q0 .over{
        display:none;
      }

      #q0 .previous{ 
        display:none;
      }

      #q1 .previous{
        display:all;
      }

      .database{
        position: absolute;
        left:0px;
        top:10px;      
      }

      #q22 .next{
        display:none;
      }

      table{
        margin: 0 auto;

      }

      td{
        padding:00px;
      }

    	input, select{
			 font-size: 36px;
			 padding: 10px;
       margin:20px;
    	}
  
      /*Hide local database*/
      #local_database{
        display: none;
      
      }

      /*Formatting for canvas1*/
      #canvas1{
        display: block;
        margin-left: auto;
        margin-right: auto;
      }

    </style>

  </head>
  <body>

   
    <!--form id="form1" name="form1" method="post" action="getData"-->

     <!--Title Page -->
      <div id="header">
      <h1>Screening Test</h1>
      </div>  

    <div class = "question">
    <div id="section">

      <!--<audio controls autoplay>
      <source src="Audio/Mary/intro.mp3" type="audio/mpeg">
        Your browser does not support the audio element.
      </audio> -->


      This is an initial application designed to investigate whether mobile devices are suitable to adminster apps which affect mental health. This is NOT a screening test for dementia. We are not qualified to diagnose dementia, nor are we trying to. We are using the St Loius University Mental Status Exams (SLUMS) as an example of such a test. If you wish to participate in the study, please press next to continue.
       <input type="submit" class="database" onclick="seeDatabase();" value="See local database" />
       </div>
      </div> 
    

    <!-- Questions -->
  	<div id="section">


    <div  align=center class="question" title="details">
      <table align="center">
        <tr><td><h2><center>First name</h2></td><td><center><input id="first_name" name="first_name" type="text" value=""/></tr></center>
        <tr><td><h2>Surname</h2></td><td><input id="surname" name="surname" type="text" value=""/></tr>
        <tr><td><h2>Age</h2></td><td><input id = "age" name="age" type="number" value=""/></td></tr>
        <tr><td><h2>Date of birth</h2></td><td><input id="dob" name="dob" type="date" value=""></td></tr>
      </table>
    </div>

    <div align="center" class="question" title="details2">
      <table>
        
        <tr><td><h2>Highest level of Education</h2></td><td><input id="education" name="education" type="text" list="educationlevels" value="None"/></td></tr>
        <datalist id="educationlevels">
                    <option label="Primary" value="Primary"></option>
                    <option label="Secondary" value="Secondary"></option>
                    <option label="University" value="University"></option>
                    <option label="Masters" value="Masters"></option>
                    <option label="PhD" value="PhD"></option>
                    <option label="Other" value="Other"></option>
        </datalist>
        <tr><td><h2>Level of Alertness</h2></td><td><input id="alertness" name="alertness" type="text" list="alertnesslevels" value="None"/></td></tr>
         <datalist id="alertnesslevels">
                    <option label="Alert" value="Awake and able to focus"></option>
                    <option label="Drowsy" value="Drowsy"></option>
                    <option label="Confused" value="Confused"></option>
                    <option label="Distractable" value="Distractable"></option>
                    <option label="Inattentive" value="Inattentive"></option>
                    <option label="Preoccupied" value="Preoccupied"></option>
                    <option label="Unsure" value ="Unsure"></option> 

        </datalist> 
      </table>
  	</div>

    <div class = "question">
    <h2> For the Administrator </h2>
    <p> 
      <h3 id ="tester">Instructions for you will be in bold black text. Please ask the participant the questions aloud clearly and slowly. It is not necessarily needed to speak loudly but it is necessary to speak slowly. Please read the whole page first and then adminster the questions.You may need to reassure patients by telling them that this is not a test they can fail but merely a tool much like a thermometer that takes temperature is a tool. What this does is checks for the amount of memory they have.</p> <br>
        <p id= "testee"> Questions which you should ask will be in blue text as this sentence is.  </h3> </p>
      </div>

      <div class = "question">
      <p id="tester">  Begin by asking the patient something like the following :
    </p>
    <p id="tester"> 
      </p>
      <p>
        <font color = "blue" > "Do you have any trouble with your memory?" <br> "May I ask you some questions about your memory?" <br> "I'd like to see how good your memory is by asking you some questions" </font>
      </p>
    </div>   
  
    <div  align="center" class="question">
      <h2 id="testee">  What day of the week is it? </h2>
      <input id="q1" name="q1" type="text" value=""/>
    </div>

    
    <div  align="center" class="question">   
      <h2 id="testee">What is the year?</h2> 
      <input id="q2" name="q2" type="number" value=""/>
    </div>

    <div  align="center" class="question">
      <h2 id="testee">What county are we in?</h2>
      <input id="q3" name="q3" type="text" value=""/>
    </div>

    <div  align="center" class="question">

      <p id="tester">
        Read the statement as written. For the objects, ask the patient to repeat the five objects that you recite to make sure the patient heard and understood what you said. Repeat them as many times as necessary for them to repeat it back to you correctly. </p>
      <p>
      <h2 id="testee">Please remember these five objects. I will ask you what they are later.</h2></p>
      <ul id="testee">
        <li>Apple</li>
        <li>Pen</li>
        <li>Tie</li>
        <li>House</li>
        <li>Car</li>
      </ul>
    </div>

    <div  align="center" class="question">
      <p id="tester">
        Make sure the patient is focused before reciting the information. Do not prompt or give hints but give the patient ample time. You may repeat the question once if asked. </p>
        <p>
      <h2 id="testee">You have $100 and you go to the store and buy a dozen apples for $3 and a tricyle for $20.</h2>

      <h2 id="testee">How much did you spend</h2>
      </p>
      <input id="q5a" name="q5a" type="text" value=""/>
    </div>

    <div align="center" class="question">

      <h2 id="testee">How much do you have left</h2>
      <input id="q5b" name="q5b" type="text" value=""/>
    </div>

    <div  align="center" class="question">
      <p id="tester"> 
        Count the correct number of animals which they are able to recite. Press start when you have finished the question
      </p>
      <p>
      <h2 id="testee">Please name as many animals as you can in one minute (simply list, separating with a space).</h2>
      <input id="q6" name="q6" type="text" value=""/>       
    </div>

    <div  align="center" class="question" id="testee">
      <p id="tester">
        Count the correct number of animals which they were able to recite. The correct items are :
        </p>
        <ul id="tester">
        <li>Apple</li>
        <li>Pen</li>
        <li>Tie</li>
        <li>House</li>
        <li>Car</li>
      </ul>
      <p>
      <h2 id="testee">What were the five objects I asked you to remember</h2></p>

        <input id="q7" name="q7" type="text" value="" />    
    </div>

    <div  align="center" class="question">
      <p id="tester">
        State each number by its individual name. For example 87 is pronounced "Eight, Seven". You are not allowed to repeat the numbers. If they fail to provide a number then enter "0" into the box.
      </p>
      <h2 id="testee">I'm going to give you a series of numbers and I would like you to give them to me backwards. For Example, if I say 42, you would say 24.</h2>

      
      <table>
        <tr><td><h2 id="testee">If I say 87, you would say</h2></td><td><input id="q8a" name="q8a" type="text" value=""></td></tr>
        <tr><td><h2 id="testee">If I say 659, you would say</h2></td><td><input id="q8b" name="q8b" type="text" value=""></td></tr>
        <tr><td><h2 id="testee">If I say 8537, you would say</h2></td><td><input id="q8c" name="q8c" type="text" value=""></td></tr>
      </table>
    </div>

    <div align="center" class="question">
    <p id="tester"> 
      The next page has a clock face on it. You will ask to patient to draw the markers on the clock face. If the patient only puts 4 markers on the clock, prompt them to number the markers. 
    </p>
  </div>

    <div align="center" class="question" id="clock">
      <span style="font-size:14px;">This is a clock face.<br>
       Please input in the hour markers and <u>the time</u> at ten minutes to eleven o'clock.</span>
      <canvas id="canvas1"></canvas>
      <input type="button" onclick="drawCircle($('#canvas1')[0]);" value="clear">
    </div>

  <div  align="center" class="question">
    <h1>Please hand the tablet back to the test assistant.</h1>
  </div>

  <div  align="center" class="question">
    <h2>Did the patient put 12 markers in roughly the correct location? OR Did they put 4 markers and labeled correctly</h2>


      <table>
        <tr><td><input id="q9a" name="q9a" type="checkbox" value=""/></td><td><h2>12 hours approximately correct</h2></td></tr>
        <tr><td><input id="q9b" name="q9b" type="checkbox" value=""/></td><td><h2>Time hands approximately correct</h2></td></tr>
      </table>
    
  </div>

  <div  align="center" class="question">
      <h2 id="testee">Please place an X in the triangle</h2>

      <canvas id="canvas2"></canvas>
      <input type="button" onclick="drawBoxes($('#canvas2')[0]);" value="clear" />
      
      
      <h2 id="testee">Which of the above figures is largest?</h2>
      <input id="q10b" name="q10b" type="text"/>

  </div>

   <div  align="center" class="question">
    <h1>Please hand the tablet back to the test assistant.</h1>
  </div>


  <div  align="center" class="question">
    <h2 id="tester">Was the x correct?</h2>
    <input id="q10a" name="q10a" type="checkbox"/>
  </div>

  <div  align="center" class="question">
    <h2 id="testee">I am going to tell you a story. Please listen carefully because afterwards, I'm going to ask you some questions about it.</h2>
    <p id="testee">
      Jill was a very successfull stockbroker. 
      She made a lot of money on the stock market.
      She then met Jack, a devastatingly handsome man. 
      She married him and had three children.
      They lived in Chicago.
      She then stopped work and stayed at home to bring up her children.
      When they were teenagers, she went back to work. 
      She and Jack lifed happily ever after.
    </p>

       <table id="testee" align="center">
        <tr><td><h2>What was the female's name?</h2></td><td><input id="q11a" name="q11a" type="text" value=""></td></tr>
        <tr><td><h2>When did she go back to work?</h2></td><td><input id="q11b" name="q11b" type="text" value=""></td></tr>
        <tr><td><h2>What work did she do?</h2></td><td><input id="q11c" name="q11c" type="text" value=""></td></tr>
        <tr><td><h2>What state did she live in?</h2></td><td><input id="q11d" name="q11d" type="text" value=""></td></tr>
      </table>
      <label>
     <!--p style="position: absolute; right:500; bottom:10">   
    <input type="submit" name="submit" id="submit" value="Submit"/>
    </p-->
  </div>

  <div  align="center" class="question">
    <input type="submit" onclick="saveCurrent();" value="save data in local database" />
  </div>

  <div  align="center" id="local_database">
    <a href="#" class="export">Export Table data into tab separated file.</a>
    <!--input type="submit" onclick="submitData();" value="submit via mail csv" /-->
    <input type="submit" onclick="clearLocalData();" value="delete all data" />

    <table border=1>
      <thead>

      </thead>
      

      <tbody>

      </tbody>

    </table>

  </div>


  <!--/form-->
  </body>
</html>