-
Notifications
You must be signed in to change notification settings - Fork 0
/
game.html
93 lines (86 loc) · 4.49 KB
/
game.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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Play The Game</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.9.2/css/bulma.min.css">
<link rel="stylesheet" href="stylesheet.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<section class="hero is-medium" id="heroHead">
<div class="hero head">
<div class="container">
<br>
<br>
<h1 class="welcome title is-1">Art-Ist Game</h1>
<nav class="tabs is-medium is-centered">
<div class="container">
<ul>
<li><a href="harvard.html">Harvard Museum Gallery </a></li>
<li><a href="chicago.html">Art Institute of Chicago Gallery </a></li>
<li><a href="index.html"><button id="logout" class="logOutButton button is-black is-outlined">Log Out</button></a></li>
<li><em id="darkmode">Enable Dark Mode </em>
<label class="switch">
<input type="checkbox">
<span class="slider round"></span>
</label>
</li>
</ul>
</div>
</nav>
</div>
</div>
</section>
<section class="section has-background-light" id="section2">
<div class="container">
<div class="hero-body">
<div class="subtitle sentence is-4">Pick one of these categories to start playing the Art-Ist game.
Are you a Harvard Museum geek? Or an Art Institute of Chicago geek? Get started to test your art
knowledge! <p>Each correct answer is worth 5 points. </p>
<p>Your score will be reset each time you navigate to our galleries to take a look at all
the gorgeous paintings.
</p>
<p>Keep in mind that the paintings you will be practicing are randomly selected from the 100 most recently
added paintings from each gallery's API's. As more paintings get added to the API's, you will get a new
set of paintings to practice!
</p>
</div>
<div class="field is-grouped" id="games">
<p class="control">
<button id="harvardButton" class="button is-danger is-large is-outlined">HARVARD MUSEUM</button>
</p>
<p>
<button id="chicagoButton" class="button is-danger is-large is-outlined">ART INSTITUTE OF CHICAGO</button>
</p>
</div>
</div>
</div>
</section>
<section class="section" id="section3">
<div class="container">
<div class="hero-body">
<form>
<h4 class="score subtitle is-4" id="highestScore">Your highest score is </h4>
<br>
<h4 class="score title" id="scoreTitle">Score: </h4>
<br>
<div id="paintingEx"> </div>
<br>
<div class="subtitle sentence" id="question"></div>
<div id="choices"></div>
<br></br>
<div id="buttons"></div>
</form>
</div>
</div>
</section>
<script src="//www.gstatic.com/firebasejs/4.5.0/firebase.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script type="module" src="render.js"></script>
<script type="module" src="dark-light.js"></script>
</body>
</html>