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

Last change on this file since 56 was 54, checked in by fpvanagthoven, 14 years ago

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