Online Balloon Analogue Risk Task (oBART)

Example 3

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">
   	// create a BART with 3 blue and 4 red balloons balloons using the default settings
   	$("#bart").bart( { b: [ { b: 3, o: { color: '#000000' } },
   				{ b: 4, o: { color: '#00FF00' } }
   			      ]
   			 } );
   	});
   </script>
   

   If an object with an element named b is passed to the bart()-function and the element b is an array, different types of balloons can be created. Each element of the array is itself an object with two elements b and o referring to the number of balloons and their settings (see Example 2).