{{ block content }}
<b>Imagine this situation:</b>
<p>
Two people are completing the task at the same time.
<ul>
    <li>One person is assigned Version A (counting 'A's)</li>
    <li>The other person is assigned Version B (counting 'B's)</li>
</ul>
The two are matched and their scores are compared.
</p>
<br>
<br>

<b>Answer the following question:</b>
<br>
<br>

<div class="card">
    <div class=card-header><b>What matters most in determining who gets the higher score?</b>
        <br>
        Rank the following factors.
        Drag and drop to sort the factors from most relevant on top to least relevant on the bottom.
    </div>
    <div class="card-body">
        <ul id="sortable" class="p-3 text-left">
            <li name="preference-ranking" id="Effort" class="btn" style="text-align: left; background-color: #d3d3d3;"><span style="margin-right: 10px;">&#x2630;</span><b>Effort</b> (how hard a person works during the task)</li>
            <li name="preference-ranking" id="Ability" class="btn" style="text-align: left; background-color: #d3d3d3;"><span style="margin-right: 10px;">&#x2630;</span><b>Ability</b> (how good a person is at counting quickly and accurately)</li>
            <li name="preference-ranking" id="Luck" class="btn" style="text-align: left; background-color: #d3d3d3;"><span style="margin-right: 10px;">&#x2630;</span><b>Version</b> (whether they receive Version A or Version B of the task)</li>
        </ul>
    </div>
</div>
<div style="display:none;">
  {{ formfield 'preference_ranking' label='' }}
</div>
<br>
<br>

<button class="otree-btn-next btn btn-dark btn-primary">Next</button>

{{ endblock }}

{{ block style }}
    <link rel="stylesheet" href="{% static 'global/style.css' %}"/>

    <link rel="stylesheet" href="https://code.jquery.com/ui/1.13.2/themes/base/jquery-ui.css">

    <style>
        #sortable { list-style-type: none; margin: 0; padding: 0; width: 100%; }
        #sortable li { margin: 0 3px 3px 3px; padding: 0.4em; padding-left: 1.5em; width: 500px !important;}
        #sortable li span { position: absolute; margin-left: -1.3em; }
    </style>
{{ endblock }}

{{ block scripts }}
    <script src="https://code.jquery.com/jquery-3.6.0.js"></script>
    <script src="https://code.jquery.com/ui/1.13.2/jquery-ui.js"></script>
    <script>
        var elements;
        function recordOrder() {
            elements = document.getElementsByName("preference-ranking");
            var ranking = []
            for (let i = 0; i < elements.length; i++) {
            ranking.push(elements[i].id);
            }
            document.getElementById("id_preference_ranking").value = "[" + ranking.toString() + "]";
        };
        $(function() {
            // randomize list items
            var ul = $("#sortable");
            var liArr = ul.children("li").toArray();
            liArr.sort(function() { return 0.5 - Math.random(); });
            ul.empty();
            ul.append(liArr);

            // initialize sortable
            ul.sortable();
        });
    </script>
    <script>
        function recordOrderContinuously(){
            recordOrder();
            setTimeout(recordOrderContinuously, 100);
        }
        recordOrderContinuously();
    </script>
{{ endblock }}