-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
81 lines (81 loc) · 3.47 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
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Math 24</title>
<link type='text/css' rel="stylesheet" href="css/style.css" media="screen,projection"/>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">
<link href="https://fonts.googleapis.com/css?family=Audiowide|Faster+One" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Faster+One" rel="stylesheet">
</head>
<body>
<header>
<h1 id="title"> Math 24<img id="brain" src="images/brain.gif"></h1>
<nav>
<a id="aboutLink" href='#'>About</a>
<a id="instructionsLink" href="#">Instructions</a>
<a id="gameLink" href="#">New Game</a>
</nav>
</header>
<section id="main">
<div id="about">
<p>Math 24 is an arithmetical card game and experienced it's peak in the 1990s. The point of the same is to make the number, 24, with all four numbers but there are many versions of the game. The original version allows +, -, *, ÷, and () operations! </p>
<a href="https://en.wikipedia.org/wiki/24_Game">~wikipedia</a>
</div>
<div id="instructions">
<p>You will be playing the original version! Make the number, <span id='twenty4'>24</span>, and the only operations you can use are +, -, *, ÷, and (). You must use all four numbers and only once. Remember the operations of math!</p>
</div>
<div id="newGame">
<div id="disclaimer">Disclaimer
<p>Because these #s are randomly generated, about 10% of the time they do not make 24... Check here for a solution if you get stuck:<a href="http://scripts.cac.psu.edu/staff/r/j/rjg5/scripts/Math24.pl"> solutions</a></p>
</div>
<div id="input">
<form>
<label for="expression">Answer</label><br>
<input type="text" id="expression" placeholder="solution here!">
<div><h6 id='gameDiv'></h6></div>
<h3 id="results-num"></h3>
<h3 id="results-saying"></h3>
</form>
<div id="game-rules"><span>Allowed operations (+, -, *, ÷, and paranthesis</span></div>
</div>
<div id="card">
<div id="numbers" class="inner">
<p id="top-num">#</p>
<div id="leftRight">
<p id="right-num">#</p>
<p id="left-num">#</p>
</div>
<p id="bottom-num">#</p>
</div>
<div id="diamond-wrapper">
<div id="diamond" class="outer">
</div>
</div>
</div>
<div id="time-wrapper">
<div>
<h3 id="fastestTime"></h3>
<div>
<h3 id="timer">00:00</h3>
</div>
<div id="timer-score">
<label for="finishedTime">Finished Time:</label><br>
<h4 id="finishedTime"></h4>
</div>
</div>
</div>
</div>
</section>
<footer>
<h5> © Sandra Hoang </h5>
<h6> CODA 2017 </h6>
</footer>
<script src="./js/jquery-3.2.1.js" charset="utf-8"></script>
<script src="./js/random.js" charset="utf-8"></script>
<script src="./js/math.js" charset="utf-8"></script>
<script src="./js/timer.js" charset="utf-8"></script>
<script src="./js/game.js" charset="utf-8"></script>
<script src="./js/main.js" charset="utf-8"></script>
</body>
</html>