// import * from './nouislider.js'; // ************* for noUiSlider ******************* // one can only include a script file in an HTML page, not in another script file var imported = document.createElement('script'); imported.src = "./nouislider.min.js"; document.body.appendChild(imported); // $getScript("{{ static 'global/nouislider.min.js' }}", function() // { // }); //*********define variables for all buttons, rulers, and bounds******************* for (let i = 1; i<23; i++) { window['button'+i] = document.getElementById("button"+i); window['ruler'+i] = document.getElementById("ruler"+i); } for (let i = 1; i<8; i++) { window['exit' + i] = document.getElementById("exit" + i); // step has to be divisible by 2, to set scales and // set the initial value of each steps' bounds window['step' + i + 'bound_l'] = 99999; window['step' + i + 'bound_r'] = 99999; } var list=""; var step7; // left and right is the true right that subjects choose var left_b; var right_b; // console.log("list:", list); //***************define a function to control the hover background*************** function mouse(x,m,n) { // change the background color of the ruler when hover on the choice button window['button'+m].onmouseover = function(){ window['ruler'+m].style.backgroundColor = "dodgerblue"; } window['button'+n].onmouseover = function(){ window['ruler'+n].style.backgroundColor = "dodgerblue"; } // recover to the original background color of the ruler when mouse out window['button'+m].onmouseout = function(){ window['ruler'+m].style.backgroundColor = ""; } window['button'+n].onmouseout = function(){ window['ruler'+n].style.backgroundColor = ""; } window['exit'+x].onmouseover = function() { window['ruler'+m].style.backgroundColor = "dodgerblue"; window['ruler'+n].style.backgroundColor = "dodgerblue"; } window['exit'+x].onmouseout = function () { window['ruler'+m].style.backgroundColor = ""; window['ruler'+n].style.backgroundColor = ""; } } //***************define scale function, and draw_scale*********************************** // remain to be modified function set_scales(y,x,n,m) { //y: scales array //x: starting point index; //n: number of scales ; //m: step between scales; //y[1] = "'"+(window['left'+x+'_b']).toString()+"'"; for (let i = 2; i <= n; i++) { y[i] = "'"+(window['step'+x+'bound_l']+m*(i-1)).toString()+"'"; } } function draw_scales(z,x,a,b,c,d){ //z: scales array //x: starting point index; //a,b: start and end for the left ruler; //c,d: start and end for the right ruler; var i=1; // track the index of scales[]; for (let y = a; y<=b; y++) { document.documentElement.style.setProperty('--ruler'+x+'L-cm'+y, z[i]); i++; } for (let y=c; y<=d; y++) { document.documentElement.style.setProperty('--ruler'+x+'R-cm'+y, z[i]); i++; } } //************ define Exit function***************************************\ function Exit1() { document.getElementById("left_b").value = 0; document.getElementById("right_b").value = 100; document.getElementById("list").value = "none"; } function Exit() { document.getElementById("left_b").value = left_b; document.getElementById("right_b").value = right_b; document.getElementById("list").value = list; } var visualization = document.getElementById("visualization"); noUiSlider.create(visualization,{ start: [0,100], connect: true, range:{ 'min':0, 'max':100 } }) mouse(1,1,2); function Step1L() { step1bound_l = 0; step1bound_r = 50; left_b = step1bound_l; right_b = step1bound_r; visualization.noUiSlider.set([left_b,right_b]); mid = Math.trunc((step1bound_r+step1bound_l)/2); draw2(); document.getElementById("Step3").style.display = "none"; document.getElementById("Step4_1").style.display = "none"; document.getElementById("Step4_2").style.display = "none"; document.getElementById("Step5_1").style.display = "none"; document.getElementById("Step5_2").style.display = "none"; document.getElementById("Step6_1").style.display = "none"; document.getElementById("Step6_2").style.display = "none"; document.getElementById("Step6_3").style.display = "none"; document.getElementById("Step7").style.display = "none"; document.getElementById("exit1").style.display = "none"; document.getElementById("exit3").style.display = "none"; document.getElementById("exit4").style.display = "none"; document.getElementById("exit5").style.display = "none"; document.getElementById("exit6").style.display = "none"; document.getElementById("exit7").style.display = "none"; document.getElementById("exit2").style.display = "table-row"; document.getElementById("zoomstep1").style.display="table-row"; document.getElementById("left1").innerHTML= step1bound_l; document.getElementById("right1").innerHTML = step1bound_r; document.getElementById("zoomstep2").style.display = "none"; document.getElementById("zoomstep3").style.display = "none"; document.getElementById("zoomstep4").style.display = "none"; document.getElementById("zoomstep5").style.display = "none"; document.getElementById("zoomstep6").style.display = "none"; list += "1," ; console.log("list:", list); console.log("type of list:", typeof(list)); } function Step1R() { step1bound_l = 50; step1bound_r = 100; left_b = step1bound_l+1; right_b = step1bound_r; visualization.noUiSlider.set([left_b,right_b]); mid = (step1bound_r+step1bound_l)/2; draw2(); document.getElementById("Step3").style.display = "none"; document.getElementById("Step4_1").style.display = "none"; document.getElementById("Step4_2").style.display = "none"; document.getElementById("Step5_1").style.display = "none"; document.getElementById("Step5_2").style.display = "none"; document.getElementById("Step6_1").style.display = "none"; document.getElementById("Step6_2").style.display = "none"; document.getElementById("Step6_3").style.display = "none"; document.getElementById("Step7").style.display = "none"; document.getElementById("exit1").style.display = "none"; document.getElementById("exit3").style.display = "none"; document.getElementById("exit4").style.display = "none"; document.getElementById("exit5").style.display = "none"; document.getElementById("exit6").style.display = "none"; document.getElementById("exit7").style.display = "none"; document.getElementById("exit2").style.display = "table-row"; document.getElementById("zoomstep1").style.display="table-row"; document.getElementById("left1").innerHTML= left_b; document.getElementById("right1").innerHTML = right_b; document.getElementById("zoomstep2").style.display = "none"; document.getElementById("zoomstep3").style.display = "none"; document.getElementById("zoomstep4").style.display = "none"; document.getElementById("zoomstep5").style.display = "none"; document.getElementById("zoomstep6").style.display = "none"; list += "2,"; console.log("list:", list); } function draw2() { // set the scales on ruler for Step 2 //var scale1 = "'"+step1bound_l.toString()+"'"; var scale2 = "'"+(step1bound_l+10).toString()+"'"; var scale3 = "'"+(step1bound_l+20).toString()+"'"; var scale4 = "'"+(step1bound_l+30).toString()+"'"; var scale5 = "'"+(step1bound_l+40).toString()+"'"; var scale6 = "'"+(step1bound_l+50).toString()+"'"; // draw the scales //document.documentElement.style.setProperty('--ruler3-cm1', scale1); document.documentElement.style.setProperty('--ruler3-cm2', scale2); document.documentElement.style.setProperty('--ruler3-cm3', scale3); document.documentElement.style.setProperty('--ruler4-cm2', scale4); document.documentElement.style.setProperty('--ruler4-cm3', scale5); document.documentElement.style.setProperty('--ruler4-cm4', scale6); // // display button value document.getElementById('button3').value = "between " + left_b +" and " + mid ; document.getElementById('button4').value = "between " + (mid+1) +" and " + step1bound_r ; // display Step 2 document.getElementById("Step2").style.display = "table-row"; mouse(2,3,4); } function Step2L() { step2bound_l = step1bound_l; step2bound_r = (step1bound_l+step1bound_r)/2; if (step2bound_l==0) { left_b = step2bound_l; right_b= step2bound_r } else { left_b = step2bound_l+1; right_b = step2bound_r; } visualization.noUiSlider.set([left_b,right_b]); mid = Math.trunc((step2bound_r+step2bound_l)/2) draw3(); document.getElementById("Step4_1").style.display = "none"; document.getElementById("Step4_2").style.display = "none"; document.getElementById("Step5_1").style.display = "none"; document.getElementById("Step5_2").style.display = "none"; document.getElementById("Step6_1").style.display = "none"; document.getElementById("Step6_2").style.display = "none"; document.getElementById("Step6_3").style.display = "none"; document.getElementById("Step7").style.display = "none"; document.getElementById("exit2").style.display = "none"; document.getElementById("exit1").style.display = "none"; document.getElementById("exit4").style.display = "none"; document.getElementById("exit5").style.display = "none"; document.getElementById("exit6").style.display = "none"; document.getElementById("exit7").style.display = "none"; document.getElementById("exit3").style.display = "table-row"; document.getElementById("zoomstep2").style.display="table-row"; document.getElementById("left2").innerHTML= left_b; document.getElementById("right2").innerHTML = right_b; document.getElementById("zoomstep3").style.display = "none"; document.getElementById("zoomstep4").style.display = "none"; document.getElementById("zoomstep5").style.display = "none"; document.getElementById("zoomstep6").style.display = "none"; list += "3,"; } function Step2R() { step2bound_l = (step1bound_r+step1bound_l)/2; step2bound_r = step1bound_r; left_b = step2bound_l+1; right_b = step2bound_r; visualization.noUiSlider.set([left_b,right_b]); mid = Math.trunc((step2bound_l+step2bound_r)/2); draw3(); document.getElementById("Step4_1").style.display = "none"; document.getElementById("Step4_2").style.display = "none"; document.getElementById("Step5_1").style.display = "none"; document.getElementById("Step5_2").style.display = "none"; document.getElementById("Step6_1").style.display = "none"; document.getElementById("Step6_2").style.display = "none"; document.getElementById("Step6_3").style.display = "none"; document.getElementById("Step7").style.display = "none"; document.getElementById("exit2").style.display = "none"; document.getElementById("exit3").style.display = "table-row"; document.getElementById("exit1").style.display = "none"; document.getElementById("exit4").style.display = "none"; document.getElementById("exit5").style.display = "none"; document.getElementById("exit6").style.display = "none"; document.getElementById("exit7").style.display = "none"; document.getElementById("zoomstep2").style.display="table-row"; document.getElementById("left2").innerHTML= left_b; document.getElementById("right2").innerHTML = right_b; document.getElementById("zoomstep3").style.display = "none"; document.getElementById("zoomstep4").style.display = "none"; document.getElementById("zoomstep5").style.display = "none"; document.getElementById("zoomstep6").style.display = "none"; list += "4,"; } function draw3() { //var scale1 = "'"+step2bound_l.toString()+"'"; var scale2 = "'"+(step2bound_l+5).toString()+"'"; var scale3 = "'"+(step2bound_l+10).toString()+"'"; var scale4 = "'"+(step2bound_l+15).toString()+"'"; var scale5 = "'"+(step2bound_l+20).toString()+"'"; var scale6 = "'"+(step2bound_l+25).toString()+"'"; //display two rulers //document.documentElement.style.setProperty('--ruler5-cm1', scale1); document.documentElement.style.setProperty('--ruler5-cm2', scale2); document.documentElement.style.setProperty('--ruler5-cm3', scale3); document.documentElement.style.setProperty('--ruler6-cm2', scale4); document.documentElement.style.setProperty('--ruler6-cm3', scale5); document.documentElement.style.setProperty('--ruler6-cm4', scale6); document.getElementById('button5').value = "between "+left_b+" and " + mid ; document.getElementById('button6').value = "between "+ (mid+1) +" and " + step2bound_r ; // display Step 2 document.getElementById("Step3").style.display = "table-row"; mouse(3,5,6); } function Step3L() { step3bound_l = step2bound_l; step3bound_r = Math.trunc((step2bound_r+step2bound_l)/2); if (step3bound_l == 0) { left_b = step3bound_l; right_b = step3bound_r; } else { left_b = step3bound_l+1; right_b = step3bound_r; } visualization.noUiSlider.set([left_b,right_b]); if (step3bound_l % 25 == 0) { draw4_1(); } else { draw4_2(); } document.getElementById("Step5_1").style.display = "none"; document.getElementById("Step5_2").style.display = "none"; document.getElementById("Step6_1").style.display = "none"; document.getElementById("Step6_2").style.display = "none"; document.getElementById("Step6_3").style.display = "none"; document.getElementById("Step7").style.display = "none"; document.getElementById("exit3").style.display = "none"; document.getElementById("exit4").style.display = "table-row"; document.getElementById("exit1").style.display = "none"; document.getElementById("exit2").style.display = "none"; document.getElementById("exit5").style.display = "none"; document.getElementById("exit6").style.display = "none"; document.getElementById("exit7").style.display = "none"; document.getElementById("zoomstep3").style.display = "table-row"; document.getElementById("left3").innerHTML= left_b; document.getElementById("right3").innerHTML = right_b; document.getElementById("zoomstep4").style.display = "none"; document.getElementById("zoomstep5").style.display = "none"; document.getElementById("zoomstep6").style.display = "none"; list += "5,"; } function Step3R() { step3bound_l = Math.trunc((step2bound_r+step2bound_l)/2); step3bound_r = step2bound_r; left_b = step3bound_l+1; right_b = step3bound_r; visualization.noUiSlider.set([left_b,right_b]); if (step3bound_l % 25 == 0) { draw4_1(); } else { draw4_2(); } document.getElementById("Step5_1").style.display = "none"; document.getElementById("Step5_2").style.display = "none"; document.getElementById("Step6_1").style.display = "none"; document.getElementById("Step6_2").style.display = "none"; document.getElementById("Step6_3").style.display = "none"; document.getElementById("Step7").style.display = "none"; document.getElementById("exit3").style.display = "none"; document.getElementById("exit4").style.display = "table-row"; document.getElementById("exit1").style.display = "none"; document.getElementById("exit2").style.display = "none"; document.getElementById("exit5").style.display = "none"; document.getElementById("exit6").style.display = "none"; document.getElementById("exit7").style.display = "none"; document.getElementById("zoomstep3").style.display = "table-row"; document.getElementById("left3").innerHTML= left_b; document.getElementById("right3").innerHTML = right_b; document.getElementById("zoomstep4").style.display = "none"; document.getElementById("zoomstep5").style.display = "none"; document.getElementById("zoomstep6").style.display = "none"; list += "6,"; } function draw4_1() { var mid = Math.trunc((step3bound_r+step3bound_l)/2); //var scale1 = "'"+step3bound_l.toString()+"'"; var scale2 = "'"+(step3bound_l+4).toString()+"'"; var scale3 = "'"+(step3bound_l+8).toString()+"'"; var scale4 = "'"+(step3bound_l+12).toString()+"'"; //document.documentElement.style.setProperty('--ruler7-cm1', scale1); document.documentElement.style.setProperty('--ruler7-cm2', scale2); document.documentElement.style.setProperty('--ruler8-cm2', scale3); document.documentElement.style.setProperty('--ruler8-cm3', scale4); document.getElementById("Step4_1").style.display = "table-row"; document.getElementById("Step4_2").style.display = "none"; // the left most interval is [], the rest is (] document.getElementById('button7').value = "between "+ left_b+" and "+ mid; // the right interval is always (] document.getElementById('button8').value = "between " +(mid+1) +" and " + step3bound_r ; mouse(4,7,8); } function draw4_2() { var mid = Math.trunc((step3bound_r+step3bound_l)/2); //var scale1 = "'"+step3bound_l.toString()+"'"; var scale2 = "'"+(step3bound_l+3).toString()+"'"; var scale3 = "'"+(step3bound_l+6).toString()+"'"; var scale4 = "'"+(step3bound_l+7).toString()+"'"; var scale5 = "'"+(step3bound_l+10).toString()+"'"; var scale6 = "'"+(step3bound_l+13).toString()+"'"; //document.documentElement.style.setProperty('--ruler9-cm1', scale1); document.documentElement.style.setProperty('--ruler9-cm2', scale2); document.documentElement.style.setProperty('--ruler9-cm3', scale3); document.documentElement.style.setProperty('--ruler10-cm1', scale4); document.documentElement.style.setProperty('--ruler10-cm2', scale5); document.documentElement.style.setProperty('--ruler10-cm3', scale6); document.getElementById("Step4_2").style.display = "table-row"; document.getElementById("Step4_1").style.display = "none"; document.getElementById('button9').value = "between "+(step3bound_l+1)+" and "+mid; document.getElementById('button10').value = "between "+ (mid+1) +" and " + step3bound_r; mouse(4,9,10); } function Step4L() { step4bound_l = step3bound_l; step4bound_r = Math.trunc((step3bound_r+step3bound_l)/2); if (step4bound_l == 0) { left_b = step4bound_l; right_b = step4bound_r; } else { left_b = step4bound_l+1; right_b = step4bound_r; } visualization.noUiSlider.set([left_b,right_b]); if (step4bound_r % 25 == 0) { draw5_2(); } else { draw5_1(); } document.getElementById("Step6_1").style.display = "none"; document.getElementById("Step6_2").style.display = "none"; document.getElementById("Step6_3").style.display = "none"; document.getElementById("Step7").style.display = "none"; document.getElementById("exit4").style.display = "none"; document.getElementById("exit5").style.display = "table-row"; document.getElementById("exit1").style.display = "none"; document.getElementById("exit2").style.display = "none"; document.getElementById("exit3").style.display = "none"; document.getElementById("exit6").style.display = "none"; document.getElementById("exit7").style.display = "none"; document.getElementById("zoomstep4").style.display = "table-row"; document.getElementById("left4").innerHTML= left_b; document.getElementById("right4").innerHTML = right_b; document.getElementById("zoomstep5").style.display = "none"; document.getElementById("zoomstep6").style.display = "none"; list += "7,"; } function Step4R() { step4bound_l = Math.trunc((step3bound_r+step3bound_l)/2); step4bound_r = step3bound_r; left_b = step4bound_l+1; right_b = step4bound_r; visualization.noUiSlider.set([left_b,right_b]); if (step4bound_r % 25 == 0) { draw5_2(); } else { draw5_1(); } document.getElementById("Step6_1").style.display = "none"; document.getElementById("Step6_2").style.display = "none"; document.getElementById("Step6_3").style.display = "none"; document.getElementById("Step7").style.display = "none"; document.getElementById("exit4").style.display = "none"; document.getElementById("exit5").style.display = "table-row"; document.getElementById("exit1").style.display = "none"; document.getElementById("exit2").style.display = "none"; document.getElementById("exit3").style.display = "none"; document.getElementById("exit6").style.display = "none"; document.getElementById("exit7").style.display = "none"; document.getElementById("zoomstep4").style.display = "table-row"; document.getElementById("left4").innerHTML= left_b; document.getElementById("right4").innerHTML = right_b; document.getElementById("zoomstep5").style.display = "none"; document.getElementById("zoomstep6").style.display = "none"; list += "8,"; } function draw5_1() { var mid = Math.trunc((step4bound_r+step4bound_l)/2); //var scale1 = "'"+step4bound_l.toString()+"'"; var scale2 = "'"+(step4bound_l+1).toString()+"'"; var scale3 = "'"+(step4bound_l+2).toString()+"'"; var scale4 = "'"+(step4bound_l+3).toString()+"'"; var scale5 = "'"+(step4bound_l+4).toString()+"'"; var scale6 = "'"+(step4bound_l+5).toString()+"'"; var scale7 = "'"+(step4bound_l+6).toString()+"'"; //display two rulers //document.documentElement.style.setProperty('--ruler11-cm1', scale1); document.documentElement.style.setProperty('--ruler11-cm2', scale2); document.documentElement.style.setProperty('--ruler11-cm3', scale3); document.documentElement.style.setProperty('--ruler12-cm1', scale4); document.documentElement.style.setProperty('--ruler12-cm2', scale5); document.documentElement.style.setProperty('--ruler12-cm3', scale6); document.documentElement.style.setProperty('--ruler12-cm4', scale7); document.getElementById("Step5_1").style.display = "table-row"; document.getElementById("Step5_2").style.display = "none"; document.getElementById('button11').value = "between " + left_b+" and "+ mid ; document.getElementById('button12').value ="between " + (mid+1) +" and " + step4bound_r ; mouse(5,11,12); } function draw5_2() { var mid = Math.trunc((step4bound_r+step4bound_l)/2); //var scale1 = "'"+step4bound_l.toString()+"'"; var scale2 = "'"+(step4bound_l+1).toString()+"'"; var scale3 = "'"+(step4bound_l+2).toString()+"'"; var scale4 = "'"+(step4bound_l+3).toString()+"'"; var scale5 = "'"+(step4bound_l+4).toString()+"'"; var scale6 = "'"+(step4bound_l+5).toString()+"'"; var scale7 = "'"+(step4bound_l+6).toString()+"'"; var scale8 = "'"+(step4bound_l+7).toString()+"'"; //display two rulers //document.documentElement.style.setProperty('--ruler13-cm1', scale1); document.documentElement.style.setProperty('--ruler13-cm2', scale2); document.documentElement.style.setProperty('--ruler13-cm3', scale3); document.documentElement.style.setProperty('--ruler13-cm4', scale4); document.documentElement.style.setProperty('--ruler14-cm1', scale5); document.documentElement.style.setProperty('--ruler14-cm2', scale6); document.documentElement.style.setProperty('--ruler14-cm3', scale7); document.documentElement.style.setProperty('--ruler14-cm4', scale8); document.getElementById("Step5_2").style.display = "table-row"; document.getElementById("Step5_1").style.display = "none"; document.getElementById('button13').value = "between "+(step4bound_l+1)+" and " + mid ; document.getElementById('button14').value = "between "+(mid+1) +" and " + step4bound_r ; mouse(5,13,14); } function Step5L() { step5bound_l = step4bound_l; step5bound_r = Math.trunc((step4bound_r+step4bound_l)/2); if (step5bound_l == 0) { left_b = step5bound_l; right_b = step5bound_r; } else { left_b = step5bound_l+1; right_b = step5bound_r; } visualization.noUiSlider.set([left_b,right_b]); if (step5bound_l>=3 && step5bound_l<=9) { draw6_1(); } else if (step5bound_l>=12 && step5bound_l<=18) { draw6_3(); } else if (step5bound_l>=25 && step5bound_l<=34) { draw6_1(); } else if (step5bound_l>=37 && step5bound_l<=43) { draw6_3(); } else if (step5bound_l>=50 && step5bound_l<=59) { draw6_1(); } else if (step5bound_l>=62 && step5bound_l<=68) { draw6_3(); } else if (step5bound_l>=75 && step5bound_l<=84) { draw6_1(); } else if (step5bound_l>=87 && step5bound_l<=93) { draw6_3(); } else { draw6_2(); } document.getElementById("Step7").style.display = "none"; document.getElementById("exit5").style.display = "none"; document.getElementById("exit6").style.display = "table-row"; document.getElementById("exit1").style.display = "none"; document.getElementById("exit2").style.display = "none"; document.getElementById("exit4").style.display = "none"; document.getElementById("exit3").style.display = "none"; document.getElementById("exit7").style.display = "none"; document.getElementById("zoomstep5").style.display = "table-row"; document.getElementById("left5").innerHTML= left_b; document.getElementById("right5").innerHTML = right_b; document.getElementById("zoomstep6").style.display = "none"; list += "9,"; } function Step5R() { step5bound_l = Math.trunc((step4bound_r+step4bound_l)/2); step5bound_r = step4bound_r; left_b = step5bound_l+1; right_b = step5bound_r; visualization.noUiSlider.set([left_b,right_b]); if (step5bound_l>=3 && step5bound_l<=9) { draw6_1(); } else if (step5bound_l>=12 && step5bound_l<=18) { draw6_3(); } else if (step5bound_l>=25 && step5bound_l<=34) { draw6_1(); } else if (step5bound_l>=37 && step5bound_l<=43) { draw6_3(); } else if (step5bound_l>=50 && step5bound_l<=59) { draw6_1(); } else if (step5bound_l>=62 && step5bound_l<=68) { draw6_3(); } else if (step5bound_l>=75 && step5bound_l<=84) { draw6_1(); } else if (step5bound_l>=87 && step5bound_l<=93) { draw6_3(); } else { draw6_2(); } document.getElementById("Step7").style.display = "none"; document.getElementById("exit5").style.display = "none"; document.getElementById("exit6").style.display = "table-row"; document.getElementById("exit1").style.display = "none"; document.getElementById("exit3").style.display = "none"; document.getElementById("exit4").style.display = "none"; document.getElementById("exit2").style.display = "none"; document.getElementById("exit7").style.display = "none"; document.getElementById("zoomstep5").style.display = "table-row"; document.getElementById("left5").innerHTML= left_b; document.getElementById("right5").innerHTML = right_b; document.getElementById("zoomstep6").style.display = "none"; list += "10,"; } function draw6_1() { var scale1 = "'"+(step5bound_l+1).toString()+"'"; var scale2 = "'"+(step5bound_l+2).toString()+"'"; var scale3 = "'"+(step5bound_l+3).toString()+"'"; //display two rulers document.documentElement.style.setProperty('--ruler15-cm1', scale1); document.documentElement.style.setProperty('--ruler16-cm1', scale2); document.documentElement.style.setProperty('--ruler16-cm2', scale3); document.getElementById("Step6_1").style.display = "table-row"; document.getElementById("Step6_2").style.display = "none"; document.getElementById("Step6_3").style.display = "none"; document.getElementById('button15').value = (step5bound_l+1) ; document.getElementById('button16').value = (step5bound_l+2) + " and " + step5bound_r ; mouse(6,15,16); } function draw6_2() { var mid = Math.trunc((step5bound_r+step5bound_l)/2); var scale1 = "'"+(mid-1).toString()+"'"; var scale2 = "'"+mid.toString()+"'"; var scale3 = "'"+(mid+1).toString()+"'"; var scale4 = "'"+step5bound_r.toString()+"'"; //display two rulers document.documentElement.style.setProperty('--ruler17-cm1', scale1); document.documentElement.style.setProperty('--ruler17-cm2', scale2); document.documentElement.style.setProperty('--ruler18-cm2', scale3); document.documentElement.style.setProperty('--ruler18-cm3', scale4); document.getElementById("Step6_2").style.display = "table-row"; document.getElementById("Step6_1").style.display = "none"; document.getElementById("Step6_3").style.display = "none"; document.getElementById('button17').value = left_b +" and " + mid ; document.getElementById('button18').value = (mid+1) +" and " + step5bound_r ; mouse(6,17,18); } function draw6_3() { var scale1 = "'"+(step5bound_l+1).toString()+"'"; var scale2 = "'"+(step5bound_l+2).toString()+"'"; var scale3 = "'"+(step5bound_l+3).toString()+"'"; //display two rulers document.documentElement.style.setProperty('--ruler19-cm1', scale1); document.documentElement.style.setProperty('--ruler19-cm2', scale2); document.documentElement.style.setProperty('--ruler20-cm1', scale3); document.getElementById("Step6_3").style.display = "table-row"; document.getElementById("Step6_2").style.display = "none"; document.getElementById("Step6_1").style.display = "none"; document.getElementById('button19').value = (step5bound_l + 1) + " and " + (step5bound_l + 2) ; document.getElementById('button20').value = step5bound_r ; mouse(6,19,20); } function Step6Ls() { step6bound_l = step5bound_l+1; step6bound_r = 999; left_b = step6bound_l; right_b = step6bound_l; visualization.noUiSlider.set([left_b,right_b]); step7 = 999; document.getElementById("exit6").style.display = "none"; document.getElementById("exit1").style.display = "none"; document.getElementById("exit3").style.display = "none"; document.getElementById("exit4").style.display = "none"; document.getElementById("exit5").style.display = "none"; document.getElementById("exit2").style.display = "none"; document.getElementById("left_b").value = left_b; document.getElementById("right_b").value = right_b; list += "11,"; document.getElementById("list").value = list; } function Step6Rc() { step6bound_l = step5bound_r-1; step6bound_r = step5bound_r; left_b = step6bound_l; right_b = step6bound_r; visualization.noUiSlider.set([left_b,right_b]); draw7(); document.getElementById("exit6").style.display = "none"; document.getElementById("exit7").style.display = "table-row"; document.getElementById("exit1").style.display = "none"; document.getElementById("exit3").style.display = "none"; document.getElementById("exit4").style.display = "none"; document.getElementById("exit5").style.display = "none"; document.getElementById("exit2").style.display = "none"; document.getElementById("zoomstep6").style.display = "table-row"; document.getElementById("left6").innerHTML= left_b; document.getElementById("right6").innerHTML = right_b; list += "12,"; } function Step6Lc2() { step6bound_l = step5bound_l; step6bound_r = Math.trunc((step5bound_l+step5bound_r)/2); //console.log("step6bound_l", step6bound_l) //console.log("step6bound_r", step6bound_r) if (step6bound_l == 0) { left_b = step6bound_l; right_b = step6bound_r; } else { left_b = step6bound_l+1; right_b = step6bound_r; } visualization.noUiSlider.set([left_b,right_b]); draw7(); document.getElementById("exit6").style.display = "none"; document.getElementById("exit7").style.display = "table-row"; document.getElementById("exit1").style.display = "none"; document.getElementById("exit3").style.display = "none"; document.getElementById("exit4").style.display = "none"; document.getElementById("exit5").style.display = "none"; document.getElementById("exit2").style.display = "none"; document.getElementById("zoomstep6").style.display = "table-row"; document.getElementById("left6").innerHTML= left_b; document.getElementById("right6").innerHTML = right_b; list += "11,"; } function Step6Rc2() { step6bound_l = Math.trunc((step5bound_l+step5bound_r)/2); step6bound_r = step5bound_r; left_b = step6bound_l+1; right_b = step6bound_r; visualization.noUiSlider.set([left_b,right_b]); draw7(); document.getElementById("exit6").style.display = "none"; document.getElementById("exit7").style.display = "table-row"; document.getElementById("exit1").style.display = "none"; document.getElementById("exit3").style.display = "none"; document.getElementById("exit4").style.display = "none"; document.getElementById("exit5").style.display = "none"; document.getElementById("exit2").style.display = "none"; document.getElementById("zoomstep6").style.display = "table-row"; document.getElementById("left6").innerHTML= left_b; document.getElementById("right6").innerHTML = right_b; list += "12,"; } function Step6Lc() { step6bound_l = step5bound_l+1; step6bound_r = step5bound_l+2; left_b = step6bound_l; right_b = step6bound_r; visualization.noUiSlider.set([left_b,right_b]); document.getElementById("exit6").style.display = "none"; document.getElementById("exit7").style.display = "table-row"; document.getElementById("exit1").style.display = "none"; document.getElementById("exit3").style.display = "none"; document.getElementById("exit4").style.display = "none"; document.getElementById("exit5").style.display = "none"; document.getElementById("exit2").style.display = "none"; document.getElementById("zoomstep6").style.display = "table-row"; document.getElementById("left6").innerHTML= left_b; document.getElementById("right6").innerHTML = right_b; list += "11,"; draw7(); } function Step6Rs() { step6bound_l = step5bound_r; step6bound_r = 999; left_b = step6bound_l; right_b = step6bound_l; visualization.noUiSlider.set([left_b,right_b]); step7 = 999; document.getElementById("exit6").style.display = "none"; document.getElementById("exit1").style.display = "none"; document.getElementById("exit3").style.display = "none"; document.getElementById("exit4").style.display = "none"; document.getElementById("exit5").style.display = "none"; document.getElementById("exit2").style.display = "none"; document.getElementById("left_b").value = left_b; document.getElementById("right_b").value = right_b; list += "12,"; document.getElementById("list").value = list; } function draw7() { var scale1 = "'"+left_b.toString()+"'"; var scale2 = "'"+right_b.toString()+"'"; //display two rulers document.documentElement.style.setProperty('--ruler21-cm1', scale1); document.documentElement.style.setProperty('--ruler22-cm1', scale2); document.getElementById("Step7").style.display = "table-row"; document.getElementById('button21').value = left_b; document.getElementById('button22').value = right_b; mouse(7,21,22); } function Step7L() { step7 = left_b; visualization.noUiSlider.set([left_b,left_b]); document.getElementById("left_b").value = step7; document.getElementById("right_b").value = step7; list += "13,"; document.getElementById("list").value = list; } function Step7R() { step7 = right_b; visualization.noUiSlider.set([right_b,right_b]); document.getElementById("left_b").value = step7; document.getElementById("right_b").value = step7; list += "14,"; document.getElementById("list").value = list; }