-
Notifications
You must be signed in to change notification settings - Fork 0
/
interactive.html
183 lines (129 loc) · 9.43 KB
/
interactive.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
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>What Kind of Fruit Are You? | Fruits</title>
<link rel="stylesheet" href="interactive.css">
</head>
<body>
<div id="proj2">
<div id="close">
<nav>
<ul>
<li><a href="teenysfinalprojecthome.html">Home</a> </li>
<li><a href="about.html">About</a></li>
<li><a href="fruit1-final-peishu.html">Watermelon</a></li>
<li><a href="teenysfinalprojectfruit2.html">Maarten's Top Three</a></li>
<li><a href="banana.html">Banana</a></li>
<li><a href="durian.html">Durian</a></li>
<li><a href="interactive.html">What Kind of Fruit Are You?</a></li>
<li><a href="contact-final-peishu.html">Contacts</a></li>
</ul>
</nav>
<div class="container">
<header><h1>What Kind of Fruit Are You?</h1></header>
<form id="fruitForm">
<div class="question">What's your ideal way to spend a sunny day?</div>
<div class="answer-grid">
<input type="radio" name="question1" id="1a" value="Watermelon" class="hidden-radio">
<label for="1a" class="label">Having a picnic with friends</label>
<input type="radio" name="question1" id="1b" value="Durian" class="hidden-radio">
<label for="1b" class="label">Exploring somewhere new and unusual</label>
<input type="radio" name="question1" id="1c" value="Banana" class="hidden-radio">
<label for="1c" class="label">Relaxing at home or a quiet place</label>
<input type="radio" name="question1" id="1d" value="Oranges" class="hidden-radio">
<label for="1d" class="label">Doing outdoor activities or sports</label>
<input type="radio" name="question1" id="1e" value="Grapes" class="hidden-radio">
<label for="1e" class="label">Attending a cultural or wine-tasting event</label>
<input type="radio" name="question1" id="1f" value="Pineapple" class="hidden-radio">
<label for="1f" class="label">Going on a tropical adventure or beach party</label>
</div>
<div class="question">Choose a snack you prefer:</div>
<div class="answer-grid">
<input type="radio" name="question2" id="2a" value="Watermelon" class="hidden-radio">
<label for="2a" class="label">Something sweet and refreshing</label>
<input type="radio" name="question2" id="2b" value="Durian" class="hidden-radio">
<label for="2b" class="label">Something with a strong and unique flavor</label>
<input type="radio" name="question2" id="2c" value="Banana" class="hidden-radio">
<label for="2c" class="label">Something light and easy to eat</label>
<input type="radio" name="question2" id="2d" value="Oranges" class="hidden-radio">
<label for="2d" class="label">Something energizing and healthy</label>
<input type="radio" name="question2" id="2e" value="Grapes" class="hidden-radio">
<label for="2e" class="label">A selection of fine cheeses and wine</label>
<input type="radio" name="question2" id="2f" value="Pineapple" class="hidden-radio">
<label for="2f" class="label">A tropical fruit salad bursting with flavor</label>
</div>
<div class="question">How do you react under pressure?</div>
<div class="answer-grid">
<input type="radio" name="question3" id="3a" value="Watermelon" class="hidden-radio">
<label for="3a" class="label">Keep cool and stay relaxed</label>
<input type="radio" name="question3" id="3b" value="Durian" class="hidden-radio">
<label for="3b" class="label">Embrace the challenge, no matter how tough</label>
<input type="radio" name="question3" id="3c" value="Banana" class="hidden-radio">
<label for="3c" class="label">Maintain a steady and calm approach</label>
<input type="radio" name="question3" id="3d" value="Oranges" class="hidden-radio">
<label for="3d" class="label">Energize myself to tackle the problem head-on</label>
<input type="radio" name="question3" id="3e" value="Grapes" class="hidden-radio">
<label for="3e" class="label">Analyzing the situation with poise and grace</label>
<input type="radio" name="question3" id="3f" value="Pineapple" class="hidden-radio">
<label for="3f" class="label">Taking charge with enthusiasm and creativity</label>
</div>
<div class="question">What is your social style in a large group?</div>
<div class="answer-grid">
<input type="radio" name="question4" id="4a" value="Watermelon" class="hidden-radio">
<label for="4a" class="label">I'm like a host, making sure everyone's having a good time</label>
<input type="radio" name="question4" id="4b" value="Durian" class="hidden-radio">
<label for="4b" class="label">I stand out with my unique perspectives</label>
<input type="radio" name="question4" id="4c" value="Banana" class="hidden-radio">
<label for="4c" class="label">I prefer observing and adding to the conversation when I can</label>
<input type="radio" name="question4" id="4d" value="Oranges" class="hidden-radio">
<label for="4d" class="label">I'm often the center of action and conversation</label>
<input type="radio" name="question4" id="4e" value="Grapes" class="hidden-radio">
<label for="4e" class="label">Engaging in deep conversations with a small group</label>
<input type="radio" name="question4" id="4f" value="Pineapple" class="hidden-radio">
<label for="4f" class="label">Being the vibrant, energetic life of the party</label>
</div>
<div class="question">What type of holiday do you prefer?</div>
<div class="answer-grid">
<input type="radio" name="question5" id="5a" value="Watermelon" class="hidden-radio">
<label for="5a" class="label">A beach vacation with lots of swimming</label>
<input type="radio" name="question5" id="5b" value="Durian" class="hidden-radio">
<label for="5b" class="label">An exotic adventure in unfamiliar territories</label>
<input type="radio" name="question5" id="5c" value="Banana" class="hidden-radio">
<label for="5c" class="label">A relaxing staycation or a quiet retreat</label>
<input type="radio" name="question5" id="5d" value="Oranges" class="hidden-radio">
<label for="5d" class="label">An action-packed trip full of activities</label>
<input type="radio" name="question5" id="5e" value="Grapes" class="hidden-radio">
<label for="5e" class="label">A tour of vineyards and historical sites</label>
<input type="radio" name="question5" id="5f" value="Pineapple" class="hidden-radio">
<label for="5f" class="label">An adventurous escape to an exotic island</label>
</div>
<div class="question">How would you describe your fashion style?</div>
<div class="answer-grid">
<input type="radio" name="question6" id="6a" value="Watermelon" class="hidden-radio">
<label for="6a" class="label">Casual and comfortable, with a preference for bright colors</label>
<input type="radio" name="question6" id="6b" value="Durian" class="hidden-radio">
<label for="6b" class="label">Bold and unconventional, standing out in a crowd</label>
<input type="radio" name="question6" id="6c" value="Banana" class="hidden-radio">
<label for="6c" class="label">Practical and classic, with a preference for soft, neutral colors</label>
<input type="radio" name="question6" id="6d" value="Oranges" class="hidden-radio">
<label for="6d" class="label">Sporty and dynamic, ready for any activity</label>
<input type="radio" name="question6" id="6e" value="Grapes" class="hidden-radio">
<label for="6e" class="label">Elegant and sophisticated with a classic touch</label>
<input type="radio" name="question6" id="6f" value="Pineapple" class="hidden-radio">
<label for="6f" class="label">Colorful, bold, and often making a statement</label>
</div>
<button type="button" onclick="calculateFruit()">Get My Fruit</button>
</form>
<div id="result" class="result"></div>
</div>
</div>
</div>
<footer>
<p>
All rights are reserved<a href="ourcredits.html" rel="noreferrer">Credits</a>©
</p>
</footer>
<script src="what-fruit.js"></script>
</body>
</html>