-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
130 lines (117 loc) · 5.44 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
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
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
<!DOCTYPE html>
<html>
<head>
<title>Zoe's Animal Questionnaire!</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="questionnaire.js"></script>
<link rel="stylesheet" href="screen.css">
</head>
<body>
<div class="container">
<h1>Which Animal are You?</h1>
<p>
Answer the questions below and we’ll figure out which animal you are.
Be sure to answer every question so the zookeeper can do her magic!
</p>
<form action="#" method="" id="animalForm">
<section class="question">
<fieldset>
<legend><strong>Do you like mammals?</strong></legend>
<dl>
<dd><label><input type="radio" name="question[mammals]" value="panda,bear,squirrel,bobcat,zebra,rabbit"> Yes</label></dd>
<dd><label><input type="radio" name="question[mammals]" value="fish,osprey,iguana"> No</label></dd>
</dl>
</fieldset>
</section>
<section class="question">
<fieldset>
<legend><strong>Which cat do you like better?</strong></legend>
<dl>
<dd><label><input type="radio" name="question[bigcats]" value="fish,bobcat"> Tigers</label></dd>
<dd><label><input type="radio" name="question[bigcats]" value="zebra,bobcat"> Cheetahs</label></dd>
<dd><label><input type="radio" name="question[bigcats]" value="iguana,bobcat"> Jaguars</label></dd>
<dd><label><input type="radio" name="question[bigcats]" value="rabbit,bobcat"> Mountain Lion</label></dd>
</dl>
</fieldset>
</section>
<section class="question">
<fieldset>
<legend><strong>Which reptile do you like better?</strong></legend>
<dl>
<dd><label><input type="radio" name="question[reptiles]" value="iguana,osprey"> Alligator</label></dd>
<dd><label><input type="radio" name="question[reptiles]" value="iguana,jaguar"> Crocodile</label></dd>
<dd><label><input type="radio" name="question[reptiles]" value="iguana,squirrel,rabbit"> Turtle</label></dd>
</dl>
</fieldset>
</section>
<section class="question">
<fieldset>
<legend><strong>Do you like rodents?</strong></legend>
<dl>
<dd><label><input type="radio" name="question[rodents]" value="squirrel,rabbit"> Yes</label></dd>
<dd><label><input type="radio" name="question[rodents]" value="panda,fish,bear,osprey,iguana,bobcat,zebra"> No</label></dd>
</dl>
</fieldset>
</section>
<section class="question">
<fieldset>
<legend><strong>What's better?</strong></legend>
<dl>
<dd><label><input type="radio" name="question[texture]" value="iguana"> Leathery</label></dd>
<dd><label><input type="radio" name="question[texture]" value="osprey"> Feathery</label></dd>
<dd><label><input type="radio" name="question[texture]" value="panda,bear,squirrel,bobcat,zebra,rabbit"> Fuzzy</label></dd>
<dd><label><input type="radio" name="question[texture]" value="fish"> Slippery</label></dd>
</dl>
</fieldset>
</section>
<section class="question">
<fieldset>
<legend><strong>Where would you rather live?</strong></legend>
<dl>
<dd><label><input type="radio" name="question[location]" value="bear"> In the Arctic</label></dd>
<dd><label><input type="radio" name="question[location]" value="fish,iguana,zebra"> At the equator</label></dd>
<dd><label><input type="radio" name="question[location]" value="panda,osprey,squirrel,bobcat,rabbit"> Somewhere in between</label></dd>
</dl>
</fieldset>
</section>
<section class="question">
<fieldset>
<legend><strong>Are you a day person or a night person?</strong></legend>
<dl>
<dd><label><input type="radio" name="question[daynight]" value="bear,osprey,squirrel,bobcat,fish,iguana,zebra,rabbit"> Day</label></dd>
<dd><label><input type="radio" name="question[daynight]" value="panda"> Night</label></dd>
</dl>
</fieldset>
</section>
<section class="question">
<fieldset>
<legend><strong>Which is tastier?</strong></legend>
<dl>
<dd><label><input type="radio" name="question[taste]" value="bear,bobcat,osprey,fish"> Meat</label></dd>
<dd><label><input type="radio" name="question[taste]" value="zebra,rabbit"> Vegetables & Grass</label></dd>
<dd><label><input type="radio" name="question[taste]" value="iguana"> Insects</label></dd>
<dd><label><input type="radio" name="question[taste]" value="panda,squirrel"> Twigs & Berries</label></dd>
</dl>
</fieldset>
</section>
<footer class="buttons">
<p>
<input type="submit" class="btn" value="Show me my animal!" data-behavior="tabulate-result">
</p>
</footer>
</form>
</div>
<div class="zoom">
<div class="zoomed-row">
<div class="zoomed-item" data-behavior="unzoom">
<div class="zoomed-item__animal" data-role="animal-emoji"></div>
<h1 class="zoomed-item__label">
You are a… <span data-role="animal-name"></span>!
</h1>
<p class="buttons">
<a href="#" class="btn" data-behavior="unzoom">Try again!</a>
</p>
</div>
</div>
</div>
</body>