-3

I now have the code that generates the grids. This task will be completed for 10 minutes, e.g., and participants will be asked to answer as many questions as possible. each time they enter an answer for the number of shaded squares in the grid, a new grid appears. My current problem is that after an answer has been given, the program needs to assess whether the answer is correct or not, and load a new grid. This process should repeat itself until the end of the 10 minutes and the number of correct answers needs to be updated after the program verifies whether the answer is correct or not. The task is programmed with the PyCharm editor and I currently am not able to have this sequences repeating itself until the end of the time set for the task.

Code:

{% block styles %}
<style>

table, tr, td {
  border: 1px solid #000000;
}

.bg-black {
  background-color: #808080;}

</style>
{% endblock styles %}


{% block scripts %}

<script>



var effort_correct, effort_incorrect, effort_attempt, answer;
var matrix = [];



var height = Math.floor((Math.random() * 7) + 5);
var width = Math.floor((Math.random() * 7) + 5);
var gridSize = height * width;
var solution = 0;

    for (var i = 0; i < height; i++) {
        matrix[i] = [];
        for (var j = 0; j < width; j++) {
            if (Math.random() < 0.5) {
                matrix[i][j] = 1;
                solution++;

            } else {
                matrix[i][j] = 0;
            }
        }
    }



function render(grid) {


    var html = '<table><tbody>';
    for (var k = 0; k < height; k++) {
        html += '<tr>';
        for (var l = 0; l < width; l++) {
            html += grid[k][l] ? '<td class="bg-black">&nbsp;&nbsp;&nbsp;&nbsp;</td>' :
                    '<td>&nbsp;</td>';
        }
        html += '</tr>'
    }
    html += '</tbody></table>';
    return html;

}

    document.querySelector('#grid').innerHTML = render(matrix);



function score(answer) {
    if (answer == solution) {
        effort_correct++;
    } else {
        effort_incorrect++;
    }
    effort_attempt++;


}

</script>

{% endblock scripts %}

{% block title %}
Task 1: Stage 1
{% endblock %}

{% block content %}

<head>
<style>
    p.text-center {text-align: center;}
    p.thick {font-weight: bold;}
</style>
</head>

<p-class text-center>

     <div id="grid"></div>




    <br>
    <br>

    {% formfield player.answer with label="The number of shaded squares is:" %}

    <br>
    <br>

    Number of correct answers: {{score}}

</p-class>

<br>
<br>


<button onclick="score(player.answer)">Submit</button>

{% endblock %}
Cœur
  • 37,241
  • 25
  • 195
  • 267
Juliana
  • 1
  • 1
  • 2
    Have you attempted *anything*? – Andrew Li Jul 24 '16 at 18:36
  • 1
    Welcome to Stack Overflow. [Read here](http://stackoverflow.com/help/mcve) for more information about how to create a Minimal, Complete and Verifiable question. – Toby Jul 24 '16 at 18:37

1 Answers1

1

I've created a simple fiddle with example, hope it helps: https://jsfiddle.net/ilya_sharonov/wxov81zs/

    var ar = [
      [0,1,0,1],
      [1,0,1,0],
      [0,0,1,1],
      [1,1,0,0],
    ];

function render(arr) {
  var html = '<table><tbody>';
  for (var i=0; i<arr.length; i++) {
    html += '<tr>';
    for (var j=0; j<arr[i].length; j++) {
      html += arr[i][j] ? '<td class="bg-black">&nbsp;&nbsp;&nbsp;&nbsp;</td>':
                          '<td>&nbsp;</td>';
    }
    html += '</tr>'
  }
  html += '</tbody></table>';
  return html;
}

document.querySelector('#grid').innerHTML = render(ar);
Ilya_S
  • 184
  • 2
  • Ilya, Thanks a lot for your email. I am using Pycharm to program the experiment. Based on your example, I adjusted my code, but it does not seem to be working. I have the following: – Juliana Jul 24 '16 at 21:50
  • Welcome :-) Could you please edit you post? I can't see any code samples in your comment. – Ilya_S Jul 24 '16 at 21:56