Context Navigation

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

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

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

Download in other formats: