{{ block title }}Results{{ endblock }}

{{ block styles  }}
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.13.2/themes/base/jquery-ui.min.css" integrity="sha512-ELV+xyi8IhEApPS/pSj66+Jiw+sOT1Mqkzlh8ExXihe4zfqbWkxPRi8wptXIO9g73FSlhmquFlUOuMSoXz5IRw==" crossorigin="anonymous" referrerpolicy="no-referrer" />
  <link rel="stylesheet" href="{% static 'style.css' %}"/>
{{ endblock }}
{{ block global_scripts  }}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.0/jquery.min.js" integrity="sha512-3gJwYpMe3QewGELv8k/BX9vcqhryRdzRMxVfq6ngyWXwo03GFEzjsUm8Q7RZcHPHksttq7/GFoxjCVUjkjvPdw==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.13.2/jquery-ui.min.js" integrity="sha512-57oZ/vW8ANMjR/KQ6Be9v/+/h6bq9/l3f0Oc7vn6qMqyhvPd1cvKBRWWpzu0QoneImqr2SkmO4MSqU+RpHom3Q==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
{{ endblock }}
{{ block content }}

    <p>
        Your original answer was {{ player.answer }}.
    </p>

    <p>
    Please rank the following items:
  </p>
<ul id="sortable">
  {{ for item in answers }}
    <li class="ui-state-default ranklist-item"><span> {{ forloop.counter }}. </span> {{ item }}</li>
{{ endfor }}
</ul>

<button id='submit-button' type="button">
    Submit
</button>
<div style="display:none"> {{ next_button }} </div>

    <script>
    $(function() {
    $( "#sortable" ).sortable({
        update: function(event, ui) {
          $("li span").text(function() {
      return ($(this).parent().index("li") + 1).toString() + '.' ;
    });
        },
        start: function(event, ui) {
          $("li span").text(function() {
      return ($(this).parent().index("li") + 1).toString() + '.' ;
    });
        },
    });
});

$('#submit-button').click(function(){
    ranked = $.map($('#sortable').find('li'), function(el) {
                return el.innerHTML;
            });
    liveSend({'ranked': ranked});
  });

  function liveRecv(data) {
    console.log('received a message!', data);
    $("form").submit();
    document.getElementById("form").submit();
    // your code goes here
}
    </script>
{{ endblock }}