Bookmark/workshop.html at master · tws2xa/Bookmark · 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
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
184
185
186
187
188
189
190
191
<html>
<!-- Style Sheets -->
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/workshoppagecss.css">

<!-- Title Bar -->
<div class="nav">
	<div class="container">
		<ul id="left" class="pull-left">
			<a href="homepage.html">Home</a>
			<a href="workshop.html">Workshop</a>
			<a href="play.html">Play</a>
			<a href="Board.html">Board</a>
		</ul>
		<ul class="pull-right" id="right">

  		</ul>
  	</div>
</div>

<head>
	<title>Bookmark Workshop</title>

	<script type="text/javascript">
		function validateNumericInput(e)
		{
			var event = window.event || event; // for trans-browser compatibility
			return ( event.ctrlKey || event.altKey
				|| (47<event.keyCode && event.keyCode<58 && event.shiftKey==false)
			    || (95<event.keyCode && event.keyCode<106)
			    || (event.keyCode==8) || (event.keyCode==9)
			    || (event.keyCode>34 && event.keyCode<40)
			    || (event.keyCode==46));

		}

		function handleSubmit() {
			if(sessionStorage.studentId == null) {
				alert("Please Login to Create Cards.");
				window.location.href = "./login.html";
				return false;
			} else {
				var studentId = sessionStorage.studentId;
				var cardType = $('#type option:selected').text();
				var bodyText = $("#mainText").val();
				var pageStart = $("#startPage").val();
				var pageEnd = $("#endPage").val();
				var editId = $("#editCardId").val();

				if(cardType == "Card Type") {
					alert("Please select a card type from the drop down menu at the top of the card.");
					return false;
				}

				if(bodyText.size > 500) {
					alert("You cannot submit a card with more than 500 characters. Try using an ellipsis!");
					return false;
				}

				if(bodyText.trim() == "") {
					alert("You cannot submit a blank card.");
					return false;
				}

				editId = editId.trim();
				if(editId == "") {
					editId = -1;
				}

				if(pageStart == "") {
					pageStart = -1;
				}
				if(pageEnd == "") {
					pageEnd = -1;
				}

				createCardForStudent(studentId, cardType, bodyText, pageStart, pageEnd, editId); // Defined in DataFetcher
				return true;
			}
		}
	</script>
</head>
<body>

<!-- Jquery -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>

<!-- Some Game Files -->
<script src="js/ColorScheme.js" type="text/javascript"></script>
<script src="js/Card.js" type="text/javascript"></script>
<script src="js/Team.js" type="text/javascript"></script>
<script src="js/Student.js" type="text/javascript"></script>
<script src="js/DataFetcher.js" type="text/javascript"></script>

<script type="text/javascript">
	// Check they are logged in.
	if(sessionStorage.studentId == null) {
		// alert("Please Login to Create Cards.");
		window.location.href = "./login.html";
	}

	var cardTypesXML = getCardTypesXML(sessionStorage.studentId);
	var cardTypes = [];
	if(cardTypesXML != null) {
		var cardData = $(cardTypesXML).find("card_types");
		$(cardData).find("type").each(function(index, element) {
			var cardTypeStr = $(element).text().trim();
			cardTypes.push(cardTypeStr);
		});
	}
	console.log("Types: ");
	for(var i=0; i<cardTypes.length; i++) {
		console.log("\t" + cardTypes[i]);
	}
</script>


<form method="POST" style="padding: 0">
	<center>
	<br />

	<div class="cardTable" style = "padding-top: 0">
		<table >
			<tr><td height = "13%" style = "padding-right: 5%; padding-left: 5%;">
				<!-- Type Dropdown -->
				<select id="type" name="type" class = "form-control">
					<option value = "" disabled select selected>Card Type</option>
					<!--
					<option value="argument">Argument</option>
					<option value="theme">Theme</option>
					<option value="tone">Tone</option>
					<option value="imagery">Imagery</option>
					<option value="diction">Diction</option>
					<option value="plot_point">Plot Point</option>
					<option value="other">Other</option>
					<option value="test 2">Test 2</option>
					-->
				</select>
				<script type="text/javascript">
					// Add options to the select menu
					$.each(cardTypes, function(index) {
						var val = cardTypes[index];
						$('#type').append($('<option>', { value : val }).text(val));
					});
				</script>
			</td></tr>
			<tr><td height = "80%" style="padding-right: 5%; padding-left: 5%" >
				<textarea id="mainText" name="mainText" cols = "30" rows = "10" placeholder = "Card Contents..." style = "resize:none; width:100%; height:100%" maxlength="500" class = "form-control"></textarea>
			</td></tr>
			<tr><td style="text-align:right; padding-right: 5%">
				Pg.
				<input type="text" id="startPage" name="startPage" size = "3" maxlength="4" onkeydown="return validateNumericInput(event)">
				-
				<input type="text" id="endPage" name="endPage" size = "3" maxlength="4" onkeydown="return validateNumericInput(event)">
			</td></tr>
			<tr style="padding:0px;"><td><button class = "btn" value="Submit" onclick="return handleSubmit()">Submit</button></td></tr>
		</table>
		<input type="text" id="editCardId" name="editCardId" size = "5" maxlength="5" style="display: none" disabled="disabled">
	</div>

	<div id="divD" style = "position: absolute; border:0px solid #000000;"><canvas id="canvasD" style = "margin: 0px;"></canvas></div>

	<!-- (Some of the) Game Javascript Files -->
	<script src="js/CardDrawer.js" type="text/javascript"></script>
	<script src="js/DeckDisplay.js" type="text/javascript"></script>
	<script src="js/Rectangle.js" type="text/javascript"></script>
	<script src="js/showDeckDisplay.js" type="text/javascript"></script>
	</center>
</form>
<script type = "text/javascript">


     if(isTeacherId(sessionStorage.studentId)) {

         $("#left").append('<a href="teacher_junction.html">Teacher</a>');
      }


    if(sessionStorage.studentId != null) {
           $("#right").append('<a href="login.html">Logout</a>');
    }

    if(sessionStorage.studentId == null) {
            $("#right").append('<a href="login.html">Login</a>');
    }

</script>

</body>
</html>