-
Notifications
You must be signed in to change notification settings - Fork 8
/
Dynamic Integral Calculator.html
108 lines (98 loc) · 2.92 KB
/
Dynamic Integral Calculator.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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>score curve</title>
<script src="https://cdn.plot.ly/plotly-2.13.3.min.js"></script>
<style>
.form {
display: inline-grid;
grid-template-columns: 80px 5rem;
align-items: center;
gap: 8px;
background-color: #eee;
padding: 8px;
position: absolute;
top: 8px;
left: 8px;
}
input {
height: 20px;
/* outline: none; */
border: 1px solid rgb(50 50 150);
border-radius: 0;
background-color: rgb(223, 223, 245);
}
.refresh {
grid-column: 1 / 3;
cursor: pointer;
}
body {
width: 100vw;
height: 100vh;
margin: 0;
}
.main {
display: flex;
width: 100%;
height: 100%;
justify-content: center;
align-items: center;
}
#canv {
width: 800px;
height: 600px;
}
</style>
</head>
<body>
<div class="main">
<div id="canv"></div>
<div class="form">
<label>最大人数:</label>
<input id="max" value="100">
<label>base score:</label>
<input id="baseScore" value="1000">
<label>half life:</label>
<input id="halfLife" value="20">
<input class="refresh" type="button" value="refresh">
</div>
</div>
<script>
let data = [
{
"x": [],
"y": [],
type: 'scatter',
mode: "lines",
}];
Plotly.newPlot("canv", {
"data": data,
"layout": { "width": 800, "height": 600 }
});
function UpdateData() {
console.log('update');
let max = parseInt(document.getElementById("max").value)
let baseScore = parseFloat(document.getElementById("baseScore").value)
let halfLife = parseFloat(document.getElementById("halfLife").value)
max = Math.max(max, 1);
baseScore = Math.max(baseScore, 0);
halfLife = Math.max(0, halfLife);
let x = [];
let y = [];
for (let i = 1; i < max; i++) {
x.push(i);
let coefficient = 1.8414 * (i - 1.0) / halfLife;
y.push(Math.floor(baseScore / (coefficient + Math.exp(-coefficient))));
}
data[0].x = x;
data[0].y = y;
Plotly.redraw("canv");
}
document.getElementsByClassName("refresh")[0].addEventListener('click', UpdateData);
UpdateData();
</script>
</body>
</html>