ab_calc/ab.html at master · kiwidamien/ab_calc · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
<html>

<head>
  <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.6.0/d3.min.js"></script>

  <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
  <link type="text/css" rel="stylesheet" href="http://code.jquery.com/ui/1.9.1/themes/cupertino/jquery-ui.css"></script>
  <link type="text/css" rel="stylesheet" href="ab_document.css" />
  <link type="text/css" rel="stylesheet" href="ab_graph.css" />
</head>

<body>

<div id="setup">
  <h1>Experiment setup</h1>

  <h3>What are you looking for?</h3>

  <div class="question">
    What is the rate for your current procedure (procedure "A")?
    <input id="baserateInput" class="fixed" autocomplete="off" default="5" />%
    <div class="slider" id="baserateInputSlider" data-min="0" data-max="100" data-default="5"></div>
  </div>

  <div class="question">
    What is the minimum improvement (in percentage points) required to convert to a new procedure "B"?
    <input id="diffInput" class="fixed" autocomplete="off" default="2" />
    <div class="slider" id="diffInputSlider" data-min="0" data-max="100" data-default="2"></div>
  </div>

  <div class="question">
    What is your acceptable false acceptance rate <span class="alpha">&alpha;</span>?
    <input id="alphaInput" class="fixed" autocomplete="off" default="5" />
    <div   class = "slider" id="alphaInputSlider" data-min = "0" data-max="100" data-default="5"></div>
  </div>

  <div class="question">
    What is your acceptable is your acceptable false rejection rate <span class="beta">&beta;</span>?
    <input id="betaInput" class="fixed" autocomplete="off" default="1" />
    <div class = "slider" id = "betaInputSlider" data-min="0" data-max="100" data-default="20"> </div>
  </div>

  <h3>Suggested number of trials</h3>

  It is suggested that you run your experiment <span id="#trials1">N</span> number of times.

  Note that with <span id="#trails2">N</span> trials:
  <ul>
    <li>If there is absolutely no difference between procedure A and B you would still
  conclude to incur the costs of a change <span id="#alpha1" class="alpha">&alpha;</span>% of the time. </li>
    <li>If the difference between treatments A and B just hit your threshold of being worth converting
      (i.e. procedure A has a success rate of A, and procedure B has a success rate of B) then your experiment
      will conclude to <i>reject</i> the superior treatment B <span id="#beta1" class="beta">&beta;</span>% .
  </ul>

  <div class="question">
    How many trials do you wish to run:
    <input id="NumberInput" class="fixed" autocomplete="off" default="1000"/>
    <div id="NumberInputSlider">N = 1000</div>
  </div>

  <button> Continue with 1000 trials</button>

</div>


<div id="testResults">
<h1>Results of the two trials</h1>
<div id = "proportion_graph"> </div>
<h1> Cannot comply, Dave</h1>

Currently selected point:
<table>
  <tr><th>Sample Number</th><th>Proportion A</th><th>Proportion B</th></tr>
  <tr><td id="currSample"></td><td id="currA"></td><td id="currB"></td></tr>
  <hr/>
  <tr><td id="totalSample"></td><td id="totalA"></td><td id="totalB"></td></tr>
</table>

</div>

<div id = "conclusion">
  More stuff
</div>

<script type="text/javascript" src="setup_questions.js"></script>


<script type="text/javascript" src="ab_test.js"></script>
<script type="text/javascript" src="ab_graph.js"></script>
</body>
</html>