save-the-north/index.html at main · armeehn/save-the-north · 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
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>COVID-19 Simulator</title>
    <link href="style.css" rel="stylesheet" type="text/css" />
      <!-- KaTex -->
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex@0.12.0/dist/katex.min.css"
    integrity="sha384-AfEj0r4/OFrOo5t7NnNe46zW/tFgW6x/bCJG8FqQCEo3+Aro6EYUG4+cU+KJWu/X" crossorigin="anonymous">
  <!-- The loading of KaTeX is deferred to speed up page rendering -->
  <script defer src="https://cdn.jsdelivr.net/npm/katex@0.12.0/dist/katex.min.js"
    integrity="sha384-g7c+Jr9ZivxKLnZTDUhnkOnsh30B4H0rpLUpJ4jAIKs4fnJI+sEnkvrMWph2EDg4" crossorigin="anonymous">

    </script>
  <!-- To automatically render math in text elements, include the auto-render extension: -->
  <script defer src="https://cdn.jsdelivr.net/npm/katex@0.12.0/dist/contrib/auto-render.min.js"
    integrity="sha384-mll67QQFJfxn0IYznZYonOWZ644AWYC+Pt2cHqMaRhXVrursRwvLnLaebdGIlYNa" crossorigin="anonymous" onload='renderMathInElement(document.body, options={
            delimeters: [
                {left: "$$", right: "$$" , display: true},
                {left: "$" , right: "$" , display: false},
                {left: "\\(" , right: "\\)" , display: false},
                {left: "\\[" , right: "\\]" , display: true}
            ]
        })'>

  </script>

  <link rel="stylesheet" type="text/css"
    href="https://cdn.rawgit.com/dreampulse/computer-modern-web-font/master/fonts.css">
  </head>
  <body>
    <script src="https://cdn.jsdelivr.net/npm/p5@1.2.0/lib/p5.js"></script>
    <script src="sketch.js"></script>


    <!--set up the canvas for the first simulation-->
    <div id="container">
      <h1 id="title"><mark>Epidemic Simulation</mark></h1>

      <div class="row">
        <div class="column-sim">
          <center>
            <div id="simulator-div"></div>
          </center>
        </div>
        <div class="column-expl">
        <p id="explanation">This is a very basic simulation of an epidemic. We begin with <code>nb_ppl</code> infected people.</p> The people move at a random velocity until they enter <code>crit_dist</code> -- the distance needed to potentially get infected. We then sample from a \(\text{Ber}(p) \) distribution to determine if the person will get infected or not, where <code>p</code> is chosen by the user below.
        <br>
        <br>
        <span id="totals">Total number of <mark>infected indviduals</mark>: </span>
        <p id="select-option">Select the <mark>population size</mark>.</p>
          <div class="slidecontainer">
        <input type="range" min="0" max="40" value="9", id="popRange"></p>Selected population size: <span id="popValue"></span>
        </div>
        <p>Now we need to determine the <mark>probability that one person infects someone else</mark>. Choose a value in \(  ]0, 1] \).</p>

        <div class="slidecontainer">
          <input type="range" min="0" max="100" value="50", id="myRange"><p>Selected probability: <span id="value"></span>.
        </div>
        <div>
      </div>
      <div class="explanation">
      </div>
    </div>
  </body>

</html>