Context Navigation

source: Dev/trunk/classes/QuestionCreationTool.php @ 115

Last change on this file since 115 was 115, checked in by fpvanagthoven, 14 years ago
The existing categories are now selectable
File size: 19.5 KB

Rev	Line
[102]	1	<?php
	2
	3	/**
	4	* Tool that displays a list and an edit panel
	5	*
	6	* @author fpvanagthoven
	7	*/
	8	class QuestionCreationTool {
[115]	9
[114]	10	private $questions;
[102]	11
[114]	12	public function __construct($questions) {
	13	$this->questions = $questions;
[103]	14	$this->javascript();
[102]	15	$this->displayList();
	16	$this->displayEditPanel();
	17	}
	18
[103]	19	private function javascript() {
	20	?>
	21	<script type="text/javascript">
	22	function handleType(select)
	23	{
	24	var type = select.valueOf().value;
	25	clearSpecifications();
[115]	26
[103]	27	/* set answerCount for options */
	28	document.getElementById("answerSpecifications").answerCount = 1;
[115]	29
[103]	30	switch (type) {
	31	case "text":
	32	break;
	33	case "mc":
	34	addOption();
	35	break;
	36	case "int":
	37	minMax();
	38	break;
	39	case "checkboxes":
	40	addOption();
	41	break;
	42	case "scale":
	43	minMaxIncr();
	44	break;
	45	default:
[115]	46
[103]	47	break;
	48	}
	49
	50	}
[115]	51
[103]	52	function clearSpecifications()
	53	{
	54	var specs = document.getElementById("answerSpecifications");
	55	specs.innerHTML = "";
	56	specs.clicked = null;
	57	specs.lastAnswer = null;
[115]	58
[103]	59	var questionType = document.getElementById("questionType");
	60	var buttons = document.getElementById("questionButtons");
	61	if(buttons != null)
	62	questionType.removeChild(buttons);
	63	}
[115]	64
[103]	65	function addOption()
	66	{
	67	var specs = document.getElementById("answerSpecifications");
[115]	68
[103]	69	addAddRemoveOptionButtonsOnce(specs);
	70	addAnswerInput(specs);
[115]	71
[103]	72	}
[115]	73
[103]	74	function removeOption()
	75	{
	76	var specs = document.getElementById("answerSpecifications");
[115]	77
[103]	78	if(specs.lastAnswer.prev != null)
	79	{
	80	specs.removeChild(specs.lastAnswer);
	81	specs.lastAnswer = specs.lastAnswer.prev;
	82	specs.answerCount--;
	83	}
	84	}
[115]	85
[103]	86	function addAnswerInput(specs)
	87	{
	88	var answerCount = specs.answerCount;
[115]	89
[103]	90	/* set value for option textbox */
	91	var optionStr = "Option " + answerCount;
[115]	92
[103]	93	/* the input textbox */
	94	var answerInput = document.createElement("input");
	95	answerInput.setAttribute("type", "text");
	96	answerInput.setAttribute("name", "ans" + answerCount);
	97	answerInput.setAttribute("value", optionStr);
	98	answerInput.className = "answerInput";
[115]	99
[103]	100	specs.appendChild(answerInput);
[115]	101
[103]	102	/* Singly linked list */
	103	answerInput.prev = specs.lastAnswer; // remember last one
	104	specs.lastAnswer = answerInput; // new lastAnswer
[115]	105
[103]	106	specs.answerCount++;
	107	}
[115]	108
[103]	109	function addAddRemoveOptionButtonsOnce(specs)
	110	{
	111	if (specs.clicked == null)
	112	{
	113	var buttonsDiv = document.createElement("div");
	114	buttonsDiv.id = "questionButtons";
	115	buttonsDiv.style.display = "inline";
	116	var typeBox = document.getElementById("questionType");
	117	typeBox.appendChild(buttonsDiv);
[115]	118
[103]	119	addAddOptionButton(buttonsDiv);
	120	addRemoveOptionButton(buttonsDiv);
[115]	121
[103]	122	specs.clicked = true;
	123	}
	124	}
[115]	125
[103]	126	function addAddOptionButton(buttonsDiv)
	127	{
	128	var addOpt = document.createElement("input");
	129	addOpt.setAttribute("type", "button");
	130	addOpt.setAttribute("id", "addOpt");
	131	addOpt.setAttribute("class", "surveyButton");
	132	addOpt.setAttribute("onclick", "addOption()");
	133	addOpt.setAttribute("value", "Add Option");
	134	buttonsDiv.appendChild(addOpt);
	135	}
[115]	136
[103]	137	function addRemoveOptionButton(buttonsDiv)
	138	{
	139	var removeOpt = document.createElement("input");
	140	removeOpt.setAttribute("type", "button");
	141	removeOpt.className = "surveyButton";
	142	removeOpt.setAttribute("onclick", "removeOption()");
	143	removeOpt.setAttribute("value", "x");
	144	buttonsDiv.appendChild(removeOpt);
	145	}
[115]	146
[103]	147	function minMax(min, max)
	148	{
	149	if (min == null)
	150	var min = '';
	151	if (max == null)
	152	var max = '';
[115]	153
[103]	154	var specs = document.getElementById("answerSpecifications");
[115]	155
[103]	156	var answerDiv = document.createElement("div");
[115]	157
[103]	158	answerDiv.className = "answerDiv";
	159	answerDiv.innerHTML = "<label for='min'>Min</label><input type='text' class='intBox' onchange='checkInt(this)' value='" + min + "' name='ans1' />" +
	160	"<label for='max'>Max</label><input type='text' class='intBox' onchange='checkInt(this)' value='" + max + "' name='ans2' />";
[115]	161
[103]	162	specs.appendChild(answerDiv);
	163	}
[115]	164
[103]	165	function checkInt(input)
	166	{
	167	input.style.borderWidth = '1px' ;
	168	var value = input.value;
	169	if (isNaN(value))
	170	{
	171	input.style.borderColor = 'red';
	172	input.checkPassed = 'no';
	173	}
	174	else
	175	{
	176	input.style.border = '1px solid #888;';
	177	input.checkPassed = null;
	178	}
	179	}
[115]	180
[103]	181	function minMaxIncr(left, right, incr)
	182	{
	183	if (left == null)
	184	var left = '';
	185	else
	186	left.replace("'", "'");
	187	if (right == null)
	188	var right = '';
	189	else
	190	right.replace("'", "'");
	191	if (incr == null)
	192	var incr = '';
[115]	193
[103]	194	var specs = document.getElementById("answerSpecifications");
[115]	195
[103]	196	var answerDiv = document.createElement("div");
	197	answerDiv.className = "answerDiv";
[115]	198
[103]	199	var leftLabel = document.createElement("label");
	200	var rightLabel = document.createElement("label");
	201	var scaleLabel = document.createElement("label");
	202	leftLabel.innerHTML = "Left label";
	203	rightLabel.innerHTML = "Right label";
	204	scaleLabel.innerHTML = "Scale count";
[115]	205
[103]	206	var leftInput = document.createElement("input");
	207	leftInput.type = "text";
	208	leftInput.value = left;
	209	leftInput.name= "ans1";
	210	leftInput.setAttribute("onchange", "handleAnswerChange()");
[115]	211
[103]	212	var rightInput = document.createElement("input");
	213	rightInput.type = "text";
	214	rightInput.value = right;
	215	rightInput.name = "ans2";
	216	rightInput.setAttribute("onchange", "handleAnswerChange()");
[115]	217
[103]	218	var scaleInput = document.createElement("input");
	219	scaleInput.type = "text";
	220	scaleInput.className = "intBox";
	221	scaleInput.value = incr;
	222	scaleInput.setAttribute("onblur", "checkInt(this)");
	223	scaleInput.setAttribute("onchange", "");
	224	scaleInput.name = "ans3";
[115]	225
[103]	226	answerDiv.appendChild(leftLabel);
	227	answerDiv.appendChild(leftInput);
	228	answerDiv.appendChild(rightLabel);
	229	answerDiv.appendChild(rightInput);
	230	answerDiv.appendChild(scaleLabel);
	231	answerDiv.appendChild(scaleInput);
[115]	232
[103]	233	specs.appendChild(answerDiv);
[108]	234	}
[115]	235
[108]	236	function newCategory()
	237	{
	238	var categoryBox = document.getElementById("categoryBox");
	239	categoryBox.innerHTML = "";
[115]	240
[108]	241	var categoryInput = document.createElement("input");
	242	categoryInput.name = "questionCategory";
[115]	243
[108]	244	categoryBox.appendChild(categoryInput);
	245	}
[115]	246
[112]	247	function clearFields()
	248	{
	249	clearCategory();
	250	clearCode();
	251	clearTitle();
	252	clearDescription();
	253	clearType();
	254	}
[115]	255
[112]	256	function clearCategory()
	257	{
	258	var categoryBox = document.getElementById("categoryBox");
	259	categoryBox.innerHTML = "";
[115]	260
[112]	261	var questionCategorySelect = document.createElement("select");
	262	questionCategorySelect.setAttribute("name", "questionCategory");
	263	questionCategorySelect.id = "questionCategorySelect";
[115]	264
[112]	265	var newCategoryButton = document.createElement("input");
	266	newCategoryButton.setAttribute("type", "button");
	267	newCategoryButton.setAttribute("onclick", "newCategory()");
	268	newCategoryButton.setAttribute("value", "New Category");
	269	newCategoryButton.className = "surveyButton";
[115]	270
[112]	271	categoryBox.appendChild(questionCategorySelect);
	272	categoryBox.appendChild(newCategoryButton);
	273	}
[115]	274
[112]	275	function clearCode()
	276	{
	277	var codeInput = document.getElementById("questionCode");
	278	codeInput.value = "";
	279	}
[115]	280
[112]	281	function clearTitle()
	282	{
	283	var titleInput = document.getElementById("questionTitle");
	284	titleInput.value ="";
	285	}
[115]	286
[112]	287	function clearDescription()
	288	{
	289	var descriptionInput = document.getElementById("questionDescription");
	290	descriptionInput.value = "";
	291	}
[115]	292
[112]	293	function clearType()
	294	{
	295	var typeSelect = document.getElementById("questionTypeSelect");
	296	typeSelect.selectedIndex = 0;
[114]	297	clearSpecifications();
[112]	298	}
[115]	299
[103]	300	</script>
	301	<?php
	302	}
	303
[102]	304	private function displayList() {
	305	?>
	306	<div id="questionListWrapper">
[103]	307	<select id="questionsList" size="9999">
[115]	308	<?php $this->populateList(); ?>
[102]	309	</select>
	310	</div>
	311	<?php
	312	}
	313
	314	private function displayEditPanel() {
	315	?>
[104]	316	<div id="questionCreation" class="floatLeft">
[115]	317	<?php $this->displayForm(); ?>
[102]	318	</div>
	319	<?php
	320	}
	321
[104]	322	private function displayForm() {
	323	?>
	324	<form id="questionEditForm" method="post" action="" onsubmit="">
	325	<table class="questionTable">
	326	<tr>
[108]	327	<td><label for="questionCategory">Category</label></td>
	328	<td id="categoryBox"><!-- Select should be filled with existing categories-->
[115]	329	<?php $this->questionCategorySelect(); ?>
[108]	330	</td>
	331	</tr>
	332	<tr>
[104]	333	<td><label for="questionCode">Code</label></td>
	334	<td><input id="questionCode" name="questionCode" size="5" /></td>
	335	</tr>
	336	<tr>
	337	<td><label for="questionTitle">Title</label></td>
[108]	338	<td><input id="questionTitle" name="questionTitle" size="60" /></td>
[104]	339	</tr>
	340	<tr>
	341	<td><label for="questionDescription">Description</label></td>
	342	<td><input id="questionDescription" name="questionDescription" size="60" /></td>
	343	</tr>
	344	<tr>
	345	<td><label for="questionType">Type answer</label></td>
	346	<td id="questionType">
[112]	347	<select id="questionTypeSelect" name="questionType" onchange="handleType(this)">
[104]	348	<option value='text' selected='selected'>Text</option>
	349	<option value='int'>Integer</option>
	350	<option value='mc'>Multiple choice</option>
	351	<option value='checkboxes'>Checkboxes</option>
	352	<option value='scale'>Scale</option>
	353	</select>
	354	</td>
	355	</tr>
	356	</table>
	357	<div id="answerSpecifications"></div>
[112]	358	<input id="clearQuestionFields" type="button" onclick="clearFields()" class="surveyButton" value="Clear" />
[104]	359	<input id="saveQuestion" type="submit" class="surveyButton" value="Save" />
	360	</form>
	361	<?php
	362	}
[115]	363
	364	private function questionCategorySelect() {
	365	?>
	366	<select id="questionCategorySelect" name="questionCategory">
	367	<option value='Uncategorized' selected='selected'>Uncategorized</option>
	368	<?php $this->generateCategoryOptions(); ?>
	369	</select>
	370	<!-- New category button -->
	371	<input type="button" class="surveyButton" onclick="newCategory()" value="New Category" />
	372	<?php
	373	}
[114]	374
[115]	375	private function generateCategoryOptions()
[114]	376	{
[115]	377	$categories = array();
	378
	379	foreach ($this->questions as $question) {
	380	$category = $question->category;
	381	if (! array_search($category, $categories)) // if not in categories
	382	{
	383	array_push($categories, $category);
	384	}
	385	}
	386
	387	// You might want to escape quotes and stuff here
	388	foreach ($categories as $category) {
[114]	389	?>
[115]	390	<option value="<?php echo $category;?>"><?php echo $category; ?></option>
[114]	391	<?php
	392	}
	393	}
[104]	394
[115]	395	private function populateList() {
	396	foreach ($this->questions as $question) {
	397	?>
	398	<option value="<?php echo $question->code; ?>">
	399	<?php echo $question->code . " - " . $question->title; ?>
	400	</option>
	401	<?php
	402	}
	403	}
	404
	405	}
	406	?>

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

Download in other formats: