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

<?php

/**
 * Description of SurveyTool
 *
 * SurveyTool is where the survey can be created.
 * 
 */
class SurveyCreationTool {

    private $survey;
    private $timeStamp;

    public function __construct($survey = null, $timeStamp = null) {
        $this->survey = $survey;
        $this->timeStamp = $timeStamp;

        if (isset($this->survey->id))
            SurveyCreationTool::javascript($this->survey->id);
        else
            SurveyCreationTool::javascript();
        ?>

        <div id="surveyCreation"><form id="survey" action="surveycreation.php" method="post">
                <?php
                $this->surveyHead();
                $this->questionCreationForm();
                SurveyCreationTool::addQuestionButton();
                SurveyCreationTool::removeLastQuestionButton();
                ?></form></div>
        <?php
    }

    private static function javascript($id = null) {
        ?>
        <script type="text/javascript">
            /* autosave every 3 minutes */
            setTimeout("save('<?php echo $id; ?>')", 180000);
                                                                                                                                                                                                            
            var questionCount = 1;          
                                                                                                                                                                                                                                                                                                                                                    
            function getNewQuestion(title, description)
            {
                if (title == null)
                    var title = 'Untitled Question';
                                                                                                                                                
                if (description != null)
                    var description = description;
                else
                    var description = 'Write a question description here.';
                                                                                                                                                                    
                var questionDiv = document.createElement("div");
                var htmlStr = 
                    "<div id='question" + questionCount + "' class='question'>" +
                    "<table class='questionTable'>" +
                    "<th>Question " + questionCount + "</th>" +
                    "<tr><td><label for='questionTitle'>Title</label></td>" + 
                    "<td><input type='text' class='questionTitle' name='questionTitle" + questionCount + "' onfocus='handleFocus(this)' size='30' value='" + title + "' /></td></tr>" +
                    "<tr><td><label for='questionDescription'>Description</label></td>" + 
                    "<td><input type='text' class='questionDescription' name='questionDescription" + questionCount + "' onfocus='handleFocus(this)' size='60' value='" + description + "' /></td>" +
                    "<tr><td><label for='questionType'>Answer type</label></td>" + 
                    "<td><select id='" + questionCount + "' name='questionType" + questionCount + "' onchange='handleType(this)'><br />"+
                    "<option value='text' selected='selected'>Text</option>" +
                    "<option value='int'>Integer</option>" +
                    "<option value='mc'>Multiple choice</option>" +
                    "<option value='checkboxes'>Checkboxes</option>" +
                    "<option value='scale'>Scale</option>" +
                    "</select></td></tr>" +
                    "</table>" +
                    "<div id='answersDiv" + questionCount + "' class='answersDiv'></div>" +
                    "</div>";
                                                                                                                                                                                                                                                                                                                                                
                questionDiv.innerHTML = htmlStr;
                                                                                                                                                                                                                                                                                                                                                
                return questionDiv;
            }
                                                                                                                                                                                                                                                                                                                                                    
            function handleFocus(input)
            {
                /* this is such ugly code it makes me sad */
                if (input.clicked == null && 
                    (input.value == "Untitled Survey"
                    || input.value == "Write a helpful description for this survey here."
                    || input.value == "Write a question description here."
                    || input.value == "Untitled Question"))
                {
                    input.value = "";
                    input.style.color = "black";   
                    input.clicked = true; 
                }
            }
                                                                                                                                                                                                                                                                                                                                                                                    
            function handleBlur(input)
            {        
                var surveyTitle = document.getElementById('surveyTitle');
                var surveyDescription = document.getElementById('surveyDescription');
                                                                                                                                                                                                                                                                                                                                                                    
                if (input.value == "")
                {
                    input.style.color = "gray";
                    input.clicked = null;
                                                                                                                                                                                                                                                                                                                                                                                            
                    if (input == surveyTitle)
                    {
                        input.value = "Untitled Survey";
                    }
                    else if (input == surveyDescription)
                    {
                        input.value = "Write a helpful description for this survey here.";
                    }
                }                           
            }
                                                                                                                                                                                                                                                                                                                                    
            function handleType(select, answers)
            {
                var numQ = select.id; // questionNumber
                var type = select.valueOf().value;
                var answersDiv = document.getElementById("answersDiv" + numQ );
                                                
                removeQuestionID(numQ);
                                                
                answersDiv.answerCount = 1;
                answersDiv.clicked = null;
                                                                                                                                                                                                                                                                                        
                switch (type) {
                    case 'mc':
                        answersDiv.innerHTML = "";
                        if (answers != null)
                        {
                            for (var i = 1; i < answers.length; i++)
                            {
                                addOption(numQ, answers[i]);
                            }
                        }
                        else
                            addOption(numQ);
                                                                                                                                                                                                                                                                                                                        
                        break;
                    case 'text':
                        answersDiv.innerHTML = "";
                        break;
                    case 'int':    
                        answersDiv.innerHTML = "";
                                                                                                                                                
                        //min max
                        if (answers != null)
                            minMax(numQ, answers[1], answers[2]);
                        else
                            minMax(numQ);
                        break;
                    case 'checkboxes':
                        answersDiv.innerHTML = "";
                        if (answers != null)
                        {
                            for (var i = 1; i < answers.length; i++)
                            {
                                addOption(numQ, answers[i]);
                            }
                        }
                        else
                            addOption(numQ);
                        break;
                    case 'scale':
                        answersDiv.innerHTML = ""; 
                        //what scale (min max incr)
                        if (answers != null)
                            minMaxIncr(numQ, answers[1], answers[2], answers[3]);
                        else
                            minMaxIncr(numQ);
                        break;
                    default:
                        break;
                }

            }
                                            
            function handleAnswerChange(questionNumber)
            {
                removeQuestionID(questionNumber);
            }
                                            
            function removeQuestionID(questionNumber)
            {
                /* When type changes, remove question ID, because question changes */
                var questionIDInput = document.getElementById("questionID" + questionNumber);
                if (questionIDInput != null)
                {
                    var questionsDiv = document.getElementById("questionsDiv");
                    questionsDiv.removeChild(questionIDInput);
                }

            }
                                                     
                                                                                                                                                                                                                                                                                                            
            function addOption(questionNumber, optionStr)
            {        
                var answersDiv = document.getElementById("answersDiv" + questionNumber);
                var answerCount = answersDiv.answerCount;
                var answerDiv = document.createElement("div");
                                                                                
                if (optionStr == null)
                    var optionStr = "Option " + answerCount;
                                                                                
                                                                               
                answerDiv.className = "answerDiv";
                                                                                                                                                                                                                                                                                                                
                var htmlStr = "<input type='text' name='q" + 
                    questionNumber + "ans" + answerCount + "' onchange='handleAnswerChange(" + questionNumber + ")' value='" + optionStr + "' />";
                                                                                                                                                                                                                                                                                        
                if (answersDiv.clicked == null)
                {
                    htmlStr += "<input type='button' id='addOpt'"
                        + " class='surveyButton' onclick='addOption(" + questionNumber + ")' value='Add Option' />" +
                        "<input type='button' class='surveyButton' onclick='removeOption(" + questionNumber + ")' value='x' />";
                                                                                                                                                                                                                                                            
                    answersDiv.clicked = true;
                }
                                                                                                                                                                                                                                                                                                                       
                answerDiv.innerHTML = htmlStr;
                                                                                                                                                                                                                                                        
                answerDiv.prev = answersDiv.lastAnswer; //singly linked list
                answersDiv.lastAnswer = answerDiv;
                                                                                                                                                                                                                                                                                                                       
                answersDiv.appendChild(answerDiv);
                answersDiv.answerCount++;
                                                
                handleAnswerChange(questionNumber);
            }
                                                                                                                                                                                                                                                    
            function removeOption(questionNumber)
            {
                var answersDiv = document.getElementById("answersDiv" + questionNumber);
                                                                                                                                                                                                                                                       
                if (answersDiv.lastAnswer.prev != null)
                {
                    answersDiv.removeChild(answersDiv.lastAnswer);
                    answersDiv.lastAnswer = answersDiv.lastAnswer.prev;
                    answersDiv.answerCount--;
                }
                                                
                handleAnswerChange(questionNumber);
            }
                                                                                                                                                                                                                                                                            
            function minMax(questionNumber, min, max)
            {
                if (min == null)
                    var min = '';
                if (max == null)
                    var max = '';
                                                                                                                                        
                var answersDiv = document.getElementById("answersDiv" + questionNumber);
                                                                                                                                                                                                                                                                               
                var answerDiv = document.createElement("div");
                                                                                                                                                                                                                                                
                answerDiv.className = "answerDiv";
                answerDiv.innerHTML = "<label for='min'>Min</label><input type='text' class='intBox' onchange='checkInt(this)' value='" + min + "' name='q" + questionNumber + "ans1' />" +
                    "<label for='max'>Max</label><input type='text' class='intBox' onchange='checkInt(this)' value='" + max + "' name='q" + questionNumber + "ans2' />";
                                                                                                                                                                                                                                                                           
                answersDiv.appendChild(answerDiv);
            }  
                                                                                                                                                                                                                                                                            
            function minMaxIncr(questionNumber, left, right, incr)
            {
                if (left == null)
                    var left = '';
                if (right == null)
                    var right = '';
                if (incr == null)
                    var incr = '';
                                                                                        
                var answersDiv = document.getElementById("answersDiv" + questionNumber);
                                                                                                                                                                                                                                                                               
                var answerDiv = document.createElement("div");
                answerDiv.className = "answerDiv";
                answerDiv.innerHTML = "<label>Left label</label><input type='text' value='" + left + "' onchange='handleAnswerChange(" + questionNumber + ")' name='q" + questionNumber + "ans1' />" +
                    "<label>Right label</label><input type='text' value='" + right + "' onchange='handleAnswerChange(" + questionNumber + ")' name='q" + questionNumber + "ans2' />" +
                    "<label>Scale count</label><input type='text' class='intBox' value='" + incr + "' onblur='checkInt(this)' onchange='handleAnswerChange(" + questionNumber + ")' name='q" + questionNumber + "ans3' />" +
                    "<div id='inputCheckFeedback'" + questionNumber + "";
                                                                                                                                                                                                                                                                           
                answersDiv.appendChild(answerDiv);
            }         
                                                                                                                                                                                                                                                                                                                                 
                                                                                                                                                                                                                                                                                                                                         
            function addQuestion(title, description)
            {
                var questionsDiv = document.getElementById('questionsDiv');
                var newQuestion = getNewQuestion(title, description);
                                                                                                                                                                                                                                                                        

                newQuestion.prev = document.lastQuestion;
                document.lastQuestion = newQuestion;

                questionsDiv.appendChild(newQuestion);
                questionCount++;
            }
                                                                                                                                                                                                                                                                    
            function removeLastQuestion()
            {
                var questionsDiv = document.getElementById('questionsDiv');
                                                                                                                                                                                                                                                                        
                if (document.lastQuestion.prev != null)
                {
                    questionsDiv.removeChild(document.lastQuestion);
                    document.lastQuestion = document.lastQuestion.prev;
                    questionCount--;  
                }
                else
                {
                    // do nothing
                }               
            }
                                                                                                                                                                                                                                             
            function save(surveyID)
            {
                if (checksPassed())
                {
                    var form = document.getElementById('survey');
                    var questionsDiv = document.getElementById('questionsDiv');
                    form.action = "surveycreation.php";
                                                                                                                                                                                                                
                    /* extra time stamp */
                    var date = new Date();
                    var minutes = date.getUTCMinutes();
                    if (minutes < 10)
                        minutes = "0" + minutes;
                    var timeStamp = date.getHours() + ":" + minutes;
                    var timeStampInput = document.createElement("input");
                    timeStampInput.name = "timeStamp";
                    timeStampInput.value = timeStamp;
                    timeStampInput.type = "hidden";
                                                                                                                                                                    
                    var surveyIDInput = document.createElement("input");
                    surveyIDInput.name = "surveyID";
                    surveyIDInput.value = surveyID;
                    surveyIDInput.type = "hidden";
                                                                                                                                                                                             
                    questionsDiv.appendChild(timeStampInput);
                    questionsDiv.appendChild(surveyIDInput);
                    form.submit();
                }
            }
                                            
            function selectAll(input)
            {
                input.select();
            }
                                            
            /* --- input checking --- */
            function checksPassed()
            {
                var form = document.getElementById('survey');
                        
                for (var i = 0; i < form.length; i++)
                {
                    if (form.elements[i].checkPassed == 'no')
                        return false;
                }
                return true;
            }
                    
            function checkInt(input)
            {
                input.style.borderWidth = '1px' ;
                var value = input.value;
                if (isNaN(value))
                {
                    input.style.borderColor = 'red';
                    input.checkPassed = 'no';
                }
                else
                {
                    input.style.border = '1px solid #888;';
                    input.checkPassed = null;
                }
            }
                                                                                                                                                                                                                                                                                                                                                                                                                              
        </script>
        <?php
    }

    private function surveyHead() {
        ?><div id="surveyHead">
        <?php
        $this->titleBox();
        $this->saveSurvey();
        $this->descriptionBox();
        $this->surveyLink();
        ?></div>
        <?php
    }

    private function titleBox() {
        if (isset($this->survey->title))
            $value = $this->survey->title;
        else
            $value = 'Untitled Survey';
        ?>
        <input type="text" id="surveyTitle" name="surveyTitle" value="<?php echo $value ?>" onblur="handleBlur(this)" onfocus="handleFocus(this)" />
        <?php
    }

    private function saveSurvey() {
        if (isset($this->timeStamp))
            echo "<div id='timeStamp'>Last saved " . $this->timeStamp . '</div>';
        if (isset($this->survey->id))
            $id = $this->survey->id;
        else
            $id = null;
        ?>
        <input id="surveySaveButton" type="button" onclick="save('<?php echo $id; ?>')" class='surveyButton' value='Save' />
        <?php
    }

    private function descriptionBox() {
        if (isset($this->survey->description))
            $value = $this->survey->description;
        else
            $value = 'Write a helpful description for this survey here.';
        ?>
        <textarea id="surveyDescription" name="surveyDescription" onblur="handleBlur(this)" onfocus="handleFocus(this)"><?php echo $value; ?></textarea>
        <?php
    }

    private function surveyLink() {
        if (isset($this->survey)) {
            $surveyID = $this->survey->id;

            $link = $_SERVER['HTTP_HOST'] . dirname($_SERVER['PHP_SELF']) .
                    '/survey.php?id=' . $surveyID;
            ?>
            <input type="text" value="<?php echo $link; ?>" id="surveyLink" onclick="selectAll(this)">
            <?php
        }
    }

    private function questionCreationForm() {
        ?>
        <div id='questionsDiv'>
        </div>
        <?php
        if (isset($this->survey)) {
            foreach ($this->survey->questions as $numQ => $question) {
                ?>
                <script type="text/javascript">
                    var answers = new Array();
                <?php
                /* Put all answers in js array */
                foreach ($question->answers as $numA => $answer) {
                    echo "answers[" . $numA . "] = '" . $answer . "'; ";
                }
                ?>
                                                                                                                                                                    
                    addQuestion('<?php echo $question->title; ?>', '<?php echo $question->description; ?>');
                                                                                                                                                                                                                                                                    
                    var select = document.getElementById('<?php echo $numQ; ?>');
                    var type = '<?php echo $question->type; ?>';

                    for (var i = 0; i < select.options.length; i++) {
                        if (select.options[i].value == type)
                        {
                            select.options[i].selected = true;
                            handleType(select, answers)
                            break;
                        }
                    }      
                                                                                                    
                                                                                                    
                    /* questionID stuff */
                    var questionIDInput = document.createElement("input");
                    questionIDInput.id = "questionID<?php echo $numQ; ?>";
                    questionIDInput.name = "questionID<?php echo $numQ; ?>";
                    questionIDInput.value = "<?php echo $question->id; ?>";
                    questionIDInput.type = "hidden";
                                                                                                                                                                                                                                                     
                    document.getElementById("questionsDiv").appendChild(questionIDInput);

                </script>
                <?php
            }
        } else {
            ?>
            <script type="text/javascript"> addQuestion();</script>
            <?php
        }
    }

    private static function addQuestionButton() {
        ?>
        <input id="addQuestionButton" type="button" onclick="addQuestion()" value="Add New Question" class="surveyButton" />
        <?php
    }

    private static function removeLastQuestionButton() {
        ?>
        <input type="button" onclick="removeLastQuestion()" value="x" class="surveyButton" />
        <?php
    }

}
?>