在html中显示网格

-3

我现在有生成网格的代码。该任务将完成10分钟，例如，参与者将被要求回答尽可能多的问题。每次他们输入网格中阴影方块数量的答案时，都会出现一个新的网格。我目前的问题是，在给出答案后，程序需要评估答案是否正确，并加载新的网格。这个过程应该重复，直到10分钟结束，在程序验证答案是否正确之后需要更新正确答案的数量。该任务使用PyCharm编辑器进行编程，并且我目前无法将此序列自行重复，直到为任务设置的时间结束。在html中显示网格

代码：

{% 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 %}

来源

2016-07-24 Juliana

你有没有尝试* *什么？ – Li357

欢迎来到Stack Overflow。 [阅读此处]（http://stackoverflow.com/help/mcve）以获取有关如何创建最小，完整和可验证问题的更多信息。 – Toby

我已经创建了一个例子简单的小提琴，希望它有助于： 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);

来源

2016-07-24 19:20:20

伊利亚，非常感谢您的电子邮件。我正在使用Pycharm来编程实验。根据你的例子，我调整了我的代码，但它似乎没有工作。我有以下几点： – Juliana

欢迎:-)你能编辑你的帖子吗？我在您的评论中看不到任何代码示例。 –

在html中显示网格

回答

相关问题