TAMatch/TAApp.html at master · ed-ke/TAMatch · GitHub

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
<!doctype html>

<html lang="en">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>TA Application</title>
  <link rel="stylesheet" href="jquery-ui.css">
  <link rel="stylesheet" href="/resources/demos/style.css">
  <style>
  #sortable { list-style-type: none; margin: 0; padding: 0; width: 60%; }
  #sortable li { margin: 0 3px 3px 3px; padding: 0.4em; padding-left: 1.5em; font-size: 1.4em; height: 18px; }
  #sortable li span { position: absolute; margin-left: -1.3em; }
  </style>
  <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
  <script>
  $( function() {
    $( "#sortable" ).sortable();
    $( "#sortable" ).disableSelection();
  } );
  </script>
</head>

<body>

<h1>TA Application</h1>
<br>


<form action="/action_page.php">
  First name: <input type="text" name="fname" id = "fname"><br>
  <p> </p>
  Last name: <input type="text" name="lname" id = "lname"><br>
  <p> </p>
  Email: <input type="text" name="email" id = "email"><br>
  <!--<input type="submit" value="Submit">-->
</form>

  <p>

  </p>
  Degree Program:
  <select id = "degreeProgram">
  <option value="msThesis">MS Thesis</option>
  <option value="msNon-Thesis">MS Non-Thesis</option>
  <option value="phd">PhD</option>
</select>
  <!--<input type="submit" value="Submit">-->


<p>

</p>

<div>
Applying as:
<p></p>
   <input type="checkbox" id="taCheck"> TA
  <p></p>
   <input type="checkbox" id="gCheck"> Grader
  <p></p>
   <input type="checkbox" id="sgCheck"> Senior Grader
</div>


<p>

</p>
<p>
Please rank the classes you would like to teach, with the top class being where you most want to be,
and the bottom being where you don't want to be.
</p>

<p>
Any classes you place below the red line are classes that do not line up with your schedule or that you are not willing to teach.
</p>

<div id = "sortablediv">
<ul id="sortable">
  <li id = "CSCE655" class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>CSCE 655 Human-Centered Computing</li>
  <li id = "CSCE315" class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>CSCE 315 Programming Studio</li>
  <li id = "CSCE670" class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>CSCE 670/470 Info Storage and Retrieval</li>
  <li id = "CSCE633" class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>CSCE 633 Machine Learning</li>
  <li id = "CSCE625" class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>CSCE 625/420 Artificial Intelligence</li>
  <li id = "CSCE436" class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>CSCE 436 Computer Human Interaction</li>
  <li id = "CSCE445" class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>CSCE 445 Computers and New Media</li>
  <li id = "CSCE482" class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>CSCE 482 Capstone Design</li>
  <li id = "CSCE431" class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span> CSCE 431 Software Engineering</li>
   <li id = "CSCE441" class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>CSCE 441 Computer Graphics </li>
  <li id = "CSCE629" class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span> CSCE 629/411 Analysis of Algorithms </li>
  <li id = "CSCE314" class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>CSCE 314 Programming Languages </li>
  <li id = "CSCE310" class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span> CSCE 310 Database Systems</li>
  <li id = "CSCE121" class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>CSCE 121 Intro Programming Design </li>
  <li id = "CSCE206" class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>CSCE 206 Structured Programming in C </li>
  <li id = "CSCE313" class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span> CSCE 313 Intro to Computer System </li>
  <li id = "CSCE221" class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>CSCE 221 Data Structures and Algorithms </li>
  <li id = "CSCE222" class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span> CSCE 222 Discrete Structure Computing</li>
  <li id = "divider" class="ui-state-default" style="background:#ad5648"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>I CANONT TA classes below this line </li>
  <li id = "CSCE312" class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>CSCE 312 Computer Organization </li>
  <li id = "CSCE181" class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span> CSCE 181 Intro to Computing</li>
  <li id = "CSCE111" class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span> CSCE 111 CPSC Concepts and Program </li>
  <li id = "CSCE110" class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span> CSCE 110 Programming I </li>
</ul>
</div>

<br><br>

<button onclick = "convertToJSON()"> SUBMIT</button>
</body>

<script>

	var s = document.getElementById("degreeProgram");
	s.addEventListener("change", changeSelectedDP);

	function changeSelectedDP(){
		var value = s.options[s.selectedIndex].value;
	}
	changeSelectedDP();

	function convertToJSON(){
		var fname = document.getElementById('fname').value;
		var lname = document.getElementById('lname').value;
		var email = document.getElementById('email').value;
		var degreeProg = document.getElementById("degreeProgram").options[document.getElementById("degreeProgram").selectedIndex].value;
		var lis = document.getElementById("sortablediv").getElementsByTagName("li");

		var isTA = document.getElementById('taCheck').checked;
		var isGrader = document.getElementById('gCheck').checked;
		var isSG = document.getElementById('sgCheck').checked;

		var i;
		var preferences = [];
		var antipreferences = [];
		i = 0;
		while(lis[i].id != "divider"){
			preferences.push(lis[i].id);
			i++;
		}
		i++;
		while(i < lis.length){
			antipreferences.push(lis[i].id);
			i++;
		}

		console.log(JSON.stringify({"fname":fname, "lname":lname, "email":email, "degreeProgram":degreeProg, "isTA":isTA, "isGrader":isGrader, "isSG":isSG, "preferences":preferences, "antipref":antipreferences}));


	}
</script>


</html>