Context Navigation

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

Last change on this file since 36 was 36, checked in by fpvanagthoven, 14 years ago
QuestionID gets removed when answerType changes. Not yet when answers change.
File size: 27.3 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"><form id="survey" action="submitsurvey.php" method="post">
25	<?php
26	$this->surveyHead();
27	$this->questionCreationForm();
28	SurveyCreationTool::addQuestionButton();
29	SurveyCreationTool::removeLastQuestionButton();
30	SurveyCreationTool::submitButton();
31	?></form></div>
32	<?php
33	}
34
35	private static function javascript($id = null) {
36	?>
37	<script type="text/javascript">
38	/* autosave every 3 minutes */
39	setTimeout("save('<?php echo $id; ?>')", 180000);
40
41	var questionCount = 1;
42
43	function getNewQuestion(title, description)
44	{
45	if (title == null)
46	var title = 'Untitled Question';
47
48	if (description != null)
49	var description = description;
50	else
51	var description = 'Write a question description here.';
52
53	var questionDiv = document.createElement("div");
54	var htmlStr =
55	"<div id='question" + questionCount + "' class='question'>" +
56	"<table class='questionTable'>" +
57	"<th>Question " + questionCount + "</th>" +
58	"<tr><td><label for='questionTitle'>Title</label></td>" +
59	"<td><input type='text' class='questionTitle' name='questionTitle" + questionCount + "' onfocus='handleFocus(this)' size='30' value='" + title + "' /></td></tr>" +
60	"<tr><td><label for='questionDescription'>Description</label></td>" +
61	"<td><input type='text' class='questionDescription' name='questionDescription" + questionCount + "' onfocus='handleFocus(this)' size='60' value='" + description + "' /></td>" +
62	"<tr><td><label for='questionType'>Answer type</label></td>" +
63	"<td><select id='" + questionCount + "' name='questionType" + questionCount + "' onchange='handleType(this)'><br />"+
64	"<option value='text' selected='selected'>Text</option>" +
65	"<option value='int'>Integer</option>" +
66	"<option value='mc'>Multiple choice</option>" +
67	"<option value='checkboxes'>Checkboxes</option>" +
68	"<option value='scale'>Scale</option>" +
69	"</select></td></tr>" +
70	"</table>" +
71	"<div id='answersDiv" + questionCount + "' class='answersDiv'></div>" +
72	"</div>";
73
74	questionDiv.innerHTML = htmlStr;
75
76	return questionDiv;
77	}
78
79	function handleFocus(input)
80	{
81	/* this is such ugly code it makes me sad */
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	/* When type changes, remove question ID, because question changes */
122	var questionIDInput = document.getElementById("questionID" + numQ);
123	if (questionIDInput != null)
124	{
125	var questionsDiv = document.getElementById("questionsDiv");
126	questionsDiv.removeChild(questionIDInput);
127	}
128
129	answersDiv.answerCount = 1;
130	answersDiv.clicked = null;
131
132	switch (type) {
133	case 'mc':
134	answersDiv.innerHTML = "";
135	if (answers != null)
136	{
137	for (var i = 1; i < answers.length; i++)
138	{
139	addOption(numQ, answers[i]);
140	}
141	}
142	else
143	addOption(numQ);
144
145	break;
146	case 'text':
147	answersDiv.innerHTML = "";
148	break;
149	case 'int':
150	answersDiv.innerHTML = "";
151
152	//min max
153	if (answers != null)
154	minMax(numQ, answers[1], answers[2]);
155	else
156	minMax(numQ);
157	break;
158	case 'checkboxes':
159	answersDiv.innerHTML = "";
160	if (answers != null)
161	{
162	for (var i = 1; i < answers.length; i++)
163	{
164	addOption(numQ, answers[i]);
165	}
166	}
167	else
168	addOption(numQ);
169	break;
170	case 'scale':
171	answersDiv.innerHTML = "";
172	//what scale (min max incr)
173	if (answers != null)
174	minMaxIncr(numQ, answers[1], answers[2], answers[3]);
175	else
176	minMaxIncr(numQ);
177	break;
178	default:
179	break;
180	}
181
182	}
183
184
185	function addOption(questionNumber, optionStr)
186	{
187	var answersDiv = document.getElementById("answersDiv" + questionNumber);
188	var answerCount = answersDiv.answerCount;
189	var answerDiv = document.createElement("div");
190
191	if (optionStr == null)
192	var optionStr = "Option " + answerCount;
193
194
195	answerDiv.className = "answerDiv";
196
197	var htmlStr = "<input type='text' name='q" +
198	questionNumber + "ans" + answerCount + "' value='" + optionStr + "' />";
199
200	if (answersDiv.clicked == null)
201	{
202	htmlStr += "<input type='button' id='addOpt'"
203	+ " class='surveyButton' onclick='addOption(" + questionNumber + ")' value='Add Option' />" +
204	"<input type='button' class='surveyButton' onclick='removeOption(" + questionNumber + ")' value='x' />";
205
206	answersDiv.clicked = true;
207	}
208
209	answerDiv.innerHTML = htmlStr;
210
211	answerDiv.prev = answersDiv.lastAnswer; //singly linked list
212	answersDiv.lastAnswer = answerDiv;
213
214	answersDiv.appendChild(answerDiv);
215	answersDiv.answerCount++;
216	}
217
218	function removeOption(questionNumber)
219	{
220	var answersDiv = document.getElementById("answersDiv" + questionNumber);
221
222	if (answersDiv.lastAnswer.prev != null)
223	{
224	answersDiv.removeChild(answersDiv.lastAnswer);
225	answersDiv.lastAnswer = answersDiv.lastAnswer.prev;
226	answersDiv.answerCount--;
227	}
228	}
229
230	function minMax(questionNumber, min, max)
231	{
232	if (min == null)
233	var min = '';
234	if (max == null)
235	var max = '';
236
237	var answersDiv = document.getElementById("answersDiv" + questionNumber);
238
239	var answerDiv = document.createElement("div");
240
241	answerDiv.className = "answerDiv";
242	answerDiv.innerHTML = "<label for='min'>Min</label><input type='text' value='" + min + "' name='q" + questionNumber + "ans1' />" +
243	"<label for='max'>Max</label><input type='text' value='" + max + "' name='q" + questionNumber + "ans2' />";
244
245	answersDiv.appendChild(answerDiv);
246	}
247
248	function minMaxIncr(questionNumber, left, right, incr)
249	{
250	if (left == null)
251	var left = '';
252	if (right == null)
253	var right = '';
254	if (incr == null)
255	var incr = '';
256
257	var answersDiv = document.getElementById("answersDiv" + questionNumber);
258
259	var answerDiv = document.createElement("div");
260	answerDiv.className = "answerDiv";
261	answerDiv.innerHTML = "<label>Left label</label><input type='text' value='" + left + "' name='q" + questionNumber + "ans1' />" +
262	"<label>Right label</label><input type='text' value='" + right + "' name='q" + questionNumber + "ans2' />" +
263	"<label>Scale count</label><input type='text' value='" + incr + "' name='q" + questionNumber + "ans3' />" +
264	"<div id='inputCheckFeedback'" + questionNumber + "";
265
266	answersDiv.appendChild(answerDiv);
267	}
268
269
270	function addQuestion(title, description)
271	{
272	var questionsDiv = document.getElementById('questionsDiv');
273	var newQuestion = getNewQuestion(title, description);
274
275
276	newQuestion.prev = document.lastQuestion;
277	document.lastQuestion = newQuestion;
278
279	questionsDiv.appendChild(newQuestion);
280	questionCount++;
281	}
282
283	function removeLastQuestion()
284	{
285	var questionsDiv = document.getElementById('questionsDiv');
286
287	if (document.lastQuestion.prev != null)
288	{
289	questionsDiv.removeChild(document.lastQuestion);
290	document.lastQuestion = document.lastQuestion.prev;
291	questionCount--;
292	}
293	else
294	{
295	// do nothing
296	}
297	}
298
299	function save(surveyID)
300	{
301	var form = document.getElementById('survey');
302	var questionsDiv = document.getElementById('questionsDiv');
303	form.action = "surveycreation.php";
304
305	/* extra time stamp */
306	var date = new Date();
307	var minutes = date.getUTCMinutes();
308	if (minutes < 10)
309	minutes = "0" + minutes;
310	var timeStamp = date.getHours() + ":" + minutes;
311	var timeStampInput = document.createElement("input");
312	timeStampInput.name = "timeStamp";
313	timeStampInput.value = timeStamp;
314	timeStampInput.type = "hidden";
315
316	var surveyIDInput = document.createElement("input");
317	surveyIDInput.name = "surveyID";
318	surveyIDInput.value = surveyID;
319	surveyIDInput.type = "hidden";
320
321	questionsDiv.appendChild(timeStampInput);
322	questionsDiv.appendChild(surveyIDInput);
323	form.submit();
324	}
325
326
327	</script>
328	<?php
329	}
330
331	private function surveyHead() {
332	?><div id="surveyHead">
333	<?php
334	$this->titleBox();
335	$this->saveSurvey();
336	$this->descriptionBox();
337	?></div>
338	<?php
339	}
340
341	private function titleBox() {
342	if (isset($this->survey->title))
343	$value = $this->survey->title;
344	else
345	$value = 'Untitled Survey';
346	?>
347	<input type="text" id="surveyTitle" name="surveyTitle" value="<?php echo $value ?>" onblur="handleBlur(this)" onfocus="handleFocus(this)" />
348	<?php
349	}
350
351	private function saveSurvey() {
352	if (isset($this->timeStamp))
353	echo "<div id='timeStamp'>Last saved " . $this->timeStamp . '</div>';
354	if (isset($this->survey->id))
355	$id = $this->survey->id;
356	else
357	$id = null;
358	?>
359	<input id="surveySaveButton" type="button" onclick="save('<?php echo $id; ?>')" class='surveyButton' value='Save' />
360	<?php
361	}
362
363	private function descriptionBox() {
364	if (isset($this->survey->description))
365	$value = $this->survey->description;
366	else
367	$value = 'Write a helpful description for this survey here.';
368	?>
369	<textarea id="surveyDescription" name="surveyDescription" onblur="handleBlur(this)" onfocus="handleFocus(this)"><?php echo $value; ?></textarea>
370	<?php
371	}
372
373	private function questionCreationForm() {
374	?>
375	<div id='questionsDiv'>
376	</div>
377	<?php
378	if (isset($this->survey)) {
379	foreach ($this->survey->questions as $numQ => $question) {
380	?>
381	<script type="text/javascript">
382	var answers = new Array();
383	<?php
384	/* Put all answers in js array */
385	foreach ($question->answers as $numA => $answer) {
386	echo "answers[" . $numA . "] = '" . $answer . "'; ";
387	}
388	?>
389
390	addQuestion('<?php echo $question->title; ?>', '<?php echo $question->description; ?>');
391
392	var select = document.getElementById('<?php echo $numQ; ?>');
393	var type = '<?php echo $question->type; ?>';
394
395	for (var i = 0; i < select.options.length; i++) {
396	if (select.options[i].value == type)
397	{
398	select.options[i].selected = true;
399	handleType(select, answers)
400	break;
401	}
402	}
403
404
405	/* questionID stuff */
406	var questionIDInput = document.createElement("input");
407	questionIDInput.id = "questionID<?php echo $numQ; ?>";
408	questionIDInput.name = "questionID<?php echo $numQ; ?>";
409	questionIDInput.value = "<?php echo $question->id; ?>";
410	questionIDInput.type = "hidden";
411
412	document.getElementById("questionsDiv").appendChild(questionIDInput);
413
414	</script>
415	<?php
416	}
417	} else {
418	?>
419	<script type="text/javascript"> addQuestion();</script>
420	<?php
421	}
422	}
423
424	private static function addQuestionButton() {
425	?>
426	<input id="addQuestionButton" type="button" onclick="addQuestion()" value="Add New Question" class="surveyButton" />
427	<?php
428	}
429
430	private static function removeLastQuestionButton() {
431	?>
432	<input type="button" onclick="removeLastQuestion()" value="x" class="surveyButton" />
433	<?php
434	}
435
436	private static function submitbutton() {
437	?>
438	<input type="submit" name="submitSurvey"
439	value="Submit Survey!" class="surveyButton" id="submitSurvey"/>
440	<?php
441	}
442
443	}
444	?>

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

Download in other formats: