scientific-notation-project/index.htm at gh-pages · amazansky/scientific-notation-project · 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
95
96
97
<!DOCTYPE html>
<html>
  <head>
    <title>Scientific Notation</title>
    <link href="https://fonts.googleapis.com/css?family=Comfortaa" rel="stylesheet" type="text/css">
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" integrity="sha256-7s5uDGW3AHqw6xtJmNNtr+OBRJUlgkNJEo78P4b0yRw= sha512-nNo+yCHEyn0smMxSswnf/OnX6/KwJuZTlNZBjauKhTK0c+zT+q5JOCx0UFhXQ6rJR9jg6Es8gPuD2uZcYDLqSw==" crossorigin="anonymous">
    <style>
      * {
        font-family: "Comfortaa" !important;
      }
      #title {
        text-align: center;
        color: #000;
        margin-bottom: 0;
      }
      #subtitle {
        text-align: center;
        color: #999;
        font-style: italic;
        margin-top: 0;
      }
      #subsubtitle {
        text-align: center;
        margin-top: 0;
        margin-bottom: 0;
      }
      .fact {
        text-align: center;
      }
      .partofthemap {
        display: table;
        margin: 0 auto;
      }
    </style>
  </head>
  <body>
    <h1 id="title">Scientific Notation</h1>
    <h2 id="subtitle">by c22am</h3>
    <p id="subsubtitle">Below is an image of four different internet sites. Clicking each one will reveal a scientific notation fact about it.</p>
    <div class="fact alert alert-success" id="twitter-fact" style="display: none;">Twitter has approximately 320,000,000 monthly active users. That is 3.2 * 10<sup>8</sup> users. <button onclick="changeAlert(0,1)">Hide</button></div>
    <div class="fact alert alert-success" id="yt-fact" style="display: none;">Every day, the YouTube community watches over 100,000,000 hours of YouTube. That is 1 * 10<sup>8</sup> hours. <button onclick="changeAlert(0,2)">Hide</button></div>
    <div class="fact alert alert-success" id="fb-fact" style="display: none;">Facebook had 1,090,000,000 daily average users in December 2015. That is 1.09 * 10<sup>9</sup> users. <button onclick="changeAlert(0,3)">Hide</button></div>
    <div class="fact alert alert-success" id="google-fact" style="display: none;">Google&#39;s most popular internet search in 2015 was the Paris attack, which got over 897,000,000 searches. That is 8.97 * 10<sup>8</sup> searches. <button onclick="changeAlert(0,4)">Hide</button></div>
    <img class="partofthemap" src="images/map.png" alt="" usemap="#computersmap" />
    <map class="partofthemap" name="computersmap" id="computersmap">
      <area onclick="changeAlert(1, 1);" id="show-tw" alt="" href="#" title="Twitter" shape="rect" coords="0,0,500,305" />
      <area onclick="changeAlert(1, 2);" id="show-yt" alt="" href="#" title="YouTube" shape="rect" coords="500,0,1000,305" />
      <area onclick="changeAlert(1, 3);" id="show-fb" alt="" href="#" title="Facebook" shape="rect" coords="0,305,500,610" />
      <area onclick="changeAlert(1, 4);" id="show-goog" alt="" href="#" title="Google" shape="rect" coords="500,305,1000,610" />
    </map>
    <script>
      /* For change, 0 is hide and 1 is show. For num, 1 is Twitter, 2 is YouTube, 3 is Facebook, and 4 is Google. */
      function changeAlert(change, num) {
        if (change==0){
          if (num==1) {
            document.querySelector("#twitter-fact").setAttribute("style", "display: none;");
          }
          else if (num==2) {
            document.querySelector("#yt-fact").setAttribute("style", "display: none;");
          }
          else if (num==3) {
            document.querySelector("#fb-fact").setAttribute("style", "display: none;");
          }
          else if (num==4) {
            document.querySelector("#google-fact").setAttribute("style", "display: none;");
          }
        }
        if (change==1) {
          if (num==1) {
            document.querySelector("#twitter-fact").setAttribute("style", "display: block;");
            document.querySelector("#fb-fact").setAttribute("style", "display: none;");
            document.querySelector("#google-fact").setAttribute("style", "display: none;");
            document.querySelector("#yt-fact").setAttribute("style", "display: none;");
          }
          else if (num==2) {
            document.querySelector("#yt-fact").setAttribute("style", "display: block;");
            document.querySelector("#fb-fact").setAttribute("style", "display: none;");
            document.querySelector("#google-fact").setAttribute("style", "display: none;");
            document.querySelector("#twitter-fact").setAttribute("style", "display: none;");
          }
          else if (num==3) {
            document.querySelector("#fb-fact").setAttribute("style", "display: block;");
            document.querySelector("#twitter-fact").setAttribute("style", "display: none;");
            document.querySelector("#google-fact").setAttribute("style", "display: none;");
            document.querySelector("#yt-fact").setAttribute("style", "display: none;");
          }
          else if (num==4) {
            document.querySelector("#google-fact").setAttribute("style", "display: block;");
            document.querySelector("#fb-fact").setAttribute("style", "display: none;");
            document.querySelector("#twitter-fact").setAttribute("style", "display: none;");
            document.querySelector("#yt-fact").setAttribute("style", "display: none;");
          }
        }
      }
    </script>
  </body>
</html>