VR ROI Calculator bh<title>  <link href="assets/bootstrap/css/bootstrap.min.css" rel="stylesheet">  <style> #form_id input, input[type="text"], select { height: 38px !important; } .error{ color: red; } .fade { opacity: 1.6; } .fade:not(.show) { opacity: 1.6; } .modal { top: 10%; } .modal.fade .modal-dialog { transform: translate(0,0%); transition: transform .3s ease-out; } #agreemant{ z-index: 99999; } .lb{ font-size: 10px; } .modal-backdrop { z-index: 9; } a:hover{ text-decoration: none; } .wrap-detail-page form label { margin-top: 0px; } .form-group { margin-bottom: 0rem; } hr { margin-top: 0rem; margin-bottom: 0rem; } /**/ /* Tooltip container */ .tooltip1 { position: relative; display: inline-block; } /* Tooltip text */ .tooltip1 .tooltiptext { visibility: hidden; width: 300px; background-color: #888; color: #fff; text-align: left; padding: 10px; border-radius: 6px; /* Position the tooltip text - see examples below! */ position: absolute; z-index: 1; } /* Show the tooltip text when you mouse over the tooltip container */ .tooltip1:hover .tooltiptext { visibility: visible; } #form_id{ background-color: #2276b9; color: #fff; } #form_id input { background-color: #ffffff; border: 1px solid #f2f5fa; padding: 10px !important; border-radius: 2px !important; height: 40px !important; margin-bottom: 2px; } #form_id input[type=text]:disabled { background: #dddddd; } hr { background-color: #fff; margin-bottom: 0px !important; margin-top: 5px !important; } h6 { padding-bottom: 5px; } .padsmall p{ /* margin: 0 0 -25px;*/ } </style> <style type="text/css" class="init"></style>    <script type="text/javascript" language="javascript" src="assets/js/jquery-3.3.1.js"></script> <script type="text/javascript" language="javascript" src="assets/js/jquery.validate.min.js"></script>   <script type="text/javascript" language="javascript" src="assets/bootstrap/js/bootstrap.bundle.min.js"></script> <script type="text/javascript"> function firstpartvalidate(){ if(!$("#form_id").valid()){return false; }else{ //jQuery.noConflict(); // $("#exampleModal .show").click(); $('#exampleModal').modal('show'); // window.$('#exampleModal').modal(); // showValues(); } } function numberWithCommas(x){ x = x.replace(/\B(?=(\d{3})+(?!\d))/g, ","); return x;//.match(/^\d+\.?\d{0,2}/); } $( function(){ $("#form_id").submit(function(){return false;}); }) //jQuery(document).ready(function($){ $( document ).ready(function() { //document.getElementById("form_id").addEventListener("click", function(event){event.preventDefault()}); //document.getElementById("subscribe_form").addEventListener("click", function(event){event.preventDefault()}); //jQuery.noConflict(); $("#results-table").hide(); //$(function(){ $('.dolar').blur(function() { var curr_with_text = $(this).val(); var curr = '$'+curr_with_text.replace(/[^0-9\[.]/g, ''); //var curr = curr_with_text.replace(',', ''); $(this).val(numberWithCommas(curr)); }) $('.perc').blur(function() { var curr_with_text = $(this).val(); var curr = curr_with_text.replace(/[^0-9\[.]/g, '')+'%'; //var curr = curr_with_text.replace(',', ''); $(this).val(numberWithCommas(curr)); }) //$(".dolar").maskMoney({thousands:',', prefix: '$', integer: true}); //$(".perc").maskMoney({thousands:',', decimal:'.', suffix: '%', allowDecimal: false}); //}) $("#form_id").validate({ /* errorPlacement: function(error, element) { $(element).parents('.err').append(error); },*/ rules: { number_of_employees: {required: true, digits: true}, email: {required: true, email: true}, first_name: {required: true}, last_name: {required: true}, }, }); }) /* function changable_fileds(){ //jQuery(document).ready(function($){ //Investment var vr_content_development = $('#vr_content_development').val().replace(/[^0-9\.]/g, ''); var implementing_purchasing_vr_training_hardware = $('#implementing_purchasing_vr_training_hardware').val().replace(/[^0-9\.]/g, ''); var licencing_maintenance_ongoing_support = $('#licencing_maintenance_ongoing_support').val().replace(/[^0-9\.]/g, ''); var internal_resources_time_and_effort = $('#internal_resources_time_and_effort').val().replace(/[^0-9\.]/g, ''); //Assumptions var cost_for_vr_training_scenario_per_employee = $('#cost_for_vr_training_scenario_per_employee').val().replace(/[^0-9\.]/g, ''); var hardware_cost_per_device = $('#hardware_cost_per_device').val().replace(/[^0-9\.]/g, ''); var percentage_based_off_total_vr_training_scenario = $('#percentage_based_off_total_vr_training_scenario').val().replace(/[^0-9\.]/g, ''); var time_and_effort_from_internal_tms = $('#time_and_effort_from_internal_tms').val().replace(/[^0-9\.]/g, ''); var efficiency_time_cost_savings = $('#efficiency_time_cost_savings').val().replace(/[^0-9\.]/g, ''); $('#vr_content_development_hid').val(vr_content_development); $('#implementing_purchasing_vr_training_hardware_hid').val(implementing_purchasing_vr_training_hardware); $('#licencing_maintenance_ongoing_support_hid').val(licencing_maintenance_ongoing_support); $('#internal_resources_time_and_effort_hid').val(internal_resources_time_and_effort); $('#cost_for_vr_training_scenario_per_employee_hid').val(cost_for_vr_training_scenario_per_employee); $('#hardware_cost_per_device_hid').val(hardware_cost_per_device); $('#percentage_based_off_total_vr_training_scenario_hid').val(percentage_based_off_total_vr_training_scenario); $('#time_and_effort_from_internal_tms_hid').val(time_and_effort_from_internal_tms); $('#efficiency_time_cost_savings_hid').val(efficiency_time_cost_savings); vr(); //}) }*/ function vr1(){ //jQuery(document).ready(function($){ //alert('OK'); var company_name = $('#company_name').val(); var number_of_employees = $('#number_of_employees').val().replace(/[^0-9\.]/g, '')*1; var pay_per_hour = $('#pay_per_hour').val().replace(/[^0-9\.]/g, '')*1; //alert(pay_per_hour); //Investment var vr_content_development = $('#vr_content_development').val().replace(/[^0-9\.]/g, '')*1; var implementing_purchasing_vr_training_hardware = $('#implementing_purchasing_vr_training_hardware').val().replace(/[^0-9\.]/g, '')*1; var licencing_maintenance_ongoing_support = $('#licencing_maintenance_ongoing_support').val().replace(/[^0-9\.]/g, '')*1; var internal_resources_time_and_effort = $('#internal_resources_time_and_effort').val().replace(/[^0-9\.]/g, '')*1; //Assumptions /*var cost_for_vr_training_scenario_per_employee = $('#cost_for_vr_training_scenario_per_employee').val().replace(/[^0-9\.]/g, ''); var hardware_cost_per_device = $('#hardware_cost_per_device').val().replace(/[^0-9\.]/g, ''); var percentage_based_off_total_vr_training_scenario = $('#percentage_based_off_total_vr_training_scenario').val().replace(/[^0-9\.]/g, ''); var time_and_effort_from_internal_tms = $('#time_and_effort_from_internal_tms').val().replace(/[^0-9\.]/g, ''); */ //Travel var trip_reductions = $('#trip_reductions').val().replace(/[^0-9\.]/g, '')*1; var cost_per_trip = $('#cost_per_trip').val().replace(/[^0-9\.]/g, '')*1; var work_hours_lost = $('#work_hours_lost').val().replace(/[^0-9\.]/g, '')*1; //Savings on Travel var reduced_travel_cost_savings = $('#reduced_travel_cost_savings').val().replace(/[^0-9\.]/g, ''); var travel_productivity_gain_savings = $('#travel_productivity_gain_savings').val().replace(/[^0-9\.]/g, ''); /* //Sustainability var vehicle_type_personal_vehicle = $('#vehicle_type_personal_vehicle').val(); var vehicle_type_bus = $('#vehicle_type_bus').val(); var vehicle_type_airplane = $('#vehicle_type_airplane').val(); //Savings on Sustainability var disel = $('#disel').val(); var gas = $('#gas').val(); var trip_length_in_klm = $('#trip_length_in_klm').val(); */ //Training var training_duration = $('#training_duration').val().replace(/[^0-9\.]/g, '')*1; var training_sessions = $('#training_sessions').val().replace(/[^0-9\.]/g, '')*1; //Savings on Training var productivity_time_cost_savings = $('#productivity_time_cost_savings').val().replace(/[^0-9\.]/g, '')*1; var efficiency_time_cost_savings = $('#efficiency_time_cost_savings').val().replace(/[^0-9\.]/g, '')*1; //Materials var equipment_materials = $('#equipment_materials').val().replace(/[^0-9\.]/g, ''); //Savings on Material Usage var savings_on_material_usage = $('#savings_on_material_usage').val().replace(/[^0-9\.]/g, ''); //Incidents var incident_cost = $('#incident_cost').val().replace(/[^0-9\.]/g, ''); var incident_frequency = $('#incident_frequency').val().replace(/[^0-9\.]/g, ''); var productivity_loss = $('#productivity_loss').val().replace(/[^0-9\.]/g, ''); //Savings from Incident Reductions var savings_from_incident_reductions = $('#savings_from_incident_reductions').val().replace(/[^0-9\.]/g, ''); ///CALCULATIONS/// /* var vr_content_development_val = number_of_employees*cost_for_vr_training_scenario_per_employee; var implementing_purchasing_vr_training_hardware_val = number_of_employees*hardware_cost_per_device*0.02; var licencing_maintenance_ongoing_support_val = vr_content_development_val * 0.1; var internal_resources_time_and_effort_val = implementing_purchasing_vr_training_hardware_val*0.1; if($('#vr_content_development_hid').val()==0){$('#vr_content_development').val(vr_content_development_val.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ","));} if($('#implementing_purchasing_vr_training_hardware_hid').val()==0){$('#implementing_purchasing_vr_training_hardware').val(implementing_purchasing_vr_training_hardware_val.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ","));} if($('#licencing_maintenance_ongoing_support_hid').val()==0){$('#licencing_maintenance_ongoing_support').val(licencing_maintenance_ongoing_support_val.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ","));} if($('#internal_resources_time_and_effort_hid').val()==0){$('#internal_resources_time_and_effort').val(internal_resources_time_and_effort_val.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ","));} */ var cost_year_1_val = vr_content_development*1+implementing_purchasing_vr_training_hardware*1+licencing_maintenance_ongoing_support*1+internal_resources_time_and_effort*1; var cost_year_2_val = licencing_maintenance_ongoing_support*1; var cost_year_3_val = licencing_maintenance_ongoing_support*1; var cost_year_4_val = licencing_maintenance_ongoing_support*1+implementing_purchasing_vr_training_hardware*1; $('#cost_year_1').html(cost_year_1_val.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",")); $('#cost_year_2').html(cost_year_2_val.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",")); $('#cost_year_3').html(cost_year_3_val.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",")); $('#cost_year_4').html(cost_year_4_val.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",")); $('#cost_year_5').html(licencing_maintenance_ongoing_support.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",")); var reduced_travel_cost_savings_val = trip_reductions*cost_per_trip*number_of_employees; var travel_productivity_gain_savings_val = work_hours_lost*trip_reductions*pay_per_hour*number_of_employees; var productivity_time_cost_savings_val = training_duration*training_sessions*pay_per_hour*number_of_employees*efficiency_time_cost_savings/100; var savings_from_incident_reductions_val = incident_cost*incident_frequency+productivity_loss*incident_frequency*pay_per_hour; var savings_year_1_5_val = reduced_travel_cost_savings_val*1+travel_productivity_gain_savings_val*1+productivity_time_cost_savings_val*1+equipment_materials*1+savings_from_incident_reductions_val*1; $('#reduced_travel_cost_savings').val(reduced_travel_cost_savings_val.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",")); $('#travel_productivity_gain_savings').val(travel_productivity_gain_savings_val.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",")); $('#productivity_time_cost_savings').val(productivity_time_cost_savings_val.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",")); $('#savings_on_material_usage').val(equipment_materials.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",")); $('#savings_from_incident_reductions').val(savings_from_incident_reductions_val.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",")); $('#savings_year_1_5').html(savings_year_1_5_val.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",")); var year_one_val = savings_year_1_5_val-cost_year_1_val; var year_two_val = savings_year_1_5_val-cost_year_2_val; var year_three_val = savings_year_1_5_val-cost_year_3_val; var year_four_val = savings_year_1_5_val-cost_year_4_val; $('#year_one').html(year_one_val.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",")); $('#year_two').html(year_two_val.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",")); $('#year_three').html(year_three_val.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",")); $('#year_four').html(year_four_val.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",")); // }) } function vr(){ //jQuery(document).ready(function($){ if(!$("#form_id").valid()){return false;}else{ //$("#exampleModal .close").click(); //$('#exampleModal').modal('hide'); //$('#exampleModal').modal('toggle'); // var profit = $('#profit').val(); // var profit1 = profit.replace(/[^0-9\.]/g, ''); // var revenue = $('#revenue').val(); // var revenue1 = revenue.replace(/[^0-9\.]/g, ''); //if(profit1>0 && revenue1>0 && revenue1-profit1<0){ // alert('Profit must be Lower than revenue'); //}else{ var form=$("#form_id").serialize(); $.ajax({ type: 'post', url: 'ajax.php', data: form, beforeSend: function(){$("#my_loader").css("display", "block");}, success: function (dat) { $("#my_loader").css("display", "none"); $("#results-table").show(); $('#exampleModal').modal('hide'); vr1(); //$( '#results-table' ).html(dat); $('html, body').animate({scrollTop: $("#results-table").offset().top}, 1000); } }); // } } // }) } </script> </head> <body> <div class="container"> <div class="row justify-content-md-center"> <form id="form_id" novalidate="" class="form-horizontal" method="post"> <div class="col-lg-12" style="padding:10px; border:1px solid #ddd;"> <h1>VR Software ROI Calculator 1</h1> <label for="number_of_employees" class="col-sm-10 col-form-label tooltip1"> <h6>The ROI calculator is created to be a guiding tool in establishing feasability for VR training in a material way. Although effective, there are certain aspects that are difficult to quantify in a standardised way. </h6> <span class="tooltiptext"> <h6>These include known benefits such as:</h6> <div class="padsmall"> <p>- Improved training effectiveness</p> <p>- Employee retention</p> <p>- Investor sentiment</p> <p>- Environmental / sustainability impact</p> </div> </span> </label> <hr /> <br /> <div class="row"> <div class="col-sm-12"> <div class="form-group row"> <label for="company_name" class="col-sm-4 col-form-label">Company Name</label> <div class="col-sm-8"> <input id="company_name" name="company_name" placeholder="Sample Company" value="" onchange="vr()" type="text" class="form-control" required="required"> </div> </div> </div> <div class="col-sm-6"> <div class="form-group row"> <label for="number_of_employees" class="col-sm-8 col-form-label tooltip1"> Number of employees <span class="tooltiptext">- Total employees enrolled in VR training</span> </label> <div class="col-sm-4"> <input id="number_of_employees" name="number_of_employees" placeholder="4,000" value="" onchange="vr()" type="digits" class="form-control" required="required"> </div> </div> </div> <div class="col-sm-6"> <div class="form-group row"> <label for="pay_per_hour" class="col-sm-8 col-form-label tooltip1"> Pay per hour <span class="tooltiptext">- Average pay per hour per employee enrolled in VR training</span> </label> <div class="col-sm-4"> <input id="pay_per_hour" name="pay_per_hour" placeholder="$25" type="text" value="" onchange="vr()" class="form-control dolar" required="required"> </div> </div> </div> </div> <hr /> <div class="row"> <div class="col-sm-6"> <h5><strong>Investment</strong></h5> <div class="form-group row"> <label for="vr_content_development" class="col-sm-8 col-form-label">VR content development</label> <div class="col-sm-4"> <input id="vr_content_development" name="vr_content_development" placeholder="$1,000,000" value="" onchange="vr()" type="text" class="form-control dolar" required="required"> </div> </div> <div class="form-group row"> <label for="implementing_purchasing_vr_training_hardware" class="col-sm-8 col-form-label">Implementing & purchasing VR Training Hardware</label> <div class="col-sm-4"> <input id="implementing_purchasing_vr_training_hardware" name="implementing_purchasing_vr_training_hardware" placeholder="$120,000" value="" onchange="vr()" type="text" class="form-control dolar" required="required"> </div> </div> </div> <div class="col-sm-6">  <div style="height: 35px;"></div> <div class="form-group row"> <label for="licencing_maintenance_ongoing_support" class="col-sm-8 col-form-label">Licencing / Maintenance & ongoing support</label> <div class="col-sm-4"> <input id="licencing_maintenance_ongoing_support" name="licencing_maintenance_ongoing_support" placeholder="$100,000" value="" onchange="vr()" type="text" class="form-control dolar" required="required"> </div> </div> <div class="form-group row"> <label for="internal_resources_time_and_effort" class="col-sm-8 col-form-label">Internal resources time and effort</label> <div class="col-sm-4"> <input id="internal_resources_time_and_effort" name="internal_resources_time_and_effort" placeholder="$12,000" value="" onchange="vr()" type="text" class="form-control dolar" required="required"> </div> </div>  </div> </div> <hr />  <input type="hidden" id="efficiency_time_cost_savings_hid" name="efficiency_time_cost_savings_hid" value="0"> <div class="row"> <div class="col-sm-6"> <h5><strong>Travel</strong></h5> <div class="form-group row"> <label for="trip_reductions" class="col-sm-8 col-form-label tooltip1"> Trip reductions <span class="tooltiptext">- Reduction in the number trips*1 per year due to no longer needing access to the learning center or specialized equipment.</span> </label> <div class="col-sm-4"> <input id="trip_reductions" name="trip_reductions" placeholder="2" value="" onchange="vr()" type="text" class="form-control" required="required"> </div> </div> <div class="form-group row"> <label for="cost_per_trip" class="col-sm-8 col-form-label tooltip1"> Cost per trip <span class="tooltiptext">- Average cost per trip*1 among all employees enrolled.</span> </label> <div class="col-sm-4"> <input id="cost_per_trip" name="cost_per_trip" placeholder="$15" value="" onchange="vr()" type="text" class="form-control dolar" required="required"> </div> </div> <div class="form-group row"> <label for="work_hours_lost" class="col-sm-8 col-form-label tooltip1"> Work hours lost <span class="tooltiptext">- Productivity/work hours lost due to travel time per trip*1.</span> </label> <div class="col-sm-4"> <input id="work_hours_lost" name="work_hours_lost" placeholder="16" value="" onchange="vr()" type="text" class="form-control" required="required"> </div> </div> </div> <div class="col-sm-6"> <h5><strong>Savings on Travel</strong></h5> <div class="form-group row"> <label for="reduced_travel_cost_savings" class="col-sm-8 col-form-label tooltip1"> Reduced Travel Cost Savings <span class="tooltiptext">Cost savings from reduced travel costs, by reducing the ammount of trips</span> </label> <div class="col-sm-4"> <input id="reduced_travel_cost_savings" name="reduced_travel_cost_savings" placeholder="$120,000" value="" onchange="vr()" type="text" class="form-control dolar" required="required" disabled> </div> </div> <div class="form-group row"> <label for="travel_productivity_gain_savings" class="col-sm-8 col-form-label tooltip1"> Travel Productivity Gain Savings <span class="tooltiptext">Cost savings from productivity time gained back due to less time spent on travel</span> </label> <div class="col-sm-4"> <input id="travel_productivity_gain_savings" name="travel_productivity_gain_savings" placeholder="$3,200,000" value="" onchange="vr()" type="text" class="form-control dolar" required="required" disabled> </div> </div> </div> </div> <hr />  <div class="row"> <div class="col-sm-6"> <h5><strong>Training</strong></h5> <div class="form-group row"> <label for="training_duration" class="col-sm-8 col-form-label tooltip1"> Training duration <span class="tooltiptext">- The number of hours it takes to typically go through traditional training *2</span> </label> <div class="col-sm-4"> <input id="training_duration" name="training_duration" placeholder="8" value="" onchange="vr()" type="text" class="form-control" required="required"> </div> </div> <div class="form-group row"> <label for="training_sessions" class="col-sm-8 col-form-label tooltip1"> Training sessions <span class="tooltiptext">- The number of training sessions that an employee has to repeat on an annual basis *2</span> </label> <div class="col-sm-4"> <input id="training_sessions" name="training_sessions" placeholder="2" value="" onchange="vr()" type="text" class="form-control" required="required"> </div> </div> </div> <div class="col-sm-6"> <h5><strong>Savings on Training</strong></h5> <div class="form-group row"> <label for="productivity_time_cost_savings" class="col-sm-8 col-form-label tooltip1"> Productivity Time Cost Savings <span class="tooltiptext">Cost savings gained by productivity increases from accelerated training times</span> </label> <div class="col-sm-4"> <input id="productivity_time_cost_savings" name="productivity_time_cost_savings" placeholder="1,040,000" value="" onchange="vr()" type="text" class="form-control dolar" required="required" disabled> </div> </div> <div class="form-group row"> <label for="efficiency_time_cost_savings" class="col-sm-8 col-form-label tooltip1"> Efficiency Time Cost Savings <span class="tooltiptext">Improved efficiency in time to complete VR training vs traditional methods</span> </label> <div class="col-sm-4"> <input id="efficiency_time_cost_savings" name="efficiency_time_cost_savings" placeholder="65%" value="" onchange="vr()" type="text" class="form-control perc" required="required"> </div> </div> </div> </div> <hr /> <div class="row"> <div class="col-sm-6"> <h5><strong>Materials</strong></h5> <div class="form-group row"> <label for="equipment_materials" class="col-sm-8 col-form-label tooltip1"> Equipment & materials <span class="tooltiptext">- Company wide cost incured from damaged equipment & materials used for hands on trinaing over a one year period. *2</span> </label> <div class="col-sm-4"> <input id="equipment_materials" name="equipment_materials" placeholder="$5,000" value="" onchange="vr()" type="text" class="form-control dolar" required="required"> </div> </div> </div> <div class="col-sm-6"> <h6>Savings on Material Usage</h6> <div class="form-group row"> <label for="savings_on_material_usage" class="col-sm-8 col-form-label">Elimination of materials used for training as well as damaged equipment</label> <div class="col-sm-4"> <input id="savings_on_material_usage" name="savings_on_material_usage" placeholder="$5,000" value="" onchange="vr()" type="text" class="form-control dolar" required="required" disabled> </div> </div> </div> </div> <hr /> <div class="row"> <div class="col-sm-6"> <h5><strong>Incidents</strong></h5> <div class="form-group row"> <label for="incident_cost" class="col-sm-8 col-form-label tooltip1"> Incident cost <span class="tooltiptext">- Average cost per incident in training *2</span> </label> <div class="col-sm-4"> <input id="incident_cost" name="incident_cost" placeholder="$10,000" value="" onchange="vr()" type="text" class="form-control dolar" required="required"> </div> </div> <div class="form-group row"> <label for="incident_frequency" class="col-sm-8 col-form-label tooltip1"> Incident frequency <span class="tooltiptext">- Number of incidents per year that can be eliminated by incorporating VR training</span> </label> <div class="col-sm-4"> <input id="incident_frequency" name="incident_frequency" placeholder="2" value="" onchange="vr()" type="text" class="form-control" required="required"> </div> </div> <div class="form-group row"> <label for="productivity_loss" class="col-sm-8 col-form-label tooltip1"> Productivity loss <span class="tooltiptext">- Time in hours lost due to downtime, filing reports & investigations - per incident</span> </label> <div class="col-sm-4"> <input id="productivity_loss" name="productivity_loss" placeholder="8" value="" onchange="vr()" type="text" class="form-control" required="required"> </div> </div> </div> <div class="col-sm-6"> <h6>Savings from Incident Reductions</h6> <div class="form-group row"> <label for="savings_from_incident_reductions" class="col-sm-8 col-form-label">Cost savings gained by reducing the number of incidents & productivity loss</label> <div class="col-sm-4"> <input id="savings_from_incident_reductions" name="savings_from_incident_reductions" placeholder="$20,400" value="" onchange="vr()" type="text" class="form-control dolar" required="required" disabled> </div> </div> <div class="form-group">   <button type="button" id="calculate_first" class="btn btn-light" style="width: 100%;" onclick="vr()" >Calculate</button>  </div> </div> </div> <hr /> <div class="clearfix"></div> <br /> <div id="results-table"> <h2><strong>Results</strong></h2> <table style="width:100%;" class="table"> <tr><th colspan="4">Return On Investment</th></tr> <tr><td>Year One</td><td>Year Two</td><td>Year Three</td><td>Year Four</td></tr> <tr><td>$<span id="year_one">0</span></td><td>$<span id="year_two">0</span></td><td>$<span id="year_three">0</span></td><td>$<span id="year_four">0</span></td></tr> </table> <br /> <table style="width:100%; margin-left: 10px; margin-right: 10px;" class="table"> <tr><td>Cost: Year 1</td><td>$<span id="cost_year_1">0</span></td><td>Savings: Year 1 - 5</td><td>$<span id="savings_year_1_5">0</span></td></tr> <tr><td>Cost: Year 2</td><td>$<span id="cost_year_2">0</span></td><td></td><td></td></tr> <tr><td>Cost: Year 3</td><td>$<span id="cost_year_3">0</span></td><td></td><td></td></tr> <tr><td>Cost: Year 4</td><td>$<span id="cost_year_4">0</span></td><td>Typical timeframe to refresh hardware (3-4 Years)</td><td></td></tr> <tr><td>Cost: Year 5</td><td>$<span id="cost_year_5">0</span></td><td></td><td></td></tr> </table> </div> <p class="small">*1 Travelling both ways</p> <p class="small">*2 That will be replaced by the VR simulation</p> </div>  <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true"> <div class="modal-dialog" role="document"> <div class="modal-content"> <div class="modal-header"> <h3 class="modal-title" id="exampleModalLabel" style="color: black;">Please subscribe for the results</h3> <button type="button" class="close" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">×</span> </button> </div> <div class="modal-body">  <div class="form-group err"> <label for="email">Email</label> <input id="email" name="email" placeholder="Email" type="email" class="form-control" required="required"> </div> <div class="form-group err"> <label for="first_name">First Name</label> <input id="first_name" name="first_name" placeholder="First Name" type="text" class="form-control" required="required"> </div> <div class="form-group err"> <label for="last_name">Last Name</label> <input id="last_name" name="last_name" placeholder="Last Name" type="text" class="form-control" required="required"> </div>  <br /> <div class="form-group">  <div class="col-md-12"> <button name="submit" type="submit" class="btn btn-primary" style="width: 100%;" onclick= "showValues()" >Submit</button> </div> </div> </div>  </div> </div> </div> </form> <div id="my_loader" style="display: none;"><img src="