-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
76 lines (75 loc) · 3.23 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="style.css" />
<script type="module" defer src="script.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/[email protected]/brython.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/[email protected]/brython_stdlib.js"></script>
<title>Multi Step Form</title>
</head>
<body>
<div class="container">
<div class="progress_container">
<div class="progress" id="progress"></div>
<div class="circle active">1</div>
<div class="circle">2</div>
<div class="circle">3</div>
</div>
<form id="form1">
<h3>Open Ended Questions</h3>
<div class="input-wrapper">
<!--
Input needs to have a placeholder in order to use :placeholder-shown pseudo class in Safari.
We then hide it using CSS.
-->
<input autocomplete="off" class="input" type="text" id="Q1" placeholder="" />
<label class="label" for="Q1">
What is one person in history you find fascinating or inspiring?
</label>
</div>
<div class="input-wrapper">
<input autocomplete="off" class="input" type="text" id="Q2" placeholder="" />
<label class="label" for="Q2">
What historical mystery or unsolved question fascinates you?
</label>
</div>
<div class="input-wrapper">
<input autocomplete="off" class="input" type="text" id="Q3" placeholder="" />
<label class="label" for="Q3">
If you could witness a moment in time, what would it be and why?
</label>
</div>
<div class="input-wrapper">
<input autocomplete="off" class="input" type="text" id="Q4" placeholder="" />
<label class="label" for="Q4">
What is one area of history you have a personal connection to?
</label>
</div>
<div class="btn_box">
<button id="next1" type="button">Next</button>
</div>
</form>
<form id="form2">
<h3>Personal Info</h3>
<label for="Q5">What period of history are you most interested in exploring?</label>
<select class="dropdown" name="languages" id="Q5" required>
<option value="none" selected disabled hidden>--Select an Option--</option>
<option value="Pre-Ancient History">Pre-Ancient History (before CE)</option>
<option value="Ancient History">Ancient History (before 476 CE)</option>
<option value="Medeival History">Medieval History (476 CE - 1453 CE)</option>
<option value="Early Modern History">Early Modern History (1453 AD - 18th Century)</option>
<option value="Modern History">Modern History (18th Century - 20th Century)</option>
</select>
<div class="btn_box">
<button id="back1" type="button">Back</button>
<button id="next2" type="button">Next</button>
</div>
</form>
<form id="form3">
<h3>Social Links</h3>
</form>
</div>
</body>
</html>