Customization of the Library Use Value Calculator
The original calculator worksheet is a downloadable spreadsheet, originally provided by the Massachusetts Library Association. (This spreadsheet requires either Microsoft Excel or the Excel Viewer.) The spreadsheet was adapted for the web by Chelmsford Public Library.
For more information on how the values figures are calculated.
If you wish to customize
How it works
<form action=" " method="post" name="calculator" id="calculator">
- Form - leave as is.
- Note: class="narrow" makes the table narrower or 75% of the page and id="tbstriped" is another special custom style (external CSS file) we use at Maine State Library that changes the presentation formatting to certain colors and padding in the headers and text. You could style manually although using CSS is better.
Value of Library Services
<th>Input Your <br />
For Accessibility: Add a summary to this data table or a caption. You do not need both although you can (as done here). Header row is coded as a "header"- <th>, not just a normal row<tr>.
Below is the first row of information in the form ( words below were made bold only to see them easier here). Note the accessibility form label: <label for="books"> before "Books Borrowed" and end tag </label>
<td><input type="text" name="books" id="books" size="5" onchange="doCalculator()" tabindex="1" /></td>
<td><label for="books">Books Borrowed</label></td>
<input type="text" id="booksResult" size="5" value="0.00" /></label></td>
The line in the script that corresponds to the books borrowed line above:
var booksValue = document.calculator.books.value * 12.50;
document.getElementById("booksResult").value = booksValue.toFixed(2);
Note: if you want to change the value, this is where you do it.
Important: If you change the name of a library service in the form itself, you must come down and change it in the script to match - 3 different places above if you changed the word "books".
Processing the script
A button "Calculate the Value of Your Library Use" calls in the script, onclick="doCalculator ()". (Onclick is considered enough today for accessibility although some test tools will show failure and say redundant input mechanisms are required. Some current accessibility standards are old and are being updated.)
<td colspan="2" align="center"><input type="button"
value="Calculate The Value of Your Library Use" onclick="doCalculator ()" tabindex="16"></td>
<td>$<input type="text" name="totalResult" id="totalResult"
Note tabindex: This attribute specifies the position of the current element in the tabbing order for the current document. Tabbing order defines the order in which elements will receive focus when navigated by the user via the keyboard. Specifying a tab index is not required for accessibility guidelines but it can make a page more navigable for disabled users when the layout is complex, or the default tab order is unusual.
The tabindex was in the original document so left in.
Accessibility: Noscript tag