-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
191 lines (151 loc) · 7.87 KB
/
index.html
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
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<title>ClientComm Value Estimator</title>
</head>
<link href="https://fonts.googleapis.com/css?family=Raleway:200,300,400,500,600,700,900" rel="stylesheet">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/css/bootstrap.min.css" integrity="sha384-AysaV+vQoT3kOAXZkl02PThvDr8HYKPZhNT5h/CXfBThSRXQ6jW5DO2ekP5ViFdi" crossorigin="anonymous">
<style type="text/css">
body {
padding-top: 50px;
padding-bottom: 100px;
}
.form-group .form-control {
font-size: 48px;
line-height: 56px;
height: 60px;
text-align: center;
font-weight: bold;
/*color: #006400;*/
/*background-color: #c9fdc9;*/
}
</style>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/c3/0.4.10/c3.min.css">
<body>
<div class="container" style="max-width: 500px;">
<h1>
ClientComm
</h1>
<h3>
Simple Value-Add Estimator
</h3>
<h5>
Code for America Team Salt Lake County
</h5>
<div class="calculationMechanism">
<div class="form-group">
<label for="userCount">How many users (e.g. case managers)</label>
<input type="number" class="form-control" id="userCount" value="60">
</div>
<div class="form-group">
<label for="averageCaseLoad">Average case load per case manager</label>
<input type="number" class="form-control" id="averageCaseLoad" value="90">
</div>
<div class="form-group">
<label for="averageCostPerHourUser">Average cost per hour for each case manager ($)</label>
<input type="number" class="form-control" id="averageCostPerHourUser" value="25">
</div>
<div class="form-group">
<label for="failureRate">Current cumulative failure rate - combined technical violations and failure to comply/appear in court (%)</label>
<input type="number" class="form-control" id="failureRate" min="0" max="100" value="50">
</div>
<div class="form-group">
<label for="departmentRecidiviationCost">Estimated average <b>department</b> cost of client recidivating ($)</label>
<input type="number" class="form-control" id="departmentRecidiviationCost" value="500">
</div>
<div class="form-group">
<label for="externalRecidivationCost">Estimated average <b>external</b> cost of client recidivating (e.g. re-arrest and jail costs, court costs) ($)</label>
<input type="number" class="form-control" id="externalRecidivationCost" value="350">
</div>
<div class="form-group">
<label for="totalAnnualPopulation">Total annual population of Crimal Justice Services system</label>
<input type="number" class="form-control" id="totalAnnualPopulation" value="3600">
</div>
<button type="button" class="btn btn-primary btn-lg btn-block" onclick="runCalc()">Run Calculation</button>
</div>
<div class="resultsView" style="display: none">
<ul class="list-group">
<li class="list-group-item active">Breakdown of estimated value delivered</li>
<li class="list-group-item">
<h5 class="list-group-item-heading">
<span id="averageCaseManagerHourSavings"></span> hours
<small>Average hours saved per week per each case manager using ClientComm</small>
</h5>
</li>
<li class="list-group-item">
<h5 class="list-group-item-heading">
$<span id="valueOfTimeSavings"></span> hours
<small>Case manager weekly time cost that can now be directed to better directly servicing clients in need, rather than engaged in tedious data entry or ineffective communications related tasks.</small>
</h5>
</li>
<li class="list-group-item">
<h5 class="list-group-item-heading">
$<span id="departmentAvoidedRepeatCosts"></span>
<small>Estimated monthly department savings in avoided immedaite repeat clients </small>
</h5>
</li>
<li class="list-group-item">
<h5 class="list-group-item-heading">
$<span id="externalAvoidedRepeatCosts"></span>
<small>Estimated monthly external savings in avoided immedaite repeat clients </small>
</h5>
</li>
<li class="list-group-item">
<h5 class="list-group-item-heading">
<span id="failureRateChange"></span>%
<small>Potential rise in client success</small>
</h5>
</li>
<li class="list-group-item">
<h5 class="list-group-item-heading">
<span id="potentialNumberOfTotalRecaptured"></span> clients
<small>Potential annual count of otherwise noncompliant clients that could be brought back into compliance to successfully complete supervision requirements</small>
</h5>
</li>
</ul>
<br>
<button type="button" class="btn btn-primary btn-lg btn-block" onclick="toggleViews()">Modify Calculation Inputs</button>
</div>
</div>
</body>
<script src="https://code.jquery.com/jquery-1.12.4.min.js" integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ=" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/js/bootstrap.min.js" integrity="sha384-BLiI7JTZm+JWlgKa0M0kGRpJbF2J8q+qreVrKBC47e3K6BW78kGLrCkeRX6I9RoK" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.16/d3.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/c3/0.4.10/c3.min.js"></script>
<script type="text/javascript">
function numberWithCommas(x) {
return x.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
}
function runCalc () {
var userCount = Number($('#userCount').val());
var averageCaseLoad = Number($('#averageCaseLoad').val());
var averageCostPerHourUser = Number($('#averageCostPerHourUser').val());
var failureRate = Number($('#failureRate').val());
var departmentRecidiviationCost = Number($('#departmentRecidiviationCost').val());
var externalRecidivationCost = Number($('#externalRecidivationCost').val());
var totalAnnualPopulation = Number($('#totalAnnualPopulation').val());
var averageCaseManagerHourSavings = 5/90 * averageCaseLoad;
var valueOfTimeSavings = averageCostPerHourUser * userCount * averageCaseManagerHourSavings;
var failureRateChange = 82/50 * failureRate;
var potentialNumberOfTotalRecaptured = (.27 * .33 * .50) * totalAnnualPopulation;
var departmentAvoidedRepeatCosts = departmentRecidiviationCost * potentialNumberOfTotalRecaptured;
var externalAvoidedRepeatCosts = externalRecidivationCost * potentialNumberOfTotalRecaptured;
$("#averageCaseManagerHourSavings").text(numberWithCommas(Math.round(averageCaseManagerHourSavings)));
$("#valueOfTimeSavings").text(numberWithCommas(Math.round(valueOfTimeSavings)));
$("#failureRateChange").text(Math.round(failureRateChange));
$("#potentialNumberOfTotalRecaptured").text(numberWithCommas(Math.round(potentialNumberOfTotalRecaptured)));
$("#departmentAvoidedRepeatCosts").text(numberWithCommas(Math.round(departmentAvoidedRepeatCosts/12)));
$("#externalAvoidedRepeatCosts").text(numberWithCommas(Math.round(externalAvoidedRepeatCosts/12)));
$(".calculationMechanism").hide();
$(".resultsView").show();
window.scrollTo(0, 0);
}
function toggleViews () {
$(".resultsView").hide();
$(".calculationMechanism").show();
window.scrollTo(0, 0);
}
</script>
</html>