[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; |
---|
[69] | 17 | |
---|
[32] | 18 | if (isset($this->survey->id)) |
---|
[30] | 19 | SurveyCreationTool::javascript($this->survey->id); |
---|
| 20 | else |
---|
| 21 | SurveyCreationTool::javascript(); |
---|
[11] | 22 | ?> |
---|
[17] | 23 | |
---|
[61] | 24 | <div id="surveyCreation" class="creation"><form id="survey" action="surveycreation.php" method="post"> |
---|
[11] | 25 | <?php |
---|
[29] | 26 | $this->surveyHead(); |
---|
| 27 | $this->questionCreationForm(); |
---|
[17] | 28 | SurveyCreationTool::addQuestionButton(); |
---|
[19] | 29 | SurveyCreationTool::removeLastQuestionButton(); |
---|
[11] | 30 | ?></form></div> |
---|
| 31 | <?php |
---|
[10] | 32 | } |
---|
| 33 | |
---|
[30] | 34 | private static function javascript($id = null) { |
---|
[11] | 35 | ?> |
---|
[64] | 36 | <script type="text/javascript" src="js/creation.js"></script> |
---|
[11] | 37 | <script type="text/javascript"> |
---|
[24] | 38 | /* autosave every 3 minutes */ |
---|
[30] | 39 | setTimeout("save('<?php echo $id; ?>')", 180000); |
---|
[53] | 40 | |
---|
[30] | 41 | var questionCount = 1; |
---|
[53] | 42 | |
---|
[30] | 43 | function getNewQuestion(title, description) |
---|
[17] | 44 | { |
---|
[33] | 45 | if (title == null) |
---|
[30] | 46 | var title = 'Untitled Question'; |
---|
[53] | 47 | |
---|
[30] | 48 | if (description != null) |
---|
| 49 | var description = description; |
---|
| 50 | else |
---|
| 51 | var description = 'Write a question description here.'; |
---|
[53] | 52 | |
---|
[30] | 53 | var questionDiv = document.createElement("div"); |
---|
| 54 | var htmlStr = |
---|
| 55 | "<div id='question" + questionCount + "' class='question'>" + |
---|
| 56 | "<table class='questionTable'>" + |
---|
| 57 | "<th>Question " + questionCount + "</th>" + |
---|
| 58 | "<tr><td><label for='questionTitle'>Title</label></td>" + |
---|
| 59 | "<td><input type='text' class='questionTitle' name='questionTitle" + questionCount + "' onfocus='handleFocus(this)' size='30' value='" + title + "' /></td></tr>" + |
---|
| 60 | "<tr><td><label for='questionDescription'>Description</label></td>" + |
---|
| 61 | "<td><input type='text' class='questionDescription' name='questionDescription" + questionCount + "' onfocus='handleFocus(this)' size='60' value='" + description + "' /></td>" + |
---|
| 62 | "<tr><td><label for='questionType'>Answer type</label></td>" + |
---|
| 63 | "<td><select id='" + questionCount + "' name='questionType" + questionCount + "' onchange='handleType(this)'><br />"+ |
---|
| 64 | "<option value='text' selected='selected'>Text</option>" + |
---|
| 65 | "<option value='int'>Integer</option>" + |
---|
| 66 | "<option value='mc'>Multiple choice</option>" + |
---|
| 67 | "<option value='checkboxes'>Checkboxes</option>" + |
---|
| 68 | "<option value='scale'>Scale</option>" + |
---|
| 69 | "</select></td></tr>" + |
---|
| 70 | "</table>" + |
---|
| 71 | "<div id='answersDiv" + questionCount + "' class='answersDiv'></div>" + |
---|
| 72 | "</div>"; |
---|
[53] | 73 | |
---|
[30] | 74 | questionDiv.innerHTML = htmlStr; |
---|
[53] | 75 | |
---|
[30] | 76 | return questionDiv; |
---|
[17] | 77 | } |
---|
[53] | 78 | |
---|
[32] | 79 | function handleType(select, answers) |
---|
[30] | 80 | { |
---|
[32] | 81 | var numQ = select.id; // questionNumber |
---|
[30] | 82 | var type = select.valueOf().value; |
---|
[32] | 83 | var answersDiv = document.getElementById("answersDiv" + numQ ); |
---|
[53] | 84 | |
---|
[37] | 85 | removeQuestionID(numQ); |
---|
[53] | 86 | |
---|
[30] | 87 | answersDiv.answerCount = 1; |
---|
| 88 | answersDiv.clicked = null; |
---|
[53] | 89 | |
---|
[30] | 90 | switch (type) { |
---|
| 91 | case 'mc': |
---|
| 92 | answersDiv.innerHTML = ""; |
---|
[32] | 93 | if (answers != null) |
---|
| 94 | { |
---|
| 95 | for (var i = 1; i < answers.length; i++) |
---|
| 96 | { |
---|
| 97 | addOption(numQ, answers[i]); |
---|
| 98 | } |
---|
| 99 | } |
---|
| 100 | else |
---|
| 101 | addOption(numQ); |
---|
[53] | 102 | |
---|
[30] | 103 | break; |
---|
| 104 | case 'text': |
---|
| 105 | answersDiv.innerHTML = ""; |
---|
| 106 | break; |
---|
| 107 | case 'int': |
---|
| 108 | answersDiv.innerHTML = ""; |
---|
[53] | 109 | |
---|
[30] | 110 | //min max |
---|
[32] | 111 | if (answers != null) |
---|
| 112 | minMax(numQ, answers[1], answers[2]); |
---|
| 113 | else |
---|
| 114 | minMax(numQ); |
---|
[30] | 115 | break; |
---|
| 116 | case 'checkboxes': |
---|
[32] | 117 | answersDiv.innerHTML = ""; |
---|
| 118 | if (answers != null) |
---|
| 119 | { |
---|
| 120 | for (var i = 1; i < answers.length; i++) |
---|
| 121 | { |
---|
| 122 | addOption(numQ, answers[i]); |
---|
| 123 | } |
---|
| 124 | } |
---|
| 125 | else |
---|
| 126 | addOption(numQ); |
---|
[30] | 127 | break; |
---|
| 128 | case 'scale': |
---|
| 129 | answersDiv.innerHTML = ""; |
---|
| 130 | //what scale (min max incr) |
---|
[32] | 131 | if (answers != null) |
---|
| 132 | minMaxIncr(numQ, answers[1], answers[2], answers[3]); |
---|
| 133 | else |
---|
| 134 | minMaxIncr(numQ); |
---|
[30] | 135 | break; |
---|
| 136 | default: |
---|
| 137 | break; |
---|
[11] | 138 | } |
---|
[30] | 139 | |
---|
| 140 | } |
---|
[53] | 141 | |
---|
[37] | 142 | function handleAnswerChange(questionNumber) |
---|
| 143 | { |
---|
| 144 | removeQuestionID(questionNumber); |
---|
| 145 | } |
---|
[53] | 146 | |
---|
[37] | 147 | function removeQuestionID(questionNumber) |
---|
| 148 | { |
---|
| 149 | /* When type changes, remove question ID, because question changes */ |
---|
| 150 | var questionIDInput = document.getElementById("questionID" + questionNumber); |
---|
| 151 | if (questionIDInput != null) |
---|
| 152 | { |
---|
| 153 | var questionsDiv = document.getElementById("questionsDiv"); |
---|
| 154 | questionsDiv.removeChild(questionIDInput); |
---|
| 155 | } |
---|
| 156 | |
---|
| 157 | } |
---|
[53] | 158 | |
---|
| 159 | |
---|
[32] | 160 | function addOption(questionNumber, optionStr) |
---|
[30] | 161 | { |
---|
| 162 | var answersDiv = document.getElementById("answersDiv" + questionNumber); |
---|
| 163 | var answerCount = answersDiv.answerCount; |
---|
| 164 | var answerDiv = document.createElement("div"); |
---|
[53] | 165 | |
---|
[32] | 166 | if (optionStr == null) |
---|
| 167 | var optionStr = "Option " + answerCount; |
---|
[53] | 168 | |
---|
| 169 | |
---|
[30] | 170 | answerDiv.className = "answerDiv"; |
---|
[53] | 171 | |
---|
[30] | 172 | var htmlStr = "<input type='text' name='q" + |
---|
[37] | 173 | questionNumber + "ans" + answerCount + "' onchange='handleAnswerChange(" + questionNumber + ")' value='" + optionStr + "' />"; |
---|
[53] | 174 | |
---|
[30] | 175 | if (answersDiv.clicked == null) |
---|
[11] | 176 | { |
---|
[30] | 177 | htmlStr += "<input type='button' id='addOpt'" |
---|
| 178 | + " class='surveyButton' onclick='addOption(" + questionNumber + ")' value='Add Option' />" + |
---|
| 179 | "<input type='button' class='surveyButton' onclick='removeOption(" + questionNumber + ")' value='x' />"; |
---|
[53] | 180 | |
---|
[30] | 181 | answersDiv.clicked = true; |
---|
[25] | 182 | } |
---|
[53] | 183 | |
---|
[30] | 184 | answerDiv.innerHTML = htmlStr; |
---|
[53] | 185 | |
---|
[30] | 186 | answerDiv.prev = answersDiv.lastAnswer; //singly linked list |
---|
| 187 | answersDiv.lastAnswer = answerDiv; |
---|
[53] | 188 | |
---|
[30] | 189 | answersDiv.appendChild(answerDiv); |
---|
[49] | 190 | answersDiv.answerCount++; |
---|
[53] | 191 | |
---|
[37] | 192 | handleAnswerChange(questionNumber); |
---|
[17] | 193 | } |
---|
[53] | 194 | |
---|
[30] | 195 | function removeOption(questionNumber) |
---|
[17] | 196 | { |
---|
[30] | 197 | var answersDiv = document.getElementById("answersDiv" + questionNumber); |
---|
[53] | 198 | |
---|
[30] | 199 | if (answersDiv.lastAnswer.prev != null) |
---|
| 200 | { |
---|
| 201 | answersDiv.removeChild(answersDiv.lastAnswer); |
---|
| 202 | answersDiv.lastAnswer = answersDiv.lastAnswer.prev; |
---|
| 203 | answersDiv.answerCount--; |
---|
| 204 | } |
---|
[53] | 205 | |
---|
[37] | 206 | handleAnswerChange(questionNumber); |
---|
[11] | 207 | } |
---|
[53] | 208 | |
---|
[32] | 209 | function minMax(questionNumber, min, max) |
---|
[20] | 210 | { |
---|
[32] | 211 | if (min == null) |
---|
| 212 | var min = ''; |
---|
| 213 | if (max == null) |
---|
| 214 | var max = ''; |
---|
[53] | 215 | |
---|
[30] | 216 | var answersDiv = document.getElementById("answersDiv" + questionNumber); |
---|
[53] | 217 | |
---|
[30] | 218 | var answerDiv = document.createElement("div"); |
---|
[53] | 219 | |
---|
[30] | 220 | answerDiv.className = "answerDiv"; |
---|
[53] | 221 | answerDiv.innerHTML = "<label for='min'>Min</label><input type='text' class='intBox' onchange='checkInt(this)' value='" + min + "' name='q" + questionNumber + "ans1' />" + |
---|
| 222 | "<label for='max'>Max</label><input type='text' class='intBox' onchange='checkInt(this)' value='" + max + "' name='q" + questionNumber + "ans2' />"; |
---|
| 223 | |
---|
[30] | 224 | answersDiv.appendChild(answerDiv); |
---|
| 225 | } |
---|
[53] | 226 | |
---|
[32] | 227 | function minMaxIncr(questionNumber, left, right, incr) |
---|
[30] | 228 | { |
---|
[32] | 229 | if (left == null) |
---|
| 230 | var left = ''; |
---|
| 231 | if (right == null) |
---|
| 232 | var right = ''; |
---|
| 233 | if (incr == null) |
---|
| 234 | var incr = ''; |
---|
[53] | 235 | |
---|
[30] | 236 | var answersDiv = document.getElementById("answersDiv" + questionNumber); |
---|
[53] | 237 | |
---|
[30] | 238 | var answerDiv = document.createElement("div"); |
---|
| 239 | answerDiv.className = "answerDiv"; |
---|
[37] | 240 | answerDiv.innerHTML = "<label>Left label</label><input type='text' value='" + left + "' onchange='handleAnswerChange(" + questionNumber + ")' name='q" + questionNumber + "ans1' />" + |
---|
| 241 | "<label>Right label</label><input type='text' value='" + right + "' onchange='handleAnswerChange(" + questionNumber + ")' name='q" + questionNumber + "ans2' />" + |
---|
[53] | 242 | "<label>Scale count</label><input type='text' class='intBox' value='" + incr + "' onblur='checkInt(this)' onchange='handleAnswerChange(" + questionNumber + ")' name='q" + questionNumber + "ans3' />" + |
---|
[30] | 243 | "<div id='inputCheckFeedback'" + questionNumber + ""; |
---|
[53] | 244 | |
---|
[30] | 245 | answersDiv.appendChild(answerDiv); |
---|
| 246 | } |
---|
[53] | 247 | |
---|
| 248 | |
---|
[30] | 249 | function addQuestion(title, description) |
---|
| 250 | { |
---|
| 251 | var questionsDiv = document.getElementById('questionsDiv'); |
---|
| 252 | var newQuestion = getNewQuestion(title, description); |
---|
[53] | 253 | |
---|
[19] | 254 | |
---|
[30] | 255 | newQuestion.prev = document.lastQuestion; |
---|
| 256 | document.lastQuestion = newQuestion; |
---|
[19] | 257 | |
---|
[30] | 258 | questionsDiv.appendChild(newQuestion); |
---|
| 259 | questionCount++; |
---|
| 260 | } |
---|
[53] | 261 | |
---|
[30] | 262 | function removeLastQuestion() |
---|
[19] | 263 | { |
---|
[30] | 264 | var questionsDiv = document.getElementById('questionsDiv'); |
---|
[53] | 265 | |
---|
[30] | 266 | if (document.lastQuestion.prev != null) |
---|
| 267 | { |
---|
| 268 | questionsDiv.removeChild(document.lastQuestion); |
---|
| 269 | document.lastQuestion = document.lastQuestion.prev; |
---|
| 270 | questionCount--; |
---|
| 271 | } |
---|
| 272 | else |
---|
| 273 | { |
---|
| 274 | // do nothing |
---|
| 275 | } |
---|
[19] | 276 | } |
---|
[53] | 277 | |
---|
[30] | 278 | function save(surveyID) |
---|
[24] | 279 | { |
---|
[53] | 280 | if (checksPassed()) |
---|
| 281 | { |
---|
| 282 | var form = document.getElementById('survey'); |
---|
| 283 | var questionsDiv = document.getElementById('questionsDiv'); |
---|
| 284 | form.action = "surveycreation.php"; |
---|
| 285 | |
---|
| 286 | /* extra time stamp */ |
---|
| 287 | var date = new Date(); |
---|
| 288 | var minutes = date.getUTCMinutes(); |
---|
| 289 | if (minutes < 10) |
---|
| 290 | minutes = "0" + minutes; |
---|
| 291 | var timeStamp = date.getHours() + ":" + minutes; |
---|
| 292 | var timeStampInput = document.createElement("input"); |
---|
| 293 | timeStampInput.name = "timeStamp"; |
---|
| 294 | timeStampInput.value = timeStamp; |
---|
| 295 | timeStampInput.type = "hidden"; |
---|
| 296 | |
---|
| 297 | var surveyIDInput = document.createElement("input"); |
---|
| 298 | surveyIDInput.name = "surveyID"; |
---|
| 299 | surveyIDInput.value = surveyID; |
---|
| 300 | surveyIDInput.type = "hidden"; |
---|
| 301 | |
---|
| 302 | questionsDiv.appendChild(timeStampInput); |
---|
| 303 | questionsDiv.appendChild(surveyIDInput); |
---|
| 304 | form.submit(); |
---|
| 305 | } |
---|
[30] | 306 | } |
---|
[53] | 307 | |
---|
[50] | 308 | function selectAll(input) |
---|
| 309 | { |
---|
| 310 | input.select(); |
---|
| 311 | } |
---|
[53] | 312 | |
---|
| 313 | /* --- input checking --- */ |
---|
| 314 | function checksPassed() |
---|
| 315 | { |
---|
| 316 | var form = document.getElementById('survey'); |
---|
| 317 | |
---|
| 318 | for (var i = 0; i < form.length; i++) |
---|
| 319 | { |
---|
| 320 | if (form.elements[i].checkPassed == 'no') |
---|
| 321 | return false; |
---|
| 322 | } |
---|
| 323 | return true; |
---|
| 324 | } |
---|
| 325 | |
---|
| 326 | function checkInt(input) |
---|
| 327 | { |
---|
| 328 | input.style.borderWidth = '1px' ; |
---|
| 329 | var value = input.value; |
---|
| 330 | if (isNaN(value)) |
---|
| 331 | { |
---|
| 332 | input.style.borderColor = 'red'; |
---|
| 333 | input.checkPassed = 'no'; |
---|
| 334 | } |
---|
| 335 | else |
---|
| 336 | { |
---|
[59] | 337 | input.style.border = '1px solid #888;'; |
---|
[53] | 338 | input.checkPassed = null; |
---|
| 339 | } |
---|
| 340 | } |
---|
[54] | 341 | |
---|
[11] | 342 | </script> |
---|
| 343 | <?php |
---|
| 344 | } |
---|
| 345 | |
---|
[29] | 346 | private function surveyHead() { |
---|
[24] | 347 | ?><div id="surveyHead"> |
---|
| 348 | <?php |
---|
[29] | 349 | $this->titleBox(); |
---|
| 350 | $this->saveSurvey(); |
---|
| 351 | $this->descriptionBox(); |
---|
[50] | 352 | $this->surveyLink(); |
---|
[24] | 353 | ?></div> |
---|
| 354 | <?php |
---|
| 355 | } |
---|
| 356 | |
---|
[29] | 357 | private function titleBox() { |
---|
| 358 | if (isset($this->survey->title)) |
---|
| 359 | $value = $this->survey->title; |
---|
| 360 | else |
---|
| 361 | $value = 'Untitled Survey'; |
---|
[11] | 362 | ?> |
---|
[64] | 363 | <input type="text" id="surveyTitle" class="titleBox" name="surveyTitle" value="<?php echo $value; ?>" onblur="handleBlur(this)" onfocus="handleFocus(this)" /> |
---|
[11] | 364 | <?php |
---|
[10] | 365 | } |
---|
[11] | 366 | |
---|
[29] | 367 | private function saveSurvey() { |
---|
| 368 | if (isset($this->timeStamp)) |
---|
| 369 | echo "<div id='timeStamp'>Last saved " . $this->timeStamp . '</div>'; |
---|
| 370 | if (isset($this->survey->id)) |
---|
| 371 | $id = $this->survey->id; |
---|
| 372 | else |
---|
| 373 | $id = null; |
---|
[24] | 374 | ?> |
---|
[29] | 375 | <input id="surveySaveButton" type="button" onclick="save('<?php echo $id; ?>')" class='surveyButton' value='Save' /> |
---|
[24] | 376 | <?php |
---|
| 377 | } |
---|
| 378 | |
---|
[29] | 379 | private function descriptionBox() { |
---|
| 380 | if (isset($this->survey->description)) |
---|
| 381 | $value = $this->survey->description; |
---|
| 382 | else |
---|
| 383 | $value = 'Write a helpful description for this survey here.'; |
---|
[11] | 384 | ?> |
---|
[64] | 385 | <textarea id="surveyDescription" class="descriptionBox" name="surveyDescription" onblur="handleBlur(this)" onfocus="handleFocus(this)"><?php echo $value; ?></textarea> |
---|
[11] | 386 | <?php |
---|
[10] | 387 | } |
---|
[53] | 388 | |
---|
[50] | 389 | private function surveyLink() { |
---|
[53] | 390 | if (isset($this->survey)) { |
---|
| 391 | $surveyID = $this->survey->id; |
---|
| 392 | |
---|
| 393 | $link = $_SERVER['HTTP_HOST'] . dirname($_SERVER['PHP_SELF']) . |
---|
[50] | 394 | '/survey.php?id=' . $surveyID; |
---|
[53] | 395 | ?> |
---|
| 396 | <input type="text" value="<?php echo $link; ?>" id="surveyLink" onclick="selectAll(this)"> |
---|
| 397 | <?php |
---|
[50] | 398 | } |
---|
| 399 | } |
---|
[11] | 400 | |
---|
[29] | 401 | private function questionCreationForm() { |
---|
[17] | 402 | ?> |
---|
| 403 | <div id='questionsDiv'> |
---|
| 404 | </div> |
---|
| 405 | <?php |
---|
[30] | 406 | if (isset($this->survey)) { |
---|
[32] | 407 | foreach ($this->survey->questions as $numQ => $question) { |
---|
[30] | 408 | ?> |
---|
[36] | 409 | <script type="text/javascript"> |
---|
[32] | 410 | var answers = new Array(); |
---|
| 411 | <?php |
---|
| 412 | /* Put all answers in js array */ |
---|
| 413 | foreach ($question->answers as $numA => $answer) { |
---|
| 414 | echo "answers[" . $numA . "] = '" . $answer . "'; "; |
---|
| 415 | } |
---|
| 416 | ?> |
---|
[53] | 417 | |
---|
[32] | 418 | addQuestion('<?php echo $question->title; ?>', '<?php echo $question->description; ?>'); |
---|
[53] | 419 | |
---|
[32] | 420 | var select = document.getElementById('<?php echo $numQ; ?>'); |
---|
| 421 | var type = '<?php echo $question->type; ?>'; |
---|
| 422 | |
---|
| 423 | for (var i = 0; i < select.options.length; i++) { |
---|
| 424 | if (select.options[i].value == type) |
---|
| 425 | { |
---|
| 426 | select.options[i].selected = true; |
---|
| 427 | handleType(select, answers) |
---|
| 428 | break; |
---|
| 429 | } |
---|
[36] | 430 | } |
---|
[53] | 431 | |
---|
| 432 | |
---|
[36] | 433 | /* questionID stuff */ |
---|
| 434 | var questionIDInput = document.createElement("input"); |
---|
| 435 | questionIDInput.id = "questionID<?php echo $numQ; ?>"; |
---|
| 436 | questionIDInput.name = "questionID<?php echo $numQ; ?>"; |
---|
| 437 | questionIDInput.value = "<?php echo $question->id; ?>"; |
---|
| 438 | questionIDInput.type = "hidden"; |
---|
[53] | 439 | |
---|
[36] | 440 | document.getElementById("questionsDiv").appendChild(questionIDInput); |
---|
[32] | 441 | |
---|
[30] | 442 | </script> |
---|
| 443 | <?php |
---|
| 444 | } |
---|
| 445 | } else { |
---|
| 446 | ?> |
---|
| 447 | <script type="text/javascript"> addQuestion();</script> |
---|
| 448 | <?php |
---|
| 449 | } |
---|
[11] | 450 | } |
---|
| 451 | |
---|
| 452 | private static function addQuestionButton() { |
---|
[17] | 453 | ?> |
---|
| 454 | <input id="addQuestionButton" type="button" onclick="addQuestion()" value="Add New Question" class="surveyButton" /> |
---|
| 455 | <?php |
---|
[10] | 456 | } |
---|
| 457 | |
---|
[19] | 458 | private static function removeLastQuestionButton() { |
---|
| 459 | ?> |
---|
| 460 | <input type="button" onclick="removeLastQuestion()" value="x" class="surveyButton" /> |
---|
| 461 | <?php |
---|
| 462 | } |
---|
| 463 | |
---|
[10] | 464 | } |
---|
| 465 | ?> |
---|