Context Navigation

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

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

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

Download in other formats: