Online Balloon Analogue Risk Task (oBART)

Example 6

For more information see http://timo.gnambs.at.

Instructions

1. Load all required files for the BART in the head of the page:

   
   <script type="text/javascript" src="src/jquery-3.0.0.min.js"></script>	<!-- basic javascript library for dom manipulation -->
   <script type="text/javascript" src="src/jcanvas.min.js"></script>      	<!-- the canvas plugin -->
   <script type="text/javascript" src="src/jquery.bart.js"></script>       <!-- the main BART plugin -->
   <link rel="stylesheet" type="text/css" href="src/jquery.bart.css" />    <!-- additional styles for to make the BART look fancy -->
   

2. Create an element in the body of the page with a unique id-attribute (here: "bart"):

   <div id="bart"></div>

3. Create a script section in the head of the page:

   
   <script type="text/javascript">
   </script>
   

4. Initialize the BART script after the page has loaded:

   
   <script type="text/javascript">
   	$(document).ready(function() {   // initialize the BART after the page has loaded
   	});
   </script>
   

5. Define the BART (e.g., number and color of balloons) using the id defined in step 2 (see head of src/jquery.bart.js for configuration options):

   
   <script type="text/javascript">
   	$(document).ready(function() {   // initialize the BART after the page has loaded
   		// create a BART with 5 balloons
   		$("#bart").bart( { b: 5,                       // create 5 balloons
   				   o: { color: 'green',        // color of balloons
   					earnings: 1,           // points earned for each pump
   					popprob: 10,           // probability of popping; defined as 1 out of popprop
   					onexplode: myexplode   // user-defined function invoked after an explosion
   				       },
   				    s: { frmids_pumps: ['pump1', 'pump2', 'pump3', 'pump4', 'pump5'],    // IDs for hidden form elements used to save the number of pumps for a given balloon
   					 frmids_exploded: ['expl1', 'expl2', 'expl3', 'expl4', 'expl5'], // IDs for hidden form elements used to save whether a balloon exploded
   					 onload: myload,         // user-defined function invoked after starting the BART
   					 onend:  myend           // user-defined function invoked after finishing the BART
   					}
   				  } );
   	});
   </script>
   

   There are several hooks to define your own functions that are invoked after starting the test (onload), after finishing the test (onend), after displaying a balloon (onstart), after inflating an balloon (oninflate), and after an explosion (onexplode). Here the function myexplode is run each time a balloon explodes:

   
   		// user-defined function invoked after an explosion
   		var myexplode = function() { alert('BOOM! Better luck next time!'); }
   

   The function myload is run one time right after the BART has been loaded and the user can start the test:

   
   		// user-defined function invoked when starting the BART
   		var myload = function() {  alert('Good luck!'); }
   

   The function myend is run one time right after finishing the BART. Here the number of points are calculated based on the data saved to the hidden form elements:

   
   		// user-defined function invoked after finishing the BART
   		var myend = function() {
   			var points = 0;
   			for(var i = 1; i <= 5; i++) { // run over all balloons
   				if(Number($('#expl' + i).attr('value')) == 0) {
   					points = points + Number($('#pump' + i).attr('value')) // get information saved to the hidden form element
   				}
   			}
   			alert('You achieved ' + points + ' points.');
   		}