The calculator worksheet started as a downloadable spreadsheet, originally provided by the Massachusetts Library Association. The spreadsheet was adapted for the web by Brian Herzog at Chelmsford Public Library. This version of the calculator was adapted from Maine State Library for Canton Public Library by Brad Czerniak.
Library ROI Calculator is licensed under a Creative Commons Attribution-ShareAlike 3.0 Unported License.
In index.html, you will see table rows that look like:
<tr> <td><input data-roi-formula="* 30" type="number" value="0" min="0" step="1" id="compclass" name="compclass" /></td> <td><label for="compclass">Computer Classes Attended</label><p class="formula-explanation">This paragraph explains the associated formula.</p></td> <td><output for="compclass" id="compclassResult"></output></td> </tr>
The input's type can be number, text, or checkbox per the included script. For a checkbox, remove the value, min, and step attributes (see the first two rows of the example file). A number type input will display as a text input in browsers that have not yet implemented HTML5 inputs. In webkit and other fancy browsers, the experience is progressively-enhanced.
In the second table cell is a label. The label's 'for' attribute should match the first cell's input id attribute for accessibility purposes. The label describes the activity, resource, or service the patron consumed. Use clear language to describe it.
The second part of the second cell is a paragraph (classed "formula-explanation") for the section's help text. If you do not wish a particular section to have help text, just delete the entire paragraph, including opening and closing tags.
The last cell contains the result section. In the example, all results follow with a common-sense naming convention. This could help keep your implementation's markup clean and accessible.
You can add or subtract rows as much as you wish, as long as you keep the last (grand total) row. As long as your HTML follows the convention of the demo, everything should just work.
Please note that this version of the calculator uses HTML5 data attributes to store critical information. As such, your site should use the HTML5 doctype if validation is a concern.
Only some of the CSS in styles.css is strictly necessary, and is included in the second half of the file.
In order to provide a speedy experience and minimize the download size of the calculator, the HTML file links to the the most recent minimized jQuery v1 branch point release hosted by on Google's CDN. You may wish to self-host your own version of jQuery. The calculator now relies on jQuery 1.7 or greater, but only for the
.on() method, so if you use a lower version of jQ you should be able to adapt the binding to
This form provides a11y features for various circumstances.
The HTML semantics likewise provide accessibility help. The results of calculations are put in
<output> elements, though the WAI-ARIA liveregion state is not augmented at this time. Each row only has one input, so tab order does not require overrides.