Changeset 17

Timestamp:

07/15/11 20:16:31 (14 years ago)

Author:

fpvanagthoven

Message:

Multiple choice option functional.

Location:

Dev/trunk

Files:

• classes/NewSurveyButton.php (modified) (1 diff)
• classes/SurveyCreationTool.php (modified) (7 diffs)
• css/style.css (modified) (3 diffs)
• submitsurvey.php (modified) (1 diff)

Dev/trunk/classes/NewSurveyButton.php

@@ -17 +17 @@
         <form action="surveycreation.php" method="post">
 
-            <input id="newSurveyButton" type="submit" name="btnlogin" value="Create new survey" class="button" />
+            <input id="newSurveyButton" type="submit" name="btnlogin" value="Create new survey" class="surveyButton" />
 
         </form>

Dev/trunk/classes/SurveyCreationTool.php

@@ -12 +12 @@
         SurveyCreationTool::javascript();
         ?>
+
         <div id="surveyCreation"><form action="submitsurvey.php" method="post">
                 <?php
@@ -17 +18 @@
                 SurveyCreationTool::descriptionBox();
                 SurveyCreationTool::questionCreationForm();
+                SurveyCreationTool::addQuestionButton();
                 SurveyCreationTool::submitButton();
                 ?></form></div>
@@ -25 +27 @@
         ?>
         <script type="text/javascript">
-                                                                                    
+            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 + "' size='30' value='Untitled Question' /></td></tr>" +
+                    "<tr><td><label for='questionDescription'>Description</label></td>" + 
+                    "<td><input type='text' class='questionDescription' name='questionDescription" + questionCount + "' 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='multipleChoice'>Multiple choice</option>" +
+                    "<option value='checkboxes'>Checkboxes</option>" +
+                    "<option value='scale'>Scale</option>" +
+                    "<option value='grid'>Grid</option>" +
+                    "</select></td></tr>" +
+                    "</table>" +
+                    "<div id='answersDiv" + questionCount + "'></div>" +
+                    "</div>";
+                                                                        
+                questionDiv.innerHTML = htmlStr;
+                                                                        
+                return questionDiv;
+            }
+                                                                            
             function handleFocus(input)
             {
@@ -35 +66 @@
                 }
             }
-            
+                                                                                                            
             function handleBlur(input)
-            {
+            {        
+                var surveyTitle = document.getElementById('surveyTitle');
+                var surveyDescription = document.getElementById('surveyDescription');
+                                                                                            
                 if (input.value == "")
                 {
                     input.style.color = "gray";
-                    input.value = "Untitled Survey";
                     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 'multipleChoice':
+                        answersDiv.innerHTML = "";
+                        addOption(select.id);
+                                                
+                        break;
+                    case 'text':
+                        answersDiv.innerHTML = "";
+                        
+                        break;
+                    case 'checkboxes':
+                        answersDiv.innerHTML = "";                                                
+                        break;
+                    case 'scale':
+                        answersDiv.innerHTML = "";                                                
+                        break;
+                    case 'grid':
+                        answersDiv.innerHTML = "";                                                
+                        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' />";
+                    answersDiv.clicked = true;
+                }
+                                               
+                answerDiv.innerHTML = htmlStr;
+                                               
+                answersDiv.appendChild(answerDiv);
+                answersDiv.answerCount++;
+            }
+                                            
+                                                         
+            function addQuestion()
+            {
+                var questionsDiv = document.getElementById('questionsDiv');
+                var newQuestion = getNewQuestion();
+                                                                        
+                questionsDiv.appendChild(newQuestion);
+                questionCount++;
+            }
+                                                                                                                                                                                    
         </script>
         <?php
@@ -52 +160 @@
     private static function titleBox() {
         ?>
-        <input type="text" name="surveyTitle" value="Untitled Survey" id="surveyTitle" size="30" onblur="handleBlur(this)" onfocus="handleFocus(this)" />
+        <input type="text" id="surveyTitle" name="surveyTitle" value="Untitled Survey" size="30" onblur="handleBlur(this)" onfocus="handleFocus(this)" />
         <?php
     }
@@ -58 +166 @@
     private static function descriptionBox() {
         ?>
-        <textarea id="surveyDescription" rows="3" cols="80" name="surveyDescription">Write a helpful description for this survey here.</textarea>
+        <textarea id="surveyDescription" rows="3" cols="80" name="surveyDescription" onblur="handleBlur(this)" onfocus="handleFocus(this)">Write a helpful description for this survey here.</textarea>
         <?php
     }
 
     private static function questionCreationForm() {
-
-        SurveyCreationTool::addQuestionButton();
+        ?>
+        <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
     }
 
@@ -74 +187 @@
         ?>
         <input type="submit" name="submitSurvey" 
-               value="Submit Survey!" id="submitSurvey"/>
+               value="Submit Survey!" class="surveyButton" id="submitSurvey"/>
         <?php
     }

Dev/trunk/css/style.css

@@ -25 +25 @@
 #wrapper {
     width: 80%;
+    min-width: 570px;
     margin: auto;
 }
@@ -96 +97 @@
 }
 
+#questionsDiv {
+    margin-top: 2em;
+}
+
 #submitSurvey {
     display: block;
@@ -102 +107 @@
     margin-top: 2em;
 }
+
+#addQuestionButton {
+    width: 20em;
+}
+
+#addOpt {
+    margin-left: 1em;
+}
+
+.surveyButton {
+    margin-top: 1em;
+    color: gray;
+    background-color: #fff;
+    border: 1px solid #ddd;
+    -moz-border-radius: 8px;
+    border-radius: 8px;
+    -moz-box-shadow: 1px 1px 1px #555;
+    -webkit-box-shadow: 1px 1px 1px #555;
+    box-shadow: 1px 1px 1px #555;
+}
+
+.surveyButton:hover {
+    background-color: white;
+    color: #333;
+    border-color: deepskyblue;
+}
+
+.surveyButton:active {
+    border-style: inset;
+    border-color: orange;
+}
+
+.question {  
+    margin-top: 1em;
+}
+
+.questionTable td{
+    width: 8em;
+}
+
+.questionTable th{
+    text-align: left;
+}
+
+label {
+    font-size: small;
+    font-weight: bold;
+    color: gray;
+}

Dev/trunk/submitsurvey.php

@@ -42 +42 @@
 }
 
+var_dump($_POST);
+
 ?>