randcode-generator/animation2.html

## animation2.html
<html>
  <script src="https://code.jquery.com/jquery-3.5.1.slim.js" integrity="sha256-DrT5NfxfbHvMHux31Lkhxg42LY6of8TaYyK50jnxRnM=" crossorigin="anonymous"></script>
  <body>
    <div id="table1"></div>
    <br>
    <button onclick="next()">next</button>
    <div id="stackid"></div>
    <div id="dictid"></div>
  </body>
  <script>
    var data = [
                [0, 1, 0, 1, 0],
                [0, 0, 0, 0, 1],
                [0, 0, 0, 0, 0],
                [0, 0, 1, 0, 0],
                [0, 0, 1, 0, 0]
                ]

    let x = 0
    temp1 = {0:[], 1:[], 2:[], 3:[], 4:[]}
    function next() {
      for (let i = 0; i < data[0].length; i++) {
        $("#a"+x+"_"+i).css('background-color', '#a3e697')
        if(data[x][i] == 1) {
          str = "<span>"+ x + " * 1231 + "+ i+" * 1237</span> = " + (x*1231+i*1237) + "<br>"
          $("#stackid").append(str)
          temp1[i].push(x)
          $("#dictid").html("<pre>"+JSON.stringify(temp1, null)+"</pre>")
        }
      }

      $("#stackid").append("<hr>")
      if(x >= 1){
        for (let i = 0; i < data[0].length; i++) {
          $("#a"+(x-1)+"_"+i).css('background-color', '')
        }
      }
      $("#a1_4").css('background-color', '#ec8cbb')
      $("#a3_2").css('background-color', '#ec8cbb')
      $("#a4_2").css('background-color', '#ec8cbb')
      x++;
    }

    function makeTable(container, data, head="a") {
        var table = $("<table/>");
        $.each(data, function(rowIndex, r) {
            var row = $("<tr/>");
            $.each(r, function(colIndex, c) {
                row.append($("<td id="+ head + rowIndex + "_" + colIndex + ">").text(c));
            });
            table.append(row);
        });
        return container.append(table);
    }
    $(document).ready(function() {
      makeTable($("#table1"), data);
      $("#a1_4").css('background-color', '#ec8cbb')
      $("#a3_2").css('background-color', '#ec8cbb')
      $("#a4_2").css('background-color', '#ec8cbb')
    });
  </script>
</html>
	<html>
	<script src="https://code.jquery.com/jquery-3.5.1.slim.js" integrity="sha256-DrT5NfxfbHvMHux31Lkhxg42LY6of8TaYyK50jnxRnM=" crossorigin="anonymous"></script>
	<body>
	<div id="table1"></div>
	<br>
	<button onclick="next()">next</button>
	<div id="stackid"></div>
	<div id="dictid"></div>
	</body>
	<script>
	var data = [
	[0, 1, 0, 1, 0],
	[0, 0, 0, 0, 1],
	[0, 0, 0, 0, 0],
	[0, 0, 1, 0, 0],
	[0, 0, 1, 0, 0]
	]

	let x = 0
	temp1 = {0:[], 1:[], 2:[], 3:[], 4:[]}
	function next() {
	for (let i = 0; i < data[0].length; i++) {
	$("#a"+x+"_"+i).css('background-color', '#a3e697')
	if(data[x][i] == 1) {
	str = "<span>"+ x + " * 1231 + "+ i+" * 1237</span> = " + (x1231+i1237) + "<br>"
	$("#stackid").append(str)
	temp1[i].push(x)
	$("#dictid").html("<pre>"+JSON.stringify(temp1, null)+"</pre>")
	}
	}

	$("#stackid").append("<hr>")
	if(x >= 1){
	for (let i = 0; i < data[0].length; i++) {
	$("#a"+(x-1)+"_"+i).css('background-color', '')
	}
	}
	$("#a1_4").css('background-color', '#ec8cbb')
	$("#a3_2").css('background-color', '#ec8cbb')
	$("#a4_2").css('background-color', '#ec8cbb')
	x++;
	}

	function makeTable(container, data, head="a") {
	var table = $("<table/>");
	$.each(data, function(rowIndex, r) {
	var row = $("<tr/>");
	$.each(r, function(colIndex, c) {
	row.append($("<td id="+ head + rowIndex + "_" + colIndex + ">").text(c));
	});
	table.append(row);
	});
	return container.append(table);
	}
	$(document).ready(function() {
	makeTable($("#table1"), data);
	$("#a1_4").css('background-color', '#ec8cbb')
	$("#a3_2").css('background-color', '#ec8cbb')
	$("#a4_2").css('background-color', '#ec8cbb')
	});
	</script>
	</html>