Context Navigation

← Previous Change
Next Change →

Changeset 24 for Dev

Timestamp:

07/19/11 16:59:59 (14 years ago)

Author:

fpvanagthoven

Message:

Some styling. Survey will now autosave itself every 3 minutes. Autosave is not yet functional though.

Location:

Files:

: 3 edited

classes/SurveyCreationTool.php (modified) (14 diffs)
css/style.css (modified) (3 diffs)
surveycreation.php (modified) (2 diffs)

Legend:

: Unmodified
: Added
: Removed

Dev/trunk/classes/SurveyCreationTool.php

-                      r23
+                      r24
 class SurveyCreationTool {
     public function __construct() {
+    public function __construct($survey = null, $timeStamp = null) {
         SurveyCreationTool::javascript();
         ?>
         <div id="surveyCreation"><form action="submitsurvey.php" method="post">
+        <div id="surveyCreation"><form id="survey" action="submitsurvey.php" method="post">
                 <?php
+                SurveyCreationTool::titleBox();
+                SurveyCreationTool::descriptionBox();
+                SurveyCreationTool::surveyHead($timeStamp);
                 SurveyCreationTool::questionCreationForm();
                 SurveyCreationTool::addQuestionButton();
 …
         ?>
         <script type="text/javascript">
+            var questionCount = 1;
+            /* autosave every 3 minutes */
+            setTimeout("save()", 180000);
+            var questionCount = 1;
             function getNewQuestion()
+            {
 …
                     "<div id='answersDiv" + questionCount + "' class='answersDiv'></div>" +
                     "</div>";
                 questionDiv.innerHTML = htmlStr;
                 return questionDiv;
+            }
             function handleFocus(input)
+            {
 …
+                }
+            }
             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)
+                    {
 …
+                }
+            }
             function handleType(select)
+            {
 …
                 answersDiv.answerCount = 1;
                 answersDiv.clicked = null;
                 switch (type) {
                     case 'mc':
                         answersDiv.innerHTML = "";
                         addOption(select.id);
                         break;
                     case 'text':
 …
+            }
             function addOption(questionNumber)
+            {
 …
                 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)
+                {
 …
                         + " 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)
+                {
 …
+                }
+            }
             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";
 …
                     "<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;
 …
                 questionCount++;
+            }
             function removeLastQuestion()
+            {
                 var questionsDiv = document.getElementById('questionsDiv');
                 if (document.lastQuestion.prev != null)
+                {
 …
+                }
+            }
+            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" size="30" onblur="handleBlur(this)" onfocus="handleFocus(this)" />
+        <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" rows="3" cols="80" name="surveyDescription" onblur="handleBlur(this)" onfocus="handleFocus(this)">Write a helpful description for this survey here.</textarea>
+        <textarea id="surveyDescription" name="surveyDescription" onblur="handleBlur(this)" onfocus="handleFocus(this)">Write a helpful description for this survey here.</textarea>
         <?php
+    }

Dev/trunk/css/style.css

-                      r23
+                      r24
+}
+#surveyHead {
+    position: relative;
+    width: 100%;
+}
 #surveyTitle {
+    width: 20em;
     font-size: large;
     color: gray;
 …
 #surveyDescription {
     display: block;
+    width: 35em;
+    max-width: 35em;
     font-family: sans-serif;
     color: gray;
+}
+#timeStamp {
+    position: absolute;
+    color: gray;
+    font-size: small;
+    right: 6em;
+    top: 0;
+    line-height: 2.3em;
+}
+#surveySaveButton {
+    position: absolute;
+    top: 0;
+    right: 0;
+    width: 5em;
+}
 …
 .surveyButton {
+    color: gray;
+    color: #888;
+    font-weight: bold;
     background-color: #fff;
     border: 1px solid #ddd;
+    border: 2px solid #aaa;
     -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;
+    color: #555;
     border-color: deepskyblue;
+}

Dev/trunk/surveycreation.php

-                      r10
+                      r24
+<?php require 'classes/master.php'; ?>
+<?php require 'classes/master.php';
+if (isset($_POST['timeStamp']))
+    $timeStamp = $_POST['timeStamp'];
+else {
+    $timeStamp = null;
+}
+?>
 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
 …
             <div id="content">
                 <?php
                     new SurveyCreationTool();
+                    new SurveyCreationTool(null, $timeStamp);
                 ?>
             </div>

Note: See TracChangeset for help on using the changeset viewer.

Download in other formats: