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

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);
[36]	40
[30]	41	var questionCount = 1;
[36]	42
[30]	43	function getNewQuestion(title, description)
[17]	44	{
[33]	45	if (title == null)
[30]	46	var title = 'Untitled Question';
[36]	47
[30]	48	if (description != null)
	49	var description = description;
	50	else
	51	var description = 'Write a question description here.';
[36]	52
[30]	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>";
[36]	73
[30]	74	questionDiv.innerHTML = htmlStr;
[36]	75
[30]	76	return questionDiv;
[17]	77	}
[36]	78
[30]	79	function handleFocus(input)
[11]	80	{
[34]	81	/* this is such ugly code it makes me sad */
	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	}
[36]	93
[30]	94	function handleBlur(input)
	95	{
	96	var surveyTitle = document.getElementById('surveyTitle');
	97	var surveyDescription = document.getElementById('surveyDescription');
[36]	98
[30]	99	if (input.value == "")
[11]	100	{
[30]	101	input.style.color = "gray";
	102	input.clicked = null;
[36]	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	}
[36]	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 );
[36]	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
[30]	129	answersDiv.answerCount = 1;
	130	answersDiv.clicked = null;
[36]	131
[30]	132	switch (type) {
	133	case 'mc':
	134	answersDiv.innerHTML = "";
[32]	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);
[36]	144
[30]	145	break;
	146	case 'text':
	147	answersDiv.innerHTML = "";
	148	break;
	149	case 'int':
	150	answersDiv.innerHTML = "";
[36]	151
[30]	152	//min max
[32]	153	if (answers != null)
	154	minMax(numQ, answers[1], answers[2]);
	155	else
	156	minMax(numQ);
[30]	157	break;
	158	case 'checkboxes':
[32]	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);
[30]	169	break;
	170	case 'scale':
	171	answersDiv.innerHTML = "";
	172	//what scale (min max incr)
[32]	173	if (answers != null)
	174	minMaxIncr(numQ, answers[1], answers[2], answers[3]);
	175	else
	176	minMaxIncr(numQ);
[30]	177	break;
	178	default:
	179	break;
[11]	180	}
[30]	181
	182	}
[36]	183
	184
[32]	185	function addOption(questionNumber, optionStr)
[30]	186	{
	187	var answersDiv = document.getElementById("answersDiv" + questionNumber);
	188	var answerCount = answersDiv.answerCount;
	189	var answerDiv = document.createElement("div");
[36]	190
[32]	191	if (optionStr == null)
	192	var optionStr = "Option " + answerCount;
[36]	193
	194
[30]	195	answerDiv.className = "answerDiv";
[36]	196
[30]	197	var htmlStr = "<input type='text' name='q" +
[32]	198	questionNumber + "ans" + answerCount + "' value='" + optionStr + "' />";
[36]	199
[30]	200	if (answersDiv.clicked == null)
[11]	201	{
[30]	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' />";
[36]	205
[30]	206	answersDiv.clicked = true;
[25]	207	}
[36]	208
[30]	209	answerDiv.innerHTML = htmlStr;
[36]	210
[30]	211	answerDiv.prev = answersDiv.lastAnswer; //singly linked list
	212	answersDiv.lastAnswer = answerDiv;
[36]	213
[30]	214	answersDiv.appendChild(answerDiv);
	215	answersDiv.answerCount++;
[17]	216	}
[36]	217
[30]	218	function removeOption(questionNumber)
[17]	219	{
[30]	220	var answersDiv = document.getElementById("answersDiv" + questionNumber);
[36]	221
[30]	222	if (answersDiv.lastAnswer.prev != null)
	223	{
	224	answersDiv.removeChild(answersDiv.lastAnswer);
	225	answersDiv.lastAnswer = answersDiv.lastAnswer.prev;
	226	answersDiv.answerCount--;
	227	}
[11]	228	}
[36]	229
[32]	230	function minMax(questionNumber, min, max)
[20]	231	{
[32]	232	if (min == null)
	233	var min = '';
	234	if (max == null)
	235	var max = '';
[36]	236
[30]	237	var answersDiv = document.getElementById("answersDiv" + questionNumber);
[36]	238
[30]	239	var answerDiv = document.createElement("div");
[36]	240
[30]	241	answerDiv.className = "answerDiv";
[32]	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' />";
[36]	244
[30]	245	answersDiv.appendChild(answerDiv);
	246	}
[36]	247
[32]	248	function minMaxIncr(questionNumber, left, right, incr)
[30]	249	{
[32]	250	if (left == null)
	251	var left = '';
	252	if (right == null)
	253	var right = '';
	254	if (incr == null)
	255	var incr = '';
[36]	256
[30]	257	var answersDiv = document.getElementById("answersDiv" + questionNumber);
[36]	258
[30]	259	var answerDiv = document.createElement("div");
	260	answerDiv.className = "answerDiv";
[32]	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' />" +
[30]	264	"<div id='inputCheckFeedback'" + questionNumber + "";
[36]	265
[30]	266	answersDiv.appendChild(answerDiv);
	267	}
[36]	268
	269
[30]	270	function addQuestion(title, description)
	271	{
	272	var questionsDiv = document.getElementById('questionsDiv');
	273	var newQuestion = getNewQuestion(title, description);
[36]	274
[19]	275
[30]	276	newQuestion.prev = document.lastQuestion;
	277	document.lastQuestion = newQuestion;
[19]	278
[30]	279	questionsDiv.appendChild(newQuestion);
	280	questionCount++;
	281	}
[36]	282
[30]	283	function removeLastQuestion()
[19]	284	{
[30]	285	var questionsDiv = document.getElementById('questionsDiv');
[36]	286
[30]	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	}
[19]	297	}
[36]	298
[30]	299	function save(surveyID)
[24]	300	{
[30]	301	var form = document.getElementById('survey');
	302	var questionsDiv = document.getElementById('questionsDiv');
	303	form.action = "surveycreation.php";
[36]	304
[30]	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";
[36]	315
[30]	316	var surveyIDInput = document.createElement("input");
	317	surveyIDInput.name = "surveyID";
	318	surveyIDInput.value = surveyID;
	319	surveyIDInput.type = "hidden";
[36]	320
[30]	321	questionsDiv.appendChild(timeStampInput);
	322	questionsDiv.appendChild(surveyIDInput);
	323	form.submit();
	324	}
[36]	325
	326
[11]	327	</script>
	328	<?php
	329	}
	330
[29]	331	private function surveyHead() {
[24]	332	?><div id="surveyHead">
	333	<?php
[29]	334	$this->titleBox();
	335	$this->saveSurvey();
	336	$this->descriptionBox();
[24]	337	?></div>
	338	<?php
	339	}
	340
[29]	341	private function titleBox() {
	342	if (isset($this->survey->title))
	343	$value = $this->survey->title;
	344	else
	345	$value = 'Untitled Survey';
[11]	346	?>
[29]	347	<input type="text" id="surveyTitle" name="surveyTitle" value="<?php echo $value ?>" onblur="handleBlur(this)" onfocus="handleFocus(this)" />
[11]	348	<?php
[10]	349	}
[11]	350
[29]	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;
[24]	358	?>
[29]	359	<input id="surveySaveButton" type="button" onclick="save('<?php echo $id; ?>')" class='surveyButton' value='Save' />
[24]	360	<?php
	361	}
	362
[29]	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.';
[11]	368	?>
[29]	369	<textarea id="surveyDescription" name="surveyDescription" onblur="handleBlur(this)" onfocus="handleFocus(this)"><?php echo $value; ?></textarea>
[11]	370	<?php
[10]	371	}
[11]	372
[29]	373	private function questionCreationForm() {
[17]	374	?>
	375	<div id='questionsDiv'>
	376	</div>
	377	<?php
[30]	378	if (isset($this->survey)) {
[32]	379	foreach ($this->survey->questions as $numQ => $question) {
[30]	380	?>
[36]	381	<script type="text/javascript">
[32]	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	?>
[36]	389
[32]	390	addQuestion('<?php echo $question->title; ?>', '<?php echo $question->description; ?>');
[36]	391
[32]	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	}
[36]	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);
[32]	413
[30]	414	</script>
	415	<?php
	416	}
	417	} else {
	418	?>
	419	<script type="text/javascript"> addQuestion();</script>
	420	<?php
	421	}
[11]	422	}
	423
	424	private static function addQuestionButton() {
[17]	425	?>
	426	<input id="addQuestionButton" type="button" onclick="addQuestion()" value="Add New Question" class="surveyButton" />
	427	<?php
[10]	428	}
	429
[19]	430	private static function removeLastQuestionButton() {
	431	?>
	432	<input type="button" onclick="removeLastQuestion()" value="x" class="surveyButton" />
	433	<?php
	434	}
	435
[11]	436	private static function submitbutton() {
	437	?>
	438	<input type="submit" name="submitSurvey"
[17]	439	value="Submit Survey!" class="surveyButton" id="submitSurvey"/>
[11]	440	<?php
	441	}
	442
[10]	443	}
	444	?>

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

Download in other formats: