This repository has been archived by the owner on Nov 11, 2021. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 1
/
index.html
417 lines (348 loc) · 17.2 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
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Shopping Sheet</title>
<link href="style/main.css" rel="stylesheet" type="text/css" />
<!--[if lte IE 8]><link href="style/ie.css" rel="stylesheet" type="text/css" /><![endif]-->
</head>
<body>
<div id="container">
<div id="header" class="pane">
<span class="date">MM / DD / YYYY</span>
<div class="title-wrapper">
<img class="logo" src="images/logo.png" alt="University of the United States (UUS) Logo" />
<h1>University of the United States (UUS)</h1>
<span class="name">Student Name, Identifier</span>
</div>
<input type="button" id="download-xml" class="download-btn" value="Download" />
</div>
<div id="main">
<div class="pane">
<h2>Costs in the 2017-18 year</h2>
<div class="inner-pane">
<table>
<tbody>
<tr class="total-row">
<td>Estimated Cost of Attendance</td>
<td class="amount">$<span id="value-total-estimated-cost">X,XXX</span> <span class="over-time">/ yr</span></td>
</tr>
<tr class="intro-row">
<td><span class="amount-title">Tuition and fees</span></td>
<td class="amount"><span class="sign">$</span><span id="value-tuition-and-fees">X,XXX</span></td>
</tr>
<tr>
<td><span class="amount-title">Housing and meals</span></td>
<td class="amount"><span id="value-housing-and-meals">X,XXX</span></td>
</tr>
<tr>
<td><span class="amount-title">Books and supplies</span></td>
<td class="amount"><span id="value-books-and-supplies">X,XXX</span></td>
</tr>
<tr>
<td><span class="amount-title">Transportation</span></td>
<td class="amount"><span id="value-transportation">X,XXX</span></td>
</tr>
<tr>
<td><span class="amount-title">Other education costs</span></td>
<td class="amount"><span id="value-other-education-costs">X,XXX</span></td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="pane">
<h2>Grants and scholarships to pay for college</h2>
<div class="inner-pane">
<table>
<tbody>
<tr class="total-row">
<td>
Total Grants and Scholarships
<span class="desc">("Gift" Aid; no repayment needed)</span>
</td>
<td class="amount">$<span id="value-total-grants-and-scholarships">X,XXX</span> <span class="over-time">/ yr</span></td>
</tr>
<tr class="intro-row">
<td><span class="amount-title">Grants and scholarships from your school</span></td>
<td class="amount"><span class="sign">$</span><span id="value-grants">X,XXX</span></td>
</tr>
<tr>
<td><span class="amount-title">Federal Pell Grant</span></td>
<td class="amount"><span id="value-federal-pell-grant">X,XXX</span></td>
</tr>
<tr>
<td><span class="amount-title">Grants from your state</span></td>
<td class="amount"><span id="value-grants-from-state">X,XXX</span></td>
</tr>
<tr>
<td><span class="amount-title">Other scholarships you can use</span></td>
<td class="amount"><span id="value-other-scholarships">X,XXX</span></td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="pane highlight">
<h2>What will you pay for college</h2>
<div class="inner-pane">
<table>
<tbody>
<tr>
<td>
<span class="amount-title">Net Costs</span>
<span class="desc">(Cost of attendance minus total grants and scholarships)</span>
</td>
<td class="amount">$<span id="value-net-costs">X,XXX</span> <span class="over-time">/ yr</span></td>
</tr>
</tbody>
</table>
</div>
</div>
<h2>Options to pay net costs</h2>
<div class="pane">
<h3>Work options</h3>
<div class="inner-pane">
<table class="list">
<tbody>
<tr class="intro-row">
<td><span class="amount-title">Work-study (Federal, state, or institutional)</span></td>
<td class="amount"><span class="sign">$</span><span id="value-work-study">X,XXX</span></td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="pane">
<h3>Loan Options*</h3>
<div class="inner-pane">
<table class="list">
<tbody>
<tr class="intro-row">
<td><span class="amount-title">Federal Perkins Loan</span></td>
<td class="amount"><span class="sign">$</span><span id="value-federal-perkins-loan">X,XXX</span></td>
</tr>
<tr>
<td><span class="amount-title">Federal Direct Subsidized Loan</span></td>
<td class="amount"><span id="value-federal-direct-subsidized-loan">X,XXX</span></td>
</tr>
<tr>
<td><span class="amount-title">Federal Direct Unsubsidized Loan</span></td>
<td class="amount"><span id="value-federal-direct-unsubsidized-loan">X,XXX</span></td>
</tr>
</tbody>
</table>
<p class="footnote">
*Recommended amounts shown here. You may be eligible for a different amount.
Contact your financial aid office.
</p>
</div>
</div>
<div class="pane highlight efc-summary">
<h3>Other options</h3>
<div class="inner-pane">
<table>
<tbody>
<tr>
<td>
<span class="amount-title">Family Contribution</span>
<span class="desc">(As calculated by the institution using information reported on the FAFSA or to your institution.)</span>
</td>
<td class="amount">$<span id="value-family-contribution">X,XXX</span> <span class="over-time">/ yr</span></td>
</tr>
</tbody>
</table>
<ul class="option-list">
<li>Payment plan offered by the institution</li>
<li>Military and/or National Service benefits</li>
<li>Parent or Graduate PLUS Loans</li>
<li>Non-Federal private education loan</li>
<li>American Opportunity Tax Credit *</li>
</ul>
<p class="footnote">
*Parents or students may qualify to receive up to $2,500 by claiming the American Opportunity Tax Credit on their tax return
during the following calendar year.
</p>
</div>
</div>
</div>
<div id="sidebar-wrapper">
<div id="sidebar" class="pane">
<div class="sidebar-info-wrapper info-grad-rate">
<div class="sidebar-info">
<div class="sidebar-content">
<h2>Graduation Rate</h2>
<p>
Percentage of full-time students who graduate within 6 years
</p>
</div>
<div class="scale">
<span class="percentage">XX.X%</span>
<ol class="scale">
<li class="first">Low</li>
<li>Medium</li>
<li class="last">High</li>
</ol>
</div>
</div>
</div>
<div class="sidebar-info-wrapper info-loan-rate">
<div class="sidebar-info">
<div class="sidebar-content">
<h2>Repayment Rate</h2>
<p>
Percentage of borrowers entering into repayment within 3 years of leaving school
</p>
</div>
<div class="bar-chart-wrapper">
<div class="bar-chart bar-chart-institution">
<span class="percentage">XX.X%</span>
<span class="bar">
<span class="overlay-bar"></span>
</span>
<span class="title">This institution</span>
<span class="overlay-info">X.X% National Average</span>
</div>
</div>
</div>
</div>
<div class="sidebar-info-wrapper info-median-borrowing">
<div class="sidebar-info">
<div class="sidebar-content">
<h2>Median Borrowing</h2>
<p>
Students who borrow at UUS typically take out $X,XXX in Federal
loans for their undergraduate study. The Federal loan payment over
10 years for this amount is approximately
$X.XXX per month. Your borrowing may be different.
</p>
</div>
</div>
</div>
</div>
<div class="pane info-pane">
<h2>Repaying your loans</h2>
<p>
To learn about loan repayment choices and work out your Federal Loan monthly payment,
go to: <a href="http://studentaid.ed.gov/repay-loans/understand/plans">http://studentaid.ed.gov/repay-loans/understand/plans</a>
</p>
</div>
<div class="pane info-pane address">
<h2>For more information and next steps:</h2>
<p class="address-title">
University of the United States (UUS)<br />
Financial Aid Office
</p>
<p>
123 Main Street<br />
Anytown, ST 12345<br />
Telephone: (123) 456-7890<br />
E-mail: [email protected]
</p>
</div>
</div>
<div class="footer">
<div class="pane info-pane">
<p>Customized information from UUS</p>
</div>
</div>
<div class="pane">
<h3>Glossary</h3>
<div class="inner-pane">
<dl>
<dt>Cost of Attendance (COA):</dt>
<dd>
The total amount (not including grants and scholarships) that it will cost
you to go to school during the 2017–18 school year. COA includes tuition
and fees; housing and meals; and allowances for books, supplies,
transportation, loan fees, and dependent care. It also includes
miscellaneous and personal expenses, such as an allowance for the rental
or purchase of a personal computer; costs related to a disability; and
reasonable costs for eligible study-abroad programs. For students
attending less than half-time, the COA includes tuition and fees; an
allowance for books, supplies, and transportation; and dependent care
expenses.
</dd>
<dt>Total Grants and Scholarships:</dt>
<dd>
Student aid funds that do not have to be repaid. Grants are often
need-based, while scholarships are usually merit-based. Occasionally you
might have to pay back part or all of a grant if, for example, you
withdraw from school before finishing a semester.
</dd>
<dt>Net Costs:</dt>
<dd>
An estimate of the actual costs that you or your family will need to pay
during the 2017–18 school year to cover education expenses at a particular
school. Net costs are determined by taking the institution's cost of
attendance and subtracting your grants and scholarships.
</dd>
<dt>Work-Study:</dt>
<dd>
A federal student aid program that provides part-time employment while you
are enrolled in school to help pay your education expenses.
</dd>
<dt>Loans:</dt>
<dd>
Borrowed money that must be repaid with interest. Loans from the federal
government typically have a lower interest rate than loans from private
lenders. Federal loans, listed from most advantageous to least
advantageous, are called Federal Perkins Loans, Direct Subsidized Loans,
Direct Unsubsidized Loans, and Direct PLUS Loans. You can find more
information about federal loans at StudentAid.gov.
</dd>
<dt>Family Contribution (also referred to as Expected Family Contribution):</dt>
<dd>
A number used by a school to calculate how much financial aid you
are eligible to receive, if any. It’s based on the financial
information you provided in your Free Application for Federal
Student Aid (FAFSA). It’s not the amount of money your family will
have to pay for college, nor is it the amount of federal student
aid you will receive. The family contribution is reported to you
on your Student Aid Report, also known as the SAR.
</dd>
<dt>Graduation Rate:</dt>
<dd>
The graduation rate after 150% of normal program completion time
has elapsed. For schools that award predominately bachelor's
(four-year) degrees, this is after six years, and for students
seeking an associate’s (two-year) degree, this is after three
years. For students seeking a certificate, the length of time
depends on the certificate sought, for example, for a one-year
certificate, after 18 months. These rates are only for full-time
students enrolled for the first time.
</dd>
<dt>Repayment Rate:</dt>
<dd>
The share of students who have repaid at least $1 of the principal
balance on their federal loans within 3 years of leaving school.
</dd>
<dt>Median Borrowing:</dt>
<dd>
The median federal debt of undergraduate borrowers who completed.
This figure includes only federal loans; it excludes private
student loans and parent PLUS loans.
</dd>
</dl>
</div>
</div>
<div class="footer">
<div class="pane info-pane">
<p>Customized information from UUS</p>
</div>
</div>
<div class="modal-wrapper" id="modal-download-xml">
<div class="modal">
<div class="header">
<h2>XML Output</h2>
<input type="button" id="close-output-xml" class="close" value="X" />
</div>
<label for="xml-output">XML Output</label>
<textarea id="xml-output"></textarea>
</div>
</div>
</div>
<script type="text/javascript" src="scripts/main.js"></script>
</body>
</html>