격자를 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

스택 오버플로에 오신 것을 환영합니다. Minimal, Complete 및 Verifiable 질문을 만드는 방법에 대한 자세한 내용은 [여기를 읽으십시오] (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

환영합니다 :-) 게시물을 편집 해주실 수 있습니까? 귀하의 의견에 어떤 코드 샘플도 보이지 않습니다. –

답변

관련 문제