{% extends "global/Page.html" %}
{% load otree %}

{% block title %}
    Determine Payout
{% endblock %}
    

{% block content %}

<p>We will now determine your payoff.</p>

<p>First, we will pick which of the five tasks will determine your payout. Click the "Choose Task" button to randomly choose a task.</p>


<div id="pick_random_task_p"></div>

<div id="do_random_task_p" style="display:none" ></div>

<p id="outcome" style="display:none"></p>

<button type="button" id="random_task_button">
    Choose Task
</button> 

<button type="button" id="random_rules_button" style="display:none" >
    Choose Rules
</button> 


<button type="button" id="random_dice_button" style="display:none" >
    Roll Die
</button> 

<button type="button" id="random_number_button" style="display:none" >
    Random Number
</button> 

<button type="button" id="random_dice_button_task1" style="display:none" >
    Roll Die
</button> 

<button type="button" id="random_number_button_task1" style="display:none" >
    Random Number
</button> 


<p id="randomP" style="display:none"></p>




<script>

    let random_task_button = document.getElementById('random_task_button');
    let random_number_button = document.getElementById('random_number_button');
    let random_rules_button = document.getElementById('random_rules_button');
    let random_dice_button = document.getElementById('random_dice_button');
    let random_number_button_task1 = document.getElementById('random_number_button_task1');
    let random_dice_button_task1 = document.getElementById('random_dice_button_task1');
    let pick_random_task_p = document.getElementById('pick_random_task_p');
    let do_random_task_p = document.getElementById('do_random_task_p');
    let outcome = document.getElementById('outcome');


    var rand_task_counter = 0;
    var random_number = Math.floor(Math.random() * 100) + 1;
    var dice_roll = Math.floor(Math.random() * (6) + 1);
    var randtaskint = Math.floor(Math.random() * (5) + 1);


    random_task_button.onclick = function(){
        if (rand_task_counter < 1) {
            random_task_button.style.display = 'none';
            
            pick_random_task_p.innerHTML += "<p>Task " + randtaskint + " has been chosen.</p>";
            
            if ( randtaskint == 1 ) {
                if ({{player.task1}} == 1) {
                    pick_random_task_p.innerHTML += "<p>In Task 1, you chose Option 1, so you have a 75% chance of winning $10. Press the Random Number button below to choose a number between 1 and 100. If the random number is 75 or less, you win $10. </p>"
                    random_number_button_task1.style.display = 'inline';
                    if (random_number <= 75) {
                        outcome.innerText += "The random number is " + random_number + ", so you win $10.";
                        document.querySelector('[name=payout]').value = 10;
                    }
                    if (random_number > 75) {
                        outcome.innerText += "The random number is " + random_number + ", so you do not win $10.";
                        document.querySelector('[name=payout]').value = 0;
                    }
                }
                if ({{player.task1}} == 2) {
                    pick_random_task_p.innerHTML += "<p>In Task 1, you chose Option 2, so we will first roll a die. If the die is a 1, then you have a 31% chance of winning $10. If the die is a 2, 3, 4, 5, or 6, you have a 98% chance of winning $10.</p>"
                    random_dice_button_task1.style.display = 'inline';
                    if (dice_roll == 1) {
                        do_random_task_p.innerHTML += "<p>The die is " + dice_roll + ". Now click the Random Number button to choose a number between 1 and 100. If the randomly generated number is 31 or less, you win $10.</p>";
                        if ( random_number <= 31 ){
                            outcome.innerText += "The random number is " + random_number + ", so you win $10."
                            document.querySelector('[name=payout]').value = 10;
                        }
                        if ( random_number > 31 ){
                            outcome.innerText += "The random number is " + random_number + ", so you do not win $10."
                            document.querySelector('[name=payout]').value = 0;
                        }

                    }
                    if (dice_roll > 1) {
                        do_random_task_p.innerHTML += "<p>The die is " + dice_roll + ". Now click the Random Number button to choose a number between 1 and 100. If the randomly generated number is 98 or less, you win $10.</p>";
                        if ( random_number <= 98 ){
                            outcome.innerText += "The random number is " + random_number + ", so you win $10."
                            document.querySelector('[name=payout]').value = 10;
                        }
                        if ( random_number > 98 ){
                            outcome.innerText += "The random number is " + random_number + ", so you do not win $10."
                            document.querySelector('[name=payout]').value = 0;
                        }
                    }
                }
            }


            if ( randtaskint ==2 ) {
                document.querySelector('[name=payout]').value = 10;
            }
            
            if ( randtaskint >= 3 ) {
                pick_random_task_p.innerHTML += "<p>We will randomly choose two of the ranked payout rules from Task " + randtaskint + ", and the rule you ranked higher will be used to determine your payout.</p>"

                random_rules_button.style.display = 'inline';
                
                var percent_bank = [100,95,90,85,80,75,70,65,60,55,50]
                var ordered_percent = percent_bank[Math.floor(Math.random() * percent_bank.length)]
                var unordered_rand_int = Math.floor(Math.random() * (2) + 1);
                
                let do_random_task_p = document.getElementById('do_random_task_p');
                do_random_task_p.innerHTML += "<p> The following rules have been chosen: </p>";
                
                
               if ( randtaskint == 3) {   
                   if ( unordered_rand_int==1 ){
                        do_random_task_p.innerHTML += "<ul> <li> " + ordered_percent+ "% chance of receiving $10 </li>  <li> $10 if a random dice roll is 1, 2, 3, 4, or 5 </li> </ul>";
                        var unordered_percent = {{player.task3_roll12345}}
                        if (unordered_percent > ordered_percent){
                            do_random_task_p.innerHTML += "<p>You indicated you prefer <b>$10 if a random dice roll is 1, 2, 3, 4, or 5</b>, so click the button below to roll a die.</p>";
                            random_number_button.hidden = true;
                   
                            if (dice_roll < 6) {
                                outcome.innerText += "You rolled a " + dice_roll + ", so you win $10.";
                                document.querySelector('[name=payout]').value = 10;
                            } else {
                                outcome.innerText += "You rolled a " + dice_roll + ", so you do not win $10.";
                                document.querySelector('[name=payout]').value = 0;
                            }
                        } 
                        if (unordered_percent < ordered_percent) {
                            do_random_task_p.innerHTML += "<p>You indicated you prefer <b> " + ordered_percent + "% chance of receiving $10</b>, so you win $10 if a randomly generated number is " + ordered_percent + " or less. Click the button below to randomly select a number.</p>";
                            random_dice_button.hidden = true;
                            if (random_number <= ordered_percent) {
                                outcome.innerText += "The random number is " + random_number + ", so you win $10.";
                                document.querySelector('[name=payout]').value = 10;
                            } else {
                                outcome.innerText += "The random number is " + random_number + ", so you do not win $10.";
                                document.querySelector('[name=payout]').value = 0;
                            }
                        }
                   } 
                   if ( unordered_rand_int==2 ){
                        do_random_task_p.innerHTML += "<ul> <li> " + ordered_percent+ "% chance of receiving $10 </li>  <li> $10 if a random dice roll is 6 </li> </ul>";
                        var unordered_percent = {{player.task3_roll6}}
                        if (unordered_percent > ordered_percent){
                            do_random_task_p.innerHTML += "<p>You indicated you prefer <b>$10 if a random dice roll is 6</b>, so click the button below to roll a die.</p>";
                            random_number_button.hidden = true;
                            if (dice_roll == 6) {
                                outcome.innerText += "You rolled a " + dice_roll + ", so you win $10.";
                                document.querySelector('[name=payout]').value = 10;
                            } else {
                                outcome.innerText += "You rolled a " + dice_roll + ", so you do not win $10.";
                                document.querySelector('[name=payout]').value = 0;
                            }
                        } 
                        if (unordered_percent < ordered_percent ) {
                            do_random_task_p.innerHTML += "<p>You indicated you prefer <b> " + ordered_percent + "% chance of receiving $10</b>, so you win $10 if a randomly generated number is " + ordered_percent + " or less. Click the button below to randomly select a number.</p>";
                            random_dice_button.hidden = true;
                            if (random_number <= ordered_percent) {
                                outcome.innerText += "The random number is " + random_number + ", so you win $10.";
                                document.querySelector('[name=payout]').value = 10;
                            } else {
                                outcome.innerText += "The random number is " + random_number + ", so you do not win $10.";
                                document.querySelector('[name=payout]').value = 0;
                            }
                        }
                    }
                }
                
               if ( randtaskint == 4) {   
                   if ( unordered_rand_int==1 ){
                        do_random_task_p.innerHTML += "<ul> <li> " + ordered_percent+ "% chance of receiving $10 </li>  <li> $10 if a random dice roll is 1, 2, 3, or 4 </li> </ul>";
                        var unordered_percent = {{player.task4_roll1234}}
                        if (unordered_percent > ordered_percent){
                            do_random_task_p.innerHTML += "<p>You indicated you prefer <b>$10 if a random dice roll is 1, 2, 3, or 4</b>, so click the button below to roll a die.</p>";
                            random_number_button.hidden = true;                            
                            if (dice_roll < 5) {
                                outcome.innerText += "You rolled a " + dice_roll + ", so you win $10.";
                                document.querySelector('[name=payout]').value = 10;
                            } else {
                                outcome.innerText += "You rolled a " + dice_roll + ", so you do not win $10.";
                                document.querySelector('[name=payout]').value = 0;
                            }
                        } 
                        if (unordered_percent < ordered_percent) {
                            do_random_task_p.innerHTML += "<p>You indicated you prefer <b> " + ordered_percent + "% chance of receiving $10</b>, so you win $10 if a randomly generated number is " + ordered_percent + " or less. Click the button below to randomly select a number.</p>";
                            random_dice_button.hidden = true;
                            if (random_number <= ordered_percent) {
                                outcome.innerText += "The random number is " + random_number + ", so you win $10.";
                                document.querySelector('[name=payout]').value = 10;
                            } else {
                                outcome.innerText += "The random number is " + random_number + ", so you do not win $10.";
                                document.querySelector('[name=payout]').value = 0;
                            }
                        }
                   } 
                   if ( unordered_rand_int==2 ){
                        do_random_task_p.innerHTML += "<ul> <li> " + ordered_percent+ "% chance of receiving $10 </li>  <li> $10 if a random dice roll is 5 or 6 </li> </ul>";
                        var unordered_percent = {{player.task4_roll56}}
                        if (unordered_percent > ordered_percent){
                            do_random_task_p.innerHTML += "<p>You indicated you prefer <b>$10 if a random dice roll is 5 or 6</b>, so click the button below to roll a die.</p>";
                            random_number_button.hidden = true;
                            if (dice_roll >= 5) {
                                outcome.innerText += "You rolled a " + dice_roll + ", so you win $10.";
                                document.querySelector('[name=payout]').value = 10;
                            } else {
                                outcome.innerText += "You rolled a " + dice_roll + ", so you do not win $10.";
                                document.querySelector('[name=payout]').value = 0;
                            }
                        } 
                        if (unordered_percent < ordered_percent ) {
                            do_random_task_p.innerHTML += "<p>You indicated you prefer <b> " + ordered_percent + "% chance of receiving $10</b>, so you win $10 if a randomly generated number is " + ordered_percent + " or less. Click the button below to randomly select a number.</p>";
                            random_dice_button.hidden = true;
                            if (random_number <= ordered_percent) {
                                outcome.innerText += "The random number is " + random_number + ", so you win $10.";
                                document.querySelector('[name=payout]').value = 10;
                            } else {
                                outcome.innerText += "The random number is " + random_number + ", so you do not win $10.";
                                document.querySelector('[name=payout]').value = 0;
                            }
                        }
                    }
                }
                
               if ( randtaskint == 5) {   
                   if ( unordered_rand_int==1 ){
                        do_random_task_p.innerHTML += "<ul> <li> " + ordered_percent+ "% chance of receiving $10 </li>  <li> $10 if a random dice roll is 1, 3, or 5 </li> </ul>";
                        var unordered_percent = {{player.task5_roll135}}
                        if (unordered_percent > ordered_percent){
                            do_random_task_p.innerHTML += "<p>You indicated you prefer <b>$10 if a random dice roll is 1, 3, or 5</b>, so click the button below to roll a die.</p>";
                            random_number_button.hidden = true;                            
                            if (dice_roll==1 || dice_roll==3 || dice_roll==5) {
                                outcome.innerText += "You rolled a " + dice_roll + ", so you win $10.";
                                document.querySelector('[name=payout]').value = 10;
                            } else {
                                outcome.innerText += "You rolled a " + dice_roll + ", so you do not win $10.";
                                document.querySelector('[name=payout]').value = 0;
                            }
                        } 
                        if (unordered_percent < ordered_percent) {
                            do_random_task_p.innerHTML += "<p>You indicated you prefer <b> " + ordered_percent + "% chance of receiving $10</b>, so you win $10 if a randomly generated number is " + ordered_percent + " or less. Click the button below to randomly select a number.</p>";
                            random_dice_button.hidden = true;
                            if (random_number <= ordered_percent) {
                                outcome.innerText += "The random number is " + random_number + ", so you win $10.";
                                document.querySelector('[name=payout]').value = 10;
                            } else {
                                outcome.innerText += "The random number is " + random_number + ", so you do not win $10.";
                                document.querySelector('[name=payout]').value = 0;
                            }
                        }
                   } 
                   if ( unordered_rand_int==2 ){
                        do_random_task_p.innerHTML += "<ul> <li> " + ordered_percent+ "% chance of receiving $10 </li>  <li> $10 if a random dice roll is 2, 4, or 6 </li> </ul>";
                        var unordered_percent = {{player.task5_roll246}}
                        if (unordered_percent > ordered_percent){
                            do_random_task_p.innerHTML += "<p>You indicated you prefer <b>$10 if a random dice roll is 2, 4, or 6</b>, so click the button below to roll a die.</p>";
                            random_number_button.hidden = true;
                            if (dice_roll==2 || dice_roll==4 || dice_roll==6) {
                                outcome.innerText += "You rolled a " + dice_roll + ", so you win $10.";
                                document.querySelector('[name=payout]').value = 10;
                            } else {
                                outcome.innerText += "You rolled a " + dice_roll + ", so you do not win $10.";
                                document.querySelector('[name=payout]').value = 0;
                            }
                        } 
                        if (unordered_percent < ordered_percent ) {
                            do_random_task_p.innerHTML += "<p>You indicated you prefer <b> " + ordered_percent + "% chance of receiving $10</b>, so you win $10 if a randomly generated number is " + ordered_percent + " or less. Click the button below to randomly select a number.</p>";
                            random_dice_button.hidden = true;
                            if (random_number <= ordered_percent) {
                                outcome.innerText += "The random number is " + random_number + ", so you win $10.";
                                document.querySelector('[name=payout]').value = 10;
                            } else {
                                outcome.innerText += "The random number is " + random_number + ", so you do not win $10.";
                                document.querySelector('[name=payout]').value = 0;
                            }
                        }
                    }
                }            
            }
        
        }
    }
    random_rules_button.onclick = function(){
        let do_random_task_p = document.getElementById('do_random_task_p');
        do_random_task_p.style.display = 'inline';
        random_dice_button.style.display = 'inline';
        random_number_button.style.display = 'inline'
        random_rules_button.style.display = 'none';
    }
    
    random_dice_button.onclick = function(){
        let outcome = document.getElementById('outcome');
        outcome.style.display = 'inline';
        random_dice_button.style.display = 'none';
    }

    random_number_button.onclick = function(){
        let outcome = document.getElementById('outcome');
        outcome.style.display = 'inline';
        random_number_button.style.display = 'none';
    }

    random_dice_button_task1.onclick = function(){
        random_dice_button_task1.style.display = 'none';
        random_number_button_task1.style.display = 'inline';
        do_random_task_p.style.display = 'inline';
    }

    random_number_button_task1.onclick = function(){
        outcome.style.display = 'inline';
        random_number_button_task1.style.display = 'none';
    }


</script>

{{ form.payout.errors }}
<input type="hidden" name="payout" />


<br>
<br>

    {% next_button %}

{% endblock %}