To cut to the chase, this post is about a prototype food stamp calculator for use by advocates, built with PHP and JavaScript. (It works fine in Firefox; the design and functions are buggy in IE.)

Here’s the back story:

One of the most successful content projects undertaken by Legal Services of Northern California has been its web-based California Food Stamp Guide (FSG). As part of that project, we had discussions about building a California-specific food stamp calculator, and then further discussions about the purpose and function of such a thing. Should it be client or advocate oriented? In either case, should it be more of an “estimator,” i.e., a screening tool to get a reasonable, in-the-zone estimate of monthly benefits? Or a tool to make more precise food stamp budget calculations, such that one could check and challenge the calculations in individual cases made by a local welfare office? Among the editorial team that worked on the FSG, there was great interest in having a calculator, but no actual consensus emerged about how best to approach it.

One distinctive idea did emerge, however. Rosemary French at the Benchmark Institute promoted the idea of a calculator that would serve as a pedagogical tool. Her notion incorporated these key elements to make it an effective advocate teaching tool: The calculator should make accurate, complete calculations based on all the possible economic and circumstantial elements that make up an actual monthly benefits determination; it should reveal how changes in a relevant dollar amount or in the application of a client’s individual circumstances (e.g., medical expenses, daycare expenses, etc.) affect the outcome; and it should display the calculation as a whole, on a single page, rather than in steps that cannot be viewed in relation to each other.

Rosemary’s idea was the one that inspired us to try something different from the array of other food stamp calculators out there. For various reasons we never quite completed the project, but we do want to share with the larger advocacy community what we did accomplish: a prototype for a California-specific advocate tool for calculating monthly benefits that honors its pedagogical purposes. (Again, it works as intended in Firefox; not so much in IE.)

Hopefully, use by advocates should be self-explanatory. Start entering numbers and selecting options and the budget calculations shall be revealed dynamically, on the right. The calculations are all based on current food stamp program eligibility standards in California, but can only be made accurately for households in which everyone is eligible; the prototype does not make calculations for mixed households in which one or more members are ineligible. There are Ajaxy pop-up help pages that can be used to provide explanations and links to other resources; one can also save a calculation as a bookmark or print out the results; and other touches.

The PHP and Javascript coding, which includes use of jQuery, was done by the esteemed Scott Trudeau. (Ed Lachgar, on the LSNC IT staff, built the PHP print functions. The layout and visual design were done here at the Webdogs 2.0 labs, so don’t blame Scott for what it looks like.) If anyone has questions or interest about the PHP and JavaScript coding, feel free to contact Scott for details, explanations, etc.

Although we have no immediate plans to do more with this project, we are posting all the prototype code for those who may be interested in adapting, modifying or just playing with it. It’s yours for the taking:

Download the source code.

I have adapted the same sorting script used in the earlier demo to mock up a functioning sortable Pika Case List table. This second demo provides a concrete example of how Brian McAllister’s tablesort script works with a few other table data types common to a Pika search-result list. In this case list demo you can see how the sorting works with a non-standard numeric value (“Case No.”), American date formats (“Opened” and “Closed”) and a non-sortable column (“Time”). Again, there was no need to touch the sorting script itself. By changing the names of class attributes in the markup, one can control how the script works.

For example, the first numeric column has been set to sort on the third sequence in the case number, rather than the first (needless to say, one can set it to sort by any of the three numerical sequences in the case number); the sorting of dates in an American format works smoothly, recognizing both one- and two-digit formats for the month and the day of month and two- or four-digit formats for the year; and the column on the far right with the clock icon illustrates how one can selectively set a column not to sort at all.

One final touch worth noting: the sorting script also recognizes custom class attributes for defining which column is actively sorted on loading the page, as well as the order of the values in that column. For example, in the case list demo the table tag has the class="sortable-onload-4-reverse attribute assigned, i.e., onload the script actively sorts the fourth column and lists the values in reverse order. Done.

(Yes, those are real names. No, they are not clients. All are family or friends of Webdogs 2.0. We count ourselves blessed as many times over.)

One of the things on our short list of Pika modifications is the goal to make all table lists sortable. The default installation includes some sortable lists but not all are, and the sorting implementation seems a touch dated. This prompted us to research the world of javascript libraries for an updated table-sort implementation, which brought us to Brian McAllister’s Unobtrusive Table Sort Script (revisited), an extremely well documented script and a breeze to implement. If you can link a script tag and know how to do basic table markup, you can do it.

To get motivated about building a sortable table demo, I wanted to at least be working on something that may have some potential use, so this weekend I built the Pika HTML Tag | CSS Matrix ~ Sortable Table Demo 01:

Since I play with CSS like some folks play Sudoku, I thought this would be a fun project enabling me to sort all the Pika 3.06 templates to see which HTML tags had id or class attributes and corresponding values assigned to them, and which I could use in turn to evaluate and tweak the Pika default style sheets. Hence, the “CSS Matrix.”

As mentioned at the bottom of the demo page, the table design styles are a direct lift from Veerle’s A CSS styled table, essentially the same design used by Brian McAllister in his table-sort-demo. (His demo illustrates how the script works with other common tabular data values, e.g., currency, dates, etc.) I especially like the ascending/descending “marker” design used as a background image in the table header elements. The script swaps out three different images to visualize effectively whether the sortable column is or is not selected and if so whether it is sorted in ascending or descending order. (I guarantee you’re going to see this design touch in LSNC’s next Pika implementation.) I only made minor changes to the CSS code to accommodate the need for a more visible hover state for links to the HTML tags, to change various font-size settings to my standard defaults, and to style a few added page elements.

Think of it as a Tech Advent Calendar. It’s called 24 Ways “to impress your friends,” but more accurately is just 24 ways to have some fun with web design/web development widgets, bits of code for byte-sized fun every day between now and Christmas. I really loved playing with this stuff last year. It’s pretty likely you’ll pick up an idea or two you can bring to your own web-based projects this year, as well.