Context Navigation

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

Last change on this file since 72 was 72, checked in by fpvanagthoven, 14 years ago
Okay input is now a lot more robust. Apostrophes and quotes should no longer be a problem.
File size: 39.1 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;
[71]	17	var_dump($_POST);
	18	var_dump($survey);
[32]	19	if (isset($this->survey->id))
[30]	20	SurveyCreationTool::javascript($this->survey->id);
	21	else
	22	SurveyCreationTool::javascript();
[11]	23	?>
[17]	24
[61]	25	<div id="surveyCreation" class="creation"><form id="survey" action="surveycreation.php" method="post">
[11]	26	<?php
[29]	27	$this->surveyHead();
	28	$this->questionCreationForm();
[17]	29	SurveyCreationTool::addQuestionButton();
[19]	30	SurveyCreationTool::removeLastQuestionButton();
[11]	31	?></form></div>
	32	<?php
[10]	33	}
	34
[30]	35	private static function javascript($id = null) {
[11]	36	?>
[64]	37	<script type="text/javascript" src="js/creation.js"></script>
[11]	38	<script type="text/javascript">
[24]	39	/* autosave every 3 minutes */
[30]	40	setTimeout("save('<?php echo $id; ?>')", 180000);
[72]	41
[30]	42	var questionCount = 1;
[72]	43
[30]	44	function getNewQuestion(title, description)
[17]	45	{
[33]	46	if (title == null)
[30]	47	var title = 'Untitled Question';
[72]	48
	49	if (description == null)
[30]	50	var description = 'Write a question description here.';
[72]	51
[30]	52	var questionDiv = document.createElement("div");
[72]	53	questionDiv.id = "question" + questionCount;
	54	questionDiv.className = "question";
	55
	56	var questionTable = document.createElement("table");
	57	questionTable.className = "questionTable";
	58
	59	var th = document.createElement("th");
	60	th.innerHTML = "Question " + questionCount;
	61
	62	var row1 = document.createElement("tr");
	63
	64	var col1 = document.createElement("td");
	65	var titleLabel = document.createElement("label");
	66	titleLabel.setAttribute("for", "questionTitle");
	67	titleLabel.innerHTML = "Title";
	68	col1.appendChild(titleLabel);
	69
	70	var col2 = document.createElement("td");
	71	var titleInput = document.createElement("input");
	72	titleInput.id = "questionTitle";
	73	titleInput.setAttribute("type", "text");
	74	titleInput.className = "questionTitle";
	75	titleInput.setAttribute("name", "questionTitle" + questionCount);
	76	titleInput.setAttribute("onfocus", "handleFocus(this)");
	77	titleInput.setAttribute("size", "30");
	78	titleInput.setAttribute("value", title);
	79	col2.appendChild(titleInput);
	80
	81	row1.appendChild(col1);
	82	row1.appendChild(col2);
	83
	84	var row2 = document.createElement("tr");
	85	var col3 = document.createElement("td");
	86	var descriptionLabel = document.createElement("label");
	87	descriptionLabel.setAttribute("for", "questionDescription");
	88	descriptionLabel.innerHTML = "Description";
	89	col3.appendChild(descriptionLabel);
	90
	91	var col4 = document.createElement("td");
	92	var descriptionInput = document.createElement("input");
	93	descriptionInput.type = "text";
	94	descriptionInput.className = "questionDescription";
	95	descriptionInput.name = "questionDescription" + questionCount;
	96	descriptionInput.setAttribute("onfocus", "handleFocus(this)");
	97	descriptionInput.setAttribute("size", 60);
	98	descriptionInput.setAttribute("value", description);
	99	col4.appendChild(descriptionInput);
	100
	101	row2.appendChild(col3);
	102	row2.appendChild(col4);
	103
	104	var row3 = document.createElement("tr");
	105	var col5 = document.createElement("td");
	106	var typeLabel = document.createElement("label");
	107	typeLabel.setAttribute("for", "questionType");
	108	typeLabel.innerHTML = "Type answer";
	109	col5.appendChild(typeLabel);
	110
	111	var col6 = document.createElement("td");
	112	var select = document.createElement("select");
	113	select.id = questionCount;
	114	select.setAttribute("name", "questionType" + questionCount);
	115	select.setAttribute("onchange", "handleType(this)");
	116	select.innerHTML =
[30]	117	"<option value='text' selected='selected'>Text</option>" +
	118	"<option value='int'>Integer</option>" +
	119	"<option value='mc'>Multiple choice</option>" +
	120	"<option value='checkboxes'>Checkboxes</option>" +
[72]	121	"<option value='scale'>Scale</option>";
	122
	123	col6.appendChild(select);
	124
	125	row3.appendChild(col5);
	126	row3.appendChild(col6);
	127
	128	questionTable.appendChild(th);
	129	questionTable.appendChild(row1);
	130	questionTable.appendChild(row2);
	131	questionTable.appendChild(row3);
	132
	133	var answerDiv = document.createElement("div");
	134	answerDiv.id = "answersDiv" + questionCount;
	135	answerDiv.className = "answersDiv";
	136
	137	questionDiv.appendChild(questionTable);
	138	questionDiv.appendChild(answerDiv);
	139
[30]	140	return questionDiv;
[17]	141	}
[72]	142
[32]	143	function handleType(select, answers)
[30]	144	{
[32]	145	var numQ = select.id; // questionNumber
[30]	146	var type = select.valueOf().value;
[32]	147	var answersDiv = document.getElementById("answersDiv" + numQ );
[72]	148
[37]	149	removeQuestionID(numQ);
[72]	150
[30]	151	answersDiv.answerCount = 1;
	152	answersDiv.clicked = null;
[72]	153
[30]	154	switch (type) {
	155	case 'mc':
	156	answersDiv.innerHTML = "";
[32]	157	if (answers != null)
	158	{
	159	for (var i = 1; i < answers.length; i++)
	160	{
	161	addOption(numQ, answers[i]);
	162	}
	163	}
	164	else
	165	addOption(numQ);
[72]	166
[30]	167	break;
	168	case 'text':
	169	answersDiv.innerHTML = "";
	170	break;
	171	case 'int':
	172	answersDiv.innerHTML = "";
[72]	173
[30]	174	//min max
[32]	175	if (answers != null)
	176	minMax(numQ, answers[1], answers[2]);
	177	else
	178	minMax(numQ);
[30]	179	break;
	180	case 'checkboxes':
[32]	181	answersDiv.innerHTML = "";
	182	if (answers != null)
	183	{
	184	for (var i = 1; i < answers.length; i++)
	185	{
	186	addOption(numQ, answers[i]);
	187	}
	188	}
	189	else
	190	addOption(numQ);
[30]	191	break;
	192	case 'scale':
	193	answersDiv.innerHTML = "";
	194	//what scale (min max incr)
[32]	195	if (answers != null)
	196	minMaxIncr(numQ, answers[1], answers[2], answers[3]);
	197	else
	198	minMaxIncr(numQ);
[30]	199	break;
	200	default:
	201	break;
[11]	202	}
[30]	203
	204	}
[72]	205
[37]	206	function handleAnswerChange(questionNumber)
	207	{
	208	removeQuestionID(questionNumber);
	209	}
[72]	210
[37]	211	function removeQuestionID(questionNumber)
	212	{
	213	/* When type changes, remove question ID, because question changes */
	214	var questionIDInput = document.getElementById("questionID" + questionNumber);
	215	if (questionIDInput != null)
	216	{
	217	var questionsDiv = document.getElementById("questionsDiv");
	218	questionsDiv.removeChild(questionIDInput);
	219	}
	220
	221	}
[72]	222
	223
[32]	224	function addOption(questionNumber, optionStr)
[30]	225	{
	226	var answersDiv = document.getElementById("answersDiv" + questionNumber);
	227	var answerCount = answersDiv.answerCount;
	228	var answerDiv = document.createElement("div");
[72]	229
[32]	230	if (optionStr == null)
	231	var optionStr = "Option " + answerCount;
[72]	232
	233
[30]	234	answerDiv.className = "answerDiv";
[72]	235
	236	var answerInput = document.createElement("input");
	237	answerInput.setAttribute("type", "text");
	238	answerInput.setAttribute("name", "q" + questionNumber + "ans" + answerCount);
	239	answerInput.setAttribute("onchange", "handleAnswerChange(" + questionNumber + ")");
	240	answerInput.setAttribute("value", optionStr);
	241
	242	answerDiv.appendChild(answerInput);
	243
[30]	244	if (answersDiv.clicked == null)
[11]	245	{
[72]	246	var addOpt = document.createElement("input");
	247	addOpt.setAttribute("type", "button");
	248	addOpt.setAttribute("id", "addOpt");
	249	addOpt.setAttribute("class", "surveyButton");
	250	addOpt.setAttribute("onclick", "addOption(" + questionNumber + ")");
	251	addOpt.setAttribute("value", "Add Option");
	252
	253	var removeOpt = document.createElement("input");
	254	removeOpt.setAttribute("type", "button");
	255	removeOpt.className = "surveyButton";
	256	removeOpt.setAttribute("onclick", "removeOption(" + questionNumber + ")");
	257	removeOpt.setAttribute("value", "x");
	258
	259	answerDiv.appendChild(addOpt);
	260	answerDiv.appendChild(removeOpt);
	261
[30]	262	answersDiv.clicked = true;
[25]	263	}
[72]	264
[30]	265	answerDiv.prev = answersDiv.lastAnswer; //singly linked list
	266	answersDiv.lastAnswer = answerDiv;
[72]	267
[30]	268	answersDiv.appendChild(answerDiv);
[49]	269	answersDiv.answerCount++;
[72]	270
[37]	271	handleAnswerChange(questionNumber);
[17]	272	}
[72]	273
[30]	274	function removeOption(questionNumber)
[17]	275	{
[30]	276	var answersDiv = document.getElementById("answersDiv" + questionNumber);
[72]	277
[30]	278	if (answersDiv.lastAnswer.prev != null)
	279	{
	280	answersDiv.removeChild(answersDiv.lastAnswer);
	281	answersDiv.lastAnswer = answersDiv.lastAnswer.prev;
	282	answersDiv.answerCount--;
	283	}
[72]	284
[37]	285	handleAnswerChange(questionNumber);
[11]	286	}
[72]	287
[32]	288	function minMax(questionNumber, min, max)
[20]	289	{
[32]	290	if (min == null)
	291	var min = '';
	292	if (max == null)
	293	var max = '';
[72]	294
[30]	295	var answersDiv = document.getElementById("answersDiv" + questionNumber);
[72]	296
[30]	297	var answerDiv = document.createElement("div");
[72]	298
[30]	299	answerDiv.className = "answerDiv";
[53]	300	answerDiv.innerHTML = "<label for='min'>Min</label><input type='text' class='intBox' onchange='checkInt(this)' value='" + min + "' name='q" + questionNumber + "ans1' />" +
	301	"<label for='max'>Max</label><input type='text' class='intBox' onchange='checkInt(this)' value='" + max + "' name='q" + questionNumber + "ans2' />";
[72]	302
[30]	303	answersDiv.appendChild(answerDiv);
	304	}
[72]	305
[32]	306	function minMaxIncr(questionNumber, left, right, incr)
[30]	307	{
[32]	308	if (left == null)
	309	var left = '';
[71]	310	else
	311	left.replace("'", "'");
[32]	312	if (right == null)
	313	var right = '';
[71]	314	else
	315	right.replace("'", "'");
[32]	316	if (incr == null)
	317	var incr = '';
[72]	318
[30]	319	var answersDiv = document.getElementById("answersDiv" + questionNumber);
[72]	320
[30]	321	var answerDiv = document.createElement("div");
	322	answerDiv.className = "answerDiv";
[72]	323
[71]	324	var leftLabel = document.createElement("label");
	325	var rightLabel = document.createElement("label");
	326	var scaleLabel = document.createElement("label");
	327	leftLabel.innerHTML = "Left label";
	328	rightLabel.innerHTML = "Right label";
	329	scaleLabel.innerHTML = "Scale count";
[72]	330
[71]	331	var leftInput = document.createElement("input");
	332	leftInput.type = "text";
	333	leftInput.value = left;
	334	leftInput.name= "q" + questionNumber + "ans1";
	335	leftInput.setAttribute("onchange", "handleAnswerChange("
	336	+ questionNumber + ")");
[72]	337
[71]	338	var rightInput = document.createElement("input");
	339	rightInput.type = "text";
	340	rightInput.value = right;
	341	rightInput.name = "q" + questionNumber + "ans2";
	342	rightInput.setAttribute("onchange", "handleAnswerChange("
	343	+ questionNumber + ")");
[72]	344
[71]	345	var scaleInput = document.createElement("input");
	346	scaleInput.type = "text";
	347	scaleInput.className = "intBox";
	348	scaleInput.value = incr;
	349	scaleInput.setAttribute("onblur", "checkInt(this)");
	350	scaleInput.setAttribute("onchange", "handleAnswerChange("
	351	+ questionNumber + ")");
[72]	352
[71]	353	answerDiv.appendChild(leftLabel);
	354	answerDiv.appendChild(leftInput);
	355	answerDiv.appendChild(rightLabel);
	356	answerDiv.appendChild(rightInput);
	357	answerDiv.appendChild(scaleLabel);
	358	answerDiv.appendChild(scaleInput);
[72]	359
[30]	360	answersDiv.appendChild(answerDiv);
	361	}
[72]	362
	363
[30]	364	function addQuestion(title, description)
	365	{
	366	var questionsDiv = document.getElementById('questionsDiv');
	367	var newQuestion = getNewQuestion(title, description);
[72]	368
[19]	369
[30]	370	newQuestion.prev = document.lastQuestion;
	371	document.lastQuestion = newQuestion;
[19]	372
[30]	373	questionsDiv.appendChild(newQuestion);
	374	questionCount++;
	375	}
[72]	376
[30]	377	function removeLastQuestion()
[19]	378	{
[30]	379	var questionsDiv = document.getElementById('questionsDiv');
[72]	380
[30]	381	if (document.lastQuestion.prev != null)
	382	{
	383	questionsDiv.removeChild(document.lastQuestion);
	384	document.lastQuestion = document.lastQuestion.prev;
	385	questionCount--;
	386	}
	387	else
	388	{
	389	// do nothing
	390	}
[19]	391	}
[72]	392
[30]	393	function save(surveyID)
[24]	394	{
[53]	395	if (checksPassed())
	396	{
	397	var form = document.getElementById('survey');
	398	var questionsDiv = document.getElementById('questionsDiv');
	399	form.action = "surveycreation.php";
[72]	400
[53]	401	/* extra time stamp */
	402	var date = new Date();
	403	var minutes = date.getUTCMinutes();
	404	if (minutes < 10)
	405	minutes = "0" + minutes;
	406	var timeStamp = date.getHours() + ":" + minutes;
	407	var timeStampInput = document.createElement("input");
	408	timeStampInput.name = "timeStamp";
	409	timeStampInput.value = timeStamp;
	410	timeStampInput.type = "hidden";
[72]	411
[53]	412	var surveyIDInput = document.createElement("input");
	413	surveyIDInput.name = "surveyID";
	414	surveyIDInput.value = surveyID;
	415	surveyIDInput.type = "hidden";
[72]	416
[53]	417	questionsDiv.appendChild(timeStampInput);
	418	questionsDiv.appendChild(surveyIDInput);
	419	form.submit();
	420	}
[30]	421	}
[72]	422
[50]	423	function selectAll(input)
	424	{
	425	input.select();
	426	}
[72]	427
[53]	428	/* --- input checking --- */
	429	function checksPassed()
	430	{
	431	var form = document.getElementById('survey');
[72]	432
[53]	433	for (var i = 0; i < form.length; i++)
	434	{
	435	if (form.elements[i].checkPassed == 'no')
	436	return false;
	437	}
	438	return true;
	439	}
[72]	440
[53]	441	function checkInt(input)
	442	{
	443	input.style.borderWidth = '1px' ;
	444	var value = input.value;
	445	if (isNaN(value))
	446	{
	447	input.style.borderColor = 'red';
	448	input.checkPassed = 'no';
	449	}
	450	else
	451	{
[59]	452	input.style.border = '1px solid #888;';
[53]	453	input.checkPassed = null;
	454	}
	455	}
[72]	456
[11]	457	</script>
	458	<?php
	459	}
	460
[29]	461	private function surveyHead() {
[24]	462	?><div id="surveyHead">
	463	<?php
[29]	464	$this->titleBox();
	465	$this->saveSurvey();
	466	$this->descriptionBox();
[50]	467	$this->surveyLink();
[24]	468	?></div>
	469	<?php
	470	}
	471
[29]	472	private function titleBox() {
	473	if (isset($this->survey->title))
	474	$value = $this->survey->title;
	475	else
	476	$value = 'Untitled Survey';
[11]	477	?>
[72]	478	<input type="text" id="surveyTitle" class="titleBox" name="surveyTitle" value="<?php echo str_replace("\"", """, $value); ?>" onblur="handleBlur(this)" onfocus="handleFocus(this)" />
[11]	479	<?php
[10]	480	}
[11]	481
[29]	482	private function saveSurvey() {
	483	if (isset($this->timeStamp))
	484	echo "<div id='timeStamp'>Last saved " . $this->timeStamp . '</div>';
	485	if (isset($this->survey->id))
	486	$id = $this->survey->id;
	487	else
	488	$id = null;
[24]	489	?>
[29]	490	<input id="surveySaveButton" type="button" onclick="save('<?php echo $id; ?>')" class='surveyButton' value='Save' />
[24]	491	<?php
	492	}
	493
[29]	494	private function descriptionBox() {
	495	if (isset($this->survey->description))
	496	$value = $this->survey->description;
	497	else
	498	$value = 'Write a helpful description for this survey here.';
[11]	499	?>
[64]	500	<textarea id="surveyDescription" class="descriptionBox" name="surveyDescription" onblur="handleBlur(this)" onfocus="handleFocus(this)"><?php echo $value; ?></textarea>
[11]	501	<?php
[10]	502	}
[53]	503
[50]	504	private function surveyLink() {
[53]	505	if (isset($this->survey)) {
	506	$surveyID = $this->survey->id;
	507
	508	$link = $_SERVER['HTTP_HOST'] . dirname($_SERVER['PHP_SELF']) .
[50]	509	'/survey.php?id=' . $surveyID;
[53]	510	?>
	511	<input type="text" value="<?php echo $link; ?>" id="surveyLink" onclick="selectAll(this)">
	512	<?php
[50]	513	}
	514	}
[11]	515
[29]	516	private function questionCreationForm() {
[17]	517	?>
	518	<div id='questionsDiv'>
	519	</div>
	520	<?php
[30]	521	if (isset($this->survey)) {
[32]	522	foreach ($this->survey->questions as $numQ => $question) {
[30]	523	?>
[36]	524	<script type="text/javascript">
[32]	525	var answers = new Array();
	526	<?php
	527	/* Put all answers in js array */
	528	foreach ($question->answers as $numA => $answer) {
[72]	529	echo 'answers[' . $numA . '] = "' . addslashes($answer) . '"; ';
[71]	530	?>
[72]	531
[71]	532	<?php
[32]	533	}
	534	?>
[72]	535
	536	var title = "<?php echo addslashes($question->title); ?>";
	537	addQuestion(title, "<?php echo addslashes($question->description); ?>");
	538
[32]	539	var select = document.getElementById('<?php echo $numQ; ?>');
	540	var type = '<?php echo $question->type; ?>';
	541
	542	for (var i = 0; i < select.options.length; i++) {
	543	if (select.options[i].value == type)
	544	{
	545	select.options[i].selected = true;
[71]	546	handleType(select, answers);
[32]	547	break;
	548	}
[36]	549	}
[72]	550
	551
[36]	552	/* questionID stuff */
	553	var questionIDInput = document.createElement("input");
	554	questionIDInput.id = "questionID<?php echo $numQ; ?>";
	555	questionIDInput.name = "questionID<?php echo $numQ; ?>";
	556	questionIDInput.value = "<?php echo $question->id; ?>";
	557	questionIDInput.type = "hidden";
[72]	558
[36]	559	document.getElementById("questionsDiv").appendChild(questionIDInput);
[32]	560
[30]	561	</script>
	562	<?php
	563	}
	564	} else {
	565	?>
	566	<script type="text/javascript"> addQuestion();</script>
	567	<?php
	568	}
[11]	569	}
	570
	571	private static function addQuestionButton() {
[17]	572	?>
	573	<input id="addQuestionButton" type="button" onclick="addQuestion()" value="Add New Question" class="surveyButton" />
	574	<?php
[10]	575	}
	576
[19]	577	private static function removeLastQuestionButton() {
	578	?>
	579	<input type="button" onclick="removeLastQuestion()" value="x" class="surveyButton" />
	580	<?php
	581	}
	582
[10]	583	}
	584	?>

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

Download in other formats: