<script src='https://unpkg.com/[email protected]/dist/simple-statistics.min.js'></script>
  <script src='https://cdn.plot.ly/plotly-latest.min.js'></script>

  <div id='a_b_test_calculator' style="background-color: #eee;">
    <div id='myDiv'><!-- Plotly chart will be drawn inside this DIV --></div>

    <form name="calculateSignificanceLevelForm" onsubmit="return printFormInputs()">
      Sample Size A: <input type="number" name="n_a" value="500" max="99999">
      <br>
      Success Rate A (%): <input type="number" min="0" max="1" step="0.00001" name="p_a" value="0.05">
      <br>
      Sample Size B: <input type="number" name="n_b" value="100" max="99999">
      <br>
      Success Rate B (%): <input type="number" min="0" max="1" step="0.00001" name="p_b" value="0.1">
      <br><br>
      <input type="submit" value="Calculate the p-value" style="background-color: #4CAF50; color: #ffffff; border-color: #4CAF50;">
    </form>

    <hr>

    <h3 id ="interpreting_the_results">Interpreting The Results</h3>
    <span id = "interpret_results">This section will populate after you complete the form above.</span>

  </div>

  <hr>

<h3 id ="hypothesis_specification">Hypothesis Specification</h3>

<p><span style="text-decoration: underline;">Null Hypothesis</span>: Success Rate A ≥ Success Rate B<br><span style="text-decoration: underline;">Alternative Hypothesis</span>: Success Rate A &lt; Success Rate B<br><span style="text-decoration: underline;">Significance Level, ⍺</span>: 5%</p>

  <hr>

  <h3>Reference Inputs and Computed Statistics</h3>
  <p><span id = "inputs_and_statistics">This section will populate after you complete the form above.</span></p>

  <hr>

  <script>
  function printFormInputs() {
    var significanceLevel = 0.05;
    var n_a = document.forms["calculateSignificanceLevelForm"]["n_a"].value;
    var p_a = document.forms["calculateSignificanceLevelForm"]["p_a"].value;
    var n_b = document.forms["calculateSignificanceLevelForm"]["n_b"].value;
    var p_b = document.forms["calculateSignificanceLevelForm"]["p_b"].value;

    // source: https://www.wisdomjobs.com/e-university/research-methodology-tutorial-355/hypothesis-testing-for-difference-between-proportions-11534.html

    // Standard error of the difference between two sample proportions
    var pooledStandardError = Math.sqrt( ((p_a*(1-p_a))/n_a) + ((p_b*(1-p_b))/n_b) );
    var zStatistic = (p_a - p_b) / pooledStandardError;
    var pValue = ss.cumulativeStdNormalProbability(zStatistic);

    inputs_and_statistics.innerHTML= `n1 = ${n_a}<br>p1 = ${p_a}<br>n2 = ${n_b}<br>p2 = ${p_b}<br>Pooled Standard Error (pooled sample variance) = ${pooledStandardError}<br> Z-statistic, ~N(0,1) = ${zStatistic}<br>p-value = ${pValue}<br>`;

    var rejectNullHupothesis = pValue < significanceLevel ? true : false;

    interpret_results.innerHTML=`Since the P-value (${pValue}) is ${ rejectNullHupothesis ? "less" : "greater"} than the significance level (${significanceLevel}), we ${ rejectNullHupothesis ? "reject the Null Hypothesis in favor of the Alternative Hypothesis" : "cannot reject the Null Hypothesis in favor of the Alternative Hypothesis"}.`

    plotSampleData(n_a,p_a,n_b,p_b);
    return false;
  }

  function plotSampleData(n_a,p_a,n_b,p_b) {
    var x1 = [];
    var x2 = [];
    var simulationCount = 1000;
    for (var i = 1; i < simulationCount; i++)
    {
      var j_1 = 0, sum_1 = 0;
      while(j_1 < n_a){
        if (Math.random() < p_a) {
          sum_1 += 1;
        }
        j_1++;
      }
      x1.push((sum_1*1.0)/n_a);

      var j_2 = 0, sum_2 = 0;
      while(j_2 < n_b){
        if (Math.random() < p_b) {
          sum_2 += 1;
        }
        j_2++;
      }
      x2.push((sum_2*1.0)/n_b);
    }

    var trace1 = {
      x: x1,
      name: "Variation A",
      histnorm: "probability density",
      type: "histogram",
      opacity: 0.5,
      marker: {
         color: 'red',
      },
    };
    var trace2 = {
      x: x2,
      name: "Variation B",
      histnorm: "probability density",
      type: "histogram",
      opacity: 0.6,
      marker: {
         color: 'green',
      },
    };

    var data = [trace1, trace2];
    var layout = {
      barmode: "overlay",
      title: "Visualizing the Distributions",
      xaxis: {title: "Success Rate (%)"},
      yaxis: {title: "Frequency Observing This Sample Estimate"}
    };
    Plotly.newPlot('myDiv', data, layout);

    return false;
  }

  // document.onload = plotSampleData(500,0.05,100,0.1);
  document.onload = printFormInputs();
  </script>