Context Navigation

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

Last change on this file since 104 was 104, checked in by fpvanagthoven, 14 years ago
Revised layout questioncreation.php
File size: 15.0 KB

Line
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() {
14	$this->javascript();
15	$this->displayList();
16	$this->displayEditPanel();
17	}
18
19	private function javascript() {
20	?>
21	<script type="text/javascript">
22	function handleType(select)
23	{
24	var type = select.valueOf().value;
25	clearSpecifications();
26
27	/* set answerCount for options */
28	document.getElementById("answerSpecifications").answerCount = 1;
29
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:
46
47	break;
48	}
49
50	}
51
52	function clearSpecifications()
53	{
54	var specs = document.getElementById("answerSpecifications");
55	specs.innerHTML = "";
56	specs.clicked = null;
57	specs.lastAnswer = null;
58
59	var questionType = document.getElementById("questionType");
60	var buttons = document.getElementById("questionButtons");
61	if(buttons != null)
62	questionType.removeChild(buttons);
63	}
64
65	function addOption()
66	{
67	var specs = document.getElementById("answerSpecifications");
68
69	addAddRemoveOptionButtonsOnce(specs);
70	addAnswerInput(specs);
71
72	}
73
74	function removeOption()
75	{
76	var specs = document.getElementById("answerSpecifications");
77
78	if(specs.lastAnswer.prev != null)
79	{
80	specs.removeChild(specs.lastAnswer);
81	specs.lastAnswer = specs.lastAnswer.prev;
82	specs.answerCount--;
83	}
84	}
85
86	function addAnswerInput(specs)
87	{
88	var answerCount = specs.answerCount;
89
90	/* set value for option textbox */
91	var optionStr = "Option " + answerCount;
92
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";
99
100	specs.appendChild(answerInput);
101
102	/* Singly linked list */
103	answerInput.prev = specs.lastAnswer; // remember last one
104	specs.lastAnswer = answerInput; // new lastAnswer
105
106	specs.answerCount++;
107	}
108
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);
118
119	addAddOptionButton(buttonsDiv);
120	addRemoveOptionButton(buttonsDiv);
121
122	specs.clicked = true;
123	}
124	}
125
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	}
136
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	}
146
147	function minMax(min, max)
148	{
149	if (min == null)
150	var min = '';
151	if (max == null)
152	var max = '';
153
154	var specs = document.getElementById("answerSpecifications");
155
156	var answerDiv = document.createElement("div");
157
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' />";
161
162	specs.appendChild(answerDiv);
163	}
164
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	}
180
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 = '';
193
194	var specs = document.getElementById("answerSpecifications");
195
196	var answerDiv = document.createElement("div");
197	answerDiv.className = "answerDiv";
198
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";
205
206	var leftInput = document.createElement("input");
207	leftInput.type = "text";
208	leftInput.value = left;
209	leftInput.name= "ans1";
210	leftInput.setAttribute("onchange", "handleAnswerChange()");
211
212	var rightInput = document.createElement("input");
213	rightInput.type = "text";
214	rightInput.value = right;
215	rightInput.name = "ans2";
216	rightInput.setAttribute("onchange", "handleAnswerChange()");
217
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";
225
226	answerDiv.appendChild(leftLabel);
227	answerDiv.appendChild(leftInput);
228	answerDiv.appendChild(rightLabel);
229	answerDiv.appendChild(rightInput);
230	answerDiv.appendChild(scaleLabel);
231	answerDiv.appendChild(scaleInput);
232
233	specs.appendChild(answerDiv);
234	}
235
236	</script>
237	<?php
238	}
239
240	private function displayList() {
241	?>
242	<div id="questionListWrapper">
243	<select id="questionsList" size="9999">
244	</select>
245	</div>
246	<?php
247	}
248
249	private function displayEditPanel() {
250	?>
251	<div id="questionCreation" class="floatLeft">
252	<?php $this->displayForm(); ?>
253	</div>
254	<?php
255	}
256
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
292	}
293	?>

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

Download in other formats: