Context Navigation

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

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

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

Download in other formats: