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

<?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 timeStamp = date.getHours() + ":" + date.getUTCMinutes();
                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
    }

}
?>