Context Navigation

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

Last change on this file since 105 was 104, checked in by fpvanagthoven, 14 years ago
Revised layout questioncreation.php
File size: 15.0 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 {
	9
	10	private $list;
	11	private $questionEditPanel;
	12
	13	public function __construct() {
[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();
[104]	26
[103]	27	/* set answerCount for options */
	28	document.getElementById("answerSpecifications").answerCount = 1;
[104]	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:
[104]	46
[103]	47	break;
	48	}
	49
	50	}
[104]	51
[103]	52	function clearSpecifications()
	53	{
	54	var specs = document.getElementById("answerSpecifications");
	55	specs.innerHTML = "";
	56	specs.clicked = null;
	57	specs.lastAnswer = null;
[104]	58
[103]	59	var questionType = document.getElementById("questionType");
	60	var buttons = document.getElementById("questionButtons");
	61	if(buttons != null)
	62	questionType.removeChild(buttons);
	63	}
[104]	64
[103]	65	function addOption()
	66	{
	67	var specs = document.getElementById("answerSpecifications");
[104]	68
[103]	69	addAddRemoveOptionButtonsOnce(specs);
	70	addAnswerInput(specs);
[104]	71
[103]	72	}
[104]	73
[103]	74	function removeOption()
	75	{
	76	var specs = document.getElementById("answerSpecifications");
[104]	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	}
[104]	85
[103]	86	function addAnswerInput(specs)
	87	{
	88	var answerCount = specs.answerCount;
[104]	89
[103]	90	/* set value for option textbox */
	91	var optionStr = "Option " + answerCount;
[104]	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";
[104]	99
[103]	100	specs.appendChild(answerInput);
[104]	101
[103]	102	/* Singly linked list */
	103	answerInput.prev = specs.lastAnswer; // remember last one
	104	specs.lastAnswer = answerInput; // new lastAnswer
[104]	105
[103]	106	specs.answerCount++;
	107	}
[104]	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);
[104]	118
[103]	119	addAddOptionButton(buttonsDiv);
	120	addRemoveOptionButton(buttonsDiv);
[104]	121
[103]	122	specs.clicked = true;
	123	}
	124	}
[104]	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	}
[104]	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	}
[104]	146
[103]	147	function minMax(min, max)
	148	{
	149	if (min == null)
	150	var min = '';
	151	if (max == null)
	152	var max = '';
[104]	153
[103]	154	var specs = document.getElementById("answerSpecifications");
[104]	155
[103]	156	var answerDiv = document.createElement("div");
[104]	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' />";
[104]	161
[103]	162	specs.appendChild(answerDiv);
	163	}
[104]	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	}
[104]	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 = '';
[104]	193
[103]	194	var specs = document.getElementById("answerSpecifications");
[104]	195
[103]	196	var answerDiv = document.createElement("div");
	197	answerDiv.className = "answerDiv";
[104]	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";
[104]	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()");
[104]	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()");
[104]	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";
[104]	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);
[104]	232
[103]	233	specs.appendChild(answerDiv);
	234	}
[104]	235
[103]	236	</script>
	237	<?php
	238	}
	239
[102]	240	private function displayList() {
	241	?>
	242	<div id="questionListWrapper">
[103]	243	<select id="questionsList" size="9999">
[102]	244	</select>
	245	</div>
	246	<?php
	247	}
	248
	249	private function displayEditPanel() {
	250	?>
[104]	251	<div id="questionCreation" class="floatLeft">
	252	<?php $this->displayForm(); ?>
[102]	253	</div>
	254	<?php
	255	}
	256
[104]	257	private function displayForm() {
	258	?>
	259	<form id="questionEditForm" method="post" action="" onsubmit="">
	260	<table class="questionTable">
	261	<tr>
	262	<td><label for="questionCode">Code</label></td>
	263	<td><input id="questionCode" name="questionCode" size="5" /></td>
	264	</tr>
	265	<tr>
	266	<td><label for="questionTitle">Title</label></td>
	267	<td><input id="questionTitle" name="questionTitle" size="30" /></td>
	268	</tr>
	269	<tr>
	270	<td><label for="questionDescription">Description</label></td>
	271	<td><input id="questionDescription" name="questionDescription" size="60" /></td>
	272	</tr>
	273	<tr>
	274	<td><label for="questionType">Type answer</label></td>
	275	<td id="questionType">
	276	<select name="questionType" onchange="handleType(this)">
	277	<option value='text' selected='selected'>Text</option>
	278	<option value='int'>Integer</option>
	279	<option value='mc'>Multiple choice</option>
	280	<option value='checkboxes'>Checkboxes</option>
	281	<option value='scale'>Scale</option>
	282	</select>
	283	</td>
	284	</tr>
	285	</table>
	286	<div id="answerSpecifications"></div>
	287	<input id="saveQuestion" type="submit" class="surveyButton" value="Save" />
	288	</form>
	289	<?php
	290	}
	291
[102]	292	}
	293	?>

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

Download in other formats: