oTree Forum >

Using jQuery Sortable to calculate and track payoffs

#1 by rionny

Hi, I was wondering if there was any way to track payoffs based on the order that the list is sorted into? For context, it's a three player dictator game, where an allocation of money is meant to be distributed. The participants are asked to organize a list of 3 options from most desirable to least desirable. The choices would be something like (3000, 2500, 3500) giving 3000 to yourself, 2500 to player 2, and 3500 to player 3. Since there's many rounds, I wanted to track the total payoffs to each player over the experiment. Does anyone have any idea on how to do this? 

I was thinking maybe creating payoffs in the BaseConstants for all possible outcomes, but I'm unsure how to connect it with the preference order list. 

The code for the distribution page is as below. 

Thank you in advance. 


{{ block title }}
    Preference Order
{{ endblock }}
{{ block content }}

<p>You are the <strong>Decision Maker</strong>. Please rank the following alternatives.</p>
<img src="https://i.imgur.com/gM5yeyS.jpg" width="500px" />

<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: 600px !important;}
  #sortable li span { position: absolute; margin-left: -1.3em; }
</style>
<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() {
    $( "#sortable" ).sortable();
  } );
</script>

<ul id="sortable" class="bg-light p-3 text-center">
  <li name="preference-ranking" id="[2500, 3500, 3000]" class="ui-state-default btn"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>2500 for you, 3500 yen for your family friend, 3000 for unknown stranger</li>
  <li name="preference-ranking" id="[3000, 3000, 3000]" class="ui-state-default btn"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>3000 for you, 3000 yen for your family friend, 3000 for unknown stranger</li>
  <li name="preference-ranking" id="[4000, 3000, 2000]" class="ui-state-default btn"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>4000 for you, 3000 yen for your family friend, 4000 for unknown stranger</li>
</ul>

{{ formfields }}

<script>
  function recordOrderContinuously(){
    recordOrder();
    setTimeout(recordOrderContinuously, 100);
  }
  recordOrderContinuously();
</script>

    {{ next_button }}

{{ endblock }}

Write a reply

Set forum username