Post by jrj84105 on Feb 6, 2017 22:51:08 GMT -8
I've adapted a crude NCAA Tournament Bracket but it needs help:
1) How do I make it 2-sided?
2) How would you incorporate the play-in round?
3) How would you compress it to fit it into a single desktop screen? (Ideally, I would want to be able to collapse each sub-region).
4) How would users submit their completed bracket with a time stamp at the time of submission?
How would you make it look nicer?
Help on any of these is appreciated.
1) How do I make it 2-sided?
2) How would you incorporate the play-in round?
3) How would you compress it to fit it into a single desktop screen? (Ideally, I would want to be able to collapse each sub-region).
4) How would users submit their completed bracket with a time stamp at the time of submission?
How would you make it look nicer?
Help on any of these is appreciated.
<html>
<head>
<style>
* { font-family: arial; font-size: 12px; }
th { border: solid black 3px; background-color: lightgray; font-size: 16px; }
.team { border: solid black 2px; background-color: lightgray; width: 120px; height: 24px; }
.team2 { border: solid black 2px; background-color: lightgray; width: 120px; height: 24px; }
.team3 { border: solid black 2px; background-color: lightgray; width: 120px; height: 24px; }
</style>
<script>
function win(winner)
{
var team = winner.value;
var levels = winner.name.substring(3).split("_");
var curlevel = parseInt(levels[0]);
var curgame = parseInt(levels[1]);
var nextlevel = curlevel + 1;
var nextgame = Math.floor( (curgame+1) / 2 );
var winnerButton = winner.form.elements["WIN"+nextlevel+"_"+nextgame];
if ( winnerButton == null ) return;
++nextlevel;
nextgame = Math.floor( (nextgame+1) / 2 );
var nextButton = winner.form.elements["WIN"+nextlevel+"_"+nextgame];
var forward = ( nextButton != null && nextButton.value != "" && nextButton.value == winnerButton.value );
winnerButton.value = team;
if ( forward ) winnerButton.click( );
}
</script>
</head>
<body>
<form>
<table border=0 cellpadding=0>
<tr>
<th colspan=8 style="font-size: x-large;">2017 NCAA Tournament</th>
</tr>
<tr>
<th colspan=1 style="font-size: x-large;">Round 1</th>
<th colspan=1 style="font-size: x-large;">Round 2</th>
<th colspan=1 style="font-size: x-large;">Sweet 16</th>
<th colspan=1 style="font-size: x-large;">Elite 8</th>
<th colspan=1 style="font-size: x-large;">Final 4</th>
<th colspan=1 style="font-size: x-large;">Finals</th>
<th colspan=1 style="font-size: x-large;">Champion</th>
</tr>
<tr>
<th colspan=2 style="font-size: x-large;">West Region</th>
</tr>
<tr>
<th colspan=2>Sub-Regional #1</th>
</tr>
<tr>
<td><input type=button class="team" name="WIN0_1" onclick="win(this)" value="#1 Seed"></td>
</tr>
<tr>
<td></td>
<td><input type=button class="team" name="WIN1_1" onclick="win(this)" value=""></td>
</tr>
<tr>
<td><input type=button class="team" name="WIN0_2" onclick="win(this)" value="#16 Seed"></td>
</tr>
<tr>
<td> </td>
<td> </td>
<td><input type=button class="team2" name="WIN2_1" onclick="win(this)" value=""></td>
</tr>
<tr>
<td><input type=button class="team" name="WIN0_3" onclick="win(this)" value="#8 Seed"></td>
</tr>
<tr>
<td></td>
<td><input type=button class="team" name="WIN1_2" onclick="win(this)" value=""></td>
</tr>
<tr>
<td><input type=button class="team" name="WIN0_4" onclick="win(this)" value="#9 Seed"></td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td><input type=button class="team2" name="WIN3_1" onclick="win(this)" value=""></td>
</tr>
<tr>
<th colspan=2>Sub-Regional #2</th>
</tr>
<tr>
<td><input type=button class="team" name="WIN0_5" onclick="win(this)" value="#4 Seed"></td>
</tr>
<tr>
<td></td>
<td><input type=button class="team" name="WIN1_3" onclick="win(this)" value=""></td>
</tr>
<tr>
<td><input type=button class="team" name="WIN0_6" onclick="win(this)" value="#13 Seed"></td>
</tr>
<tr>
<td> </td>
<td> </td>
<td><input type=button class="team2" name="WIN2_2" onclick="win(this)" value=""></td>
</tr>
<tr>
<td><input type=button class="team" name="WIN0_7" onclick="win(this)" value="#5 Seed"></td>
</tr>
<tr>
<td></td>
<td><input type=button class="team" name="WIN1_4" onclick="win(this)" value=""></td>
</tr>
<tr>
<td><input type=button class="team" name="WIN0_8" onclick="win(this)" value="#12 Seed"></td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td><input type=button class="team3" name="WIN4_1" onclick="win(this)" value=""></td>
</tr>
<tr>
<th colspan=2>Sub-Regional #3</th>
</tr>
<tr>
<td><input type=button class="team" name="WIN0_9" onclick="win(this)" value="#3 Seed" ></td>
</tr>
<tr>
<td></td>
<td><input type=button class="team" name="WIN1_5" onclick="win(this)" value="" ></td>
</tr>
<tr>
<td><input type=button class="team" name="WIN0_10" onclick="win(this)" value="#14 Seed" ></td>
</tr>
<tr>
<td> </td>
<td> </td>
<td><input type=button class="team2" name="WIN2_3" onclick="win(this)" value="" ></td>
</tr>
<tr>
<td><input type=button class="team" name="WIN0_11" onclick="win(this)" value="#6 Seed" ></td>
</tr>
<tr>
<td></td>
<td><input type=button class="team" name="WIN1_6" onclick="win(this)" value="" ></td>
</tr>
<tr>
<td><input type=button class="team" name="WIN0_12" onclick="win(this)" value="#11 Seed" ></td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td><input type=button class="team2" name="WIN3_2" onclick="win(this)" value="" ></td>
</tr>
<tr>
<th colspan=2>Sub-Regional #4</th>
</tr>
<tr>
<td><input type=button class="team" name="WIN0_13" onclick="win(this)" value="#2 Seed" ></td>
</tr>
<tr>
<td></td>
<td><input type=button class="team" name="WIN1_7" onclick="win(this)" value="" ></td>
</tr>
<tr>
<td><input type=button class="team" name="WIN0_14" onclick="win(this)" value="#15 Seed" ></td>
</tr>
<tr>
<td> </td>
<td> </td>
<td><input type=button class="team2" name="WIN2_4" onclick="win(this)" value="" ></td>
</tr>
<tr>
<td><input type=button class="team" name="WIN0_15" onclick="win(this)" value="#7 Seed" ></td>
</tr>
<tr>
<td></td>
<td><input type=button class="team" name="WIN1_8" onclick="win(this)" value="" ></td>
</tr>
<tr>
<td><input type=button class="team" name="WIN0_16" onclick="win(this)" value="#10 Seed" ></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td><input type=button class="team3" name="WIN5_1" onclick="win(this)" value=""></td>
</tr>
<tr>
<th colspan=2 style="font-size: x-large;">Midwest Region</th>
</tr>
<tr>
<th colspan=2>Sub-Regional #1</th>
</tr>
<tr>
<td><input type=button class="team" name="WIN0_17" onclick="win(this)" value="#1 Seed "></td>
</tr>
<tr>
<td></td>
<td><input type=button class="team" name="WIN1_9" onclick="win(this)" value=""></td>
</tr>
<tr>
<td><input type=button class="team" name="WIN0_18" onclick="win(this)" value="#16 Seed"></td>
</tr>
<tr>
<td> </td>
<td> </td>
<td><input type=button class="team2" name="WIN2_5" onclick="win(this)" value=""></td>
</tr>
<tr>
<td><input type=button class="team" name="WIN0_19" onclick="win(this)" value="#8 Seed"></td>
</tr>
<tr>
<td></td>
<td><input type=button class="team" name="WIN1_10" onclick="win(this)" value=""></td>
</tr>
<tr>
<td><input type=button class="team" name="WIN0_20" onclick="win(this)" value="#9 Seed"></td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td><input type=button class="team2" name="WIN3_3" onclick="win(this)" value=""></td>
</tr>
<tr>
<th colspan=2>Sub-Regional #2</th>
</tr>
<tr>
<td><input type=button class="team" name="WIN0_21" onclick="win(this)" value="#4 Seed"></td>
</tr>
<tr>
<td></td>
<td><input type=button class="team" name="WIN1_11" onclick="win(this)" value=""></td>
</tr>
<tr>
<td><input type=button class="team" name="WIN0_22" onclick="win(this)" value="#13 Seed"></td>
</tr>
<tr>
<td> </td>
<td> </td>
<td><input type=button class="team2" name="WIN2_6" onclick="win(this)" value=""></td>
</tr>
<tr>
<td><input type=button class="team" name="WIN0_23" onclick="win(this)" value="#5 Seed"></td>
</tr>
<tr>
<td></td>
<td><input type=button class="team" name="WIN1_12" onclick="win(this)" value=""></td>
</tr>
<tr>
<td><input type=button class="team" name="WIN0_24" onclick="win(this)" value="#12 Seed"></td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td><input type=button class="team3" name="WIN4_2" onclick="win(this)" value=""></td>
</tr>
<tr>
<th colspan=2>Sub-Regional #3</th>
</tr>
<tr>
<td><input type=button class="team" name="WIN0_25" onclick="win(this)" value="#3 Seed" ></td>
</tr>
<tr>
<td></td>
<td><input type=button class="team" name="WIN1_13" onclick="win(this)" value="" ></td>
</tr>
<tr>
<td><input type=button class="team" name="WIN0_26" onclick="win(this)" value="#14 Seed" ></td>
</tr>
<tr>
<td> </td>
<td> </td>
<td><input type=button class="team2" name="WIN2_7" onclick="win(this)" value="" ></td>
</tr>
<tr>
<td><input type=button class="team" name="WIN0_27" onclick="win(this)" value="#6 Seed" ></td>
</tr>
<tr>
<td></td>
<td><input type=button class="team" name="WIN1_14" onclick="win(this)" value="" ></td>
</tr>
<tr>
<td><input type=button class="team" name="WIN0_28" onclick="win(this)" value="#11 Seed" ></td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td><input type=button class="team2" name="WIN3_4" onclick="win(this)" value="" ></td>
</tr>
<tr>
<th colspan=2>Sub-Regional #4</th>
</tr>
<tr>
<td><input type=button class="team" name="WIN0_29" onclick="win(this)" value="#2 Seed" ></td>
</tr>
<tr>
<td></td>
<td><input type=button class="team" name="WIN1_15" onclick="win(this)" value="" ></td>
</tr>
<tr>
<td><input type=button class="team" name="WIN0_30" onclick="win(this)" value="#15 Seed" ></td>
</tr>
<tr>
<td> </td>
<td> </td>
<td><input type=button class="team2" name="WIN2_8" onclick="win(this)" value="" ></td>
</tr>
<tr>
<td><input type=button class="team" name="WIN0_31" onclick="win(this)" value="#7 Seed" ></td>
</tr>
<tr>
<td></td>
<td><input type=button class="team" name="WIN1_16" onclick="win(this)" value="" ></td>
</tr>
<tr>
<td><input type=button class="team" name="WIN0_32" onclick="win(this)" value="#10 Seed" ></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td colspan=2 style="font-size: 20px; text-align: right;">CHAMPION: </td>
<td><input type=button class="team"
style="width: 160px; font-size: 20px; background-color: orange; height: 32px;"
name="WIN6_1" onclick="win(this)" value=""></td>
</tr>
<tr>
<th colspan=2 style="font-size: x-large;">East Region</th>
</tr>
<tr>
<th colspan=2>Sub-Regional #1</th>
</tr>
<tr>
<td><input type=button class="team" name="WIN0_33" onclick="win(this)" value="#1 Seed"></td>
</tr>
<tr>
<td></td>
<td><input type=button class="team" name="WIN1_17" onclick="win(this)" value=""></td>
</tr>
<tr>
<td><input type=button class="team" name="WIN0_34" onclick="win(this)" value="#16 Seed"></td>
</tr>
<tr>
<td> </td>
<td> </td>
<td><input type=button class="team2" name="WIN2_9" onclick="win(this)" value=""></td>
</tr>
<tr>
<td><input type=button class="team" name="WIN0_35" onclick="win(this)" value="#8 Seed"></td>
</tr>
<tr>
<td></td>
<td><input type=button class="team" name="WIN1_18" onclick="win(this)" value=""></td>
</tr>
<tr>
<td><input type=button class="team" name="WIN0_36" onclick="win(this)" value="#9 Seed"></td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td><input type=button class="team2" name="WIN3_5" onclick="win(this)" value=""></td>
</tr>
<tr>
<th colspan=2>Sub-Regional #2</th>
</tr>
<tr>
<td><input type=button class="team" name="WIN0_37" onclick="win(this)" value="#4 Seed"></td>
</tr>
<tr>
<td></td>
<td><input type=button class="team" name="WIN1_19" onclick="win(this)" value=""></td>
</tr>
<tr>
<td><input type=button class="team" name="WIN0_38" onclick="win(this)" value="#13 Seed"></td>
</tr>
<tr>
<td> </td>
<td> </td>
<td><input type=button class="team2" name="WIN2_10" onclick="win(this)" value=""></td>
</tr>
<tr>
<td><input type=button class="team" name="WIN0_39" onclick="win(this)" value="#5 Seed"></td>
</tr>
<tr>
<td></td>
<td><input type=button class="team" name="WIN1_20" onclick="win(this)" value=""></td>
</tr>
<tr>
<td><input type=button class="team" name="WIN0_40" onclick="win(this)" value="#12 Seed"></td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td><input type=button class="team3" name="WIN4_3" onclick="win(this)" value=""></td>
</tr>
<tr>
<th colspan=2>Sub-Regional #3</th>
</tr>
<tr>
<td><input type=button class="team" name="WIN0_41" onclick="win(this)" value="#3 Seed" ></td>
</tr>
<tr>
<td></td>
<td><input type=button class="team" name="WIN1_21" onclick="win(this)" value="" ></td>
</tr>
<tr>
<td><input type=button class="team" name="WIN0_42" onclick="win(this)" value="#14 Seed" ></td>
</tr>
<tr>
<td> </td>
<td> </td>
<td><input type=button class="team2" name="WIN2_11" onclick="win(this)" value="" ></td>
</tr>
<tr>
<td><input type=button class="team" name="WIN0_43" onclick="win(this)" value="#6 Seed" ></td>
</tr>
<tr>
<td></td>
<td><input type=button class="team" name="WIN1_22" onclick="win(this)" value="" ></td>
</tr>
<tr>
<td><input type=button class="team" name="WIN0_44" onclick="win(this)" value="#11 Seed" ></td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td><input type=button class="team2" name="WIN3_6" onclick="win(this)" value="" ></td>
</tr>
<tr>
<th colspan=2>Sub-Regional #4</th>
</tr>
<tr>
<td><input type=button class="team" name="WIN0_45" onclick="win(this)" value="#2 Seed" ></td>
</tr>
<tr>
<td></td>
<td><input type=button class="team" name="WIN1_23" onclick="win(this)" value="" ></td>
</tr>
<tr>
<td><input type=button class="team" name="WIN0_46" onclick="win(this)" value="#15 Seed" ></td>
</tr>
<tr>
<td> </td>
<td> </td>
<td><input type=button class="team2" name="WIN2_12" onclick="win(this)" value="" ></td>
</tr>
<tr>
<td><input type=button class="team" name="WIN0_47" onclick="win(this)" value="#7 Seed" ></td>
</tr>
<tr>
<td></td>
<td><input type=button class="team" name="WIN1_24" onclick="win(this)" value="" ></td>
</tr>
<tr>
<td><input type=button class="team" name="WIN0_48" onclick="win(this)" value="#10 Seed" ></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td><input type=button class="team3" name="WIN5_2" onclick="win(this)" value=""></td>
</tr>
<tr>
<th colspan=2 style="font-size: x-large;">South Region</th>
</tr>
<tr>
<th colspan=2>Sub-Regional #1</th>
</tr>
<tr>
<td><input type=button class="team" name="WIN0_49" onclick="win(this)" value="#1 Seed "></td>
</tr>
<tr>
<td></td>
<td><input type=button class="team" name="WIN1_25" onclick="win(this)" value=""></td>
</tr>
<tr>
<td><input type=button class="team" name="WIN0_50" onclick="win(this)" value="#16 Seed"></td>
</tr>
<tr>
<td> </td>
<td> </td>
<td><input type=button class="team2" name="WIN2_13" onclick="win(this)" value=""></td>
</tr>
<tr>
<td><input type=button class="team" name="WIN0_51" onclick="win(this)" value="#8 Seed"></td>
</tr>
<tr>
<td></td>
<td><input type=button class="team" name="WIN1_26" onclick="win(this)" value=""></td>
</tr>
<tr>
<td><input type=button class="team" name="WIN0_52" onclick="win(this)" value="#9 Seed"></td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td><input type=button class="team2" name="WIN3_7" onclick="win(this)" value=""></td>
</tr>
<tr>
<th colspan=2>Sub-Regional #2</th>
</tr>
<tr>
<td><input type=button class="team" name="WIN0_53" onclick="win(this)" value="#4 Seed"></td>
</tr>
<tr>
<td></td>
<td><input type=button class="team" name="WIN1_27" onclick="win(this)" value=""></td>
</tr>
<tr>
<td><input type=button class="team" name="WIN0_54" onclick="win(this)" value="#13 Seed"></td>
</tr>
<tr>
<td> </td>
<td> </td>
<td><input type=button class="team2" name="WIN2_14" onclick="win(this)" value=""></td>
</tr>
<tr>
<td><input type=button class="team" name="WIN0_55" onclick="win(this)" value="#5 Seed"></td>
</tr>
<tr>
<td></td>
<td><input type=button class="team" name="WIN1_28" onclick="win(this)" value=""></td>
</tr>
<tr>
<td><input type=button class="team" name="WIN0_56" onclick="win(this)" value="#12 Seed"></td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td><input type=button class="team3" name="WIN4_4" onclick="win(this)" value=""></td>
</tr>
<tr>
<th colspan=2>Sub-Regional #3</th>
</tr>
<tr>
<td><input type=button class="team" name="WIN0_57" onclick="win(this)" value="#3 Seed" ></td>
</tr>
<tr>
<td></td>
<td><input type=button class="team" name="WIN1_29" onclick="win(this)" value="" ></td>
</tr>
<tr>
<td><input type=button class="team" name="WIN0_58" onclick="win(this)" value="#14 Seed" ></td>
</tr>
<tr>
<td> </td>
<td> </td>
<td><input type=button class="team2" name="WIN2_15" onclick="win(this)" value="" ></td>
</tr>
<tr>
<td><input type=button class="team" name="WIN0_59" onclick="win(this)" value="#6 Seed" ></td>
</tr>
<tr>
<td></td>
<td><input type=button class="team" name="WIN1_30" onclick="win(this)" value="" ></td>
</tr>
<tr>
<td><input type=button class="team" name="WIN0_60" onclick="win(this)" value="#11 Seed" ></td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td><input type=button class="team2" name="WIN3_8" onclick="win(this)" value="" ></td>
</tr>
<tr>
<th colspan=2>Sub-Regional #4</th>
</tr>
<tr>
<td><input type=button class="team" name="WIN0_61" onclick="win(this)" value="#2 Seed" ></td>
</tr>
<tr>
<td></td>
<td><input type=button class="team" name="WIN1_31" onclick="win(this)" value="" ></td>
</tr>
<tr>
<td><input type=button class="team" name="WIN0_62" onclick="win(this)" value="#15 Seed" ></td>
</tr>
<tr>
<td> </td>
<td> </td>
<td><input type=button class="team2" name="WIN2_16" onclick="win(this)" value="" ></td>
</tr>
<tr>
<td><input type=button class="team" name="WIN0_63" onclick="win(this)" value="#7 Seed" ></td>
</tr>
<tr>
<td></td>
<td><input type=button class="team" name="WIN1_32" onclick="win(this)" value="" ></td>
</tr>
<tr>
<td><input type=button class="team" name="WIN0_64" onclick="win(this)" value="#10 Seed" ></td>
</tr>
</table>
</form>
</body>