-
Notifications
You must be signed in to change notification settings - Fork 0
/
quizzes.html
73 lines (63 loc) · 2.92 KB
/
quizzes.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
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<!-- Force IE to use its standard document rendering mode - I found this line at https://stackoverflow.com/questions/10975107/forcing-internet-explorer-9-to-use-standards-document-mode -->
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
<meta name="viewport" content="width=device-width">
<title>Quizzes | Jschool</title>
<link type="text/css" rel="stylesheet" href="css/style.css">
<link rel="shortcut icon" href="images/js-icon.png" type="image/x-icon">
</head>
<body>
<header>
<!-- Page header containing logo/site title, with a navigation bar
nested inside of it-->
<a href="index.html"><h1 id="header-logo">Jschool</h1></a>
<!-- navigation bar in the semantically nice nav element -->
<nav>
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="index.html#tutorial-section">Tutorials</a></li>
<li><a href="quizzes.html">Quizzes</a></li>
<li><a href="about.html">About</a></li>
</ul>
</nav>
</header>
<section class="lead" id="quiz-info-lead">
<h1>Jschool Quizzes</h1>
<p>Complete the quizzes after finishing the tutorials to test your knowledge. Complete all quizzes and redeem a
certificate.</p>
</section>
<div id="no-js-warning">
<!-- This is dynamically removed as soon as JavaScript is detected (by JavaScript), but the quiz literally won't work without JavaScript so it really is required -->
<!-- I think this somewhat ungraceful fallback is fine, since I question why a user is on a website that teaches JavaScript when they have JavaScript disabled themselves... -->
<p>We're sorry, but this quiz requires JavaScript to function properly. Please enable it and then re-visit this
page.</p>
</div>
<section id="quiz-section" class="grid fade-in">
<!-- This will be populated dynamically by JavaScript based on what quizzes are available so is empty in the HTML -->
</section>
<section id="quiz-clear-section">
<a href="#" class="rounded-button red-button">Clear all quiz history</a>
</section>
<!-- Consistent footer containing links and other information -->
<footer>
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="index.html#tutorial-section">Tutorials</a></li>
<li><a href="quizzes.html">Quizzes</a></li>
<li><a href="about.html">About</a></li>
<li><a href="credits.html">Credits</a></li>
</ul>
<p>© Dylan McKee 2015 - for Newcastle University.</p>
</footer>
<!-- linking JavaScript at the end for page load speed benefits.
Using RequireJS has meant that I only need to link one file into the actual
HTML, allowing my HTML to be semantically beautiful.
I can also load JavaScript in Async, which is ideal to speed up loading,
again thanks to RequireJS.
-->
<script data-main="js/main" type="text/javascript" src="js/lib/require.js" async></script>
</body>
</html>