{{ block title }}
Sort your Preference Date
{{ endblock }}
{{ block content }}

Abschließend geben Sie bitte Ihre Präferenzen bzgl. des Termins für die zweite Sitzung des Experiments an. Beachten Sie, dass Sie für die Teilnahme an der zweiten Sitzung eingeplant worden sind. Geben Sie Ihren besten, zweitbesten, drittbesten und viertbesten Termin an. Ordnen Sie jeden Termin lediglich einmal zu.


<ul id="items" class="list-group list-group-numbered" style="cursor: move">
    {{ for choice in C.CHOICES }}
    <li data-id="{{ choice }}" class="list-group-item">{{ choice }}</li>
    {{ endfor }}
</ul>

<script src="https://cdn.jsdelivr.net/npm/sortablejs@latest/Sortable.min.js"></script>
<script>
    $('#finish').hide();
    let el = document.getElementById('items');
    let sortable = Sortable.create(el, {
        onChange: function (evt) {
            document.getElementById('termine').value = sortable.toArray().join(',');
        }
    });
    function showNextStep() {
  document.getElementById("step1").style.display = "none";
  document.getElementById("step2").style.display = "block";
  alert("Click OK and Finish to confirm!");

}

function showFinish() {
  // code to show finish button
}

</script>


{{ formfield_errors 'termine' }}
<div id="step1">
  <!-- Step 1 content -->
  <button onclick="showNextStep()" type="button" class="btn btn-primary">Next </button>
</div>

<div id="step2" style="display:none;">
  <!-- Step 2 content -->
  <button onclick="showFinish()" class="btn btn-primary">Finish</button>
</div>
<!--<p>-->
<!--    <button type="button" id="alert" class="btn btn-primary" onclick="myFunction()"> Lock</button>-->

<!--    <button type="Submit" id="finish" class="btn btn-primary" onclick="myFunction()"> Finish</button>-->

<!--</p>-->

{{ endblock }}