March LiveCode Madness: Building a Clickable Bracket

For the first time ever, I have filled out my own bracket for the upcoming NCAA basketball tournament. For many people here in the USA, this is an important annual ritual. One's bracket simply predicts every winning team in every match-up in the six rounds of the tournament. The tournament starts with a field of 64 teams with half being eliminated after each of the first five rounds. The sixth round pits the two remaining teams in the championship game to crown the national champion. I'm finally participating at the encouragement of my brother, Bill, who happens to teach economics at Butler University in Indianapolis, Indiana. Bill is our family's sports historian with particular expertise in baseball. But this is basketball season and basketball is very big in Indiana. The significance of basketball in Indiana is depicted very well in the movie "Hoosiers." (Trivia: The final championship game in the movie was filmed at Butler Field House where the actual state high school championship game had long been played.)

Basketball is also very big at Butler University. Butler is probably the smallest school ever to appear in the NCAA championship game, having done so in both 2010 and 2011. Unfortunately, Butler lost both times. The loss in 2010 was quite dramatic with Butler, down two points, taking the last shot of the game. Alas, the ball bounced off the rim and Duke won 61-59. The University of Georgia is also playing in the tournament this year and it is conceivable that they could face Butler in the championship game. More on that later.

Like a lot of work places, Bill's colleagues at Butler run a little competition each year where you can enter your bracket. The person with the best prediction wins the competition. Bill enters every year and this year, again with Bill's encouragement, I'm participating too. Our other brother, Mark, is also participating.

To fill out my bracket, I found a PDF online at printyourbrackets.com. For those not familiar with what a bracket looks like, here is a quick snapshot:

I find the visual design very appealing. Teams from the midwest and west are on the left-hand side and teams from the east and south are on the right. You can easily see how teams are quickly whittled down until there is one national champion in the center-most box. But, to fill out this PDF, I had to do a whole lot of copying and pasting. The first version I sent to Bill had a serious copy and paste error, which I'm glad I caught soon after I sent my PDF to him. I had Wisconsin winning the game between Kentucky and Buffalo. (Wisconsin is good, but they are not that good.) I showed Wisconsin continuing to win in Kentucky's spot until the championship game, when Kentucky "reappeared." I fixed the PDF and sent my brother an updated version.

But, I found myself wishing that I had found a "clickable" version of the bracket online instead of a PDF. Then, I could have just clicked my way from team to team with each click quickly pasting in the name of my pick in the slot to the right or left. (It's likely there is such a clickable version out there, but I didn't find one in the few minutes I allocated to my search.)

So, I created a very simple and very incomplete version of a basketball bracket using LiveCode. And, I learned something new by creating this little project. In order for the "on mouseUp" handler to work within a field field, the text in the field has to be set to locked. This makes sense because otherwise every time you clicked in the field to type something into it -- such as the names of the basketball teams in round 1 of the tournament -- the on mouseUp handler would take over. But, to enter the first set of team names, the fields need to be unlocked. So, I needed to have an easy way to lock and unlock the text fields, or at least the text fields to the far left or right of the bracket.

I created two buttons - "Lockdown" and "Unlock" - that, well, lock and unlock the text fields. Now, in my little example, I only have 4 of the 64 teams represented. This results in a total of seven text fields (or three open brackets). If I had all 64 teams, that would require 126 text fields (with 62 open brackets). That's a lot of fields to lock or unlock. But, I learned a good trick while creating a previous project based on the fact that LiveCode automatically numbers all fields on a card. With that knowledge, I used the following script in the button "Lockdown" to lock all the fields on the card:

on mouseUp

   put the number of fields on this card into L

   repeat with i = 1 to L

      set the locktext of field i to true

      set the backgroundcolor of field i to red

   end repeat

end mouseUp

The first line just counts up the total number of fields on the card and puts this number into the local variable L.

Then, I create a loop that repeats L times, starting by putting 1 into the local variable i. The next line sets the locktext property of field i (that is, field 1 or field 2 or field 50, depending on what loop it is) to true, thus locking down the field. Each loop automatically adds one to i.

I also went ahead and set the backgroundcolor of locked fields to red. I thought it would be nice to use some color coding to signal to the user whether the fields were in a locked or unlocked state.

In the button "Unlock" I simply changed true to false in the "set the locktext" line. I also changed the background color to yellow. Here's a snapshot of the screen in the unlocked state:

LiveCode file

[ Get the free LiveCode Community version. ]

Here's a snapshot of the screen after the fields have been locked down, thereby allowing the user to click on the fields to make selections, going from left to right:

I then added a script to each field that put a copy of whatever text is in that field to the next field to the right. Here's an example:

on mouseup

   put me into field "r2g1t1"

end mouseup

I labeled all the fields with a scheme that would be helpful if I later choose to continue building this project with a complete bracket. This scheme starts with the tournament round number, then the game number, then the team number. So, "r2g1t1" means round 2, game 1, team 1. Using this scheme, I think I could automate the script for the fields so that each would know what field to send their contents to. For now, I just hard coded the destination.

Looking Forward to the Day When LiveCode Exports to HTML5

As I write this, many of us are waiting anxiously for news on the RunRev company's efforts to enhance LiveCode to allow projects to be exported to HTML5. This project would be a perfect candidate for this feature because I could then embed this project within a web page. Then, I would have legions of basketball fans flocking to my clickable bracket maker site. As I understand it, exporting to HTML5 will essentially convert LiveCode scripts to Javascript. The company began the effort to add this feature to LiveCode about eight months ago with a timeline to completion of one year. So, I keep my fingers crossed everyday that the company will send out an announcement that this feature is finally ready.

One Last Bit of Basketball Trivia While Pondering Who Might Win This Year's College Championship

Here's a final piece of basketball trivia. As I understand it, dribbling evolved from a loophole in the original rules of basketball. The game was invented in the late 1800s by James Naismith, a Massachusetts teacher who wanted a safe, indoor game. The idea was to have players continually pass the ball to teammates to move the ball down the court with the goal of getting the ball into a peach basket mounted up high at the end of the opposing team's side of the court. It was against the rules to run while holding the ball. At some point, someone figured out that if you bounce the ball you are not technically holding it, so this was a way for the player to move about without breaking the rules. Ah, American ingenuity.

So, who do I predict will win the tournament this year? Yes, it is possible for my school - The University of Georgia - to meet my brother's school - Butler University - in the NCAA Basketball Championship game. But, even with the little I know about college basketball, I know the odds of this happening are very, very, small. So, despite the fact that I show above Butler beating Kentucky in round 4 of the tournament (also known as the "Elite 8"), I'm predicting Kentucky will go all the way this. But, then again, stranger things have happened.

Oh, one more thing ... what exactly is a hoosier, anyway?