-
Notifications
You must be signed in to change notification settings - Fork 7
/
shape.html
112 lines (102 loc) · 4.94 KB
/
shape.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
<!doctype html>
<html>
<!-- -----------------------------------
Shape Experiment
MIT License
Copyright 2013, Max Irwin
https://github.com/binarymax/shape
----------------------------------- -->
<head>
<title>Shape Experiment</title>
<meta name="description" content="Identify the shapes as quickly as possible">
<meta name="author" content="Max Irwin">
<meta name="canonical" content="http://shapex.org">
<meta http-equiv="content-type" content="text/html;charset=UTF-8">
<meta name="viewport" content="width=device-width; initial-scale=0.6">
<meta property="og:image" content="http://shapex.org/star200.png"/>
<meta property="og:image" content="http://shapex.org/star200.png"/>
<meta property="og:title" content="Shape Experiment"/>
<meta property="og:type" content="website"/>
<meta property="og:description" content="Identify the shapes as quickly as possible"/>
<meta property="og:url" content="http://shapex.org/"/>
<meta property="og:site_name" content="Shape Experiment"/>
<link rel="shortcut icon" href="http://shapex.org/star.png" type="image/png" />
<link rel="image_src" href="http://shapex.org/star200.png" />
<style type="text/css">
footer { font-size:0.9em; font-style: italic; margin-top:50px; padding-top:5px; border-top:1px solid #999; vertical-align: top; }
#content { font-size:1.0em; margin-left:auto; margin-right:auto; max-width:420px; text-align: center; }
#experiment { display:none; max-width:420px; margin-left:0px; }
#shapes { display:block; margin-left:0px; clear:both; }
#buttons { display:block; list-style: none; margin:0px; height:100px; }
#buttons div{ float:left; margin:2px; padding:0px; }
#results { display:block; list-style: none; margin-top:20px;padding-top:10px; padding-left:3px; width: 400px; clear: both; }
#results li { width:100%; margin-bottom:10px; background-color: #fff; border-radius:2px; cursor:pointer;}
#results li:hover { background-color:#f9f9f9; }
#total { display:none; width:400px; margin:0px; margin-top:30px; padding:0px; padding-top:30px; border-top:1px solid #999; color: #555; margin-left:5px;}
#total table { width: 100%; margin:0px; padding:0px; }
#total td, #total th { width:20%; margin:0px; padding:5px; }
#total tbody tr:hover { color:#333; background-color:#f9f9f9; }
#info { display:none; }
#accept { margin-top:40px; }
#tw-root { margin-left:30px;}
.column { margin-bottom:20px; margin-left:0px; margin-right:0px;}
.link { color:#777; text-decoration: none; }
.link:hover { color:#777; text-decoration: underline; }
.link:visted{ color:#777; }
.button { width:98px; height:60px; padding:0px; background-color: transparent; border:2px solid #999; border-radius:3px; }
.correct { color:green; font-weight:bold; border:1px solid green; }
.incorrect { color:red; font-weight:bold; border:1px solid red; }
.hidden { display:none; }
.pixel { width:0px; height:0px; display:none; }
#begin { background-color:#99FF77; font-weight:bold; font-size:1.2em; }
</style>
</head>
<body>
<section id="content">
<header class="column">
<h1>Shape Experiment</h1>
<p id="message">
Identify the shapes as quickly as possible.<br>
Play as often as you like. Thanks for your help!<br>
<a href="#" class="link" id="cookies">Cookies</a> are used to tally. Press "Begin" if that is OK.
</p>
<p id="accept">
<input type="button" name="begin" id="begin" value="Begin" class="button">
</p>
</header>
<section id="experiment" class="column">
<div id="shapes"></div>
<div id="buttons"></div><br>
<ul id="results"></ul>
<div id="total">
<table>
<thead><tr><th> <br>Totals</th><th>Best<br>Percent</th><th>Best<br>Time</th><th>Average<br>Percent</th><th>Average<br>Time</th></tr></thead>
<tbody id="totals"></tbody>
</table>
</div>
</section>
<noscript class="column">
<h2>This experiment requires javascript.</h2>
<p>If you would like to play, please enable javascript and try again.</p>
</noscript>
<section id="info" class="column">
<a href="http://google.com/analytics" class="link" target="_blank">Google Analytics</a> and server logs are used to analyse shapes.<br>
Only information related to shapes is collected.<br>
The overall results may be shared.
</section>
<footer class="column">
<div id="social">
<a id="facebook" class="link">facebook</a> |
<a id="twitter" class="link">twitter</a> |
<a id="about" class="link">about</a>
</div>
<div id="fb-root" class="hidden"></div> <div id="tw-root" class="hidden"></div>
<div id="ab-root" class="hidden">
Shape Experiment is run by The Shape Experiment Institute. Its goal is to collect and analyse statistics related to shapes. Data will be shared with the general public.
The source code is available on <a href="https://github.com/binarymax/shape" class="link" target="_blank">github</a>.
</div>
</footer>
</section>
<script type="text/javascript" src="/shape.js"></script>
</body>
</html>