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

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
[24]	24	<div id="surveyCreation"><form id="survey" action="submitsurvey.php" method="post">
[11]	25	<?php
[29]	26	$this->surveyHead();
	27	$this->questionCreationForm();
[17]	28	SurveyCreationTool::addQuestionButton();
[19]	29	SurveyCreationTool::removeLastQuestionButton();
[11]	30	SurveyCreationTool::submitButton();
	31	?></form></div>
	32	<?php
[10]	33	}
	34
[30]	35	private static function javascript($id = null) {
[11]	36	?>
	37	<script type="text/javascript">
[24]	38	/* autosave every 3 minutes */
[30]	39	setTimeout("save('<?php echo $id; ?>')", 180000);
[32]	40
[30]	41	var questionCount = 1;
[32]	42
[30]	43	function getNewQuestion(title, description)
[17]	44	{
[30]	45	if (title != null)
	46	var title = title;
	47	else
	48	var title = 'Untitled Question';
[32]	49
[30]	50	if (description != null)
	51	var description = description;
	52	else
	53	var description = 'Write a question description here.';
[32]	54
[30]	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>";
[32]	75
[30]	76	questionDiv.innerHTML = htmlStr;
[32]	77
[30]	78	return questionDiv;
[17]	79	}
[32]	80
[30]	81	function handleFocus(input)
[11]	82	{
[30]	83	if (input.clicked == null)
	84	{
	85	input.value = "";
	86	input.style.color = "black";
	87	input.clicked = true;
	88	}
	89	}
[32]	90
[30]	91	function handleBlur(input)
	92	{
	93	var surveyTitle = document.getElementById('surveyTitle');
	94	var surveyDescription = document.getElementById('surveyDescription');
[32]	95
[30]	96	if (input.value == "")
[11]	97	{
[30]	98	input.style.color = "gray";
	99	input.clicked = null;
[32]	100
[30]	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	}
[32]	111
	112	function handleType(select, answers)
[30]	113	{
[32]	114	var numQ = select.id; // questionNumber
[30]	115	var type = select.valueOf().value;
[32]	116	var answersDiv = document.getElementById("answersDiv" + numQ );
[30]	117	answersDiv.answerCount = 1;
	118	answersDiv.clicked = null;
[32]	119
[30]	120	switch (type) {
	121	case 'mc':
	122	answersDiv.innerHTML = "";
[32]	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
[30]	133	break;
	134	case 'text':
	135	answersDiv.innerHTML = "";
	136	break;
	137	case 'int':
	138	answersDiv.innerHTML = "";
[32]	139
[30]	140	//min max
[32]	141	if (answers != null)
	142	minMax(numQ, answers[1], answers[2]);
	143	else
	144	minMax(numQ);
[30]	145	break;
	146	case 'checkboxes':
[32]	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);
[30]	157	break;
	158	case 'scale':
	159	answersDiv.innerHTML = "";
	160	//what scale (min max incr)
[32]	161	if (answers != null)
	162	minMaxIncr(numQ, answers[1], answers[2], answers[3]);
	163	else
	164	minMaxIncr(numQ);
[30]	165	break;
	166	default:
	167	break;
[11]	168	}
[30]	169
	170	}
[32]	171
	172
	173	function addOption(questionNumber, optionStr)
[30]	174	{
	175	var answersDiv = document.getElementById("answersDiv" + questionNumber);
	176	var answerCount = answersDiv.answerCount;
	177	var answerDiv = document.createElement("div");
[32]	178
	179	if (optionStr == null)
	180	var optionStr = "Option " + answerCount;
	181
	182
[30]	183	answerDiv.className = "answerDiv";
[32]	184
[30]	185	var htmlStr = "<input type='text' name='q" +
[32]	186	questionNumber + "ans" + answerCount + "' value='" + optionStr + "' />";
	187
[30]	188	if (answersDiv.clicked == null)
[11]	189	{
[30]	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' />";
[32]	193
[30]	194	answersDiv.clicked = true;
[25]	195	}
[32]	196
[30]	197	answerDiv.innerHTML = htmlStr;
[32]	198
[30]	199	answerDiv.prev = answersDiv.lastAnswer; //singly linked list
	200	answersDiv.lastAnswer = answerDiv;
[32]	201
[30]	202	answersDiv.appendChild(answerDiv);
	203	answersDiv.answerCount++;
[17]	204	}
[32]	205
[30]	206	function removeOption(questionNumber)
[17]	207	{
[30]	208	var answersDiv = document.getElementById("answersDiv" + questionNumber);
[32]	209
[30]	210	if (answersDiv.lastAnswer.prev != null)
	211	{
	212	answersDiv.removeChild(answersDiv.lastAnswer);
	213	answersDiv.lastAnswer = answersDiv.lastAnswer.prev;
	214	answersDiv.answerCount--;
	215	}
[11]	216	}
[32]	217
	218	function minMax(questionNumber, min, max)
[20]	219	{
[32]	220	if (min == null)
	221	var min = '';
	222	if (max == null)
	223	var max = '';
	224
[30]	225	var answersDiv = document.getElementById("answersDiv" + questionNumber);
[32]	226
[30]	227	var answerDiv = document.createElement("div");
[32]	228
[30]	229	answerDiv.className = "answerDiv";
[32]	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
[30]	233	answersDiv.appendChild(answerDiv);
	234	}
[32]	235
	236	function minMaxIncr(questionNumber, left, right, incr)
[30]	237	{
[32]	238	if (left == null)
	239	var left = '';
	240	if (right == null)
	241	var right = '';
	242	if (incr == null)
	243	var incr = '';
	244
[30]	245	var answersDiv = document.getElementById("answersDiv" + questionNumber);
[32]	246
[30]	247	var answerDiv = document.createElement("div");
	248	answerDiv.className = "answerDiv";
[32]	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' />" +
[30]	252	"<div id='inputCheckFeedback'" + questionNumber + "";
[32]	253
[30]	254	answersDiv.appendChild(answerDiv);
	255	}
[32]	256
	257
[30]	258	function addQuestion(title, description)
	259	{
	260	var questionsDiv = document.getElementById('questionsDiv');
	261	var newQuestion = getNewQuestion(title, description);
[32]	262
[19]	263
[30]	264	newQuestion.prev = document.lastQuestion;
	265	document.lastQuestion = newQuestion;
[19]	266
[30]	267	questionsDiv.appendChild(newQuestion);
	268	questionCount++;
	269	}
[32]	270
[30]	271	function removeLastQuestion()
[19]	272	{
[30]	273	var questionsDiv = document.getElementById('questionsDiv');
[32]	274
[30]	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	}
[19]	285	}
[32]	286
[30]	287	function save(surveyID)
[24]	288	{
[30]	289	var form = document.getElementById('survey');
	290	var questionsDiv = document.getElementById('questionsDiv');
	291	form.action = "surveycreation.php";
[32]	292
[30]	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";
[32]	303
[30]	304	var surveyIDInput = document.createElement("input");
	305	surveyIDInput.name = "surveyID";
	306	surveyIDInput.value = surveyID;
	307	surveyIDInput.type = "hidden";
[32]	308
[30]	309	questionsDiv.appendChild(timeStampInput);
	310	questionsDiv.appendChild(surveyIDInput);
	311	form.submit();
	312	}
[32]	313
	314
[11]	315	</script>
	316	<?php
	317	}
	318
[29]	319	private function surveyHead() {
[24]	320	?><div id="surveyHead">
	321	<?php
[29]	322	$this->titleBox();
	323	$this->saveSurvey();
	324	$this->descriptionBox();
[24]	325	?></div>
	326	<?php
	327	}
	328
[29]	329	private function titleBox() {
	330	if (isset($this->survey->title))
	331	$value = $this->survey->title;
	332	else
	333	$value = 'Untitled Survey';
[11]	334	?>
[29]	335	<input type="text" id="surveyTitle" name="surveyTitle" value="<?php echo $value ?>" onblur="handleBlur(this)" onfocus="handleFocus(this)" />
[11]	336	<?php
[10]	337	}
[11]	338
[29]	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;
[24]	346	?>
[29]	347	<input id="surveySaveButton" type="button" onclick="save('<?php echo $id; ?>')" class='surveyButton' value='Save' />
[24]	348	<?php
	349	}
	350
[29]	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.';
[11]	356	?>
[29]	357	<textarea id="surveyDescription" name="surveyDescription" onblur="handleBlur(this)" onfocus="handleFocus(this)"><?php echo $value; ?></textarea>
[11]	358	<?php
[10]	359	}
[11]	360
[29]	361	private function questionCreationForm() {
[17]	362	?>
	363	<div id='questionsDiv'>
	364	</div>
	365	<?php
[30]	366	if (isset($this->survey)) {
[32]	367	foreach ($this->survey->questions as $numQ => $question) {
[30]	368	?>
[32]	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
[30]	392	</script>
	393	<?php
	394	}
	395	} else {
	396	?>
	397	<script type="text/javascript"> addQuestion();</script>
	398	<?php
	399	}
[11]	400	}
	401
	402	private static function addQuestionButton() {
[17]	403	?>
	404	<input id="addQuestionButton" type="button" onclick="addQuestion()" value="Add New Question" class="surveyButton" />
	405	<?php
[10]	406	}
	407
[19]	408	private static function removeLastQuestionButton() {
	409	?>
	410	<input type="button" onclick="removeLastQuestion()" value="x" class="surveyButton" />
	411	<?php
	412	}
	413
[11]	414	private static function submitbutton() {
	415	?>
	416	<input type="submit" name="submitSurvey"
[17]	417	value="Submit Survey!" class="surveyButton" id="submitSurvey"/>
[11]	418	<?php
	419	}
	420
[10]	421	}
	422	?>

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

Download in other formats: