Context Navigation

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

Last change on this file since 73 was 73, checked in by fpvanagthoven, 14 years ago
Small bugfix SurveyCreationTool?. Forgot an attribute.
File size: 39.2 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 + ")");
[73]	352	scaleInput.name = "q" + questionNumber + "ans3";
[72]	353
[71]	354	answerDiv.appendChild(leftLabel);
	355	answerDiv.appendChild(leftInput);
	356	answerDiv.appendChild(rightLabel);
	357	answerDiv.appendChild(rightInput);
	358	answerDiv.appendChild(scaleLabel);
	359	answerDiv.appendChild(scaleInput);
[72]	360
[30]	361	answersDiv.appendChild(answerDiv);
	362	}
[72]	363
	364
[30]	365	function addQuestion(title, description)
	366	{
	367	var questionsDiv = document.getElementById('questionsDiv');
	368	var newQuestion = getNewQuestion(title, description);
[72]	369
[19]	370
[30]	371	newQuestion.prev = document.lastQuestion;
	372	document.lastQuestion = newQuestion;
[19]	373
[30]	374	questionsDiv.appendChild(newQuestion);
	375	questionCount++;
	376	}
[72]	377
[30]	378	function removeLastQuestion()
[19]	379	{
[30]	380	var questionsDiv = document.getElementById('questionsDiv');
[72]	381
[30]	382	if (document.lastQuestion.prev != null)
	383	{
	384	questionsDiv.removeChild(document.lastQuestion);
	385	document.lastQuestion = document.lastQuestion.prev;
	386	questionCount--;
	387	}
	388	else
	389	{
	390	// do nothing
	391	}
[19]	392	}
[72]	393
[30]	394	function save(surveyID)
[24]	395	{
[53]	396	if (checksPassed())
	397	{
	398	var form = document.getElementById('survey');
	399	var questionsDiv = document.getElementById('questionsDiv');
	400	form.action = "surveycreation.php";
[72]	401
[53]	402	/* extra time stamp */
	403	var date = new Date();
	404	var minutes = date.getUTCMinutes();
	405	if (minutes < 10)
	406	minutes = "0" + minutes;
	407	var timeStamp = date.getHours() + ":" + minutes;
	408	var timeStampInput = document.createElement("input");
	409	timeStampInput.name = "timeStamp";
	410	timeStampInput.value = timeStamp;
	411	timeStampInput.type = "hidden";
[72]	412
[53]	413	var surveyIDInput = document.createElement("input");
	414	surveyIDInput.name = "surveyID";
	415	surveyIDInput.value = surveyID;
	416	surveyIDInput.type = "hidden";
[72]	417
[53]	418	questionsDiv.appendChild(timeStampInput);
	419	questionsDiv.appendChild(surveyIDInput);
	420	form.submit();
	421	}
[30]	422	}
[72]	423
[50]	424	function selectAll(input)
	425	{
	426	input.select();
	427	}
[72]	428
[53]	429	/* --- input checking --- */
	430	function checksPassed()
	431	{
	432	var form = document.getElementById('survey');
[72]	433
[53]	434	for (var i = 0; i < form.length; i++)
	435	{
	436	if (form.elements[i].checkPassed == 'no')
	437	return false;
	438	}
	439	return true;
	440	}
[72]	441
[53]	442	function checkInt(input)
	443	{
	444	input.style.borderWidth = '1px' ;
	445	var value = input.value;
	446	if (isNaN(value))
	447	{
	448	input.style.borderColor = 'red';
	449	input.checkPassed = 'no';
	450	}
	451	else
	452	{
[59]	453	input.style.border = '1px solid #888;';
[53]	454	input.checkPassed = null;
	455	}
	456	}
[72]	457
[11]	458	</script>
	459	<?php
	460	}
	461
[29]	462	private function surveyHead() {
[24]	463	?><div id="surveyHead">
	464	<?php
[29]	465	$this->titleBox();
	466	$this->saveSurvey();
	467	$this->descriptionBox();
[50]	468	$this->surveyLink();
[24]	469	?></div>
	470	<?php
	471	}
	472
[29]	473	private function titleBox() {
	474	if (isset($this->survey->title))
	475	$value = $this->survey->title;
	476	else
	477	$value = 'Untitled Survey';
[11]	478	?>
[72]	479	<input type="text" id="surveyTitle" class="titleBox" name="surveyTitle" value="<?php echo str_replace("\"", """, $value); ?>" onblur="handleBlur(this)" onfocus="handleFocus(this)" />
[11]	480	<?php
[10]	481	}
[11]	482
[29]	483	private function saveSurvey() {
	484	if (isset($this->timeStamp))
	485	echo "<div id='timeStamp'>Last saved " . $this->timeStamp . '</div>';
	486	if (isset($this->survey->id))
	487	$id = $this->survey->id;
	488	else
	489	$id = null;
[24]	490	?>
[29]	491	<input id="surveySaveButton" type="button" onclick="save('<?php echo $id; ?>')" class='surveyButton' value='Save' />
[24]	492	<?php
	493	}
	494
[29]	495	private function descriptionBox() {
	496	if (isset($this->survey->description))
	497	$value = $this->survey->description;
	498	else
	499	$value = 'Write a helpful description for this survey here.';
[11]	500	?>
[64]	501	<textarea id="surveyDescription" class="descriptionBox" name="surveyDescription" onblur="handleBlur(this)" onfocus="handleFocus(this)"><?php echo $value; ?></textarea>
[11]	502	<?php
[10]	503	}
[53]	504
[50]	505	private function surveyLink() {
[53]	506	if (isset($this->survey)) {
	507	$surveyID = $this->survey->id;
	508
	509	$link = $_SERVER['HTTP_HOST'] . dirname($_SERVER['PHP_SELF']) .
[50]	510	'/survey.php?id=' . $surveyID;
[53]	511	?>
	512	<input type="text" value="<?php echo $link; ?>" id="surveyLink" onclick="selectAll(this)">
	513	<?php
[50]	514	}
	515	}
[11]	516
[29]	517	private function questionCreationForm() {
[17]	518	?>
	519	<div id='questionsDiv'>
	520	</div>
	521	<?php
[30]	522	if (isset($this->survey)) {
[32]	523	foreach ($this->survey->questions as $numQ => $question) {
[30]	524	?>
[36]	525	<script type="text/javascript">
[32]	526	var answers = new Array();
	527	<?php
	528	/* Put all answers in js array */
	529	foreach ($question->answers as $numA => $answer) {
[72]	530	echo 'answers[' . $numA . '] = "' . addslashes($answer) . '"; ';
[71]	531	?>
[72]	532
[71]	533	<?php
[32]	534	}
	535	?>
[72]	536
	537	var title = "<?php echo addslashes($question->title); ?>";
	538	addQuestion(title, "<?php echo addslashes($question->description); ?>");
	539
[32]	540	var select = document.getElementById('<?php echo $numQ; ?>');
	541	var type = '<?php echo $question->type; ?>';
	542
	543	for (var i = 0; i < select.options.length; i++) {
	544	if (select.options[i].value == type)
	545	{
	546	select.options[i].selected = true;
[71]	547	handleType(select, answers);
[32]	548	break;
	549	}
[36]	550	}
[72]	551
	552
[36]	553	/* questionID stuff */
	554	var questionIDInput = document.createElement("input");
	555	questionIDInput.id = "questionID<?php echo $numQ; ?>";
	556	questionIDInput.name = "questionID<?php echo $numQ; ?>";
	557	questionIDInput.value = "<?php echo $question->id; ?>";
	558	questionIDInput.type = "hidden";
[72]	559
[36]	560	document.getElementById("questionsDiv").appendChild(questionIDInput);
[32]	561
[30]	562	</script>
	563	<?php
	564	}
	565	} else {
	566	?>
	567	<script type="text/javascript"> addQuestion();</script>
	568	<?php
	569	}
[11]	570	}
	571
	572	private static function addQuestionButton() {
[17]	573	?>
	574	<input id="addQuestionButton" type="button" onclick="addQuestion()" value="Add New Question" class="surveyButton" />
	575	<?php
[10]	576	}
	577
[19]	578	private static function removeLastQuestionButton() {
	579	?>
	580	<input type="button" onclick="removeLastQuestion()" value="x" class="surveyButton" />
	581	<?php
	582	}
	583
[10]	584	}
	585	?>

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

Download in other formats: