在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中顯示網格

回答

相關問題