Context Navigation

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

Last change on this file since 61 was 61, checked in by fpvanagthoven, 14 years ago

File size: 31.0 KB

Rev	Line
[10]	1	<?php
	2
	3	/**
	4	* Description of SurveyTool
	5	*
	6	* SurveyTool is where the survey can be created.
	7	*
	8	*/
	9	class SurveyCreationTool {
	10
[29]	11	private $survey;
	12	private $timeStamp;
	13
[24]	14	public function __construct($survey = null, $timeStamp = null) {
[29]	15	$this->survey = $survey;
	16	$this->timeStamp = $timeStamp;
	17
[32]	18	if (isset($this->survey->id))
[30]	19	SurveyCreationTool::javascript($this->survey->id);
	20	else
	21	SurveyCreationTool::javascript();
[11]	22	?>
[17]	23
[61]	24	<div id="surveyCreation" class="creation"><form id="survey" action="surveycreation.php" method="post">
[11]	25	<?php
[29]	26	$this->surveyHead();
	27	$this->questionCreationForm();
[17]	28	SurveyCreationTool::addQuestionButton();
[19]	29	SurveyCreationTool::removeLastQuestionButton();
[11]	30	?></form></div>
	31	<?php
[10]	32	}
	33
[30]	34	private static function javascript($id = null) {
[11]	35	?>
	36	<script type="text/javascript">
[24]	37	/* autosave every 3 minutes */
[30]	38	setTimeout("save('<?php echo $id; ?>')", 180000);
[53]	39
[30]	40	var questionCount = 1;
[53]	41
[30]	42	function getNewQuestion(title, description)
[17]	43	{
[33]	44	if (title == null)
[30]	45	var title = 'Untitled Question';
[53]	46
[30]	47	if (description != null)
	48	var description = description;
	49	else
	50	var description = 'Write a question description here.';
[53]	51
[30]	52	var questionDiv = document.createElement("div");
	53	var htmlStr =
	54	"<div id='question" + questionCount + "' class='question'>" +
	55	"<table class='questionTable'>" +
	56	"<th>Question " + questionCount + "</th>" +
	57	"<tr><td><label for='questionTitle'>Title</label></td>" +
	58	"<td><input type='text' class='questionTitle' name='questionTitle" + questionCount + "' onfocus='handleFocus(this)' size='30' value='" + title + "' /></td></tr>" +
	59	"<tr><td><label for='questionDescription'>Description</label></td>" +
	60	"<td><input type='text' class='questionDescription' name='questionDescription" + questionCount + "' onfocus='handleFocus(this)' size='60' value='" + description + "' /></td>" +
	61	"<tr><td><label for='questionType'>Answer type</label></td>" +
	62	"<td><select id='" + questionCount + "' name='questionType" + questionCount + "' onchange='handleType(this)'><br />"+
	63	"<option value='text' selected='selected'>Text</option>" +
	64	"<option value='int'>Integer</option>" +
	65	"<option value='mc'>Multiple choice</option>" +
	66	"<option value='checkboxes'>Checkboxes</option>" +
	67	"<option value='scale'>Scale</option>" +
	68	"</select></td></tr>" +
	69	"</table>" +
	70	"<div id='answersDiv" + questionCount + "' class='answersDiv'></div>" +
	71	"</div>";
[53]	72
[30]	73	questionDiv.innerHTML = htmlStr;
[53]	74
[30]	75	return questionDiv;
[17]	76	}
[53]	77
[30]	78	function handleFocus(input)
[11]	79	{
[34]	80	/* this is such ugly code it makes me sad */
[61]	81	/* because it is hard coded. */
[34]	82	if (input.clicked == null &&
	83	(input.value == "Untitled Survey"
[35]	84	\|\| input.value == "Write a helpful description for this survey here."
	85	\|\| input.value == "Write a question description here."
	86	\|\| input.value == "Untitled Question"))
[30]	87	{
	88	input.value = "";
	89	input.style.color = "black";
	90	input.clicked = true;
	91	}
	92	}
[53]	93
[30]	94	function handleBlur(input)
	95	{
	96	var surveyTitle = document.getElementById('surveyTitle');
	97	var surveyDescription = document.getElementById('surveyDescription');
[53]	98
[30]	99	if (input.value == "")
[11]	100	{
[30]	101	input.style.color = "gray";
	102	input.clicked = null;
[53]	103
[30]	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	}
[53]	114
[32]	115	function handleType(select, answers)
[30]	116	{
[32]	117	var numQ = select.id; // questionNumber
[30]	118	var type = select.valueOf().value;
[32]	119	var answersDiv = document.getElementById("answersDiv" + numQ );
[53]	120
[37]	121	removeQuestionID(numQ);
[53]	122
[30]	123	answersDiv.answerCount = 1;
	124	answersDiv.clicked = null;
[53]	125
[30]	126	switch (type) {
	127	case 'mc':
	128	answersDiv.innerHTML = "";
[32]	129	if (answers != null)
	130	{
	131	for (var i = 1; i < answers.length; i++)
	132	{
	133	addOption(numQ, answers[i]);
	134	}
	135	}
	136	else
	137	addOption(numQ);
[53]	138
[30]	139	break;
	140	case 'text':
	141	answersDiv.innerHTML = "";
	142	break;
	143	case 'int':
	144	answersDiv.innerHTML = "";
[53]	145
[30]	146	//min max
[32]	147	if (answers != null)
	148	minMax(numQ, answers[1], answers[2]);
	149	else
	150	minMax(numQ);
[30]	151	break;
	152	case 'checkboxes':
[32]	153	answersDiv.innerHTML = "";
	154	if (answers != null)
	155	{
	156	for (var i = 1; i < answers.length; i++)
	157	{
	158	addOption(numQ, answers[i]);
	159	}
	160	}
	161	else
	162	addOption(numQ);
[30]	163	break;
	164	case 'scale':
	165	answersDiv.innerHTML = "";
	166	//what scale (min max incr)
[32]	167	if (answers != null)
	168	minMaxIncr(numQ, answers[1], answers[2], answers[3]);
	169	else
	170	minMaxIncr(numQ);
[30]	171	break;
	172	default:
	173	break;
[11]	174	}
[30]	175
	176	}
[53]	177
[37]	178	function handleAnswerChange(questionNumber)
	179	{
	180	removeQuestionID(questionNumber);
	181	}
[53]	182
[37]	183	function removeQuestionID(questionNumber)
	184	{
	185	/* When type changes, remove question ID, because question changes */
	186	var questionIDInput = document.getElementById("questionID" + questionNumber);
	187	if (questionIDInput != null)
	188	{
	189	var questionsDiv = document.getElementById("questionsDiv");
	190	questionsDiv.removeChild(questionIDInput);
	191	}
	192
	193	}
[53]	194
	195
[32]	196	function addOption(questionNumber, optionStr)
[30]	197	{
	198	var answersDiv = document.getElementById("answersDiv" + questionNumber);
	199	var answerCount = answersDiv.answerCount;
	200	var answerDiv = document.createElement("div");
[53]	201
[32]	202	if (optionStr == null)
	203	var optionStr = "Option " + answerCount;
[53]	204
	205
[30]	206	answerDiv.className = "answerDiv";
[53]	207
[30]	208	var htmlStr = "<input type='text' name='q" +
[37]	209	questionNumber + "ans" + answerCount + "' onchange='handleAnswerChange(" + questionNumber + ")' value='" + optionStr + "' />";
[53]	210
[30]	211	if (answersDiv.clicked == null)
[11]	212	{
[30]	213	htmlStr += "<input type='button' id='addOpt'"
	214	+ " class='surveyButton' onclick='addOption(" + questionNumber + ")' value='Add Option' />" +
	215	"<input type='button' class='surveyButton' onclick='removeOption(" + questionNumber + ")' value='x' />";
[53]	216
[30]	217	answersDiv.clicked = true;
[25]	218	}
[53]	219
[30]	220	answerDiv.innerHTML = htmlStr;
[53]	221
[30]	222	answerDiv.prev = answersDiv.lastAnswer; //singly linked list
	223	answersDiv.lastAnswer = answerDiv;
[53]	224
[30]	225	answersDiv.appendChild(answerDiv);
[49]	226	answersDiv.answerCount++;
[53]	227
[37]	228	handleAnswerChange(questionNumber);
[17]	229	}
[53]	230
[30]	231	function removeOption(questionNumber)
[17]	232	{
[30]	233	var answersDiv = document.getElementById("answersDiv" + questionNumber);
[53]	234
[30]	235	if (answersDiv.lastAnswer.prev != null)
	236	{
	237	answersDiv.removeChild(answersDiv.lastAnswer);
	238	answersDiv.lastAnswer = answersDiv.lastAnswer.prev;
	239	answersDiv.answerCount--;
	240	}
[53]	241
[37]	242	handleAnswerChange(questionNumber);
[11]	243	}
[53]	244
[32]	245	function minMax(questionNumber, min, max)
[20]	246	{
[32]	247	if (min == null)
	248	var min = '';
	249	if (max == null)
	250	var max = '';
[53]	251
[30]	252	var answersDiv = document.getElementById("answersDiv" + questionNumber);
[53]	253
[30]	254	var answerDiv = document.createElement("div");
[53]	255
[30]	256	answerDiv.className = "answerDiv";
[53]	257	answerDiv.innerHTML = "<label for='min'>Min</label><input type='text' class='intBox' onchange='checkInt(this)' value='" + min + "' name='q" + questionNumber + "ans1' />" +
	258	"<label for='max'>Max</label><input type='text' class='intBox' onchange='checkInt(this)' value='" + max + "' name='q" + questionNumber + "ans2' />";
	259
[30]	260	answersDiv.appendChild(answerDiv);
	261	}
[53]	262
[32]	263	function minMaxIncr(questionNumber, left, right, incr)
[30]	264	{
[32]	265	if (left == null)
	266	var left = '';
	267	if (right == null)
	268	var right = '';
	269	if (incr == null)
	270	var incr = '';
[53]	271
[30]	272	var answersDiv = document.getElementById("answersDiv" + questionNumber);
[53]	273
[30]	274	var answerDiv = document.createElement("div");
	275	answerDiv.className = "answerDiv";
[37]	276	answerDiv.innerHTML = "<label>Left label</label><input type='text' value='" + left + "' onchange='handleAnswerChange(" + questionNumber + ")' name='q" + questionNumber + "ans1' />" +
	277	"<label>Right label</label><input type='text' value='" + right + "' onchange='handleAnswerChange(" + questionNumber + ")' name='q" + questionNumber + "ans2' />" +
[53]	278	"<label>Scale count</label><input type='text' class='intBox' value='" + incr + "' onblur='checkInt(this)' onchange='handleAnswerChange(" + questionNumber + ")' name='q" + questionNumber + "ans3' />" +
[30]	279	"<div id='inputCheckFeedback'" + questionNumber + "";
[53]	280
[30]	281	answersDiv.appendChild(answerDiv);
	282	}
[53]	283
	284
[30]	285	function addQuestion(title, description)
	286	{
	287	var questionsDiv = document.getElementById('questionsDiv');
	288	var newQuestion = getNewQuestion(title, description);
[53]	289
[19]	290
[30]	291	newQuestion.prev = document.lastQuestion;
	292	document.lastQuestion = newQuestion;
[19]	293
[30]	294	questionsDiv.appendChild(newQuestion);
	295	questionCount++;
	296	}
[53]	297
[30]	298	function removeLastQuestion()
[19]	299	{
[30]	300	var questionsDiv = document.getElementById('questionsDiv');
[53]	301
[30]	302	if (document.lastQuestion.prev != null)
	303	{
	304	questionsDiv.removeChild(document.lastQuestion);
	305	document.lastQuestion = document.lastQuestion.prev;
	306	questionCount--;
	307	}
	308	else
	309	{
	310	// do nothing
	311	}
[19]	312	}
[53]	313
[30]	314	function save(surveyID)
[24]	315	{
[53]	316	if (checksPassed())
	317	{
	318	var form = document.getElementById('survey');
	319	var questionsDiv = document.getElementById('questionsDiv');
	320	form.action = "surveycreation.php";
	321
	322	/* extra time stamp */
	323	var date = new Date();
	324	var minutes = date.getUTCMinutes();
	325	if (minutes < 10)
	326	minutes = "0" + minutes;
	327	var timeStamp = date.getHours() + ":" + minutes;
	328	var timeStampInput = document.createElement("input");
	329	timeStampInput.name = "timeStamp";
	330	timeStampInput.value = timeStamp;
	331	timeStampInput.type = "hidden";
	332
	333	var surveyIDInput = document.createElement("input");
	334	surveyIDInput.name = "surveyID";
	335	surveyIDInput.value = surveyID;
	336	surveyIDInput.type = "hidden";
	337
	338	questionsDiv.appendChild(timeStampInput);
	339	questionsDiv.appendChild(surveyIDInput);
	340	form.submit();
	341	}
[30]	342	}
[53]	343
[50]	344	function selectAll(input)
	345	{
	346	input.select();
	347	}
[53]	348
	349	/* --- input checking --- */
	350	function checksPassed()
	351	{
	352	var form = document.getElementById('survey');
	353
	354	for (var i = 0; i < form.length; i++)
	355	{
	356	if (form.elements[i].checkPassed == 'no')
	357	return false;
	358	}
	359	return true;
	360	}
	361
	362	function checkInt(input)
	363	{
	364	input.style.borderWidth = '1px' ;
	365	var value = input.value;
	366	if (isNaN(value))
	367	{
	368	input.style.borderColor = 'red';
	369	input.checkPassed = 'no';
	370	}
	371	else
	372	{
[59]	373	input.style.border = '1px solid #888;';
[53]	374	input.checkPassed = null;
	375	}
	376	}
[54]	377
[11]	378	</script>
	379	<?php
	380	}
	381
[29]	382	private function surveyHead() {
[24]	383	?><div id="surveyHead">
	384	<?php
[29]	385	$this->titleBox();
	386	$this->saveSurvey();
	387	$this->descriptionBox();
[50]	388	$this->surveyLink();
[24]	389	?></div>
	390	<?php
	391	}
	392
[29]	393	private function titleBox() {
	394	if (isset($this->survey->title))
	395	$value = $this->survey->title;
	396	else
	397	$value = 'Untitled Survey';
[11]	398	?>
[29]	399	<input type="text" id="surveyTitle" name="surveyTitle" value="<?php echo $value ?>" onblur="handleBlur(this)" onfocus="handleFocus(this)" />
[11]	400	<?php
[10]	401	}
[11]	402
[29]	403	private function saveSurvey() {
	404	if (isset($this->timeStamp))
	405	echo "<div id='timeStamp'>Last saved " . $this->timeStamp . '</div>';
	406	if (isset($this->survey->id))
	407	$id = $this->survey->id;
	408	else
	409	$id = null;
[24]	410	?>
[29]	411	<input id="surveySaveButton" type="button" onclick="save('<?php echo $id; ?>')" class='surveyButton' value='Save' />
[24]	412	<?php
	413	}
	414
[29]	415	private function descriptionBox() {
	416	if (isset($this->survey->description))
	417	$value = $this->survey->description;
	418	else
	419	$value = 'Write a helpful description for this survey here.';
[11]	420	?>
[29]	421	<textarea id="surveyDescription" name="surveyDescription" onblur="handleBlur(this)" onfocus="handleFocus(this)"><?php echo $value; ?></textarea>
[11]	422	<?php
[10]	423	}
[53]	424
[50]	425	private function surveyLink() {
[53]	426	if (isset($this->survey)) {
	427	$surveyID = $this->survey->id;
	428
	429	$link = $_SERVER['HTTP_HOST'] . dirname($_SERVER['PHP_SELF']) .
[50]	430	'/survey.php?id=' . $surveyID;
[53]	431	?>
	432	<input type="text" value="<?php echo $link; ?>" id="surveyLink" onclick="selectAll(this)">
	433	<?php
[50]	434	}
	435	}
[11]	436
[29]	437	private function questionCreationForm() {
[17]	438	?>
	439	<div id='questionsDiv'>
	440	</div>
	441	<?php
[30]	442	if (isset($this->survey)) {
[32]	443	foreach ($this->survey->questions as $numQ => $question) {
[30]	444	?>
[36]	445	<script type="text/javascript">
[32]	446	var answers = new Array();
	447	<?php
	448	/* Put all answers in js array */
	449	foreach ($question->answers as $numA => $answer) {
	450	echo "answers[" . $numA . "] = '" . $answer . "'; ";
	451	}
	452	?>
[53]	453
[32]	454	addQuestion('<?php echo $question->title; ?>', '<?php echo $question->description; ?>');
[53]	455
[32]	456	var select = document.getElementById('<?php echo $numQ; ?>');
	457	var type = '<?php echo $question->type; ?>';
	458
	459	for (var i = 0; i < select.options.length; i++) {
	460	if (select.options[i].value == type)
	461	{
	462	select.options[i].selected = true;
	463	handleType(select, answers)
	464	break;
	465	}
[36]	466	}
[53]	467
	468
[36]	469	/* questionID stuff */
	470	var questionIDInput = document.createElement("input");
	471	questionIDInput.id = "questionID<?php echo $numQ; ?>";
	472	questionIDInput.name = "questionID<?php echo $numQ; ?>";
	473	questionIDInput.value = "<?php echo $question->id; ?>";
	474	questionIDInput.type = "hidden";
[53]	475
[36]	476	document.getElementById("questionsDiv").appendChild(questionIDInput);
[32]	477
[30]	478	</script>
	479	<?php
	480	}
	481	} else {
	482	?>
	483	<script type="text/javascript"> addQuestion();</script>
	484	<?php
	485	}
[11]	486	}
	487
	488	private static function addQuestionButton() {
[17]	489	?>
	490	<input id="addQuestionButton" type="button" onclick="addQuestion()" value="Add New Question" class="surveyButton" />
	491	<?php
[10]	492	}
	493
[19]	494	private static function removeLastQuestionButton() {
	495	?>
	496	<input type="button" onclick="removeLastQuestion()" value="x" class="surveyButton" />
	497	<?php
	498	}
	499
[10]	500	}
	501	?>

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

Download in other formats: