Afficher une grille en html

-3

J'ai maintenant le code qui génère les grilles. Cette tâche sera terminée pendant 10 minutes, par exemple, et les participants seront invités à répondre à autant de questions que possible. chaque fois qu'ils entrent une réponse pour le nombre de carrés ombrés dans la grille, une nouvelle grille apparaît. Mon problème actuel est qu'une fois qu'une réponse a été donnée, le programme doit évaluer si la réponse est correcte ou non, et charger une nouvelle grille. Ce processus devrait se répéter jusqu'à la fin des 10 minutes et le nombre de bonnes réponses doit être mis à jour après que le programme vérifie si la réponse est correcte ou non. La tâche est programmée avec l'éditeur PyCharm et je ne suis actuellement pas en mesure de répéter cette séquence jusqu'à la fin du temps défini pour la tâche.Afficher une grille en html

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

Source

2016-07-24 Juliana

Avez-vous essayé * * quoi que ce soit? – Li357

Bienvenue dans Stack Overflow. [Lire ici] (http://stackoverflow.com/help/mcve) pour plus d'informations sur la création d'une question Minimale, Complète et Vérifiable. – Toby

J'ai créé simple violon avec l'exemple, elle pourra être utile: 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);

Source

2016-07-24 19:20:20

Ilya, Merci beaucoup pour votre email. J'utilise Pycharm pour programmer l'expérience. Sur la base de votre exemple, j'ai ajusté mon code, mais cela ne semble pas fonctionner. J'ai ce qui suit: – Juliana

Bienvenue :-) Pourriez-vous s'il vous plaît modifier votre message? Je ne peux pas voir d'échantillons de code dans votre commentaire. –

Afficher une grille en html

Répondre

Questions connexes