Context Navigation

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

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

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

Download in other formats: