Context Navigation

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

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

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

Download in other formats: