Home → General Public → Library Use Value Calculator → Customization

Customization of the Library Use Value Calculator

Background

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

You should have some knowledge of HTML and how to read JavaScript to be sure all necessary custom changes are made and match to work. You do not need to understand all the accessibility comments but just realize why there is some extra code and it should be remain. Coding for accessibility ensures people using screen readers can access this calculator.

How it works

The calculation part is a form that calls in a javascript with the submit button, in this case named "Calculate The Value of Your Library Use".

Beginning code

Form - leave as is.
Table for easier reading: <table cellspacing="0" id="tbstriped" summary="A javascript driven calculator to determine estimated retail value for a variety of library services">
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.

<caption>
Value of Library Services
</caption>
<tbody>
<tr>
<th>Input Your <br />
Use</th>
<th>Library Services</th>
<th>Value of
<br />
Services</th>
</tr>

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>.

Form Information

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>

<tr>
<td><input type="text" name="books" id="books" size="5" onchange="doCalculator()" tabindex="1" /></td>
<td><label for="books">Books Borrowed</label></td>
<td><label for="booksResult">$
<input type="text" id="booksResult" size="5" value="0.00" /></label></td>
</tr>

Script

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.)

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

At the bottom after the script tag is closed, add a noscript for accessibility for those who cannot use the javascript. Pointing to the Excel spreadsheet offers an alternative.