{% extends "global/Page.html" %}
{% load otree static %}
{% block title %}
     <center> DEMO page Stage 1 Task</center>
{% endblock %}

{% block content %}

<ul>
    <li>This is a demo page of Stage 1 Task for training and acquaintance with experimental interface. Any action or
        choices in this page does NOT impact final reward.</li><br />
    <li>Use dropdown options to select possible choices below each block.</li>
    <li>Use <b>evaluate button</b> to receive a delight score from Sawyer.</li>
    <li>Each evaluation costs c_1.</li>
    <li>Use <b>Submit button</b> to log in the highest delight score acheived and proceed to next stage</li>
    <li> Auto proceeed after 25 evaluations. </li><br />
</ul>

<div class="container">
    <table style ="width:100%">
        <tr>
            <th><center>Block 1 </center></th>
            <th><center>Block 2 </center></th>
            <th><center>Block 3 </center></th>
            <th><center>Block 4 </center></th>
            <th><center>Block 5 </center></th>
            <th><center>Block 6 </center></th>
            <th><center>Block 7 </center></th>
            <th><center>Block 8 </center></th>


        </tr>
        <tr>
        	<td> <center><button type="button" onclick="toggle_col1()" id="btn1">
            <canvas class="block-body" id="block1" width="70" height="70" style="border:0px solid #d3d3d3;"></canvas></button></center> </td>
            <td> <center><button type="button" onclick="toggle_col2()" id="btn2">
            <canvas class="block-body" id="block2" width="70" height="70" style="border:0px solid #d3d3d3;"></canvas></button></center> </td>
            <td> <center><button type="button" onclick="toggle_col3()" id="btn3">
            <canvas class="block-body" id="block3" width="70" height="70" style="border:0px solid #d3d3d3;"></canvas></button></center> </td>
            <td> <center><button type="button" onclick="toggle_col4()" id="btn4">
            <canvas class="block-body" id="block4" width="70" height="70" style="border:0px solid #d3d3d3;"></canvas></button></center> </td>
            <td> <center><button type="button" onclick="toggle_col5()" id="btn5">
            <canvas class="block-body" id="block5" width="70" height="70" style="border:0px solid #d3d3d3;"></canvas></button></center> </td>
            <td> <center><button type="button" onclick="toggle_col6()" id="btn6">
            <canvas class="block-body" id="block6" width="70" height="70" style="border:0px solid #d3d3d3;"></canvas></button></center> </td>
            <td> <center><button type="button" onclick="toggle_col7()" id="btn7">
            <canvas class="block-body" id="block7" width="70" height="70" style="border:0px solid #d3d3d3;"></canvas></button></center> </td>
            <td> <center><button type="button" onclick="toggle_col8()" id="btn8">
            <canvas class="block-body" id="block8" width="70" height="70" style="border:0px solid #d3d3d3;"></canvas></button></center> </td>
  		</tr>
        <tr>
            <td colspan="8"> </td>
        </tr>
  		<tr>
            <td colspan="8"> </td>
        </tr>
  		<tr>
            <td colspan="8"> </td>
        </tr>
  		<tr>
            <td colspan="8"> </td>
        </tr>
       <tr>
            <td>
                <br />
                <br />
            </td>
       </tr>
        <tr>
            <td colspan="8"> <center> <button onClick="evaluate_score()" type="button" id = "evaluate" class = "evaluate-btn" style="border:1px solid #000000;"> Press to Evaluate Combination Sequence </button> </center></td>
        </tr>
       <tr>
            <td>
                <br />
                <br />
            </td>
        </tr>

        <tr>
            <td colspan="3" style="text-align:right"><img src="{% static 'sawyer_delight_score.png' %}" width="100" height="100"/></td>
            <td colspan="2"><center> <b>Sawyer Delight Score </b></center> </td>
            <td colspan="3" > <b><center>Number of Evaluation Trails</center></b> </td>
        </tr>

        <tr>
            <td colspan="3"> </td>
            <td colspan="2"><b><center><font color="blue"><b id="test_score"> </b></font></center></b></td>
            <td colspan="3" ><b><center><font color="red"><b id="trial_progress"> </b> of 25</font><center></b></td>
        </tr>
        <tr>
            <td>
                <br />
                <br />
            </td>
        </tr>
        <tr>
            <td colspan="2"> <b>Optimal Combination Sequence </b></td>
            <td colspan="2"><center><box><font color="blue"> <b><b id="own_bit">(none)</b> </b></font></box></center></td>
            <td colspan="2"><center><font color="black"> <b>Highest Delight Score Received </b></font></center></td>
            <td colspan="2"><center><font color="blue"> <b><b id="own_score">(none)</b></b></font></center></td>
        </tr>


    </table><br/>
    <br>
    <center><button> Submit and freeze your highest delight score </button></center>

</div>

<script>
    const cols = ["red", "black"];

    function choose(choices) {
      var index = Math.floor(Math.random() * choices.length);
      return choices[index];
    };

	var c = document.getElementById("block1").getContext("2d");
    c.beginPath();
    c.rect(10, 10, 50, 50);
    c.fillStyle = choose(cols) ;
    c.fill();
    var c = document.getElementById("block2").getContext("2d");
    c.beginPath();
    c.rect(10, 10, 50, 50);
    c.fillStyle = choose(cols) ;
    c.fill();
	var c = document.getElementById("block3").getContext("2d");
    c.beginPath();
    c.rect(10, 10, 50, 50);
    c.fillStyle = choose(cols) ;
    c.fill();
    var c = document.getElementById("block4").getContext("2d");
    c.beginPath();
    c.rect(10, 10, 50, 50);
    c.fillStyle = choose(cols) ;
    c.fill();
    var c = document.getElementById("block5").getContext("2d");
    c.beginPath();
    c.rect(10, 10, 50, 50);
    c.fillStyle = choose(cols) ;
    c.fill();
    var c = document.getElementById("block6").getContext("2d");
    c.beginPath();
    c.rect(10, 10, 50, 50);
    c.fillStyle = choose(cols) ;
    c.fill();
	var c = document.getElementById("block7").getContext("2d");
    c.beginPath();
    c.rect(10, 10, 50, 50);
    c.fillStyle = choose(cols) ;
    c.fill();
    var c = document.getElementById("block8").getContext("2d");
    c.beginPath();
    c.rect(10, 10, 50, 50);
    c.fillStyle = choose(cols) ;
    c.fill();

    function toggle_col1(){
        var blk_col = document.getElementById("block1").getContext("2d");
        col = blk_col.getImageData(10, 10, 50, 50).data;

        if (col[0] == 255){
        	blk_col.fillStyle = "black";
                    blk_col.fill();
      	}
      	if(col[0] == 0){
        	blk_col.fillStyle = "red";
            blk_col.fill();
        }
    }

    function toggle_col2(){
        var blk_col = document.getElementById("block2").getContext("2d");
        col = blk_col.getImageData(10, 10, 50, 50).data;

        if (col[0] == 255){
        	blk_col.fillStyle = "black";
                    blk_col.fill();
      	}
      	if(col[0] == 0){
        	blk_col.fillStyle = "red";
            blk_col.fill();
        };
    };

  	function toggle_col3(){
        var blk_col = document.getElementById("block3").getContext("2d");
        col = blk_col.getImageData(10, 10, 50, 50).data;

        if (col[0] == 255){
        	blk_col.fillStyle = "black";
                    blk_col.fill();
      	};
      	if(col[0] == 0){
        	blk_col.fillStyle = "red";
            blk_col.fill();
        };
    };

    function toggle_col4(){
        var blk_col = document.getElementById("block4").getContext("2d");
        col = blk_col.getImageData(10, 10, 50, 50).data;

        if (col[0] == 255){
        	blk_col.fillStyle = "black";
                    blk_col.fill();
      	};
      	if(col[0] == 0){
        	blk_col.fillStyle = "red";
            blk_col.fill();
        };
    };

    function toggle_col5(){
        var blk_col = document.getElementById("block5").getContext("2d");
        col = blk_col.getImageData(10, 10, 50, 50).data;

        if (col[0] == 255){
        	blk_col.fillStyle = "black";
                    blk_col.fill();
      	};
      	if(col[0] == 0){
        	blk_col.fillStyle = "red";
            blk_col.fill();
        };
    };

    function toggle_col6(){
        var blk_col = document.getElementById("block6").getContext("2d");
        col = blk_col.getImageData(10, 10, 50, 50).data;

        if (col[0] == 255){
        	blk_col.fillStyle = "black";
                    blk_col.fill();
      	};
      	if(col[0] == 0){
        	blk_col.fillStyle = "red";
            blk_col.fill();
        };
    };

  	function toggle_col7(){
        var blk_col = document.getElementById("block7").getContext("2d");
        col = blk_col.getImageData(10, 10, 50, 50).data;

        if (col[0] == 255){
        	blk_col.fillStyle = "black";
                    blk_col.fill();
      	};
      	if(col[0] == 0){
        	blk_col.fillStyle = "red";
            blk_col.fill();
        };
    };

    function toggle_col8(){
        var blk_col = document.getElementById("block8").getContext("2d");
        col = blk_col.getImageData(10, 10, 50, 50).data;

        if (col[0] == 255){
        	blk_col.fillStyle = "black";
                    blk_col.fill();
      	};
      	if(col[0] == 0){
        	blk_col.fillStyle = "red";
            blk_col.fill();
        } ;
    }

    var cost_incure = 0;
    function evaluate_score(){
      	var blk1 = document.getElementById("block1").getContext("2d").getImageData(10, 10, 50, 50).data[0];
        var blk2 = document.getElementById("block2").getContext("2d").getImageData(10, 10, 50, 50).data[0];
        var blk3 = document.getElementById("block3").getContext("2d").getImageData(10, 10, 50, 50).data[0];
        var blk4 = document.getElementById("block4").getContext("2d").getImageData(10, 10, 50, 50).data[0];
        var blk5 = document.getElementById("block5").getContext("2d").getImageData(10, 10, 50, 50).data[0];
        var blk6 = document.getElementById("block6").getContext("2d").getImageData(10, 10, 50, 50).data[0];
        var blk7 = document.getElementById("block7").getContext("2d").getImageData(10, 10, 50, 50).data[0];
        var blk8 = document.getElementById("block8").getContext("2d").getImageData(10, 10, 50, 50).data[0];

        cost_incure+=1;

        liveSend({	'bit_1': parseInt(blk1),
        			'bit_2': parseInt(blk2),
                    'bit_3': parseInt(blk3),
                    'bit_4': parseInt(blk4),
                    'bit_5': parseInt(blk5),
                    'bit_6': parseInt(blk6),
                    'bit_7': parseInt(blk7),
                    'bit_8': parseInt(blk8),
                    'cost': parseInt(cost_incure)
        });
    };



    let msgTestScore = document.getElementById('test_score');
    let msgBestScore = document.getElementById('own_score');
    let msgTrials = document.getElementById('trial_progress');
    let msgBitSequence = document.getElementById('own_bit');


    function liveRecv(data) {
        console.log('received', data);
        if ('finished' in data) {
            document.getElementById('form').submit();
            return;
        };

        msgTestScore.innerHTML = data.test_score;
        msgBestScore.innerHTML = data.own_score;
        msgTrials.innerHTML = data.num_trials;
        msgBitSequence.innerHTML = data.own_bit;
    };

    window.addEventListener('DOMContentLoaded', (event) => {
        liveSend({});
    });

</script>

{% endblock %}