Sometimes it is necessary to layout radio buttons freely on a Web page. I once performed an experiment, in which I asked the human subjects to answer the sound direction and distance after hearing a spatialized sound. For this purpose, I used a Web page that contained radio buttons. The subjects answered by clicking one of the buttons. This method enables free layout of buttons, e.g., circular or any other layout, but the layout must be decided carefully not to overlay them with other contents. So, when it is possible to layout the buttons in an easier method, for example by a table, this method should not be used.
You can see the source code of this page, a radio button is basically represented by an HTML tag such as the one below.
<div style="position:absolute; left:xcoordinate px; top:ycoordinate px;">button</div>
Because the coordinates are specified by pixel, the location of a button does not move when changing other contents, such as the font size of the characters, so it may overlap with other contents. In the case of this page, I added extra white space not to overlap, but still they may overlap under some conditions.
An example of a Perl CGI program that generates a page with such a radio button. I had to write a more complicated program for the experiment, but a much more simpler program is shown here.
#!/usr/bin/perl -- # -*-Perl-*-
############################################################################
#
# Print radio button circle
#
############################################################################
use strict;
### print_button_circle($tableName, $y0, $value)
# print a radio button array
#
sub print_button_circle($$$) {
my ($tableName, $y0, $value) = @_;
my $factor = 40;
my $roomSize = $factor * 5;
my $Pi = 3.1416;
# Display center of the circle
my $x = $factor * 2.25 + 13;
my $y = $factor * 2.25 + $y0 - 3;
print "<div style=\"position:absolute; left:${x}px; top:${y}px;\">";
print "+</div>\n";
# Display radio buttons
my $distance = 1;
for (my $angle = 1; $angle <= 12; $angle++) {
my $r = $factor * $distance;
my $displacement = $factor * (2.25 - $distance);
my $x = int($r * (1 + cos($Pi*($angle-1)/6))) + $displacement + 8;
my $y = int($r * (1 + sin($Pi*($angle-1)/6))) + $displacement + $y0;
my $checked = $value eq $angle ? 'checked="checked" ' : "";
print "<div style=\"position:absolute; left:${x}px; top:${y}px;\">";
print "<input type=\"radio\" name=\"${tableName}\" ";
print "value=\"${angle}\" ${checked}/></div>\n";
};
}
#===========================================================================
# Main program
#===========================================================================
print<<END;
Content-type: text/html
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PULIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd" />
<html xmlns="http://www.w3.org/1999/xhtml"" xml:lang="ja" lang="ja">
<head>
<title>Title</title>
<meta HTTP-EQUIV=CONTENT-TYPE CONTENT="text/html; charset=UTF-8" />
</head>
<body>
<h1>Header</h1>
<form id="form" action="" method="get">
END
print_button_circle("A", 220, 1);
print<<END;
</form>
</body>
</html>
END
1;
