{{ extends 'global/Page.html' }}
{{ block title }} {{ endblock }}

{{ block content }}

<p>Each of the following questions asks you to state your preferred allocation. There are 9 different allocations available for each question. The question numbers are shown on the left hand side of each row of allocations.</p>

<p>How the money is distributed in each allocation is shown by the numbers above and below each radio button. The number above tells how much you get and the number below tells how much the other gets.</p>

<p>Choose your preferred allocation in each question. There are no right or wrong answers, this is all about personal preferences.</p>

<br>
<center>

<div id="tabledata"></div>

<center>
    {{ next_button }}
</center>


{{ endblock }}

{{ block scripts }}
<script>
function createTable() {

  var alloc = js_vars.alloc;

  var code = "";

  for (var j = 1; j < 7; j++) {

      code += "<table border=1 cellpadding=5>";

      code += "<tr align=center><td> </td><td bgcolor=#fffccc>You:</td>";

      for (var i = 1; i < 10; i++) {
      code += "<td bgcolor=#fffccc width=50>" + alloc[j-1][(i-1)*2] + "</td>";
      }

      code += "</tr><tr align=center><td><b>" + j + "</b></td><td> </td>";

      for (var ii = 1; ii < 10; ii++) {
         code += "<td><input type=radio name=al" + j + " value =" + ii + "></td>";
      }

      code += "</tr><tr align=center><td> </td><td bgcolor=#fffccc>Other:</td>";

      for (var iii = 1; iii < 10; iii++) {
         code += "<td bgcolor=#fffccc>" + alloc[j-1][(iii-1)*2+1] + "</td>";
      }

      code += "</tr></table><br><br>";
  }

  return code;

}

function insertHTML(id, html) {
    var el = document.getElementById(id);

    if(!el) {
        alert('Element with id ' + id + ' not found.');
    }

	el.innerHTML = html;
}

function run() {
    var html = createTable();

    insertHTML('tabledata', html);
}

window.onload = run;

</script>
{{ endblock }}