{{ block title }}Thank you !{{ endblock }}
{{ block content }}
    <!-- {{if treatment == 1}}
       {{include C.INSTRUCTIONS_TEMPLATE_P }}
    {{ endif }}
    {{if treatment == 2}}
      {{ include C.INSTRUCTIONS_TEMPLATE_R }}
    {{ endif }}
    {{if treatment == 3}}
      {{ include C.INSTRUCTIONS_TEMPLATE_PR }}
    {{ endif }}

    {{ next_button }} -->



    <style media="screen">



      #next{

        margin-left : 30px;
      }



      #Social_info{

        display:inline;
        float:left;
        background: #e6fffa;




      }

      #div1{
        margin-bottom : 30px;
        display:inline;
        float:left;
        margin-right : 50px;
      }

      #txt_rule{
        height : 150px;
        readonly : true
      }


      #ws_text{
        margin-left: 400px;
        margin-right: 0px;
      }

      #rules{
        /* margin-top: 100px; */
        margin-left: 400px;
        margin-right: 200px;
        margin-bottom: 300px;
      }

      #div2{
        float:left;
      margin-left: 30px;
      margin-top: 10px;
      margin-right: 0px;
      display:inline;
      }

      .TEXT{
      margin-left: 50px;

      }
      /* #middle{
        width: 10%;
        display:inline;
        float:left;

        margin-right: 100px; */
        /* margin-left: 300px; */
      /* } */

      #Workspace{
        display:inline;
        background: #000;
        margin-right: px;




      }

      #_otree-title{
        display: none;
      }
      .card{

        display: inline;
        float: left;
        margin-left: 500px
      }

      /* input {  font-size : 50px}

      textarea { font-size: 50px; }

      div {font-size: 50px;} */


      #grid_obj{
        display:grid; /* le fameux */
        grid-template-columns: repeat(20, 1px);
        grid-template-rows: repeat(20, 1px);
        /* grid-template-columns:100px 100px 100px; /* 3 colonnes de largeur différente */
        /* grid-template-rows:100px 100px 100px; /* 2 rangées */
        grid-gap:1px; /* gouttière   */
        gap:1px; /* gouttière (mettre les deux lignes)*/
        padding:0;
        margin:1px;
      }

      #grid_init{
        display:grid; /* le fameux */
        grid-template-columns: repeat(20, 1px);
        grid-template-rows: repeat(20, 1px);
        /* grid-template-columns:100px 100px 100px; /* 3 colonnes de largeur différente */
        /* grid-template-rows:100px 100px 100px; /* 2 rangées */
        grid-gap:1px; /* gouttière   */
        gap:1px; /* gouttière (mettre les deux lignes)*/
        padding:0;
        margin:1px;
        margin-right: 50px;

      }

      #moves_time{
        display: inline;
        float: right;
        width : 160px;

      }
      .otree-timer {
        display: inline;
          float: right;
          width: 100px:
          position: sticky;
          top : 0px;
      }

      /* input[type=checkbox] {
          transform: scale(3);
      } */

      .grid>li{
        padding:1px;
        margin:0;
        color:#fff;
        background:#eee;
        margin:0;
        display:block;
      }

      body{
        font-family:sans-serif;
        margin:0;
        line-height:1.5;
        background:#fff;

      }

      .vl {
        border-left: 1px solid black;
        height: 500px;
        display:  inline;
        float: left;
      }



      li.container {

          vertical-align: middle }

      .redcircle_init {
          width: 10px;
          height: 10px;

          border-radius: 5px;
          background: red;
          margin-left: auto;
          margin-right: auto;

        }
        .redcircle_obj {
            width: 10px;
            height: 10px;

            border-radius: 5px;
            background: red;
            margin-left: auto;
            margin-right: auto;



          }
        .bluecircle_init {
          width: 10px;
          height: 10px;

          border-radius: 5px;
            background: blue;
            margin-left: auto;
            margin-right: auto


          }
          .bluecircle_obj {
            width: 10px;
            height: 10px;

            border-radius: 5px;
              background: blue;
              margin-left: auto;
              margin-right: auto;


            }
    </style>
    <div class="card bg-light m-3">
        <div class="card-body">

        <h3>
            Thank you !
        </h3>

        <p style='width:100vw'>
          Thank you for your partcipation to this study. Here are your results.
        </p>


      </div>


    </div>
{{if treatment != 2}}
    <div id="div1" class="grid_div">
      Your goal was to reproduce :

    </div>
    {{endif}}


    <div id="div2" class="grid_div">
      Here is what you produced :

    </div>
    {{if treatment != 2}}
    <div id = "Similarity">
      <div>
        Your score is : <span style="font-weight: bold;" id="Score">

      </div>

    </div>

    {{endif}}

    {{if treatment != 1}}

    <div>

      The rule you had to memorize was <b>"{{rule_obj}}"</b>
    </div>

    <div >
      The rule you have written is <b>"{{rule_tr}}"</b>
    </div>
    {{endif}}




<div>

  <button id = 'next' class="otree-btn-next btn btn-primary" onclick="compare_grids()" style="visibility:hidden;">Next</button>

</div>






{{ endblock }}




{{ block scripts }}




<script type="text/javascript">

grid_size = 20

n_square = grid_size * grid_size

createGrid("grid_init", document.getElementById('div2'), "_init");

var text = "{{final}}".split(" ")
var pop_matrix_user = [];
var i = 0;
for (l = text.length + 1; (i + grid_size) < l; i += grid_size) {
  pop_matrix_user.push(text.slice(i, i + grid_size));
}
populateFromMatrice(pop_matrix_user, "_init");



{{if treatment != 2}}
createGrid("grid_obj", document.getElementById('div1'), "_obj");

var text = "{{obj}}".split(" ")
var pop_matrix_obj = [];
var i = 0;
for (l = text.length + 1; (i + grid_size) < l; i += grid_size) {
  pop_matrix_obj.push(text.slice(i, i + grid_size));
}

populateFromMatrice(pop_matrix_obj, "_obj");


document.getElementById("Score").innerHTML = (getVisualSimilarity() * 100).toString().concat('%');




{{endif}}






function createGrid(id, parent, init_or_obj) {

  grid = document.createElement("ul");
  grid.setAttribute("class", "grid" )
  grid.setAttribute("id", id)
  if (init_or_obj == "_init"){
    grid.style.setProperty("grid-template-columns", "repeat(".concat('', grid_size.toString().concat('', ", 10px)")))
    grid.style.setProperty("grid-template-rows", "repeat(".concat('', grid_size.toString().concat('', ", 10px)")))
}
  else {
    grid.style.setProperty("grid-template-columns", "repeat(".concat('', grid_size.toString().concat('', ", 10px)")))
    grid.style.setProperty("grid-template-rows", "repeat(".concat('', grid_size.toString().concat('', ", 10px)")))



  }

  //console.log(grid);
  parent.appendChild(grid);

  //console.log(init_or_obj);


  for(let i = 0; i <n_square ; i++){
    var row =  '0'.concat('', Math.floor(i/grid_size).toString()).slice(-2);

    var col = '0'.concat('', i % grid_size.toString()).slice(-2);
    let id = row.toString().concat(',', col.toString()).concat('', init_or_obj)
    addSquare(id, grid);
}


}

function addCircle(pos, color, init_or_obj){
  //console.log(init_or_obj);
  id = "square".concat('', pos).concat('', init_or_obj);
  var square = document.getElementById(id);
//console.log(square);

  var classColor = color.concat('', "circle").concat(init_or_obj);
  var newCircle = document.createElement("div");


  newCircle.setAttribute("id", "square".concat('', id).concat('', init_or_obj) );
  newCircle.setAttribute("class", classColor);
  newCircle.setAttribute("ondragstart", "dragstart_handler(event);");
  newCircle.setAttribute("ondragend", "dragend_handler(event);");
  if (init_or_obj == '_init'){
    newCircle.setAttribute('draggable', "true");
  }
  else{
    newCircle.setAttribute('draggable', "false");
  }


  square.appendChild(newCircle);

}

function getVisualSimilarity(){
  sim = 0;
  pop_matrix_user.forEach((item, i) => {
    //console.log(item);
    item.forEach((item2, j) => {


      if (item2 == pop_matrix_obj[i][j]){
        sim+=1;
      }

    });

  });

  return sim/n_square;
}

function populateFromMatrice (matrix, init_or_obj){




  // var id = var_id;
  //console.log(id);
  // init_matrix_text = document.getElementById("pop_matrix".concat(init_or_obj)).value;

  //console.log(init_matrix_text);

  // var pop_matrix = init_matrix_text.split('\n').map(function (row) {
  //   return row.split(' ').map(function(item) {
  //     return parseInt(item, 10);
  // });
  // });
  //console.log(pop_matrix);
  //console.log(matrix);
  matrix.forEach(function(item, index, array) {
    var row ='0'.concat('', index.toString()).slice(-2);
    item.forEach(function(item, index, array) {
      var col = '0'.concat('', index.toString()).slice(-2);



      if (item > 0){
        pos = row.toString().concat(',',col.toString())
        color = "blue"
        //console.log(init_or_obj);
        addCircle(pos, color, init_or_obj);


      }
      if (item < 0){
        pos = row.toString().concat(',',col.toString())
        color = "red"

        addCircle(pos, color, init_or_obj);

      }

    });



});
}

function addSquare (id, grid) {
  // crée un nouvel élément div

  var newSquare = document.createElement("li");
  newSquare.setAttribute("id", "square".concat('', id) );
  newSquare.setAttribute("class", "container");
  newSquare.setAttribute("ondrop", "drop_handler(event);");
  newSquare.setAttribute("ondragover", "dragover_handler(event);");
  newSquare.setAttribute("ondragleave", "dragleave_handler(event);");
  //console.log(newSquare);
//  grid.appendChild(el);

  grid.appendChild(newSquare);

  // ajoute le nouvel élément créé et son contenu dans le DOM

}

// HANDLER FUNCTIONS

function dragstart_handler(ev) {
 //console.log("dragStart");
 // Change the source element's background color to signify drag has started
 ev.currentTarget.style.opacity = 0.5;

 prev_posx = parseInt(ev.currentTarget.parentNode.id.toString().slice(6,8));
 prev_posy = parseInt(ev.currentTarget.parentNode.id.toString().slice(9,11));

 //pop_matrix_user[posx] = [];
 //console.log(pop_matrix_user[posx]);
 // pop_matrix_user[posx][posy] = 0;
 // console.log(posx);
 // console.log(posy);

 // Add the id of the drag source element to the drag data payload so
 // it is available when the drop event is fired
 ev.dataTransfer.setData("text", ev.target.id);
 // Tell the browser both copy and move are possible
 //ev.effectAllowed = "copyMove";
}
function dragover_handler(ev) {
 //console.log("dragOver");
 // Change the target element's border to signify a drag over event
 // has occurred
 if (!ev.currentTarget.hasChildNodes()){
 ev.currentTarget.style.opacity = 0.5;
 ev.preventDefault();
}
}

function dragleave_handler(ev) {
 //console.log("dragOver");
 // Change the target element's border to signify a drag over event
 // has occurred
 ev.currentTarget.style.opacity = 1;
 ev.preventDefault();
}
function drop_handler(ev) {

  if (!ev.currentTarget.hasChildNodes()){
    pop_matrix_user[prev_posx][prev_posy] = 0;

    //
    // move_count -= 1
    // document.getElementById('move_count').value = move_count.toString();


    var id = ev.dataTransfer.getData("text");

    circle = document.getElementById(id);


    ev.currentTarget.style.opacity = 1;

    posx = parseInt(ev.currentTarget.id.toString().slice(6,8));
    posy = parseInt(ev.currentTarget.id.toString().slice(9,11));
    // liveSend(['move', [prev_posx, prev_posy, posx, posy]]);
    var color = 1;
    //console.log(circle.className);
    if (circle.className == 'redcircle_init'){
    //  console.log('here');
      color = -1}

  //  pop_matrix_user[posx] = [];
    pop_matrix_user[posx][posy] = color;


    ev.currentTarget.appendChild(circle);

    same = true
    pop_matrix_obj.forEach((line, i) => {


    });

    if (JSON.stringify(pop_matrix_obj) === JSON.stringify(pop_matrix_user) ){
      document.getElementById('next').style.visibility = "visible"
    }
    else{
      console.log(pop_matrix_obj);
      console.log(pop_matrix_user);
    }

    // arrayToTxtFile(pop_matrix_user, 'grid_obj.txt')




  // Copy the element if the source and destination ids are both "copy"
  // if (id == "src_copy" && ev.target.id == "dest_copy") {
  //  var nodeCopy = document.getElementById(id).cloneNode(true);
  //  nodeCopy.id = "newId";
  //  ev.target.appendChild(nodeCopy);
  }

}



function dragend_handler(ev) {
  //console.log("dragEnd");
  // Restore source's border
  ev.target.style.opacity = 1;
  // Remove all of the drag data
  ev.dataTransfer.clearData();
  // console.log(pop_matrix_user);

}


</script>
{{endblock}}