Context Navigation

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

Last change on this file since 73 was 73, checked in by fpvanagthoven, 14 years ago
Small bugfix SurveyCreationTool?. Forgot an attribute.
File size: 39.2 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	scaleInput.name = "q" + questionNumber + "ans3";
353
354	answerDiv.appendChild(leftLabel);
355	answerDiv.appendChild(leftInput);
356	answerDiv.appendChild(rightLabel);
357	answerDiv.appendChild(rightInput);
358	answerDiv.appendChild(scaleLabel);
359	answerDiv.appendChild(scaleInput);
360
361	answersDiv.appendChild(answerDiv);
362	}
363
364
365	function addQuestion(title, description)
366	{
367	var questionsDiv = document.getElementById('questionsDiv');
368	var newQuestion = getNewQuestion(title, description);
369
370
371	newQuestion.prev = document.lastQuestion;
372	document.lastQuestion = newQuestion;
373
374	questionsDiv.appendChild(newQuestion);
375	questionCount++;
376	}
377
378	function removeLastQuestion()
379	{
380	var questionsDiv = document.getElementById('questionsDiv');
381
382	if (document.lastQuestion.prev != null)
383	{
384	questionsDiv.removeChild(document.lastQuestion);
385	document.lastQuestion = document.lastQuestion.prev;
386	questionCount--;
387	}
388	else
389	{
390	// do nothing
391	}
392	}
393
394	function save(surveyID)
395	{
396	if (checksPassed())
397	{
398	var form = document.getElementById('survey');
399	var questionsDiv = document.getElementById('questionsDiv');
400	form.action = "surveycreation.php";
401
402	/* extra time stamp */
403	var date = new Date();
404	var minutes = date.getUTCMinutes();
405	if (minutes < 10)
406	minutes = "0" + minutes;
407	var timeStamp = date.getHours() + ":" + minutes;
408	var timeStampInput = document.createElement("input");
409	timeStampInput.name = "timeStamp";
410	timeStampInput.value = timeStamp;
411	timeStampInput.type = "hidden";
412
413	var surveyIDInput = document.createElement("input");
414	surveyIDInput.name = "surveyID";
415	surveyIDInput.value = surveyID;
416	surveyIDInput.type = "hidden";
417
418	questionsDiv.appendChild(timeStampInput);
419	questionsDiv.appendChild(surveyIDInput);
420	form.submit();
421	}
422	}
423
424	function selectAll(input)
425	{
426	input.select();
427	}
428
429	/* --- input checking --- */
430	function checksPassed()
431	{
432	var form = document.getElementById('survey');
433
434	for (var i = 0; i < form.length; i++)
435	{
436	if (form.elements[i].checkPassed == 'no')
437	return false;
438	}
439	return true;
440	}
441
442	function checkInt(input)
443	{
444	input.style.borderWidth = '1px' ;
445	var value = input.value;
446	if (isNaN(value))
447	{
448	input.style.borderColor = 'red';
449	input.checkPassed = 'no';
450	}
451	else
452	{
453	input.style.border = '1px solid #888;';
454	input.checkPassed = null;
455	}
456	}
457
458	</script>
459	<?php
460	}
461
462	private function surveyHead() {
463	?><div id="surveyHead">
464	<?php
465	$this->titleBox();
466	$this->saveSurvey();
467	$this->descriptionBox();
468	$this->surveyLink();
469	?></div>
470	<?php
471	}
472
473	private function titleBox() {
474	if (isset($this->survey->title))
475	$value = $this->survey->title;
476	else
477	$value = 'Untitled Survey';
478	?>
479	<input type="text" id="surveyTitle" class="titleBox" name="surveyTitle" value="<?php echo str_replace("\"", """, $value); ?>" onblur="handleBlur(this)" onfocus="handleFocus(this)" />
480	<?php
481	}
482
483	private function saveSurvey() {
484	if (isset($this->timeStamp))
485	echo "<div id='timeStamp'>Last saved " . $this->timeStamp . '</div>';
486	if (isset($this->survey->id))
487	$id = $this->survey->id;
488	else
489	$id = null;
490	?>
491	<input id="surveySaveButton" type="button" onclick="save('<?php echo $id; ?>')" class='surveyButton' value='Save' />
492	<?php
493	}
494
495	private function descriptionBox() {
496	if (isset($this->survey->description))
497	$value = $this->survey->description;
498	else
499	$value = 'Write a helpful description for this survey here.';
500	?>
501	<textarea id="surveyDescription" class="descriptionBox" name="surveyDescription" onblur="handleBlur(this)" onfocus="handleFocus(this)"><?php echo $value; ?></textarea>
502	<?php
503	}
504
505	private function surveyLink() {
506	if (isset($this->survey)) {
507	$surveyID = $this->survey->id;
508
509	$link = $_SERVER['HTTP_HOST'] . dirname($_SERVER['PHP_SELF']) .
510	'/survey.php?id=' . $surveyID;
511	?>
512	<input type="text" value="<?php echo $link; ?>" id="surveyLink" onclick="selectAll(this)">
513	<?php
514	}
515	}
516
517	private function questionCreationForm() {
518	?>
519	<div id='questionsDiv'>
520	</div>
521	<?php
522	if (isset($this->survey)) {
523	foreach ($this->survey->questions as $numQ => $question) {
524	?>
525	<script type="text/javascript">
526	var answers = new Array();
527	<?php
528	/* Put all answers in js array */
529	foreach ($question->answers as $numA => $answer) {
530	echo 'answers[' . $numA . '] = "' . addslashes($answer) . '"; ';
531	?>
532
533	<?php
534	}
535	?>
536
537	var title = "<?php echo addslashes($question->title); ?>";
538	addQuestion(title, "<?php echo addslashes($question->description); ?>");
539
540	var select = document.getElementById('<?php echo $numQ; ?>');
541	var type = '<?php echo $question->type; ?>';
542
543	for (var i = 0; i < select.options.length; i++) {
544	if (select.options[i].value == type)
545	{
546	select.options[i].selected = true;
547	handleType(select, answers);
548	break;
549	}
550	}
551
552
553	/* questionID stuff */
554	var questionIDInput = document.createElement("input");
555	questionIDInput.id = "questionID<?php echo $numQ; ?>";
556	questionIDInput.name = "questionID<?php echo $numQ; ?>";
557	questionIDInput.value = "<?php echo $question->id; ?>";
558	questionIDInput.type = "hidden";
559
560	document.getElementById("questionsDiv").appendChild(questionIDInput);
561
562	</script>
563	<?php
564	}
565	} else {
566	?>
567	<script type="text/javascript"> addQuestion();</script>
568	<?php
569	}
570	}
571
572	private static function addQuestionButton() {
573	?>
574	<input id="addQuestionButton" type="button" onclick="addQuestion()" value="Add New Question" class="surveyButton" />
575	<?php
576	}
577
578	private static function removeLastQuestionButton() {
579	?>
580	<input type="button" onclick="removeLastQuestion()" value="x" class="surveyButton" />
581	<?php
582	}
583
584	}
585	?>

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

Download in other formats: