Make one

If you are viewing this on a mobile device, you will see drop-down menus with pre-coded values.

If you are viewing on a desktop computer, you can type the number and color. If you can type, then you can enter characters other than numbers, for example "A", but if you enter several characters, they will probably not all fit in the SVG-drawn box.

You can also enter any valid HTML color like "ivory" or any valid CSS color like "#80a0c0".

Behind the Scenes

This form uses JavaScript that is included from a separate file. You can view the code here:

//-----------------------------------------------------------------------
//     GLOBAL VARIABLES can be used to change the size and spacing
//                      of the checkers.
//-----------------------------------------------------------------------
var spacing = 80;
var box_width = 48;
var box_height = 48;
var nose_size = 10;

var shapes = [ 
  "top", "right", "bottom", "left", "horiz", "vert", "all", "none" ];
  
var colors = [ 
  "black", "brown", "red", "orange", "yellow",
  "green", "blue", "violet", "gray", "white" ];

// text colors that will contrast nicely with the above fill colors
text_colors = [
  "white", "white", "black", "black", "black",
  "white", "white", "black", "white", "black" ];
  
//-----------------------------------------------------------------------
function get_text_color (c)
//-----------------------------------------------------------------------
{
  // get the text color that contrasts with this background color
  //
  for (var i=0; i<colors.length; i++) {
    if (c.toLowerCase() == colors[i].toLowerCase())
      return (text_colors[i]);
  }
  return ("black");
}

//-----------------------------------------------------------------------
function format_string (s, v)
//-----------------------------------------------------------------------
{
  // sort of like printf
  //
  var rv = s;
    for (var i=0; i<v.length; i++) {
      rv = rv.replace ("%s", v[i]);
  }
  return rv;
}

//-----------------------------------------------------------------------
function draw_nose (x, y)
//-----------------------------------------------------------------------
{  
  // draw the little box that indicates facing direction
  //
  var nose_string = format_string (
    "<rect x='%s' y='%s' height='%s' width='%s' fill='black' />\n", [x, y, nose_size, nose_size]);
  return (nose_string);
}

//-----------------------------------------------------------------------
function draw_square (nose, number, row, col, color)
//-----------------------------------------------------------------------
{
  // draw everything:
  // - the box outline
  // - the background
  // - the nose
  // - the text
  // "row" and "col" are not really used in this project
  //   but they were used in a previous project and kept around.

  var x = row * spacing + nose_size; // 10;
  var y = col * spacing + nose_size; // 10;
  var nose_offset_h = (box_width-nose_size)/2;
  var nose_offset_v = (box_height-nose_size)/2;

  var svg_string = format_string (
    "<rect x='%s' y='%s' height='%s' width='%s' stroke='black' stroke-width='1' fill='%s' />\n", 
    [x, y, box_height, box_width, color ]);

  if (nose == "top" || nose == "vert" || nose == "all") {
    svg_string += draw_nose (x+nose_offset_h, y-nose_size);
  }
  if (nose == "bottom" || nose == "vert" || nose == "all") {
    svg_string += draw_nose (x+nose_offset_h, y+box_height);
  }
  if (nose == "left" || nose == "horiz" || nose == "all") {
    svg_string += draw_nose (x-nose_size, y+nose_offset_v);
  }
  if (nose == "right" || nose == "horiz" || nose == "all") {
    svg_string += draw_nose (x+box_width, y+nose_offset_v);
  }
  
  var text_offset_h = box_width * (1/4) + 2;
  var text_offset_v = box_height * (3/4);
  var font_size = box_height * 2/3;
  var text_string = format_string (
    "<text x='%s' y='%s' fill='%s' style='font-size:%spx;'>%s</text>\n",
    [x+text_offset_h, y+text_offset_v, get_text_color (color), font_size, number]);
  svg_string += text_string;
  return (svg_string);
}