Feel free to adapt and modify the code from our user calculator for use on your own site. Below are samples and explanations of the relevant sections of code used in the calculator. If you have questions about how to use this, or find errors, contact LRS at LRS@LRS.org.

HTML CODE

First, I'll provide the specific HTML code that we use. If you like the format, you should be able to copy and paste this directly into the body of your web document. One change you will need to make is to replace "--INSERT YOUR LIBRARY NAME HERE--" with your library's name. Also, if you add any data elements, you will need to give them unique id's.

Code:

	<div id="leftside">
	<h2>Individual Return on Investment Calculator</h2>	 
	<form action="" method="post" name="calculator">
	</div>
	<div id="rightside"></div>					
	<div style="clear: both;"> </div>
	<h4 style="margin-top: 35px;">Please enter the number of times you use the following library services each <u>month</u></h4>
	<table>
	<tr style="text-align: left;"><th>Your Use</th><th>Library Services</th><th>Value of Services</th></tr>
	<tr>

	<td><input type="text" class="right" name="books" id="books" size="5" onchange="calculate()" tabindex="1" /></td>
	<td><label for="books">Books Borrowed per Month</label></td>
	<td><label for="booksResult">$
	<input type="text" class="right" id="booksResult" size="5" value="0.00" /></label></td>
	</tr>					
	<tr>
	<td><input type="text" class="right" name="magazine" id="magazine" size="5" onchange="calculate()" tabindex="2" /></td>
	<td><label for="magazine">Magazines Borrowed per Month</label></td>
	<td><label for="magazineResult">$
	<input type="text" class="right" id="magazineResult" size="5" value="0.00" /></label></td>

	</tr>			
	<tr>
	<td><input type="text" class="right" name="video" id="video" size="5" onchange="calculate()" tabindex="3" /></td>
	<td><label for="video">Videos Borrowed per Month</label></td>
	<td><label for="videoResult">$
	<input type="text" class="right" id="videoResult" size="5" value="0.00" /></label></td>
	</tr>			
	<tr>
	<td><input type="text" class="right" name="audio" id="audio" size="5" onchange="calculate()" tabindex="4" /></td>
	<td><label for="audio">Audio Books Borrowed per Month</label></td>

	<td><label for="audioResult">$
	<input type="text" class="right" class="right" id="audioResult" size="5" value="0.00" /></label></td>
	</tr>			
	<tr>
	<td><input type="text" class="right" class="right" name="libmag" id="libmag" size="5" onchange="calculate()" tabindex="5" /></td>
	<td><label for="libmag">In-Library Magazine Use per Month</label></td>
	<td><label for="libmagResult">$
	<input type="text" class="right" class="right" id="libmagResult" size="5" value="0.00" /></label></td>
	</tr>			
	<tr>

	<td><input type="text" class="right" class="right" name="ill" id="ill" size="5" onchange="calculate()" tabindex="6" /></td>
	<td><label for="ill">Interlibrary Loans per Month</label></td>
	<td><label for="illResult">$
	<input type="text" class="right" id="illResult" size="5" value="0.00" /></label></td>
	</tr>			
	<tr>
	<td><input type="text" class="right" name="meeting" id="meeting" size="5" onchange="calculate()" tabindex="7" /></td>
	<td><label for="meeting">Meeting Rooms Use (Hours per Month)</label></td>
	<td><label for="meetingResult">$
	<input type="text" class="right" id="meetingResult" size="5" value="0.00" /></label></td>

	</tr>			
	<tr>
	<td><input type="text" class="right" name="program" id="program" size="5" onchange="calculate()" tabindex="8" /></td>
	<td><label for="program">Program/Class Attended per Month - Adult</label></td>
	<td><label for="programResult">$
	<input type="text" class="right" id="programResult" size="5" value="0.00" /></label></td>
	</tr>			
	<tr>
	<td><input type="text" class="right" name="program2" id="program2" size="5" onchange="calculate()" tabindex="9" /></td>
	<td><label for="program2">Program/Class Attended per Month - Child</label></td>

	<td><label for="program2Result">$
	<input type="text" class="right" id="program2Result" size="5" value="0.00" /></label></td>
	</tr>			
	<tr>
	<td><input type="text" class="right" name="computer" id="computer" size="5" onchange="calculate()" tabindex="10" /></td>
	<td><label for="computer">Computer Use (Hours per Month)</label></td>
	<td><label for="computerResult">$
	<input type="text" class="right" id="computerResult" size="5" value="0.00" /></label></td>
	</tr>			
	<tr>

	<td><input type="text" class="right" name="database" id="database" size="5" onchange="calculate()" tabindex="11" /></td>
	<td><label for="database">Databases Used per Month (Number of Separate Databases)</label></td>
	<td><label for="databaseResult">$
	<input type="text" class="right" id="databaseResult" size="5" value="0.00" /></label></td>
	</tr>			
	<tr>
	<td><input type="text" class="right" name="reference" id="reference" size="5" onchange="calculate()" tabindex="12" /></td>
	<td><label for="reference">Reference Questions Asked per Month</label></td>
	<td><label for="referenceResult">$
	<input type="text" class="right" id="referenceResult" size="5" value="0.00" /></label></td>

	</tr>			
	<tr class="boldthis" style="font-size: 120%;">
	<td colspan="2" align="right">
	Value you receive monthly from <span id="librarychoice">your library</span>:
	</td>
	<td>$<span id="totalResult"></span></td>
	</tr>			
	<tr class="boldthis" style="font-size: 150%;">
	<td colspan="3" align="center">For every <span class="red">$1.00</span> in taxes you invest in your library, you receive 
		<span class="red">$</span><span id="personalvalue"></span> of value in return*</td>

	</tr>
	<tr>
	<td align="left"><input type="button" value="Recalculate" onclick="calculate()"></td>
	<td align="center"><input type="reset" value="Reset"</td>
	</tr>
	</table>		
	
	<p class="small" style="margin-top: 40px;">
		<strong>Where did these numbers come from?</strong><br />
		Typical taxpayer contributions are determined from the library"s 2006 local income per capita. For libraries in Colorado, this can be found at 
			<a href="data-tools/public-libraries/annual-statistics/">data-tools/public-libraries/annual-statistics/</a>.  
		We borrowed value of library service figures from Maine State Library"s <a href="http://www.maine.gov/msl/services/calculator.htm">
			Library Use Value Calculator</a>. 
		For more information, see their <a href="http://www.maine.gov/msl/services/calexplantion.htm">explanation</a>.
	</p>							
	<div class="small" id="yourresult">
		<p>*Your personal return on investment is based on your responses and the typical annual tax contribution for <span class="boldthis">
		--INSERT YOUR LIBRARY NAME HERE--</span>. You see a returned value of $<span id="yourvalue"></span> for every one dollar invested.
		 Visit <a href="data-tools/public-libraries/annual-statistics/">data-tools/public-libraries/annual-statistics/</a> to find Local Income per Capita for Colorado"s public 
		 libraries.</p>
	</div>
	</form>

Javascript

All of the calculations are done with the following Javascript function. Insert this code into the head section of your web document. The calculator relies on your library's Local Income per Capita to calculate a Return on Investment - you will need to insert your Income per Capita into the code as variable incpercap in the second line. Colorado libraries can find their per capita income at data-tools/public-libraries/annual-statistics/. If you added any elements to the HTML code, you will need to add them in the Javascript. If you removed any elements from the HTML code, you'll need to remove the corresponding code here as well.

Code (non-jQuery - scroll below for jQuery:

<script type="text/javascript">
function calculate() {	  
	var incpercap;
	incpercap =  //INSERT YOUR LIBRARY'S INCOME PER CAPITA HERE - COLORADO INFORMATION AVAILABLE AT data-tools/public-libraries/annual-statistics/;
	
	var monthinc = incpercap / 12;
	
	var booksValue = document.calculator.books.value * 15;
	document.getElementById("booksResult").value = booksValue.toFixed(2);
	
	var magazineValue = document.calculator.magazine.value * 2;
	document.getElementById("magazineResult").value = magazineValue.toFixed(2);
	
	var videoValue = document.calculator.video.value * 4;
	document.getElementById("videoResult").value = videoValue.toFixed(2);
	
	var audioValue = document.calculator.audio.value * 10;
	document.getElementById("audioResult").value = audioValue.toFixed(2);
	
	var libmagValue = document.calculator.libmag.value * 2;
	document.getElementById("libmagResult").value = libmagValue.toFixed(2);
	
	var illValue = document.calculator.ill.value * 25;
	document.getElementById("illResult").value = illValue.toFixed(2);
	
	var meetingValue = document.calculator.meeting.value * 50;
	document.getElementById("meetingResult").value = meetingValue.toFixed(2);
	
	var computerValue = document.calculator.computer.value * 12;
	document.getElementById("computerResult").value = computerValue.toFixed(2);
	
	var databaseValue = document.calculator.database.value * 20;
	document.getElementById("databaseResult").value = databaseValue.toFixed(2);
	
	var referenceValue = document.calculator.reference.value * 7;
	document.getElementById("referenceResult").value = referenceValue.toFixed(2);
	
	var programValue = document.calculator.program.value * 10;
	document.getElementById("programResult").value = programValue.toFixed(2);
	
	var program2Value = document.calculator.program2.value * 6;
	document.getElementById("program2Result").value = program2Value.toFixed(2);
	
						 
	var totalresult = booksValue+magazineValue+videoValue+audioValue+libmagValue+illValue+meetingValue+computerValue+databaseValue+referenceValue+programValue+program2Value;
	document.getElementById("totalResult").innerHTML = totalresult.toFixed(2);
	
	var personalvalue = totalresult / monthinc;
	document.getElementById("yourvalue").innerHTML = personalvalue.toFixed(2);	
	document.getElementById("personalvalue").innerHTML = personalvalue.toFixed(2);	
	document.getElementById("rightside").innerHTML = "<h3>Your Personal ROI</h3><h2>$"+personalvalue.toFixed(2)+"</h2><p>For every <span class='red'>$1.00</span> in taxes you invest in your library, you receive <span class='red'>$"+personalvalue.toFixed(2)+"</span> of value in return*</p>";
	document.getElementById("rightside").style.border = "2px dashed #003366";
	
	
	if(isNaN(booksValue)) {alert("Your response for number of books borrowed contains a non-numeric character. Please re-enter your response.");}
	if(isNaN(magazineValue)) {alert("Your response for number of magazines borrowed contains a non-numeric character. Please re-enter your response.");}
	if(isNaN(videoValue)) {alert("Your response for number of videos borrowed contains a non-numeric character. Please re-enter your response.");}
	if(isNaN(audioValue)) {alert("Your response for number of audio materials borrowed contains a non-numeric character. Please re-enter your response.");}
	if(isNaN(libmagValue)) {alert("Your response for number of magazines read in the library contains a non-numeric character. Please re-enter your response.");}
	if(isNaN(illValue)) {alert("Your response for number of interlibrary loans contains a non-numeric character. Please re-enter your response.");}
	if(isNaN(meetingValue)) {alert("Your response for number of hours of meeting room use contains a non-numeric character. Please re-enter your response.");}
	if(isNaN(computerValue)) {alert("Your response for number of hours using the computer contains a non-numeric character. Please re-enter your response.");}
	if(isNaN(databaseValue)) {alert("Your response for number of databases used contains a non-numeric character. Please re-enter your response.");}
	if(isNaN(referenceValue)) {alert("Your response for number of reference questions asked contains a non-numeric character. Please re-enter your response.");}
	if(isNaN(programValue)) {alert("Your response for number of adult programs attended contains a non-numeric character. Please re-enter your response.");}
	if(isNaN(program2Value)) {alert("Your response for number of children's programs attended contains a non-numeric character. Please re-enter your response.");}

	
}
</script>

jQuery javascript code (for this to be used, the page must also include jQuery code (http://jquery.com/)

<script type="text/javascript">
function calculate() {	  
	var incpercap;
	incpercap =  //INSERT YOUR LIBRARY'S INCOME PER CAPITA HERE - COLORADO INFORMATION AVAILABLE AT data-tools/public-libraries/annual-statistics/;
	
	var monthinc = incpercap / 12;
	
	var booksValue = $("#books").val()*15
	$("#booksResult").val(booksValue.toFixed(2));
	
	var magazineValue = $("#magazine").val()*2;
	$("#magazineResult").val(magazineValue.toFixed(2));
	
	var videoValue = $("#video").val()*4;
	$("#videoResult").val(videoValue.toFixed(2));
	
	var audioValue = $("#audio").val()*10;
	$("#audioResult").val(audioValue.toFixed(2));
	
	var libmagValue = $("#libmag").val()*2;
	$("#libmagResult").val(libmagValue.toFixed(2));
	
	var illValue = $("#ill").val()*25;
	$("#illResult").val(illValue.toFixed(2));
	
	var meetingValue = $("#meeting").val()*50;
	$("#meetingResult").val(meetingValue.toFixed(2));
	
	var computerValue = $("#computer").val()*12;
	$("#computerResult").val(computerValue.toFixed(2));
	
	var databaseValue = $("#database").val()*20;
	$("#databaseResult").val(databaseValue.toFixed(2));
	
	var referenceValue = $("#reference").val()*7;
	$("#referenceResult").val(referenceValue.toFixed(2));
	
	var programValue = $("#program").val()*10;
	$("#programResult").val(programValue.toFixed(2));
	
	var program2Value = $("#program2").val()*6;
	$("#program2Result").val(program2Value.toFixed(2));
	
						 
	var totalresult = booksValue+magazineValue+videoValue+audioValue+libmagValue+illValue+meetingValue+computerValue+databaseValue+referenceValue+programValue+program2Value;
	$("#totalResult").html(totalresult.toFixed(2));
	
	var personalvalue = totalresult / monthinc;
	$("#personalvalue").html(personalvalue.toFixed(2));	
	$("#librarychoice").html(thislib);	
	$("#rightside").html("<h3>Your Personal ROI</h3><h2>$"+personalvalue.toFixed(2)+"</h2><p>For every <span class='red'>$1.00</span> in taxes you invest in your library, you receive <span class='red'>$"+personalvalue.toFixed(2)+"</span> of value in return*</p>");
	$("#rightside").css("border", "2px dashed #003366");

	var totalvalue=totalresult.toFixed(2);
	var roi=personalvalue.toFixed(2);
	
	
	if(isNaN(booksValue)) {alert("Your response for number of books borrowed contains a non-numeric character. Please re-enter your response.");}
	if(isNaN(magazineValue)) {alert("Your response for number of magazines borrowed contains a non-numeric character. Please re-enter your response.");}
	if(isNaN(videoValue)) {alert("Your response for number of videos borrowed contains a non-numeric character. Please re-enter your response.");}
	if(isNaN(audioValue)) {alert("Your response for number of audio materials borrowed contains a non-numeric character. Please re-enter your response.");}
	if(isNaN(libmagValue)) {alert("Your response for number of magazines read in the library contains a non-numeric character. Please re-enter your response.");}
	if(isNaN(illValue)) {alert("Your response for number of interlibrary loans contains a non-numeric character. Please re-enter your response.");}
	if(isNaN(meetingValue)) {alert("Your response for number of hours of meeting room use contains a non-numeric character. Please re-enter your response.");}
	if(isNaN(computerValue)) {alert("Your response for number of hours using the computer contains a non-numeric character. Please re-enter your response.");}
	if(isNaN(databaseValue)) {alert("Your response for number of databases used contains a non-numeric character. Please re-enter your response.");}
	if(isNaN(referenceValue)) {alert("Your response for number of reference questions asked contains a non-numeric character. Please re-enter your response.");}
	if(isNaN(programValue)) {alert("Your response for number of adult programs attended contains a non-numeric character. Please re-enter your response.");}
	if(isNaN(program2Value)) {alert("Your response for number of children's programs attended contains a non-numeric character. Please re-enter your response.");}
}
</script>
	

Styles

The final thing that we included in our code was the style section. Place the following code in the head section of your web document.

Code:

	<style> 
		 h2 {margin-bottom: 0; margin-top: 30px;}
		 #librarychoice, #personalvalue, #yourvalue, .boldthis, #totalResult {color: #003366; font-weight: bold;}
		 .red, #personalvalue {color: #770000;}
		 tr.boldthis td {padding-bottom: 20px;}
		 #content th {text-align: left;}
		 #leftside {float: left; margin-right: 25px;}
		 #rightside {float: left; width: 350px; text-align: center; padding: 10px;}
		 #rightside h2 {color: #770000; margin-top: 0; padding-top: 0; font-size: 220%;}
		 #rightside h3 {color: #003366; margin-bottom: 15px;}
		 .small {width: 600px; max-width: 600px;}
		 .right {text-align: right;}		 
	</style>