2011 Scorecard: Bigger! Better!

(This piece was originally published at Michael Holloway's BaseballBlogs)


Blogger code to widen your Blog, and code for the new easier to use 2011 Scorecard


Below in the scroll box is code for the brand new 2011 Internet Baseball Scorecard.

You can see an example of the new scorecard at The Internet Baseball Scorecard Blog. Also, I've kept score of all the games of both the NLCS and the ALCS with the new scorecard. A page I've created has all those games, and the division series scorecards, linked in an easy to read "Play Down Tree": Road to the World Series - in Scorecards.

The code for the new scorecard has been Validated at W3C as a "HTML 4.01 Transitional" document. I've published it in a Google document at this link, where you can read it in a full page format, and below in the scrolling window from which you can copy and paste it into a notepad - or take it over to W3C and put it to the test.



As a result of the changes I've made, the scorecard is now almost 4800 pixels wide (Blogger default is 660px) - you may need to adjust your "View" settings. Firefox's zoom in or out feature: hold down 'Ctrl' and press '+' or '-'. Another browser? Your on your own. :)

I've made the Batter Line-up boxes and the "At-bat Boxes" 8 lines high and much wider, room for 26 lower case inputs. The pitch boxes beside each AB box can hold 32 key strokes of pitching notation. As well the "Batter Totals" boxes to the right of the AB rows can now accommodate at-bat data for 8 substitutions. This provides enough room for all the data - in it's proper placement - with-in the "Project Scoresheet Standards", outlined in Baseball Hacks by Joseph Adler (Google Books)

The next step in this project is to develop a method to "scrape" play-by-play data out of these score sheets - and transversely - create a way to digitally "lay in" data from any game that there is data for - according to the standard created by retrosheet.org - and available there at their "Play-by-Play Data Files" page. So far Retrosheet has play-by-play data files dating back to 1950. Play-by-play data of Major League games are available from MLB Advanced Media in real time.

I'd like to build a way to populate the Internet Baseball Scorecard automatically with data from any game, from any date. For example I think it would be interesting to produce all the scorecards of every one of the 56 consecutive games in 1941 that Joe DiMaggio hit safely in. I expect that in the time it will take me to learn all that I need to know to make this functionality happen, Retrosheet and the rest of the "Sabermetricians" will have compiled data back to the war years - if it's possible.

Blogger Code to make your Blog Wider

Cut and Paste the code - from the scrolling box above or at this link - into your Blogger.com blog at the "Design" window in the "edit HTML" tab. This slightly edited blogger code makes the blogger window wide enough to handle the width of the score card. I've changed the sizes in "Blog Title Font" and the "Blog Description Font" and under 'posts' the h3 setting to 200% (that's the Post Title size, separate to the blogs font size).

I've also set everything that by default was set 'float: center;' to, 'float: left;'.

In the "Header" section I've imported a photo that I a re-sized for the Blogs Title Header Image and changed the header wrapper parameters to 1632 pixels (that wraps around the new pic).

You might want to adjust the following to create your blog's unique aesthetic: in "Variable definitions" section you can change "Blog Title Color" and "Blog Description Color".

Make your scorecard refresh automatically

You'll notice in the Google Document I've high-lighted some code - about 4/5ths of the way down. It's a "Refresh" feature for 'Live Blogging'. It can be set to any refresh rate you wish, currently it is set to refresh every thirty seconds (30000), so as I publish after each at-bat, the page people are viewing will up-date automatically. You can re-set the rate, for example '60000' is one minute. It is in the OFF position as it is.

To make your blog refresh, move the "-->" tag from the bottom of the highlighted code and paste it just after where it says STOP REFRESH . To turn OFF the refresh feature, just highlight and cut the "-->" tag and paste it back down at the bottom of the highlighted code (memorize where the tag was before you turn it ON!).

The Scorecard Code

Expand the scorecard for Extra innings

The code in the scrolling box at the top of this post produces a "Box Score" table along the top of the scorecard; a nine batter scorecard, 9 innings wide with "Batters Totals" boxes at the end of each batter's row, an "Innings Totals" row, and a "Pitcher Totals" table. (See an Entire two team scorecard here.)

All of these elements can be expanded for extra innings play though a simple copy and paste technique:

Add extra batters boxes

In Compose mode, high light an AB box and it's associated pitch notation box (four boxes - one on top of the other to the left of the AB box), left click and copy - then point with your cursor right beside the last batters box in the lead off batters row of AB boxes, and click. A prompt line should appear about have way down the box, right beside the box - with no space in-between - then just right click your mouse, and paste. A 10th inning batters box should appear in the lead off batters row. The extra inning AB box code is still in your mouse, so now continue down the column as before, clicking right next to the box, and paste for all 18 batter's rows. To complete the new inning add a number lable at the top of each teams scorecard. In the same place the '9' appears relative to the column of other AB boxes, type in the new inning number. Now your ready to score the next inning.

Add innings to the Box Score

To add boxes to the Box score table at the top, just under the Title of your post, or to the "Innings Totals" boxes along the bottom of each score card, use the same technique.

Add another pitcher

The same goes for the Pitchers Line table, just high-light one row, copy, and then point your cursor on the far left, just under the box with the last pitchers name in it click, a prompt will appear, outside of the last box - and paste.


Note: if you have a feeling the games going to go on, and on, and on, you can copy as many elements as you wish (as long as you copy horizontally) and paste them as before. The blog parameters are designed to accommodate an 18 inning scorecard. You can add nine innings to a batters row with one click of your mouse if you like. Just keep a copy of the scorecard in draft at your blog, go copy 9 batters boxes onto your mouse and Voila! 18 inning rows.

Trouble shooting the Scorecard

After you've pasted the scorecard table into your New Post window - twice, once for home team, once for visitors - then just switch over to "Compose" mode and start importing data.

Cut and Paste gremlins

Some boxes don't like cut and paste. Some of them decide to disappear when you try to cut and paste a players name into them! If this happens - Don't Worry - just stop what your doing and click 'edit' at the top of your browser window, then click 'undo' - the box will reappear. Then type the player name in - or - what I do is type three letters into the box, highlight them, then paste in the player's name. The same goes when cut and pasting team names, pitcher names, stats etc..

Another 'out' or 'fail safe' is to right click on the Firefox back button and choose and earlier "Edit Post" or "Publish Status" window. Amazingly, (to me) all your edits are saved in your browser for as long as the browser tab remains open.


Happy scorecarding. Any questions, suggestions, feel free in comments or email (top-sidebar).



mh