Balbir's Blog: 10/01/2013

Monday, October 28, 2013

My first useful JavaScript program

I was recently going through my son's workbook and it had an interest way of teaching addition - probably the Montessori method. The idea was to create a table of sum's of a few numbers and color numbers to see a pattern. I was quite amused and decided to see if I could write the code in JavaScript, a language I am trying to learn, I am going to do some additional work like graphical Towers of Hanoi with it as well, but for now I wanted to start simple

Guess what - I succeeded in writing what I consider as a useful program (although I wrote it quite badly)

Here is the code

	<html>
	<title> Summation for Children </title>
	<style type="text/css">
	table.school {
	font-family: verdana,arial,sans-serif;
	font-size:11px;
	color:#333333;
	border-width: 1px;
	border-color: #999999;
	border-collapse: collapse;
	}
	table.school th {
	background:#FAFAD2;
	border-width: 1px;
	padding: 8px;
	border-style: solid;
	border-color: #999999;
	}

	table.school td {
	background:#FAFAD2;
	border-width: 1px;
	padding: 8px;
	border-style: solid;
	border-color: #999999;
	}

	</style>
	<body>

	</body>
	<script src="buildsum.js"></script>
	</html>

view raw gistfile1.txt hosted with ❤ by GitHub

Here is the Javascript

	var n = 5;
	var red="FF0000";
	var blue="87CEFA";
	var green="00FF00";
	var purple="A020F0";
	var orange="FFA500";
	var yellow="FFFF00";

	document.writeln("<table class=\"school\" id=\"sumtable\">");
	var tableid=document.getElementById("sumtable");
	var rows=tableid.getElementsByTagName("tr");
	var color = "red";
	var ids=1;
	var el;

	document.writeln("<tr>");
	document.write("<th>");
	document.write("+");
	document.write("</th>");
	for (i = 0; i <= n; i++) {
	document.write("<th>");
	document.write(i);
	document.write("</th>");
	}
	document.writeln("</tr>");


	for (i = 1; i <= n+1; i++) {
	document.writeln("<tr>");
	for (j = -1; i+j-1 <= n; j++) {
	if (j == -1) {
	document.write("<th>");
	document.write(i+j);
	document.write("</th>");
	} else {
	document.write("<td id=\"" + ids + "\">");
	el = document.getElementById(ids);
	switch (i+j-1) {
	case 0:
	el.style.backgroundColor="#" + red.toString(16);
	break;
	case 1:
	el.style.backgroundColor="#" + purple.toString(16);
	break;
	case 2:
	el.style.backgroundColor="#" + blue.toString(16);
	break;
	case 3:
	el.style.backgroundColor="#" + orange.toString(16);
	break;
	case 4:
	el.style.backgroundColor="#" + yellow.toString(16);
	break;
	case 5:
	el.style.backgroundColor="#" + green.toString(16);
	break;
	}
	ids++;
	document.write(i+j-1);
	document.write("</td>");
	}
	}
	document.writeln("</tr>");
	}
	document.writeln("</table>");

view raw gistfile1.txt hosted with ❤ by GitHub

Here is the output

Friday, October 11, 2013

Your code is only as good as the tests you run on it

Computer programs have an interesting well known quality - even incorrect programs can produce the desired output for a subset of inputs. I recently re-learnt this while doing my graphical convex hull implementation

I started with a test strategy of random test generation. Use a good random number generator to generate

Number of random points as input
The random points themselves

This strategy helped me test the program from crashes/instability and showed a potential functional issue that showed up when a large number of points were generated. See the diagram below

Can you spot the problem? I now need a specific test case to isolate the problem, random inputs did not provide the necessary clue with smaller inputs. Luckily for me, I found a good set of inputs at http://stackoverflow.com/questions/482278/test-case-data-for-convex-hull

I ran three test cases and found the first two ran fine

The third one was a hit, it broke my algorithm

Beautiful visualization, but the code was clearly broken. After looking at the diagram and looking at the code, I realized that I was not handling co-linear points correctly. Finally, I got

Now, I am back to the random testing strategy and have gotten satisfactory results so far

NOTE: My test feedback strategy is based on visualization, one could even automate the tests

Balbir's Blog

Monday, October 28, 2013

My first useful JavaScript program

Friday, October 11, 2013

Your code is only as good as the tests you run on it

Ranking and Unranking permutations

Search This Blog