Context Navigation

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

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

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

Download in other formats: