{{ extends 'global/Page.html' }}
{{ block title }} {{ endblock }}

{{ block content }}



<div id="generaldiv">
    {{ if practice }}
        <p>
            Touch the boxes and swipe
        </p>
    {{ endif }}
</div>

<br>
<div id="myDIV" class="container3 x-scroll x-mandatory" onscroll="scrolltrack()">
    <div class="element3">
        <span id="choicetext1">
            <center>
                <div id="boxdiv">
                    <div id="valuediv_UL"></div>
                </div>
                <br>
                <div id="boxdiv">
                    <div id="valuediv_LL"></div>
                </div>
            </center>
        </span>
    </div>
    <div class="element3">
        <span id="choicetext2">
            <center>
                <div id="boxdiv">
                    <div id="valuediv_UR"></div>
                </div>
                <br>
                <div id="boxdiv">
                    <div id="valuediv_LR"></div>
                </div>
            </center>
        </span>
    </div>
</div>

<p hidden>
    <!-- this is just for testing, unhide if you want to see the x position -->
    <span id="currentx"></span>
</p>
<p >
    <!-- these are used to store the values of x, y, and choice during scrolling 
         these values are retrieved onto the form using JavaScript function fchoice() 
         when the choicebutton is clicked 
         please use <p hidden> if not testing
    -->
    y: <span id="y"></span><br>
    x: <span id="x"></span><br>
    choice: <span id="choice"></span>
</p>

    <!-- these are for testing -->
<p hidden>
    Length of player.y: <span id="ylength"></span><br>    
    Length of player.x: <span id="xlength"></span><br>    
</p>
<center>
    <p id="choiceindicator">
        <span id="yourchoice"></span>
        <br>
        <br>
        {{ if beginning }}Your choice:{{ endif }}
    </p>

    <button id="choicebutton1" name="choice" value="1">A</button>
    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    <button id="choicebutton2" name="choice" value="2">B</button>

</center>

<input type="hidden" name="y" id="id_y">
<input type="hidden" name="time_endscrolling" id="id_time_endscrolling">
<input type="hidden" name="x" id="id_x">
<input type="hidden" name="time_startscrolling" id="id_time_startscrolling">
<input type="hidden" name="dectime_end" id="id_dectime_end">
<input type="hidden" name="lastdwell" id="id_lastdwell">



{{ endblock }}

{{ block scripts }}
<script>


/* 
	randomise the initial position of the scroll bar so that the players
	do not have a tendency to choose the initially shown option
*/
const element = document.getElementById("myDIV");
const initposition = 150; //10 + Math.floor(Math.random() * 250); // changed 21/9/2024
element.scrollLeft = initposition;

/* 
	set the heights of the stimuli bars based on the V values 
*/ 
document.getElementById("valuediv_UL").style.height = js_vars.V_UL;
document.getElementById("valuediv_LL").style.height = js_vars.V_LL;
document.getElementById("valuediv_UR").style.height = js_vars.V_UR;
document.getElementById("valuediv_LR").style.height = js_vars.V_LR;


/*
	this function tracks the position of the scrollbar and it is called whenever the scrollbar position changes
    (about 20 times per second)
	i.e. this sets values for player.x and player.y
    the x-coordinates are the locations of the scrollbar
    the y-coordinates are the time stamps when the x-coordinates are recorded
*/
function scrolltrack() {
  	var d = new Date();
	const element = document.getElementById("myDIV");
    let x = element.scrollLeft;

  	/* 
    	the below lines make the information appear only after a bit (3 px) of scrolling
    */
	if (Math.abs(x.toFixed() - initposition) > 3) { 
        //const element = document.querySelector('.element3');
        //element.style.scrollSnapAlign = 'center';
		document.getElementById("choicetext1").style.visibility = 'visible';		
      	document.getElementById("choicetext2").style.visibility = 'visible';		
      	//document.getElementById("choicetext3").style.visibility = 'visible';		
      	document.getElementById("generaldiv").style.visibility = 'visible';
        document.getElementById("choicebutton1").style.visibility = 'visible';
        document.getElementById("choicebutton2").style.visibility = 'visible';
        document.getElementById("choiceindicator").style.visibility = 'visible';

		// time_startscrolling is recorded only when these elements are made visible
      	if (!(document.getElementById('id_time_startscrolling').value)) {
            // the below is saved as a string instead of float because Python (pandas) 
            // has problems reading large numbers from csv files
            document.getElementById('id_time_startscrolling').value = String(d.getTime()); 
        }
        // subtract here time_startscrolling from y
        var startscrolling = document.getElementById('id_time_startscrolling').value;
        // the below line adds time as y-coordinate into a list of y-coordinates separated by ','
        document.getElementById("y").innerHTML += d.getTime() - startscrolling + ',';
        document.getElementById("id_time_endscrolling").value = String(d.getTime()); // absolute time, this is updated until scrolling stops

	}

  	// the below line adds the current x-coordinate into a list of x-coordinates separated by ','
  	document.getElementById("x").innerHTML += x.toFixed() + ',';
	document.getElementById("currentx").innerHTML = x.toFixed(); // just for testing

  	// this is for testing: indicate the length of x and y
  	document.getElementById("ylength").innerHTML = (document.getElementById("y").innerHTML.match(/,/g) || []).length
  	document.getElementById("xlength").innerHTML = (document.getElementById("x").innerHTML.match(/,/g) || []).length
  
  	/* 
    	the below lines change the choice indicator div on the page, 
        i.e. as you scroll from option to another the choice indicator changes
    */
  	if (x.toFixed() > 150) {
    	document.getElementById("choice").innerHTML = 2;
        document.getElementById("yourchoice").innerHTML = js_vars.choice2;    
    } else {
        document.getElementById("choice").innerHTML = 1;
        document.getElementById("yourchoice").innerHTML = js_vars.choice1;
    }
}

var choicebutton1 = document.querySelector('#choicebutton1');
var choicebutton2 = document.querySelector('#choicebutton2');

/*
	the below function is run when the choicebutton is clicked
    i.e. this sends the information that is saved in the page
*/
function fchoice() {
 	var d = new Date();
  	document.getElementById('id_x').value = document.getElementById('x').innerHTML;
  	document.getElementById('id_y').value = document.getElementById('y').innerHTML;
    document.getElementById('id_dectime_end').value = d.getTime();
  	document.getElementById('id_lastdwell').value = document.getElementById('choice').innerHTML;
}

choicebutton1.addEventListener("click", fchoice);
choicebutton2.addEventListener("click", fchoice);

</script>
{{ endblock }}