Context Navigation

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

Last change on this file since 24 was 24, checked in by fpvanagthoven, 14 years ago
Some styling. Survey will now autosave itself every 3 minutes. Autosave is not yet functional though.
File size: 14.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
[24]	11	public function __construct($survey = null, $timeStamp = null) {
[11]	12	SurveyCreationTool::javascript();
	13	?>
[17]	14
[24]	15	<div id="surveyCreation"><form id="survey" action="submitsurvey.php" method="post">
[11]	16	<?php
[24]	17	SurveyCreationTool::surveyHead($timeStamp);
[11]	18	SurveyCreationTool::questionCreationForm();
[17]	19	SurveyCreationTool::addQuestionButton();
[19]	20	SurveyCreationTool::removeLastQuestionButton();
[11]	21	SurveyCreationTool::submitButton();
	22	?></form></div>
	23	<?php
[10]	24	}
	25
[11]	26	private static function javascript() {
	27	?>
	28	<script type="text/javascript">
[24]	29	/* autosave every 3 minutes */
	30	setTimeout("save()", 180000);
	31
	32	var questionCount = 1;
	33
[17]	34	function getNewQuestion()
	35	{
	36	var questionDiv = document.createElement("div");
	37	var htmlStr =
	38	"<div id='question" + questionCount + "' class='question'>" +
	39	"<table class='questionTable'>" +
	40	"<th>Question " + questionCount + "</th>" +
	41	"<tr><td><label for='questionTitle'>Title</label></td>" +
[23]	42	"<td><input type='text' class='questionTitle' name='questionTitle" + questionCount + "' onfocus='handleFocus(this)' size='30' value='Untitled Question' /></td></tr>" +
[17]	43	"<tr><td><label for='questionDescription'>Description</label></td>" +
[23]	44	"<td><input type='text' class='questionDescription' name='questionDescription" + questionCount + "' onfocus='handleFocus(this)' size='60' value='Write a question description here.' /></td>" +
[17]	45	"<tr><td><label for='questionType'>Answer type</label></td>" +
	46	"<td><select id='" + questionCount + "' name='questionType" + questionCount + "' onchange='handleType(this)'><br />"+
	47	"<option value='text' selected='selected'>Text</option>" +
[18]	48	"<option value='int'>Integer</option>" +
	49	"<option value='mc'>Multiple choice</option>" +
[17]	50	"<option value='checkboxes'>Checkboxes</option>" +
	51	"<option value='scale'>Scale</option>" +
	52	"</select></td></tr>" +
	53	"</table>" +
[23]	54	"<div id='answersDiv" + questionCount + "' class='answersDiv'></div>" +
[17]	55	"</div>";
[24]	56
[17]	57	questionDiv.innerHTML = htmlStr;
[24]	58
[17]	59	return questionDiv;
	60	}
[24]	61
[11]	62	function handleFocus(input)
	63	{
	64	if (input.clicked == null)
	65	{
	66	input.value = "";
	67	input.style.color = "black";
	68	input.clicked = true;
	69	}
	70	}
[24]	71
[11]	72	function handleBlur(input)
[17]	73	{
	74	var surveyTitle = document.getElementById('surveyTitle');
	75	var surveyDescription = document.getElementById('surveyDescription');
[24]	76
[11]	77	if (input.value == "")
	78	{
	79	input.style.color = "gray";
	80	input.clicked = null;
[24]	81
[17]	82	if (input == surveyTitle)
	83	{
	84	input.value = "Untitled Survey";
	85	}
	86	else if (input == surveyDescription)
	87	{
	88	input.value = "Write a helpful description for this survey here.";
	89	}
	90	}
	91	}
[24]	92
[17]	93	function handleType(select)
	94	{
	95	var type = select.valueOf().value;
	96	var answersDiv = document.getElementById("answersDiv" + select.id);
	97	answersDiv.answerCount = 1;
	98	answersDiv.clicked = null;
[24]	99
[17]	100	switch (type) {
[18]	101	case 'mc':
[17]	102	answersDiv.innerHTML = "";
	103	addOption(select.id);
[24]	104
[17]	105	break;
	106	case 'text':
	107	answersDiv.innerHTML = "";
	108	break;
[18]	109	case 'int':
	110	answersDiv.innerHTML = "";
	111	//min max
	112	minMax(select.id);
	113	break;
[17]	114	case 'checkboxes':
[18]	115	answersDiv.innerHTML = "";
	116	addOption(select.id);
[17]	117	break;
	118	case 'scale':
[18]	119	answersDiv.innerHTML = "";
	120	//what scale (min max incr)
[19]	121	minMaxIncr(select.id);
[17]	122	break;
	123	default:
	124	break;
[11]	125	}
[17]	126
[11]	127	}
[24]	128
	129
[17]	130	function addOption(questionNumber)
	131	{
	132	var answersDiv = document.getElementById("answersDiv" + questionNumber);
	133	var answerCount = answersDiv.answerCount;
	134	var answerDiv = document.createElement("div");
	135	answerDiv.className = "answerDiv";
[24]	136
[17]	137	var htmlStr = "<input type='text' name='q" +
	138	questionNumber + "ans" + answerCount + "' value='Option " + answerCount + "' />";
[24]	139
[17]	140	if (answersDiv.clicked == null)
	141	{
	142	htmlStr += "<input type='button' id='addOpt'"
[20]	143	+ " class='surveyButton' onclick='addOption(" + questionNumber + ")' value='Add Option' />" +
	144	"<input type='button' class='surveyButton' onclick='removeOption(" + questionNumber + ")' value='x' />";
[24]	145
[17]	146	answersDiv.clicked = true;
	147	}
[24]	148
[17]	149	answerDiv.innerHTML = htmlStr;
[24]	150
[20]	151	answerDiv.prev = answersDiv.lastAnswer; //singly linked list
	152	answersDiv.lastAnswer = answerDiv;
[24]	153
[17]	154	answersDiv.appendChild(answerDiv);
	155	answersDiv.answerCount++;
	156	}
[24]	157
[20]	158	function removeOption(questionNumber)
	159	{
	160	var answersDiv = document.getElementById("answersDiv" + questionNumber);
[24]	161
[20]	162	if (answersDiv.lastAnswer.prev != null)
	163	{
	164	answersDiv.removeChild(answersDiv.lastAnswer);
	165	answersDiv.lastAnswer = answersDiv.lastAnswer.prev;
	166	answersDiv.answerCount--;
	167	}
	168	}
[24]	169
[18]	170	function minMax(questionNumber)
	171	{
[19]	172	var answersDiv = document.getElementById("answersDiv" + questionNumber);
[24]	173
[19]	174	var answerDiv = document.createElement("div");
[24]	175
[19]	176	answerDiv.className = "answerDiv";
[23]	177	answerDiv.innerHTML = "<label for='min'>Min</label><input type='text' name='q" + questionNumber + "ans1' />" +
	178	"<label for='max'>Max</label><input type='text' name='q" + questionNumber + "ans2' />";
[24]	179
[18]	180	answersDiv.appendChild(answerDiv);
[19]	181	}
[24]	182
[19]	183	function minMaxIncr(questionNumber)
	184	{
	185	var answersDiv = document.getElementById("answersDiv" + questionNumber);
[24]	186
[19]	187	var answerDiv = document.createElement("div");
	188	answerDiv.className = "answerDiv";
[23]	189	answerDiv.innerHTML = "<label>Left label</label><input type='text' name='q" + questionNumber + "ans1' />" +
	190	"<label>Right label</label><input type='text' name='q" + questionNumber + "ans2' />" +
	191	"<label>Scale count</label><input type='text' name='q" + questionNumber + "ans3' />";
[24]	192
[19]	193	answersDiv.appendChild(answerDiv);
	194	}
[24]	195
	196
[17]	197	function addQuestion()
	198	{
	199	var questionsDiv = document.getElementById('questionsDiv');
	200	var newQuestion = getNewQuestion();
[24]	201
[19]	202
	203	newQuestion.prev = document.lastQuestion;
	204	document.lastQuestion = newQuestion;
	205
[17]	206	questionsDiv.appendChild(newQuestion);
	207	questionCount++;
	208	}
[24]	209
[19]	210	function removeLastQuestion()
	211	{
	212	var questionsDiv = document.getElementById('questionsDiv');
[24]	213
[19]	214	if (document.lastQuestion.prev != null)
	215	{
	216	questionsDiv.removeChild(document.lastQuestion);
	217	document.lastQuestion = document.lastQuestion.prev;
	218	questionCount--;
	219	}
	220	else
	221	{
	222	// do nothing
	223	}
	224	}
[20]	225
[24]	226	function save()
	227	{
	228	var form = document.getElementById('survey');
	229	var questionsDiv = document.getElementById('questionsDiv');
	230	form.action = "surveycreation.php";
	231
	232	/* extra time stamp */
	233	var date = new Date();
	234	var timeStamp = date.getHours() + ":" + date.getUTCMinutes();
	235	var timeStampInput = document.createElement("input");
	236	timeStampInput.name = "timeStamp";
	237	timeStampInput.value = timeStamp;
	238	timeStampInput.type = "hidden";
	239
	240	questionsDiv.appendChild(timeStampInput);
	241	form.submit();
	242	}
	243
	244
[11]	245	</script>
	246	<?php
	247	}
	248
[24]	249	private static function surveyHead($timeStamp = null) {
	250	?><div id="surveyHead">
	251	<?php
	252	SurveyCreationTool::titleBox();
	253	SurveyCreationTool::saveSurvey($timeStamp);
	254	SurveyCreationTool::descriptionBox();
	255	?></div>
	256	<?php
	257	}
	258
[10]	259	private static function titleBox() {
[11]	260	?>
[24]	261	<input type="text" id="surveyTitle" name="surveyTitle" value="Untitled Survey" onblur="handleBlur(this)" onfocus="handleFocus(this)" />
[11]	262	<?php
[10]	263	}
[11]	264
[24]	265	private static function saveSurvey($timeStamp = null) {
	266	if (isset($timeStamp))
	267	echo "<div id='timeStamp'>Last saved " . $timeStamp . '</div>';
	268	?>
	269	<input id="surveySaveButton" type="button" onclick="save()" class='surveyButton' value='Save' />
	270	<?php
	271	}
	272
[11]	273	private static function descriptionBox() {
	274	?>
[24]	275	<textarea id="surveyDescription" name="surveyDescription" onblur="handleBlur(this)" onfocus="handleFocus(this)">Write a helpful description for this survey here.</textarea>
[11]	276	<?php
[10]	277	}
[11]	278
	279	private static function questionCreationForm() {
[17]	280	?>
	281	<div id='questionsDiv'>
	282	</div>
	283	<script type="text/javascript"> addQuestion(); </script>
	284	<?php
[11]	285	}
	286
	287	private static function addQuestionButton() {
[17]	288	?>
	289	<input id="addQuestionButton" type="button" onclick="addQuestion()" value="Add New Question" class="surveyButton" />
	290	<?php
[10]	291	}
	292
[19]	293	private static function removeLastQuestionButton() {
	294	?>
	295	<input type="button" onclick="removeLastQuestion()" value="x" class="surveyButton" />
	296	<?php
	297	}
	298
[11]	299	private static function submitbutton() {
	300	?>
	301	<input type="submit" name="submitSurvey"
[17]	302	value="Submit Survey!" class="surveyButton" id="submitSurvey"/>
[11]	303	<?php
	304	}
	305
[10]	306	}
	307	?>

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

Download in other formats: