Context Navigation

source: Dev/trunk/classes/SurveyCreationTool.php @ 72

Last change on this file since 72 was 72, checked in by fpvanagthoven, 14 years ago
Okay input is now a lot more robust. Apostrophes and quotes should no longer be a problem.
File size: 39.1 KB

Line
1	<?php
2
3	/**
4	* Description of SurveyTool
5	*
6	* SurveyTool is where the survey can be created.
7	*
8	*/
9	class SurveyCreationTool {
10
11	private $survey;
12	private $timeStamp;
13
14	public function __construct($survey = null, $timeStamp = null) {
15	$this->survey = $survey;
16	$this->timeStamp = $timeStamp;
17	var_dump($_POST);
18	var_dump($survey);
19	if (isset($this->survey->id))
20	SurveyCreationTool::javascript($this->survey->id);
21	else
22	SurveyCreationTool::javascript();
23	?>
24
25	<div id="surveyCreation" class="creation"><form id="survey" action="surveycreation.php" method="post">
26	<?php
27	$this->surveyHead();
28	$this->questionCreationForm();
29	SurveyCreationTool::addQuestionButton();
30	SurveyCreationTool::removeLastQuestionButton();
31	?></form></div>
32	<?php
33	}
34
35	private static function javascript($id = null) {
36	?>
37	<script type="text/javascript" src="js/creation.js"></script>
38	<script type="text/javascript">
39	/* autosave every 3 minutes */
40	setTimeout("save('<?php echo $id; ?>')", 180000);
41
42	var questionCount = 1;
43
44	function getNewQuestion(title, description)
45	{
46	if (title == null)
47	var title = 'Untitled Question';
48
49	if (description == null)
50	var description = 'Write a question description here.';
51
52	var questionDiv = document.createElement("div");
53	questionDiv.id = "question" + questionCount;
54	questionDiv.className = "question";
55
56	var questionTable = document.createElement("table");
57	questionTable.className = "questionTable";
58
59	var th = document.createElement("th");
60	th.innerHTML = "Question " + questionCount;
61
62	var row1 = document.createElement("tr");
63
64	var col1 = document.createElement("td");
65	var titleLabel = document.createElement("label");
66	titleLabel.setAttribute("for", "questionTitle");
67	titleLabel.innerHTML = "Title";
68	col1.appendChild(titleLabel);
69
70	var col2 = document.createElement("td");
71	var titleInput = document.createElement("input");
72	titleInput.id = "questionTitle";
73	titleInput.setAttribute("type", "text");
74	titleInput.className = "questionTitle";
75	titleInput.setAttribute("name", "questionTitle" + questionCount);
76	titleInput.setAttribute("onfocus", "handleFocus(this)");
77	titleInput.setAttribute("size", "30");
78	titleInput.setAttribute("value", title);
79	col2.appendChild(titleInput);
80
81	row1.appendChild(col1);
82	row1.appendChild(col2);
83
84	var row2 = document.createElement("tr");
85	var col3 = document.createElement("td");
86	var descriptionLabel = document.createElement("label");
87	descriptionLabel.setAttribute("for", "questionDescription");
88	descriptionLabel.innerHTML = "Description";
89	col3.appendChild(descriptionLabel);
90
91	var col4 = document.createElement("td");
92	var descriptionInput = document.createElement("input");
93	descriptionInput.type = "text";
94	descriptionInput.className = "questionDescription";
95	descriptionInput.name = "questionDescription" + questionCount;
96	descriptionInput.setAttribute("onfocus", "handleFocus(this)");
97	descriptionInput.setAttribute("size", 60);
98	descriptionInput.setAttribute("value", description);
99	col4.appendChild(descriptionInput);
100
101	row2.appendChild(col3);
102	row2.appendChild(col4);
103
104	var row3 = document.createElement("tr");
105	var col5 = document.createElement("td");
106	var typeLabel = document.createElement("label");
107	typeLabel.setAttribute("for", "questionType");
108	typeLabel.innerHTML = "Type answer";
109	col5.appendChild(typeLabel);
110
111	var col6 = document.createElement("td");
112	var select = document.createElement("select");
113	select.id = questionCount;
114	select.setAttribute("name", "questionType" + questionCount);
115	select.setAttribute("onchange", "handleType(this)");
116	select.innerHTML =
117	"<option value='text' selected='selected'>Text</option>" +
118	"<option value='int'>Integer</option>" +
119	"<option value='mc'>Multiple choice</option>" +
120	"<option value='checkboxes'>Checkboxes</option>" +
121	"<option value='scale'>Scale</option>";
122
123	col6.appendChild(select);
124
125	row3.appendChild(col5);
126	row3.appendChild(col6);
127
128	questionTable.appendChild(th);
129	questionTable.appendChild(row1);
130	questionTable.appendChild(row2);
131	questionTable.appendChild(row3);
132
133	var answerDiv = document.createElement("div");
134	answerDiv.id = "answersDiv" + questionCount;
135	answerDiv.className = "answersDiv";
136
137	questionDiv.appendChild(questionTable);
138	questionDiv.appendChild(answerDiv);
139
140	return questionDiv;
141	}
142
143	function handleType(select, answers)
144	{
145	var numQ = select.id; // questionNumber
146	var type = select.valueOf().value;
147	var answersDiv = document.getElementById("answersDiv" + numQ );
148
149	removeQuestionID(numQ);
150
151	answersDiv.answerCount = 1;
152	answersDiv.clicked = null;
153
154	switch (type) {
155	case 'mc':
156	answersDiv.innerHTML = "";
157	if (answers != null)
158	{
159	for (var i = 1; i < answers.length; i++)
160	{
161	addOption(numQ, answers[i]);
162	}
163	}
164	else
165	addOption(numQ);
166
167	break;
168	case 'text':
169	answersDiv.innerHTML = "";
170	break;
171	case 'int':
172	answersDiv.innerHTML = "";
173
174	//min max
175	if (answers != null)
176	minMax(numQ, answers[1], answers[2]);
177	else
178	minMax(numQ);
179	break;
180	case 'checkboxes':
181	answersDiv.innerHTML = "";
182	if (answers != null)
183	{
184	for (var i = 1; i < answers.length; i++)
185	{
186	addOption(numQ, answers[i]);
187	}
188	}
189	else
190	addOption(numQ);
191	break;
192	case 'scale':
193	answersDiv.innerHTML = "";
194	//what scale (min max incr)
195	if (answers != null)
196	minMaxIncr(numQ, answers[1], answers[2], answers[3]);
197	else
198	minMaxIncr(numQ);
199	break;
200	default:
201	break;
202	}
203
204	}
205
206	function handleAnswerChange(questionNumber)
207	{
208	removeQuestionID(questionNumber);
209	}
210
211	function removeQuestionID(questionNumber)
212	{
213	/* When type changes, remove question ID, because question changes */
214	var questionIDInput = document.getElementById("questionID" + questionNumber);
215	if (questionIDInput != null)
216	{
217	var questionsDiv = document.getElementById("questionsDiv");
218	questionsDiv.removeChild(questionIDInput);
219	}
220
221	}
222
223
224	function addOption(questionNumber, optionStr)
225	{
226	var answersDiv = document.getElementById("answersDiv" + questionNumber);
227	var answerCount = answersDiv.answerCount;
228	var answerDiv = document.createElement("div");
229
230	if (optionStr == null)
231	var optionStr = "Option " + answerCount;
232
233
234	answerDiv.className = "answerDiv";
235
236	var answerInput = document.createElement("input");
237	answerInput.setAttribute("type", "text");
238	answerInput.setAttribute("name", "q" + questionNumber + "ans" + answerCount);
239	answerInput.setAttribute("onchange", "handleAnswerChange(" + questionNumber + ")");
240	answerInput.setAttribute("value", optionStr);
241
242	answerDiv.appendChild(answerInput);
243
244	if (answersDiv.clicked == null)
245	{
246	var addOpt = document.createElement("input");
247	addOpt.setAttribute("type", "button");
248	addOpt.setAttribute("id", "addOpt");
249	addOpt.setAttribute("class", "surveyButton");
250	addOpt.setAttribute("onclick", "addOption(" + questionNumber + ")");
251	addOpt.setAttribute("value", "Add Option");
252
253	var removeOpt = document.createElement("input");
254	removeOpt.setAttribute("type", "button");
255	removeOpt.className = "surveyButton";
256	removeOpt.setAttribute("onclick", "removeOption(" + questionNumber + ")");
257	removeOpt.setAttribute("value", "x");
258
259	answerDiv.appendChild(addOpt);
260	answerDiv.appendChild(removeOpt);
261
262	answersDiv.clicked = true;
263	}
264
265	answerDiv.prev = answersDiv.lastAnswer; //singly linked list
266	answersDiv.lastAnswer = answerDiv;
267
268	answersDiv.appendChild(answerDiv);
269	answersDiv.answerCount++;
270
271	handleAnswerChange(questionNumber);
272	}
273
274	function removeOption(questionNumber)
275	{
276	var answersDiv = document.getElementById("answersDiv" + questionNumber);
277
278	if (answersDiv.lastAnswer.prev != null)
279	{
280	answersDiv.removeChild(answersDiv.lastAnswer);
281	answersDiv.lastAnswer = answersDiv.lastAnswer.prev;
282	answersDiv.answerCount--;
283	}
284
285	handleAnswerChange(questionNumber);
286	}
287
288	function minMax(questionNumber, min, max)
289	{
290	if (min == null)
291	var min = '';
292	if (max == null)
293	var max = '';
294
295	var answersDiv = document.getElementById("answersDiv" + questionNumber);
296
297	var answerDiv = document.createElement("div");
298
299	answerDiv.className = "answerDiv";
300	answerDiv.innerHTML = "<label for='min'>Min</label><input type='text' class='intBox' onchange='checkInt(this)' value='" + min + "' name='q" + questionNumber + "ans1' />" +
301	"<label for='max'>Max</label><input type='text' class='intBox' onchange='checkInt(this)' value='" + max + "' name='q" + questionNumber + "ans2' />";
302
303	answersDiv.appendChild(answerDiv);
304	}
305
306	function minMaxIncr(questionNumber, left, right, incr)
307	{
308	if (left == null)
309	var left = '';
310	else
311	left.replace("'", "'");
312	if (right == null)
313	var right = '';
314	else
315	right.replace("'", "'");
316	if (incr == null)
317	var incr = '';
318
319	var answersDiv = document.getElementById("answersDiv" + questionNumber);
320
321	var answerDiv = document.createElement("div");
322	answerDiv.className = "answerDiv";
323
324	var leftLabel = document.createElement("label");
325	var rightLabel = document.createElement("label");
326	var scaleLabel = document.createElement("label");
327	leftLabel.innerHTML = "Left label";
328	rightLabel.innerHTML = "Right label";
329	scaleLabel.innerHTML = "Scale count";
330
331	var leftInput = document.createElement("input");
332	leftInput.type = "text";
333	leftInput.value = left;
334	leftInput.name= "q" + questionNumber + "ans1";
335	leftInput.setAttribute("onchange", "handleAnswerChange("
336	+ questionNumber + ")");
337
338	var rightInput = document.createElement("input");
339	rightInput.type = "text";
340	rightInput.value = right;
341	rightInput.name = "q" + questionNumber + "ans2";
342	rightInput.setAttribute("onchange", "handleAnswerChange("
343	+ questionNumber + ")");
344
345	var scaleInput = document.createElement("input");
346	scaleInput.type = "text";
347	scaleInput.className = "intBox";
348	scaleInput.value = incr;
349	scaleInput.setAttribute("onblur", "checkInt(this)");
350	scaleInput.setAttribute("onchange", "handleAnswerChange("
351	+ questionNumber + ")");
352
353	answerDiv.appendChild(leftLabel);
354	answerDiv.appendChild(leftInput);
355	answerDiv.appendChild(rightLabel);
356	answerDiv.appendChild(rightInput);
357	answerDiv.appendChild(scaleLabel);
358	answerDiv.appendChild(scaleInput);
359
360	answersDiv.appendChild(answerDiv);
361	}
362
363
364	function addQuestion(title, description)
365	{
366	var questionsDiv = document.getElementById('questionsDiv');
367	var newQuestion = getNewQuestion(title, description);
368
369
370	newQuestion.prev = document.lastQuestion;
371	document.lastQuestion = newQuestion;
372
373	questionsDiv.appendChild(newQuestion);
374	questionCount++;
375	}
376
377	function removeLastQuestion()
378	{
379	var questionsDiv = document.getElementById('questionsDiv');
380
381	if (document.lastQuestion.prev != null)
382	{
383	questionsDiv.removeChild(document.lastQuestion);
384	document.lastQuestion = document.lastQuestion.prev;
385	questionCount--;
386	}
387	else
388	{
389	// do nothing
390	}
391	}
392
393	function save(surveyID)
394	{
395	if (checksPassed())
396	{
397	var form = document.getElementById('survey');
398	var questionsDiv = document.getElementById('questionsDiv');
399	form.action = "surveycreation.php";
400
401	/* extra time stamp */
402	var date = new Date();
403	var minutes = date.getUTCMinutes();
404	if (minutes < 10)
405	minutes = "0" + minutes;
406	var timeStamp = date.getHours() + ":" + minutes;
407	var timeStampInput = document.createElement("input");
408	timeStampInput.name = "timeStamp";
409	timeStampInput.value = timeStamp;
410	timeStampInput.type = "hidden";
411
412	var surveyIDInput = document.createElement("input");
413	surveyIDInput.name = "surveyID";
414	surveyIDInput.value = surveyID;
415	surveyIDInput.type = "hidden";
416
417	questionsDiv.appendChild(timeStampInput);
418	questionsDiv.appendChild(surveyIDInput);
419	form.submit();
420	}
421	}
422
423	function selectAll(input)
424	{
425	input.select();
426	}
427
428	/* --- input checking --- */
429	function checksPassed()
430	{
431	var form = document.getElementById('survey');
432
433	for (var i = 0; i < form.length; i++)
434	{
435	if (form.elements[i].checkPassed == 'no')
436	return false;
437	}
438	return true;
439	}
440
441	function checkInt(input)
442	{
443	input.style.borderWidth = '1px' ;
444	var value = input.value;
445	if (isNaN(value))
446	{
447	input.style.borderColor = 'red';
448	input.checkPassed = 'no';
449	}
450	else
451	{
452	input.style.border = '1px solid #888;';
453	input.checkPassed = null;
454	}
455	}
456
457	</script>
458	<?php
459	}
460
461	private function surveyHead() {
462	?><div id="surveyHead">
463	<?php
464	$this->titleBox();
465	$this->saveSurvey();
466	$this->descriptionBox();
467	$this->surveyLink();
468	?></div>
469	<?php
470	}
471
472	private function titleBox() {
473	if (isset($this->survey->title))
474	$value = $this->survey->title;
475	else
476	$value = 'Untitled Survey';
477	?>
478	<input type="text" id="surveyTitle" class="titleBox" name="surveyTitle" value="<?php echo str_replace("\"", """, $value); ?>" onblur="handleBlur(this)" onfocus="handleFocus(this)" />
479	<?php
480	}
481
482	private function saveSurvey() {
483	if (isset($this->timeStamp))
484	echo "<div id='timeStamp'>Last saved " . $this->timeStamp . '</div>';
485	if (isset($this->survey->id))
486	$id = $this->survey->id;
487	else
488	$id = null;
489	?>
490	<input id="surveySaveButton" type="button" onclick="save('<?php echo $id; ?>')" class='surveyButton' value='Save' />
491	<?php
492	}
493
494	private function descriptionBox() {
495	if (isset($this->survey->description))
496	$value = $this->survey->description;
497	else
498	$value = 'Write a helpful description for this survey here.';
499	?>
500	<textarea id="surveyDescription" class="descriptionBox" name="surveyDescription" onblur="handleBlur(this)" onfocus="handleFocus(this)"><?php echo $value; ?></textarea>
501	<?php
502	}
503
504	private function surveyLink() {
505	if (isset($this->survey)) {
506	$surveyID = $this->survey->id;
507
508	$link = $_SERVER['HTTP_HOST'] . dirname($_SERVER['PHP_SELF']) .
509	'/survey.php?id=' . $surveyID;
510	?>
511	<input type="text" value="<?php echo $link; ?>" id="surveyLink" onclick="selectAll(this)">
512	<?php
513	}
514	}
515
516	private function questionCreationForm() {
517	?>
518	<div id='questionsDiv'>
519	</div>
520	<?php
521	if (isset($this->survey)) {
522	foreach ($this->survey->questions as $numQ => $question) {
523	?>
524	<script type="text/javascript">
525	var answers = new Array();
526	<?php
527	/* Put all answers in js array */
528	foreach ($question->answers as $numA => $answer) {
529	echo 'answers[' . $numA . '] = "' . addslashes($answer) . '"; ';
530	?>
531
532	<?php
533	}
534	?>
535
536	var title = "<?php echo addslashes($question->title); ?>";
537	addQuestion(title, "<?php echo addslashes($question->description); ?>");
538
539	var select = document.getElementById('<?php echo $numQ; ?>');
540	var type = '<?php echo $question->type; ?>';
541
542	for (var i = 0; i < select.options.length; i++) {
543	if (select.options[i].value == type)
544	{
545	select.options[i].selected = true;
546	handleType(select, answers);
547	break;
548	}
549	}
550
551
552	/* questionID stuff */
553	var questionIDInput = document.createElement("input");
554	questionIDInput.id = "questionID<?php echo $numQ; ?>";
555	questionIDInput.name = "questionID<?php echo $numQ; ?>";
556	questionIDInput.value = "<?php echo $question->id; ?>";
557	questionIDInput.type = "hidden";
558
559	document.getElementById("questionsDiv").appendChild(questionIDInput);
560
561	</script>
562	<?php
563	}
564	} else {
565	?>
566	<script type="text/javascript"> addQuestion();</script>
567	<?php
568	}
569	}
570
571	private static function addQuestionButton() {
572	?>
573	<input id="addQuestionButton" type="button" onclick="addQuestion()" value="Add New Question" class="surveyButton" />
574	<?php
575	}
576
577	private static function removeLastQuestionButton() {
578	?>
579	<input type="button" onclick="removeLastQuestion()" value="x" class="surveyButton" />
580	<?php
581	}
582
583	}
584	?>

Note: See TracBrowser for help on using the repository browser.

Download in other formats: