Javascript 在html中显示网格_Javascript_Gridster

Javascript 在html中显示网格

javascript

Javascript 在html中显示网格,javascript,gridster,Javascript,Gridster,我现在有了生成网格的代码。这项任务将在10分钟内完成，例如，要求参与者回答尽可能多的问题。每次输入网格中着色正方形数量的答案时，都会出现一个新网格。我目前的问题是，在给出答案后，程序需要评估答案是否正确，并加载一个新的网格。此过程应重复进行，直到10分钟结束，并且在程序验证答案是否正确后，需要更新正确答案的数量。这个任务是用PyCharm编辑器编程的，我目前无法让这个序列在为任务设置的时间结束之前自动重复代码： {%block styles%} 表，tr，td{ 边框：1px实心#0000

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

代码：

{%block styles%}
表，tr，td{
边框：1px实心#000000；
}
.bg黑色{
背景色：#808080；}
{%endblock样式%}
{%block scripts%}
变量努力正确，努力不正确，努力尝试，回答；
var矩阵=[]；
变量高度=数学楼层（（数学随机（）*7）+5）；
变量宽度=数学地板（（数学随机（）*7）+5）；
var gridSize=高度*宽度；
var溶液=0；
对于（变量i=0；i


{%formfield player.answer with label=“阴影方块的数量为：%”




正确答案的数目：{{score}




提交
{%endblock%}

我创建了一个简单的小提琴示例，希望能对您有所帮助：

var-ar=[
[0,1,0,1],
[1,0,1,0],
[0,0,1,1],
[1,1,0,0],
];
函数渲染（arr）{
var html=''；
对于（var i=0；i您尝试过什么吗？欢迎使用堆栈溢出。有关如何创建最小、完整和可验证的问题的更多信息。Ilya，非常感谢您的电子邮件。我正在使用Pycharm对实验进行编程。根据您的示例，我调整了代码，但它似乎不起作用。我有以下信息：欢迎：-）你能编辑你的帖子吗？我在你的评论中看不到任何代码示例。
{% 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 %}

    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);