Online Balloon Analogue Risk Task (oBART)

Example 5

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: '#FF7B00',   // color of balloons
   					earnings: 10,       // points earned for each pump
   					popprob: 100        // probability of popping; defined as 1 out of popprop
   				      },
   				   s: { showpumpcount: true,                             // show number of pumps 
     				        showballooncount:  true,                         // show number of balloons
   				        showcurrentearned: true,                         // show potential earnings
   					showtotalearned: true,                           // show total earnings
   					showpopprob: true,                               // show probability of explosion
   					showpumpsused: false,                            // show percentage of pumps used
   					txt_cashin: '$$ Cash in $$',                     // text on 'Cash in' button
   					txt_inflate: 'Inflate balloon',                  // text on 'Inflate' button
   					txt_next:    'Next balloon',                     // text on 'Next' button
   					txt_balloon_number: 'Balloon number: ',          // text for balloon number
   					txt_number_of_pumps: 'Number of pumps: ',        // text for number of pumps
   					txt_current_earned: 'Current earned: ',          // text for current earnings
   					txt_total_earned: 'Total earned: ',              // text for total earnings
   					txt_prob_explosion: 'Probability of explosion:', // text for probability of explosion
   					txt_pumps_used: 'Max. available pumps used:'     // text for percentage of used pumps
   				      }
   				  } );
   	});
   </script>
   

   The element s can also be used to specify the information displayed on the test.