{% load otree %}

 <p>
  If Part 2 is chosen to count and you end up completing the 50-box bonus task, you will <b>start with a tentative {{ participant.valence }} of {{ if participant.valence == 'bonus' }}${{ C.START_VALUE }}{{ else}}${{ C.END_VALUE}}{{ endif}}</b>, just like in Part 1. 
</p>

<p>
  Differently from part 1, <b>you will then open exactly {{ C.NUM_FORCED_OPEN }} of the <span class='class_num_box'></span> boxes in random order without the option to end the task earlier or later</b>.
</p>
<p>
  Each time you open a box, you will have to wait {{ C.DELAY }} seconds for the {{ participant.valence }} inside to be revealed. 
</p>

<p>
  You then decide if you want to:
  <ol>
    <li><b>Keep</b> your current tentative {{ participant.valence }}.</li>
    
    
    <div class="text-center">
      <b>OR</b>
    </div>

    <li><b>Replace</b> your current tentative {{ participant.valence }} with the {{ participant.valence }} inside the box.</li>
</ol>
</p>
<p>
  We will record your final {{ participant.valence }} after you open all {{ C.NUM_FORCED_OPEN }} boxes. If Part 2 is chosen to count and you end up completing the {{ C.NUM_FORCED_OPEN }}-box {{ participant.valence }} task, we will {{ if participant.valence == 'bonus' }}add{{ else}}take away{{ endif}} this final {{ participant.valence }} {{ if participant.valence == 'bonus' }}to{{ else}}from{{ endif}} your balance from this study.
</p>

<script>
  function formatNumberWithCommas(number) {
  // Convert the number to a string
  var numString = number.toString();

  // Split the string into an array of characters
  var numArray = numString.split('');

  // Initialize variables
  var formattedNumber = '';
  var count = 0;

  // Iterate through the characters in reverse order
  for (var i = numArray.length - 1; i >= 0; i--) {
      // Add the current character to the formatted number
      formattedNumber = numArray[i] + formattedNumber;

      // Increment the count
      count++;

      // Add a comma after every three digits
      if (count % 3 === 0 && i !== 0) {
      formattedNumber = ',' + formattedNumber;
      }
  }

  return formattedNumber;
  }

  
  // Select all span elements with the class "num_box"
  var numBoxes = document.querySelectorAll('span.class_num_box');

  // Iterate through the selected elements and set their innerHTML to the formatted number
  numBoxes.forEach(function(numBox) {
    var formattedNumber = formatNumberWithCommas({{ C.NUM_BOXES }});
    numBox.innerHTML = formattedNumber;
  });
</script>