-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
84 lines (77 loc) · 2.87 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
<!doctype html>
<html class="no-js" lang="en" dir="ltr">
<head>
<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-76140962-6"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'UA-76140962-6');
</script>
<title>Rounding Rollercoaster</title>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="author" content="Andrew Lohr">
<meta name="description" content="A math rounding game. Guess whether the number displayed rounds up or down.">
<link rel="stylesheet" href="css/foundation-6.5.1.min.css">
<link rel="stylesheet" href="css/coaster.css">
</head>
<body>
<div class="grid-container">
<div class="grid-x grid-padding-x">
<div class="large-12 cell">
<h1>Welcome to Rounding Roller Coaster</h1>
<p><b>Directions:</b> Make the roller coaster move up or down by getting the rounding questions correct.</p>
<p>The coaster will go up on a correct rounding up problem and down on a correct rounding down problem</p>
</div>
</div>
<!-- Correct / Incorrect space -->
<div class="grid-x grid-padding-x">
<div class="large-3 cell "></div>
<div class="large-6 cell text-center">
<h3 id="resultDisplay"> </h3>
</div>
<div class="large-3 cell"></div>
</div>
<!-- Number space-->
<div class="grid-x grid-padding-x">
<div class="large-3 cell "></div>
<div class="large-6 cell text-center">
<h3>Round Me to the Nearest Ten.
<span data-tooltip tabindex="1" class="has-tip top" data-allow-html="true" title="<span class='tooltipText'>Remember! 5 to the sky (up) and 4 to the floor (down).</span>">hint</span>
</h3>
<span>Score Streak:</span><span id="scoreStreak"></span>
<h1 id="numDisplay" class="large"></h1>
</div>
<div class="large-3 cell"></div>
</div>
<!-- Rounding buttons space -->
<div class="grid-x grid-padding-x">
<div class="large-2 cell"></div>
<div class="large-8 cell text-center">
<div class="expanded large button-group">
<a class="button" data-type="down">Round Down</a>
<a class="button" data-type="same">Already Rounded</a>
<a class="button" data-type="up">Round Up</a>
</div>
</div>
<div class="large-2 cell"></div>
</div>
<!-- Coaster image space-->
<div class="grid-x grid-padding-x">
<div class="large-12 cell">
<div id="canvasContainer">
<img id="canvasBackground" src="img/canvas_background.jpg" />
<canvas id="canvas">Canvas is not supported in your browser.</canvas>
</div>
</div>
</div>
</div>
<script src="js/vendor/jquery-3.3.1.js"></script>
<script src="js/vendor/what-input-5.1.2.js"></script>
<script src="js/vendor/foundation-6.5.1.min.js"></script>
<script src="js/coaster.js"></script>
</body>
</html>