-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathFormStudent2.html
135 lines (93 loc) · 4.96 KB
/
FormStudent2.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
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Form2</title>
<meta name="description" content="The HTML5 Herald">
<meta name="author" content="SitePoint">
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<link rel="stylesheet" href="styles/Form1.css">
<link rel="stylesheet" href="styles/navbar.css">
</head>
<body>
<nav class= "navbar navbar-default">
<a class="navbar-brand" href="#">Williams</a>
</nav><br>
<div class="progress" style="height:30px">
<div class="progress-bar" role="progressbar" style="width: 50%" aria-valuenow="33" aria-valuemin="0" aria-valuemax="100">Career Interests</div>
<div class="progress-bar bg-success" role="progressbar" style="width: 50%" aria-valuenow="33" aria-valuemin="0" aria-valuemax="100">Department Interests</div>
</div>
<div style="text-align:center" class="mt-5">
<h4> Select your department Interests </h4>
</div>
<div class="row justify-content-center">
<form id="tag-space">
<div id="space" data-toggle="buttons"></div>
</form>
</div>
<div class=" container-fluid mt-3 row buttons">
<div class="col">
<button id="prevBtn" type="submit" value=" Send" class="btn btn-dark">Previous</button>
</div>
<div class="col">
<button id="deselectBtn" class="btn btn-dark">Deselect All</button>
</div>
<div class="col">
<button id="submitBtn" type="submit" value=" Send" class="btn btn-dark">Next</button>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<script>
var tagList = ["Africana Studies", "American Studies", "Anthropology & Sociology", "Anthropology", "Arabic Studies", "Art History","Asian Studies", "Astronomy", "Astrophysics", "Biochemistry & Molecular Biology", "Biology", "Chemistry", "Chinese", "Classics", "Cognitive Science", "Comparative Literature","Computer Science", "Contract Major", "Critical Languages", "Dance", "Economics", "English", "Environmental Studies", "Experiential Studies", "French", "Geosciences", "German","Global Studies", "Greek", "Hebrew", "Hindi", "History", "History of Science", "Interdisciplinary Studies","Italian", "Japanese", "Jewish Studies","Justice & Law Studies", "Korean", "Latin","Latina/o Studies", "Leadership Studies", "Maritime Studies", "Mathematics", "Music", "Neuroscience", "Philosophy", "Public Health", "Physics", "Political Economy", "Political Science","Portugese", "Psychology", "Religion", "Spanish", "Studio Art", "Swahili", "Russian", "Science & Technology Studies", "Sociology", "Special", "Statistics", "Theatre", "Women's, Gender & Sexuality Studies"];
function createTag(input){
var newTag = document.createElement('label');
newTag.setAttribute("id", input);
newTag.className = "tag btn btn-outline-dark";
newTag.innerHTML = input;
newTag.addEventListener("click", function (evt) {
if(newTag.classList.contains("active")) {
newTag.className += " active";
//newTag.classList.remove("active");
}
});
return newTag;
}
for(var i = 0; i < tagList.length; i++){
$("#space")[0].appendChild(createTag(tagList[i]));
}
submitBtn.addEventListener("click", function (evt) {
var tagList = getTags();
evt.preventDefault();
window.location = "FormStudent3.html" + tagList;
return false;
});
prevBtn.addEventListener("click", function (evt) {
evt.preventDefault();
window.location = "FormStudent1.html";
return false;
});
deselectBtn.addEventListener("click", function (evt){
var tags = document.getElementById("tag-space").querySelectorAll(".tag");
for (var i = 0; i < tags.length; i++) {
tags[i].classList.remove("active");
}
});
function getTags(){
var activeTags = document.getElementById("tag-space").querySelectorAll(".active");
var tagList = "?";
for (var i = 0; i < activeTags.length; i++){
tagList += activeTags[i].id;
if(i < activeTags.length - 1) tagList += "&";
}
return tagList;
}
</script>
</body>
</html>