Online Balloon Analogue Risk Task (oBART)

Example 1

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
   		$("#bart").bart( 10 );   // create a BART with default values using 10 balloons
   	});
   </script>
   

   If only a single number is passed to the bart()-function, the number indicates the number of balloons.