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

<?php

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

    public function __construct($survey = null, $timeStamp = null) {
        SurveyCreationTool::javascript();
        ?>

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

    private static function javascript() {
        ?>
        <script type="text/javascript">
            /* autosave every 3 minutes */
        setTimeout("save()", 180000);
                    
        var questionCount = 1;          
                                                                                                                                                            
        function getNewQuestion()
        {
            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='Untitled Question' /></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='Write a question description here.' /></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)
        {
            if (input.clicked == null)
            {
                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)
        {
            var type = select.valueOf().value;
            var answersDiv = document.getElementById("answersDiv" +  select.id);
            answersDiv.answerCount = 1;
            answersDiv.clicked = null;
                                                                                                
            switch (type) {
                case 'mc':
                    answersDiv.innerHTML = "";
                    addOption(select.id);
                                                                                                                                
                    break;
                case 'text':
                    answersDiv.innerHTML = "";
                    break;
                case 'int':    
                    answersDiv.innerHTML = "";
                    //min max
                    minMax(select.id);
                    break;
                case 'checkboxes':
                    answersDiv.innerHTML = "";  
                    addOption(select.id);
                    break;
                case 'scale':
                    answersDiv.innerHTML = ""; 
                    //what scale (min max incr)
                    minMaxIncr(select.id);
                    break;
                default:
                    break;
            }

        }
                                                                                                                            
                                                                                                                    
        function addOption(questionNumber)
        {        
            var answersDiv = document.getElementById("answersDiv" + questionNumber);
            var answerCount = answersDiv.answerCount;
            var answerDiv = document.createElement("div");
            answerDiv.className = "answerDiv";
                                                                                                                        
            var htmlStr = "<input type='text' name='q" + 
                questionNumber + "ans" + answerCount + "' value='Option " + answerCount + "' />";
                                                                                                
            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++;
        }
                                                            
        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--;
            }
        }
                                                                                    
        function minMax(questionNumber)
        {
            var answersDiv = document.getElementById("answersDiv" + questionNumber);
                                                                                       
            var answerDiv = document.createElement("div");
                                                        
            answerDiv.className = "answerDiv";
            answerDiv.innerHTML = "<label for='min'>Min</label><input type='text' name='q" + questionNumber + "ans1' />" +
                "<label for='max'>Max</label><input type='text' name='q" + questionNumber + "ans2' />";
                                                                                   
            answersDiv.appendChild(answerDiv);
        }  
                                                                                    
        function minMaxIncr(questionNumber)
        {
            var answersDiv = document.getElementById("answersDiv" + questionNumber);
                                                                                       
            var answerDiv = document.createElement("div");
            answerDiv.className = "answerDiv";
            answerDiv.innerHTML = "<label>Left label</label><input type='text' name='q" + questionNumber + "ans1' />" +
                "<label>Right label</label><input type='text' name='q" + questionNumber + "ans2' />" +
                "<label>Scale count</label><input type='text' name='q" + questionNumber + "ans3' />";
                                                                                   
            answersDiv.appendChild(answerDiv);
        }         
                                                                                                                                         
                                                                                                                                                 
        function addQuestion()
        {
            var questionsDiv = document.getElementById('questionsDiv');
            var newQuestion = getNewQuestion();
                                                                                

            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()
        {
            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";
                        
            questionsDiv.appendChild(timeStampInput);
            form.submit();
        }
                                                                                    
                                                                                                                                                                                                                                                                    
        </script>
        <?php
    }

    private static function surveyHead($timeStamp = null) {
        ?><div id="surveyHead">
        <?php
        SurveyCreationTool::titleBox();
        SurveyCreationTool::saveSurvey($timeStamp);
        SurveyCreationTool::descriptionBox();
        ?></div>
        <?php
    }

    private static function titleBox() {
        ?>
        <input type="text" id="surveyTitle" name="surveyTitle" value="Untitled Survey" onblur="handleBlur(this)" onfocus="handleFocus(this)" />
        <?php
    }

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

    private static function descriptionBox() {
        ?>
        <textarea id="surveyDescription" name="surveyDescription" onblur="handleBlur(this)" onfocus="handleFocus(this)">Write a helpful description for this survey here.</textarea>
        <?php
    }

    private static function questionCreationForm() {
        ?>
        <div id='questionsDiv'>
        </div>
        <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
    }

    private static function submitbutton() {
        ?>
        <input type="submit" name="submitSurvey" 
               value="Submit Survey!" class="surveyButton" id="submitSurvey"/>
        <?php
    }

}
?>