//define variables for all buttons, rulers, and bounds
    var button1 = document.getElementById("button1");
    var button2 = document.getElementById("button2");
    var button3 = document.getElementById("button3");
    var button4 = document.getElementById("button4");
    var button5 = document.getElementById("button5");
    var button6 = document.getElementById("button6");
    var button7 = document.getElementById("button7");
    var button8 = document.getElementById("button8");
    var button9 = document.getElementById("button9");
    var button10 = document.getElementById("button10");
    var button11 = document.getElementById("button11");
    var button12 = document.getElementById("button12");
    var button13 = document.getElementById("button13");
    var button14 = document.getElementById("button14");
    var button15 = document.getElementById("button15");
    var button16 = document.getElementById("button16");
    var button17 = document.getElementById("button17");
    var button18 = document.getElementById("button18");
    var button19 = document.getElementById("button19");
    var button20 = document.getElementById("button20");
    var button21 = document.getElementById("button21");
    var button22 = document.getElementById("button22");
    var exit1 = document.getElementById("exit1");
    var exit2 = document.getElementById("exit2");
    var exit3 = document.getElementById("exit3");
    var exit4 = document.getElementById("exit4");
    var exit5 = document.getElementById("exit5");
    var exit6 = document.getElementById("exit6");
    var exit7 = document.getElementById("exit7");
    var ruler1 = document.getElementById("ruler1");
    var ruler2 = document.getElementById("ruler2");
    var ruler3 = document.getElementById("ruler3");
    var ruler4 = document.getElementById("ruler4");
    var ruler5 = document.getElementById("ruler5");
    var ruler6 = document.getElementById("ruler6");
    var ruler7 = document.getElementById("ruler7");
    var ruler8 = document.getElementById("ruler8");
    var ruler9 = document.getElementById("ruler9");
    var ruler10 = document.getElementById("ruler10");
    var ruler11 = document.getElementById("ruler11");
    var ruler12 = document.getElementById("ruler12");
    var ruler13 = document.getElementById("ruler13");
    var ruler14 = document.getElementById("ruler14");
    var ruler15 = document.getElementById("ruler15");
    var ruler16 = document.getElementById("ruler16");
    var ruler17 = document.getElementById("ruler17");
    var ruler18 = document.getElementById("ruler18");
    var ruler19 = document.getElementById("ruler19");
    var ruler20 = document.getElementById("ruler20");
    var ruler21 = document.getElementById("ruler21");
    var ruler22 = document.getElementById("ruler22");
    var list="";
    // console.log("list:", list);

    // change the background color of the ruler when hover on the choice button
    button1.onmouseover = function (){
        ruler1.style.backgroundColor = "dodgerblue";
    }
    // recover to the original background color of the ruler when mouse out
    button1.onmouseout = function(){
        ruler1.style.backgroundColor = "";
    }
    button2.onmouseover = function (){
        ruler2.style.backgroundColor = "dodgerblue";
    }
    button2.onmouseout = function(){
        ruler2.style.backgroundColor = "";
    }

    exit1.onmouseover = function (){
        ruler1.style.backgroundColor = "dodgerblue";
        ruler2.style.backgroundColor = "dodgerblue";
    }

    exit1.onmouseout = function () {
        ruler1.style.backgroundColor = "";
        ruler2.style.backgroundColor = "";
    }

    var step1bound_l;
    var step1bound_r;
    var step2bound_l;
    var step2bound_r;
    var step3bound_l;
    var step3bound_r;
    var step4bound_l;
    var step4bound_r;
    var step5bound_l;
    var step5bound_r;
    var step6bound_l;
    var step6bound_r;
    var step7;
    var left_b;
    var right_b;


    function Exit1() {
        document.getElementById("left_b").value = 0;
        document.getElementById("right_b").value = 100;
        console.log("exit1_list:", list);
        document.getElementById("list").value = "none";
    }

    function Step1L() {
        step1bound_l = 0;
        step1bound_r = 50;
        left_b = step1bound_l;
        right_b = step1bound_r;
        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;
        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";

        button3.onmouseover = function (){
            ruler3.style.backgroundColor = "dodgerblue";
        }
        button3.onmouseout = function(){
            ruler3.style.backgroundColor = "";
        }
        button4.onmouseover = function (){
            ruler4.style.backgroundColor = "dodgerblue";
        }
        button4.onmouseout = function(){
            ruler4.style.backgroundColor = "";
        }
        exit2.onmouseover = function (){
            ruler3.style.backgroundColor = "dodgerblue";
            ruler4.style.backgroundColor = "dodgerblue";
        }

        exit2.onmouseout = function () {
            ruler3.style.backgroundColor = "";
            ruler4.style.backgroundColor = "";
        }
    }

    function Exit2() {
        document.getElementById("left_b").value = left_b;
        document.getElementById("right_b").value = right_b;
        console.log("exit2_list:", list);
        document.getElementById("list").value = list;
    }

    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;
        }
        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;
        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";

        button5.onmouseover = function (){
            ruler5.style.backgroundColor = "dodgerblue";
        }
        button5.onmouseout = function(){
            ruler5.style.backgroundColor = "";
        }
        button6.onmouseover = function (){
            ruler6.style.backgroundColor = "dodgerblue";
        }
        button6.onmouseout = function(){
            ruler6.style.backgroundColor = "";
        }

        exit3.onmouseover = function (){
            ruler5.style.backgroundColor = "dodgerblue";
            ruler6.style.backgroundColor = "dodgerblue";
        }

        exit3.onmouseout = function () {
            ruler5.style.backgroundColor = "";
            ruler6.style.backgroundColor = "";
        }
    }

    function Exit3() {
        document.getElementById("left_b").value = left_b;
        document.getElementById("right_b").value = right_b;
        document.getElementById("list").value = list;
    }

    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;
        }
        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;
        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 ;


        button7.onmouseover = function (){
            ruler7.style.backgroundColor = "dodgerblue";
        }
        button7.onmouseout = function(){
            ruler7.style.backgroundColor = "";
        }
        button8.onmouseover = function (){
            ruler8.style.backgroundColor = "dodgerblue";
        }
        button8.onmouseout = function(){
            ruler8.style.backgroundColor = "";
        }
        exit4.onmouseover = function (){
            ruler7.style.backgroundColor = "dodgerblue";
            ruler8.style.backgroundColor = "dodgerblue";
        }

        exit4.onmouseout = function () {
            ruler7.style.backgroundColor = "";
            ruler8.style.backgroundColor = "";
        }
    }

    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;

        button9.onmouseover = function (){
            ruler9.style.backgroundColor = "dodgerblue";
        }
        button9.onmouseout = function(){
            ruler9.style.backgroundColor = "";
        }
        button10.onmouseover = function (){
            ruler10.style.backgroundColor = "dodgerblue";
        }
        button10.onmouseout = function(){
            ruler10.style.backgroundColor = "";
        }

        exit4.onmouseover = function (){
            ruler9.style.backgroundColor = "dodgerblue";
            ruler10.style.backgroundColor = "dodgerblue";
        }

        exit4.onmouseout = function () {
            ruler9.style.backgroundColor = "";
            ruler10.style.backgroundColor = "";
        }

    }

    function Exit4() {
        document.getElementById("left_b").value = left_b;
        document.getElementById("right_b").value = right_b;
        document.getElementById("list").value = list;
    }

    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;
        }
        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;
        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 ;

        button11.onmouseover = function (){
            ruler11.style.backgroundColor = "dodgerblue";
        }
        button11.onmouseout = function(){
            ruler11.style.backgroundColor = "";
        }
        button12.onmouseover = function (){
            ruler12.style.backgroundColor = "dodgerblue";
        }
        button12.onmouseout = function(){
            ruler12.style.backgroundColor = "";
        }
        exit5.onmouseover = function (){
            ruler11.style.backgroundColor = "dodgerblue";
            ruler12.style.backgroundColor = "dodgerblue";
        }

        exit5.onmouseout = function () {
            ruler11.style.backgroundColor = "";
            ruler12.style.backgroundColor = "";
        }
    }

    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 ;

        button13.onmouseover = function (){
            ruler13.style.backgroundColor = "dodgerblue";
        }
        button13.onmouseout = function(){
            ruler13.style.backgroundColor = "";
        }
        button14.onmouseover = function (){
            ruler14.style.backgroundColor = "dodgerblue";
        }
        button14.onmouseout = function(){
            ruler14.style.backgroundColor = "";
        }
        exit5.onmouseover = function (){
            ruler13.style.backgroundColor = "dodgerblue";
            ruler14.style.backgroundColor = "dodgerblue";
        }

        exit5.onmouseout = function () {
            ruler13.style.backgroundColor = "";
            ruler14.style.backgroundColor = "";
        }
    }

    function Exit5() {
        document.getElementById("left_b").value = left_b;
        document.getElementById("right_b").value = right_b;
        document.getElementById("list").value = list;
    }

    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;
        }
        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;
        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 ;

        button15.onmouseover = function (){
            ruler15.style.backgroundColor = "dodgerblue";
        }

        button15.onmouseout = function(){
            ruler15.style.backgroundColor = "";
        }

        button16.onmouseover = function (){
            ruler16.style.backgroundColor = "dodgerblue";
        }

        button16.onmouseout = function(){
            ruler16.style.backgroundColor = "";
        }

        exit6.onmouseover = function (){
            ruler15.style.backgroundColor = "dodgerblue";
            ruler16.style.backgroundColor = "dodgerblue";
        }

        exit6.onmouseout = function () {
            ruler15.style.backgroundColor = "";
            ruler16.style.backgroundColor = "";
        }
    }

    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 ;

        button17.onmouseover = function (){
            ruler17.style.backgroundColor = "dodgerblue";
        }

        button17.onmouseout = function(){
            ruler17.style.backgroundColor = "";
        }

        button18.onmouseover = function (){
            ruler18.style.backgroundColor = "dodgerblue";
        }

        button18.onmouseout = function(){
            ruler18.style.backgroundColor = "";
        }

        exit6.onmouseover = function (){
            ruler17.style.backgroundColor = "dodgerblue";
            ruler18.style.backgroundColor = "dodgerblue";
        }

        exit6.onmouseout = function () {
            ruler17.style.backgroundColor = "";
            ruler18.style.backgroundColor = "";
        }
    }

    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 ;

        button19.onmouseover = function (){
            ruler19.style.backgroundColor = "dodgerblue";
        }

        button19.onmouseout = function(){
            ruler19.style.backgroundColor = "";
        }

        button20.onmouseover = function (){
            ruler20.style.backgroundColor = "dodgerblue";
        }

        button20.onmouseout = function(){
            ruler20.style.backgroundColor = "";
        }
        exit6.onmouseover = function (){
            ruler19.style.backgroundColor = "dodgerblue";
            ruler20.style.backgroundColor = "dodgerblue";
        }

        exit6.onmouseout = function () {
            ruler19.style.backgroundColor = "";
            ruler20.style.backgroundColor = "";
        }

    }

    function Exit6() {
        document.getElementById("left_b").value = left_b;
        document.getElementById("right_b").value = right_b;
        document.getElementById("list").value = list;
    }

    function Step6Ls() {
        step6bound_l = step5bound_l+1;
        step6bound_r = 999;
        left_b = step6bound_l;
        right_b = step6bound_l;
        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;
        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;
        }
        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;
        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;
        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;
        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 Exit7() {
        document.getElementById("left_b").value = left_b;
        document.getElementById("right_b").value = right_b;
    }


    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;

        button21.onmouseover = function (){
            ruler21.style.backgroundColor = "dodgerblue";
        }
        // recover to the original background color of the ruler when mouse out
        button21.onmouseout = function(){
            ruler21.style.backgroundColor = "";
        }

        button22.onmouseover = function (){
            ruler22.style.backgroundColor = "dodgerblue";
        }

        button22.onmouseout = function(){
            ruler22.style.backgroundColor = "";
        }

        exit7.onmouseover = function (){
            ruler21.style.backgroundColor = "dodgerblue";
            ruler22.style.backgroundColor = "dodgerblue";
        }

        exit7.onmouseout = function () {
            ruler21.style.backgroundColor = "";
            ruler22.style.backgroundColor = "";
        }

    }

    function Step7L() {
        step7 = 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;
        document.getElementById("left_b").value = step7;
        document.getElementById("right_b").value = step7;
        list += "14,";
        document.getElementById("list").value = list;
    }