{{ block title }}
<center>PRACTICE ROUND</center>
{{ endblock }}
{{ block content }}
<style>
  .otree-body {
      max-width: 90% !important;
  }
</style>
<div id="app"></div>


<script>
   // Disable "Enter" key to prevent submitting the form accidentally
$('html').bind('keypress', function(e) {
   if(e.keyCode === 13 || e.key == 'Enter') {
      return false;
   }
});

  function checkAnswer(that){
      /* check answers, change colour background  for each answer and add info
       */

      // check columns cellResultColumn-"+r+"
      let numberTablesPractice=parseInt(document.getElementById('numberTablesPractice').value) -1;
      let numberColumns=document.getElementById('numberColumns').value;
      let colorIncorrect=document.getElementById('colorIncorrect').value;
      let colorCorrect=document.getElementById('colorCorrect').value;

      let sumColumnsCorrect=""; //if is correct value 1 incorrect 0
      for (r=0;r<numberColumns;r++){
	  // get input users
	  let nameColumn='resultColumn-'+r;
	  let inputUser=parseInt(document.getElementById(nameColumn).value);
	  // get result in tableSumColumns
	  let tableSumColumns=document.getElementById('tableSumColumns').value;
	  //// divide by * for rounds an get in this round
	  let sumColumns=tableSumColumns.split("*");

	  let sumColumn = parseInt(sumColumns[numberTablesPractice].split(",")[r]);
	  // check if it is correct
	  if ( inputUser == sumColumn) {
	      //change background table
	      document.getElementById(nameColumn).style.backgroundColor = colorCorrect;
	      // add message correct
	      let resultMessageColumn='resultMessageColumn-'+r;
	      document.getElementById(resultMessageColumn).textContent = "CORRECT";
	      // add to info
	      sumColumnsCorrect=sumColumnsCorrect+"1"+",";
	  }else{
	      //change background table
	      document.getElementById(nameColumn).style.backgroundColor = colorIncorrect;
	      // add message correct
	      let resultMessageColumn='resultMessageColumn-'+r;
	      document.getElementById(resultMessageColumn).textContent ="INCORRECT";
	      // add to info
	      sumColumnsCorrect=sumColumnsCorrect+"0"+",";
	  }

      }
      document.getElementById('tableSumColumnsCorrectPractice').value=document.getElementById('tableSumColumnsCorrectPractice').value +sumColumnsCorrect+"*";
      // check summ all columns
      let sumAllColumnsCorrect=""; //if is correct value 1 incorrect 0
      // get input users
      let nameColumn='resultAllSumColumn';
      let inputUser=parseInt(document.getElementById(nameColumn).value);
      // get result in tableSumColumns
      let tableSumAllColumns=document.getElementById('tableSumAllColumns').value;
      //// divide by * for rounds an get in this round
      let sumAllColumns=tableSumAllColumns.split("*");

      let sumAllColumn = parseInt(sumAllColumns[numberTablesPractice]);
      // check if it is correct
      if ( inputUser == sumAllColumn) {
	  //change background table
	  document.getElementById(nameColumn).style.backgroundColor = colorCorrect;
	  // add message correct
	  let resultMessageColumn='resultMessageAllSumColumn';
	  document.getElementById(resultMessageColumn).textContent = "CORRECT";
	  // add to info
	  sumAllColumnsCorrect="1";
	  }else{
	       //change background table
	       document.getElementById(nameColumn).style.backgroundColor = colorIncorrect;
	       // add message correct
	       let resultMessageColumn='resultMessageAllSumColumn';
	       document.getElementById(resultMessageColumn).textContent = "INCORRECT";
	       // add to info
	       sumAllColumnsCorrect="0";
	   }
	   document.getElementById('tableSumAllColumnsCorrectPractice').value=document.getElementById('tableSumAllColumnsCorrectPractice').value +sumAllColumnsCorrect+"*";



	   // tables corrects numbersTablesCorrectPractice tableAllTableCorrectPractice
	   if (sumAllColumnsCorrect=="1" && sumColumnsCorrect.search("0")==-1){
	       document.getElementById('tableAllTableCorrectPractice').value=document.getElementById('tableAllTableCorrectPractice').value +"1"+"*";
	       document.getElementById('numbersTablesCorrectPractice').value=parseInt(document.getElementById('numbersTablesCorrectPractice').value) +1;
	   }else{
	       document.getElementById('tableAllTableCorrectPractice').value=document.getElementById('tableAllTableCorrectPractice').value +"0"+"*";
	   }
	   //add info text infoResults
      document.getElementById('infoResults').textContent = "Correct tables =   "+document.getElementById('numbersTablesCorrectPractice').value+"";
	   // Times initTime timeTablePractice
	   const d = new Date();
	   let initTime=parseInt(document.getElementById('initTime').value);
	   let timeTablePractice=document.getElementById('timeTablePractice');
	   let timeBefore=parseInt(timeTablePractice.value.split("*")[numberTablesPractice-1]);
	   let duration = d.getTime()-initTime ;
	   if (numberTablesPractice>0){
	       duration=duration-timeBefore;
	   }
	   timeTablePractice.value= timeTablePractice.value+duration+"*";

	   // active button new or end buttonNew buttonEnd and hidden buttonSubmit
	   /*document.getElementById('buttonSubmit').style.display="none";
	   document.getElementById('buttonNew').style.display="BLOCK";
	   //add save dates to platform*/
	   let platform =     document.getElementById('platform').value;
	   if (platform == "qualtrics"){
	       //save in qualtrics
	       saveDataQualtrics(that);
	   }
	   createTable();
	   }
	    function saveDataQualtrics(that){
		/* save datasembbeding in qualtrics */
		let numbersTablesCorrectPractice=document.getElementById('numbersTablesCorrectPractice').value;
		Qualtrics.SurveyEngine.setEmbeddedData("numbersTablesCorrectPractice",numbersTablesCorrectPractice);
		let timeTablePractice=document.getElementById('timeTablePractice').value;
		Qualtrics.SurveyEngine.setEmbeddedData("timeTablePractice",timeTablePractice);
		console.log("save data in qualtrics",numbersTablesCorrectPractice);



	    }
	    function createStructureApp(id,rows,columns,minValue,maxValue,colorOK,colorNotOK,timeGlobal,platform,timeRest){
		/* Create code html of inputs hidden , container of table and button
	 id = id of div where to put the app
	       */
		let codeHead="<div id='taskApp'>";
		let codeZoneUP="<div id='zoneUP' style='display: flex;margin-bottom: 2%;'><div id='zoneLeftUP' style='position: left;width: 100%;'><span>Participant ID: </span><span id='subjectID'>"+js_vars.subjectID+"</span> </div><div id='zoneRightUP' style='width: 100%;text-align: right;'><span style='font-size:1.2em !important;'>Time Remaining: </span><span id='subjectIDTimeRest'>--:--</span> </div></div>";
		codeHead = codeHead+codeZoneUP;
		let codeZoneMiddle = "<div id='zoneMiddle'>";
		codeHead = codeHead+codeZoneMiddle;
		let codePlatform="<input type='hidden' id='platform' name='platform' value='"+platform+"'>";
		let codeTableNumbers="<input type='hidden' id='tableNumbers' name='tableNumbers' value=''>";
		let codeTableSumAllColumns="<input type='hidden' id='tableSumAllColumns' name='tableSumAllColumns' value=''>";
		let codeTableSumColumns="<input type='hidden' id='tableSumColumns' name='tableSumColumns' value=''>";
		let codeTableSumColumnsCorrect="<input type='hidden' id='tableSumColumnsCorrectPractice' name='tableSumColumnsCorrectPractice' value=''>";
		let codeTableSumAllColumnsCorrect="<input type='hidden' id='tableSumAllColumnsCorrectPractice' name='tableSumAllColumnsCorrectPractice' value=''>";
		let codeTableAllTableCorrect="<input type='hidden' id='tableAllTableCorrectPractice' name='tableAllTableCorrectPractice' value=''>";
		let codeTableNumbersTablesCorrect="<input type='hidden' id='numbersTablesCorrectPractice' name='numbersTablesCorrectPractice' value='0'>";
		let codeNumberInteraction="<input type='hidden' id='numberTablesPractice' name='numberTablesPractice' value='0'>";
		let codeTimeGlobal="<input type='hidden' id='timeGlobal' name='timeGlobal' value='"+timeGlobal+"'>";
		let codeTimeRest="<input type='hidden' id='timeRest' name='timeRest' value='"+timeRest+"'>";
		let codeNumberRows="<input type='hidden' id='numberRows' name='numberRows' value='"+rows+"'>";
		let codeNumberColumns="<input type='hidden' id='numberColumns' name='numberColumns' value='"+columns+"'>";
		let codeColorCorrect="<input type='hidden' id='colorCorrect' name='colorCorrect' value='"+colorOK+"'>";
		let codeColorIncorrect="<input type='hidden' id='colorIncorrect' name='colorIncorrect' value='"+colorNotOK+"'>";
		let codeMinValue="<input type='hidden' id='minValue' name='minValue' value='"+minValue+"'>";
		let codeMaxValue="<input type='hidden' id='maxValue' name='maxValue' value='"+maxValue+"'>";

		let codeMainApp="<div id='mainApp'>";
		let codeTable="<div id='tableTask'></div>";
		let codeRest="<div id='restTask'><h1>PERIOD OF REST</h1></div>";
		let codeResultsTask="<div id='resultsTask'>";
		let codeInitTime="<input type='hidden' id='initTime' name='initTime' value=''>";
		let codeTime="<input type='hidden' id='timeTablePractice' name='timeTablePractice' value=''>";
		let codeInformation="<div id='info'><center><span id='infoResults'>"+"Correct tables = 0</span></center></div>";
		let codeButtons="<dsiv id='zoneButtons'>";
		//add events after, in another fuctions
		let codeButtonInputSubmit="<button id='buttonSubmit' name='buttonSubmit' type='button' class='btn btn-primary' style='display:block;margin-left: auto;margin-right: 0;margin-top:2%;'>Submit</button>";
		let codeButtonInputNew="<button id='buttonNew' name='buttonNew'  type='button' style='display:none;margin-left: auto;margin-right: 0;'>New Task</button>";
		let codeButtonInputEnd="<button id='buttonEnd' name='buttonEnd' type='submit' style='display:none;margin-left: auto;margin-right: 0;'>End Task</button>";

		codeButtons=codeButtons+codeButtonInputSubmit+codeButtonInputNew+"</div>";
		let codeEnd="</div>";
		let codeInfoEndTask=codeResultsTask+"<h2>YOUR RESULTS</h2></br><span id='infoEndTask'></span></br>"+codeButtonInputEnd+codeEnd;
		let idApp=document.getElementById(id);
		codeMainApp=codeMainApp+codeInformation+codeTable+codeButtons+codeEnd;

		idApp.innerHTML=codeHead+codePlatform+codeTableNumbers+codeTableSumAllColumns+codeTableSumAllColumnsCorrect+codeTableSumColumns+codeTableSumColumnsCorrect+codeTableAllTableCorrect+codeNumberInteraction+codeTimeGlobal+codeTimeRest+codeTableNumbersTablesCorrect+codeNumberRows+codeNumberColumns+codeColorCorrect+codeColorIncorrect+codeMinValue+codeMaxValue+codeInitTime+codeTime+codeMainApp+codeRest+codeInfoEndTask+codeEnd+codeEnd+codeEnd;

	    }
	    function startTask(id,rows,columns,minValue,maxValue,colorOK,colorNotOK,timeGlobal,timeRest,platform){
		/* star task first time
	 id = id of div where to put the table
	 rows = number of rows with random numbers of table
	 columns = number of columns with random numbers of table
	 minValue = minimum value of number in cells
	 maxValue = maximum value of number in cells
	 colorOK = background color of cell with correct answer
	 colorNotOK = background color of cell with incorrect answer
	 timeGlobal = time maximum to repeat task
	 platform = name of plataform where run the task ( qualtrics, limesurvey )

	       */
		//update parameters as rows, columns,colorOk, colorNotOk
								  createStructureApp(id,rows,columns,minValue,maxValue,colorOK,colorNotOK,timeGlobal,platform,timeRest);
		/* Code to start the proccess. Start time global and  display zone task and hide results screen */

		let tableTask=document.getElementById('mainApp');
		tableTask.style.display="block";
		let restTask=document.getElementById('restTask');
		restTask.style.display="none";
		let resultsTask=document.getElementById('resultsTask');
		resultsTask.style.display="none";
		setTimeout(function(){
			document.getElementById("form").submit();
	/*let tableTask=document.getElementById('mainApp');
	tableTask.style.display="none";
	let restTask=document.getElementById('restTask');
	restTask.style.display="none";
	let resultsTask=document.getElementById('resultsTask');
	resultsTask.style.display="block";
	//add info text infoResults
	document.getElementById('infoEndTask').textContent = "Correct tables = "+document.getElementById('numbersTablesCorrectPractice').value+"/"+document.getElementById('numberTablesPractice').value+"";
	document.getElementById('buttonEnd').style.display="block";*/


    }, timeGlobal);


		/*setTimeout(function(){
	let tableTask=document.getElementById('mainApp');
	tableTask.style.display="none";
	let restTask=document.getElementById('restTask');
	restTask.style.display="block";
	let resultsTask=document.getElementById('resultsTask');
	resultsTask.style.display="none";


    }, timeGlobal-timeRest);*/


		// create table
		createTable();
		// init time in milliseconds;
		const d = new Date();
		let initTime=document.getElementById('initTime');
		initTime.value= d.getTime();
		//create clock to count remaining time
		setInterval(function () {
	let subjectIDTimeRest=document.getElementById('subjectIDTimeRest');
	const d = new Date();
	let initTime=parseInt(document.getElementById('initTime').value);
	let timeGlobal=parseInt(document.getElementById('timeGlobal').value);
	let timeRest=parseInt(document.getElementById('timeRest').value);
	let timeRemaining = timeGlobal-(d.getTime()-initTime);
	if (timeRemaining<=0){
	    timeRemaining = timeGlobal- (d.getTime()-initTime);
	}
	let minutes = parseInt(timeRemaining/60000);
	let seconds = parseInt((timeRemaining-minutes*60000)/1000);
	let textMinutes=minutes;
	if (minutes<10){
	    textMinutes="0"+minutes;
	}
	let textSeconds=seconds;
	if (seconds<10){
	    textSeconds="0"+seconds;
	}

	if (seconds>=0 && minutes>=0){
	    subjectIDTimeRest.innerHTML=textMinutes+":"+textSeconds;
	}

    }, 1000);

	    }
	    function createTable(){
		/* Create code html of a table to insert in a div
		 */
		//load parameters
		let inputNumberRows=document.getElementById('numberRows');
		let rows=parseInt(inputNumberRows.value);
		let inputNumberColumns=document.getElementById('numberColumns');
		let columns=parseInt(inputNumberColumns.value);
		let inputMinValue=document.getElementById('minValue');
		let minValue=parseInt(inputMinValue.value);
		let inputMaxValue=document.getElementById('maxValue');
		let maxValue=parseInt(inputMaxValue.value);
		let tableHead="<table border='1' style='width: 100% !important;table-layout: fixed;'>";
		let tableEnd="</table>";
		let arrayNumbers= new Array();
		let sumAllColumns= 0;
		let arraySumColumns = new Array();
		//unhide and hide buttons
		document.getElementById('buttonSubmit').style.display="block";
		document.getElementById('buttonNew').style.display="none";
		document.getElementById('buttonEnd').style.display="none";
		// to do rows
		let codeRows="";
		for (let r=0;r<rows;r++){
		    // first the numbers random for each column
		    let codeColumns="<tr><td></td>";
		    let arrayNumbersRow= new Array();
		    let sumRow=0;
		    for (let c=0;c<columns;c++){
			let numberRandom = Math.floor(rand() * (maxValue - minValue + 1) ) + minValue;
			arrayNumbersRow.push(numberRandom);
			codeColumns=codeColumns+"<td style='text-align: center;'>"+numberRandom+"</td>";
		    }
		    if (r<rows-1){
			codeColumns=codeColumns+"<td></td>";
		    }else{
			codeColumns=codeColumns+"<td style='text-align: center;white-space:nowrap;' id='cellMessageSumTotalColumn'>"+ "<span id='messageSumTotalColumn' >Total Sum</span>"+"</td>";
		    }

		    //and end
		    codeRows=codeRows+codeColumns+"</tr>";
		    // add info of list rows
		    arrayNumbers.push(arrayNumbersRow);
		}
		// add inputs columns
		let codeColumns="<tr>";
		// add span for messages sum of columns

		codeColumns=codeColumns+"<td style='text-align: center;white-space:nowrap;padding-left:2%;' id='cellMessageSumColumn'>"+ "<span id='messageSumColumn' >Sum of Columns: </span>"+"</td>";
		let symbolAfterCell="+";
		for (let c=0;c<columns;c++){
		    if (c == columns-1 ){
			symbolAfterCell = "=";
		    }
		    codeColumns=codeColumns+"<td style='text-align: center;' id='cellResultColumn-"+c+"'>"+ "<input id='resultColumn-"+c+"' type='number' style='background-color:#04f3eb;width: 50%;display: inline-block;margin-left: 25%;'><span style='display: inline-block;margin-left: 16%;'>"+symbolAfterCell+"</span></td>";

		}
		//add input columns sum of columns

		codeColumns=codeColumns+"<td style='text-align: center;' id='cellResultAllSumColumn'>"+ "<input id='resultAllSumColumn' type='number' style='background-color:#FFC300;width: 50%;'>"+"</td>";

		codeColumns=codeColumns+"</tr>";

		// add span for messages correct or not
		let codeColumnsMessage="<tr><td></td>";

		for (let c=0;c<columns;c++){
		    codeColumnsMessage=codeColumnsMessage+"<td style='text-align: center;'id='cellResultMessageColumn-"+c+"'>"+ "<span id='resultMessageColumn-"+c+"' ></span>"+"</td>";
		}
		// add span for messages correct or not for sumof columns
		codeColumnsMessage=codeColumnsMessage+"<td style='text-align: center;'id='cellResultMessageAllSumColumn'>"+ "<span id='resultMessageAllSumColumn' ></span>"+"</td>";

		codeColumnsMessage=codeColumnsMessage+"</tr>";
		codeRows=codeRows+codeColumns+codeColumnsMessage;
		// add info of sum of columns to arrays
		for (let c=0;c<columns;c++){
		    let sumCol=0;
		    for (let r=0;r<rows;r++){
			sumCol=sumCol+arrayNumbers[r][c];
		    }
		    sumAllColumns= sumAllColumns+sumCol;
		    arraySumColumns.push(sumCol);
		}

		//join all code table
		let tableCode = tableHead+codeRows+tableEnd;
		//insert info in inputs hidden
		//// transform array in text
		let textNumbers = arrayNumbers.map(a => a.join(",")).join(";");

		let textSumColumns = arraySumColumns.join(",");
		let textSumAllColumns = sumAllColumns.toString();

		console.log("textNumbers",textNumbers,"textSumAllColumns",textSumAllColumns,"textSumColumns",textSumColumns);
		//// add to inputs hidden
		let tableNumbers=document.getElementById('tableNumbers');
		tableNumbers.value=tableNumbers.value+textNumbers+"*";
		let tableSumAllColumns=document.getElementById('tableSumAllColumns');
		tableSumAllColumns.value=tableSumAllColumns.value+sumAllColumns+"*";
		let tableSumColumns=document.getElementById('tableSumColumns');
		tableSumColumns.value=tableSumColumns.value+textSumColumns+"*";

		//increase interaction number
		let numberTablesPractice=document.getElementById('numberTablesPractice');
		let increaseInteraction=  parseInt(numberTablesPractice.value)+1;
		numberTablesPractice.value=increaseInteraction.toString();
		//insert table code in table zone div
		let tableTask=document.getElementById('tableTask');
		tableTask.innerHTML = tableCode;
		console.log ("tableCode",tableCode);
	    }
	    function addEventsButtons(that){
		/* add events to function
										    let codeButtonInputSubmit="<button id='buttonSubmit' name='buttonSubmit' onclick='checkAnswer()' style='display:block;'>Submmit</button>";
										    let codeButtonInputNew="<button id='buttonNew' name='buttonNew' onclick='createTable()' style='display:none;'>New</button>";
										    let codeButtonInputEnd="<button id='buttonEnd' name='buttonEnd' onclick='endTaskSumcolumns()' style='display:none;'>End</button>"
	       */
		let buttonSubmit=document.getElementById('buttonSubmit');
		buttonSubmit.onclick= function() {
		    checkAnswer(that);
		}
		let buttonNew=document.getElementById('buttonNew');
		buttonNew.addEventListener("click", createTable);
		let buttonEnd=document.getElementById('buttonEnd');
		buttonEnd.onclick= function() {
		    endTaskSumcolumns(that);
		}


	    }
	    function endTaskSumcolumns(that){
		/* remove table and only show info, also redirect to possible submit of qualtrics o limesurvey */
		let platform=document.getElementById('platform').value;
		if (platform=="qualtrics"){
		    taskEndQualtric(that);
		    document.getElementById('taskApp').remove();
		}
		if (platform=="limesurvey"){
		    console.log("not implemented still");
		    document.getElementById('taskApp').remove();
		}


	    }
	    function taskEndQualtric(that){
		/* code to run to en task in qualtrics */
		/*let numbersTablesCorrectPractice=document.getElementById('numbersTablesCorrectPractice').value;
										    that.setEmbeddedData ("numbersTablesCorrectPractice",numbersTablesCorrectPractice);*/

		that.clickNextButton();

	    }
	    function startQualtrics(that,rows,columns,minValue,maxValue,colorOK,colorNotOK,timeGlobal,timeRest,platform){
		/* function to prepare question in qualtrics */
		that.hideNextButton();
		id=that.questionId;
		startTask(id,rows,columns,minValue,maxValue,colorOK,colorNotOK,timeGlobal,timeRest,platform);
		//add events to buttons
		addEventsButtons(that);


	    }
	    function cyrb128(str) {
		let h1 = 1779033703, h2 = 3144134277,
		h3 = 1013904242, h4 = 2773480762;
		for (let i = 0, k; i < str.length; i++) {
		    k = str.charCodeAt(i);
		    h1 = h2 ^ Math.imul(h1 ^ k, 597399067);
		    h2 = h3 ^ Math.imul(h2 ^ k, 2869860233);
		    h3 = h4 ^ Math.imul(h3 ^ k, 951274213);
		    h4 = h1 ^ Math.imul(h4 ^ k, 2716044179);
		}
		h1 = Math.imul(h3 ^ (h1 >>> 18), 597399067);
		h2 = Math.imul(h4 ^ (h2 >>> 22), 2869860233);
		h3 = Math.imul(h1 ^ (h3 >>> 17), 951274213);
		h4 = Math.imul(h2 ^ (h4 >>> 19), 2716044179);
		return [(h1^h2^h3^h4)>>>0, (h2^h1)>>>0, (h3^h1)>>>0, (h4^h1)>>>0];
	    }

	    function mulberry32(a) {
		return function() {
		    var t = a += 0x6D2B79F5;
		    t = Math.imul(t ^ t >>> 15, t | 1);
		    t ^= t + Math.imul(t ^ t >>> 7, t | 61);
		    return ((t ^ t >>> 14) >>> 0) / 4294967296;
		}
	    }
	    var seedTask=js_vars.seedTask;
	    // Create cyrb128 state:
		var seed = cyrb128(seedTask);
	    // Four 32-bit component hashes provide the seed for sfc32.

	    // Only one 32-bit component hash is needed for mulberry32.
	    var rand = mulberry32(seed[0]);



	    let platform="local"; //       platform = name of plataform where run the task ( qualtrics, limesurvey, local )
				  let id="app";
	    let rows=js_vars.rows;
	    let columns=js_vars.columns;
	    let minValue=js_vars.minValue;
	    let maxValue=js_vars.maxValue;

	    //let numberMaxInteractions=3;
	    let timeGlobal=js_vars.timeGlobal//100000; // time total to do tasks and rests in miliseconds
						       let timeRest=js_vars.timeRest//15000; // time total to do rests in miliseconds

											     let colorOK=js_vars.colorOK;
	    let colorNotOK=js_vars.colorNotOK;

	    if (platform=="qualtrics"){
		let that=this;
		startQualtrics(that,rows,columns,minValue,maxValue,colorOK,colorNotOK,timeGlobal,timeRest,platform);
	    }
	    if (platform=="limesurvey"){
		console.log("not implemented still");
	    }
	    if (platform=="local"){

		window.onload = function() {
		    startTask(id,rows,columns,minValue,maxValue,colorOK,colorNotOK,timeGlobal,timeRest,platform);
		    addEventsButtons("");
		}

	    }


	    </script>





	    {{ endblock }}