Context Navigation

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

Last change on this file since 62 was 61, checked in by fpvanagthoven, 14 years ago

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

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

Download in other formats: