grades/index.html at master · witplusplus/grades · 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
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
<!DOCTYPE html>
<html lang="en">
<head>
  <!-- Meta tags -->
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">

  <!--For device scaling - It basically shrinks to the size of the viewport for mobile devices.-->
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0">

  <!-- Title and links -->
  <title>Wentworth GPA Calculator</title>
  <link rel="icon" href="favicon-96x96.png"/>
  <link rel="stylesheet" type="text/css" href="styles/main.css"/>
  <link rel="stylesheet" href="styles/jquery-ui.css">
  <link rel="stylesheet" href="styles/normalize.css">
  <link rel="stylesheet" href="styles/bootstrap.min.css">

  <!-- Google Analytics Code -->
  <script>
  (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
  (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
  m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
  })(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
  ga('create', 'UA-15576825-8', 'auto');
  ga('send', 'pageview');
  </script>

  <script src="scripts/jquery-3.1.1.js"></script>
  <script src="scripts/bootstrap.min.js"></script>
  <script src="scripts/jquery-ui.js"></script>
  <script src="scripts/main.js"></script>
</head>
<body>
  <!-- Side bar -->
  <div id="side-bar">
    <div id="wgpa-title">WGPA</div>
    <!-- Guide bar -->
    <div id="guide-container">
      <ul id="main-guide" class="nav nav-pills">
        <li role="presentation">
          <a href="index.html">
            <span class="glyphicon glyphicon-home" aria-hidden="true"></span>
            <span style="padding-left: 3px">Home</span>
          </a>
        </li>
        <li role="presentation">
          <a id="scale">
            <span class="glyphicon glyphicon-scale"></span>
            <span style="padding-left: 3px">Scale</span>
          </a>
        </li>
        <li role="presentation">
          <a id="standing">
            <span class="glyphicon glyphicon-education"></span>
            <span style="padding-left: 3px">Standing</span>
          </a>
        </li>
        <li role="presentation">
          <a id="algorithm">
            <span class="glyphicon glyphicon-sort-by-order"></span>
            <span style="padding-left: 3px">Algorithm</span>
          </a>
        </li>
      </ul>
      <ul id="other-guide" class="nav nav-pills">
        <li role="presentation">
          <a id="about">
            <span class="glyphicon glyphicon-globe"></span>
            <span style="padding-left: 3px">About</span>
          </a>
        </li>
      </ul>
    </div>
  </div>
  <!-- Main page -->
  <div id="main-page">
    <!-- Top right bar -->
    <div id="top-right-bar">
      <div id="top-right-bar-left-box">
        <div id="hamburger-menu">
          <a href="#"><span class="glyphicon glyphicon-menu-hamburger" aria-hidden="true"></span></a>
        </div>
        <div id="current-page-title">Home</div>
      </div>
    </div>
    <!-- Content -->
    <div id="content">
      <div id="title-purpose">Calculate your GPA</div>
      <div id="calculator">
        <div id=spinner-container>
          <h3 id=spinner-label>Number<br>of<br>Classes</h3>
          <input id="spinner" name="value">
        </div>
        <form id="form-main-table" autocomplete="off">
          <div id="table-container">
            <table id="main-table" class="table-hover">
              <tbody id="main-tbody">
              </tbody>
            </table>
          </div>
          <div id="previous-details">
            <div id="previous-gpa">
              <label>Previous GPA</label>
              <input name="previous-gpa" value=4.0>
            </div>
            <div id="previous-credits">
              <label>Previous Credits</label>
              <input name="previous-credits" value=0>
            </div>
          </div>
          <input id="input-submit" type="submit" name="Submit">
        </form>
        <h1 id="gpa" hidden="true"></h1>
      </div>
      <div id="secondary-content">
        <div id="instructions">
          <h2><b>Instructions</b></h2>
          <ul>
            <li>Please enter valid grade letters (A, A, B+, B, B-, C+, C, C-, D+, D, F) or valid numerics (0-100).</li>
            <li>For previous GPA, enter a number on the scale of 0-4.</li>
            <li>If you do not have a previous GPA or you want to calculate the GPA for 1 semester, you start off with a GPA of 4.0.</li>
            <li>All calculations will be done in the algorithm steps once the submit button is pressed.
          </ul>
        </div>
        <div id="algorithm-steps">
          <h1><b>Algorithm Steps</b></h1>
          <p>1. Convert grades into Wentworth's scale of 0-4.</p>
          <ul id="step-1"></ul>

          <p>2. Calculate the weighted grade for each class by multiplying the grade and its respective credits.
          The previous GPA also has to be weighted.</p>
          <ul id="step-2"></ul>

          <p>3. Sum up all the weighted grades.</p>
          <ul id="step-3"></ul>

          <p>4. Sum up all the credits.</p>
          <ul id="step-4"></ul>

          <p>5. Divide the sum of the weighted grades by the sum of credits to get your weighted GPA. Round the GPA to two decimal
          points</p>
          <ul id="step-5"></ul>
        </div>
      </div>
    </div>
  </div>
</body>
<html>