Changeset 24


Ignore:
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:
Dev/trunk
Files:
3 edited

Legend:

Unmodified
Added
Removed

  • Dev/trunk/classes/SurveyCreationTool.php

    r23 r24  
    99class SurveyCreationTool {
    1010
    11     public function __construct() {
     11    public function __construct($survey = null, $timeStamp = null) {
    1212        SurveyCreationTool::javascript();
    1313        ?>
    1414
    15         <div id="surveyCreation"><form action="submitsurvey.php" method="post">
     15        <div id="surveyCreation"><form id="survey" action="submitsurvey.php" method="post">
    1616                <?php
    17                 SurveyCreationTool::titleBox();
    18                 SurveyCreationTool::descriptionBox();
     17                SurveyCreationTool::surveyHead($timeStamp);
    1918                SurveyCreationTool::questionCreationForm();
    2019                SurveyCreationTool::addQuestionButton();
    … …  
    2827        ?>
    2928        <script type="text/javascript">
    30             var questionCount = 1;           
    31                                                                                                                    
     29            /* autosave every 3 minutes */
     30            setTimeout("save()", 180000);
     31           
     32            var questionCount = 1;         
     33                                                                                                                                                   
    3234            function getNewQuestion()
    3335            {
    … …  
    5254                    "<div id='answersDiv" + questionCount + "' class='answersDiv'></div>" +
    5355                    "</div>";
    54                                                                                                                
     56                                                                                                                                               
    5557                questionDiv.innerHTML = htmlStr;
    56                                                                                                                
     58                                                                                                                                               
    5759                return questionDiv;
    5860            }
    59                                                                                                                    
     61                                                                                                                                                   
    6062            function handleFocus(input)
    6163            {
    … …  
    6769                }
    6870            }
    69                                                                                                                                                    
     71                                                                                                                                                                                   
    7072            function handleBlur(input)
    7173            {       
    7274                var surveyTitle = document.getElementById('surveyTitle');
    7375                var surveyDescription = document.getElementById('surveyDescription');
    74                                                                                                                                    
     76                                                                                                                                                                   
    7577                if (input.value == "")
    7678                {
    7779                    input.style.color = "gray";
    7880                    input.clicked = null;
    79                                                                                                                                                            
     81                                                                                                                                                                                           
    8082                    if (input == surveyTitle)
    8183                    {
    … …  
    8890                }                           
    8991            }
    90                                                                                                    
     92                                                                                                                                   
    9193            function handleType(select)
    9294            {
    … …  
    9597                answersDiv.answerCount = 1;
    9698                answersDiv.clicked = null;
    97                                                        
     99                                                                                       
    98100                switch (type) {
    99101                    case 'mc':
    100102                        answersDiv.innerHTML = "";
    101103                        addOption(select.id);
    102                                                                                        
     104                                                                                                                       
    103105                        break;
    104106                    case 'text':
    … …  
    124126
    125127            }
    126                                                                                    
    127                                                                            
     128                                                                                                                   
     129                                                                                                           
    128130            function addOption(questionNumber)
    129131            {       
    … …  
    132134                var answerDiv = document.createElement("div");
    133135                answerDiv.className = "answerDiv";
    134                                                                                
     136                                                                                                               
    135137                var htmlStr = "<input type='text' name='q" +
    136138                    questionNumber + "ans" + answerCount + "' value='Option " + answerCount + "' />";
    137                                                        
     139                                                                                       
    138140                if (answersDiv.clicked == null)
    139141                {
    … …  
    141143                        + " class='surveyButton' onclick='addOption(" + questionNumber + ")' value='Add Option' />" +
    142144                        "<input type='button' class='surveyButton' onclick='removeOption(" + questionNumber + ")' value='x' />";
    143                            
     145                                                           
    144146                    answersDiv.clicked = true;
    145147                }
    146                                                                                        
     148                                                                                                                      
    147149                answerDiv.innerHTML = htmlStr;
    148                        
     150                                                       
    149151                answerDiv.prev = answersDiv.lastAnswer; //singly linked list
    150152                answersDiv.lastAnswer = answerDiv;
    151                                                                                        
     153                                                                                                                      
    152154                answersDiv.appendChild(answerDiv);
    153155                answersDiv.answerCount++;
    154156            }
    155                    
     157                                                   
    156158            function removeOption(questionNumber)
    157159            {
    158160                var answersDiv = document.getElementById("answersDiv" + questionNumber);
    159                        
     161                                                      
    160162                if (answersDiv.lastAnswer.prev != null)
    161163                {
    … …  
    165167                }
    166168            }
    167                                            
     169                                                                           
    168170            function minMax(questionNumber)
    169171            {
    170172                var answersDiv = document.getElementById("answersDiv" + questionNumber);
    171                                                
     173                                                                              
    172174                var answerDiv = document.createElement("div");
    173                
     175                                               
    174176                answerDiv.className = "answerDiv";
    175177                answerDiv.innerHTML = "<label for='min'>Min</label><input type='text' name='q" + questionNumber + "ans1' />" +
    176178                    "<label for='max'>Max</label><input type='text' name='q" + questionNumber + "ans2' />";
    177                                            
     179                                                                          
    178180                answersDiv.appendChild(answerDiv);
    179181            } 
    180                                            
     182                                                                           
    181183            function minMaxIncr(questionNumber)
    182184            {
    183185                var answersDiv = document.getElementById("answersDiv" + questionNumber);
    184                                                
     186                                                                              
    185187                var answerDiv = document.createElement("div");
    186188                answerDiv.className = "answerDiv";
    … …  
    188190                    "<label>Right label</label><input type='text' name='q" + questionNumber + "ans2' />" +
    189191                    "<label>Scale count</label><input type='text' name='q" + questionNumber + "ans3' />";
    190                                            
     192                                                                          
    191193                answersDiv.appendChild(answerDiv);
    192194            }         
    193                                                                                                  
    194                                                                                                          
     195                                                                                                                                
     196                                                                                                                                        
    195197            function addQuestion()
    196198            {
    197199                var questionsDiv = document.getElementById('questionsDiv');
    198200                var newQuestion = getNewQuestion();
    199                                        
     201                                                                       
    200202
    201203                newQuestion.prev = document.lastQuestion;
    … …  
    205207                questionCount++;
    206208            }
    207                                    
     209                                                                   
    208210            function removeLastQuestion()
    209211            {
    210212                var questionsDiv = document.getElementById('questionsDiv');
    211                                        
     213                                                                       
    212214                if (document.lastQuestion.prev != null)
    213215                {
    … …  
    221223                }               
    222224            }
    223                                  
    224225                                           
    225                                                                                                                                                                                                                            
     226            function save()
     227            {
     228                var form = document.getElementById('survey');
     229                var questionsDiv = document.getElementById('questionsDiv');
     230                form.action = "surveycreation.php";
     231               
     232                /* extra time stamp */
     233                var date = new Date();
     234                var timeStamp = date.getHours() + ":" + date.getUTCMinutes();
     235                var timeStampInput = document.createElement("input");
     236                timeStampInput.name = "timeStamp";
     237                timeStampInput.value = timeStamp;
     238                timeStampInput.type = "hidden";
     239               
     240                questionsDiv.appendChild(timeStampInput);
     241                form.submit();
     242            }
     243                                                                           
     244                                                                                                                                                                                                                                                           
    226245        </script>
    227246        <?php
    228247    }
    229248
     249    private static function surveyHead($timeStamp = null) {
     250        ?><div id="surveyHead">
     251        <?php
     252        SurveyCreationTool::titleBox();
     253        SurveyCreationTool::saveSurvey($timeStamp);
     254        SurveyCreationTool::descriptionBox();
     255        ?></div>
     256        <?php
     257    }
     258
    230259    private static function titleBox() {
    231260        ?>
    232         <input type="text" id="surveyTitle" name="surveyTitle" value="Untitled Survey" size="30" onblur="handleBlur(this)" onfocus="handleFocus(this)" />
     261        <input type="text" id="surveyTitle" name="surveyTitle" value="Untitled Survey" onblur="handleBlur(this)" onfocus="handleFocus(this)" />
     262        <?php
     263    }
     264
     265    private static function saveSurvey($timeStamp = null) {
     266        if (isset($timeStamp))
     267            echo "<div id='timeStamp'>Last saved " . $timeStamp . '</div>';
     268        ?>
     269        <input id="surveySaveButton" type="button" onclick="save()" class='surveyButton' value='Save' />
    233270        <?php
    234271    }
    … …  
    236273    private static function descriptionBox() {
    237274        ?>
    238         <textarea id="surveyDescription" rows="3" cols="80" name="surveyDescription" onblur="handleBlur(this)" onfocus="handleFocus(this)">Write a helpful description for this survey here.</textarea>
     275        <textarea id="surveyDescription" name="surveyDescription" onblur="handleBlur(this)" onfocus="handleFocus(this)">Write a helpful description for this survey here.</textarea>
    239276        <?php
    240277    }

  • Dev/trunk/css/style.css

    r23 r24  
    7878}
    7979
     80#surveyHead {
     81    position: relative;
     82    width: 100%;
     83}
     84
    8085#surveyTitle {
     86    width: 20em;
    8187    font-size: large;
    8288    color: gray;
    … …  
    8995#surveyDescription {
    9096    display: block;
     97    width: 35em;
     98    max-width: 35em;
    9199    font-family: sans-serif;
    92100    color: gray;
     101}
     102
     103#timeStamp {
     104    position: absolute;
     105    color: gray;
     106    font-size: small;
     107    right: 6em;
     108    top: 0;
     109    line-height: 2.3em;
     110}
     111
     112#surveySaveButton {
     113    position: absolute;
     114    top: 0;
     115    right: 0;
     116    width: 5em;
    93117}
    94118
    … …  
    124148.surveyButton {
    125149 
    126     color: gray;
     150    color: #888;
     151    font-weight: bold;
    127152    background-color: #fff;
    128     border: 1px solid #ddd;
     153    border: 2px solid #aaa;
    129154    -moz-border-radius: 8px;
    130155    border-radius: 8px;
    131     -moz-box-shadow: 1px 1px 1px #555;
    132     -webkit-box-shadow: 1px 1px 1px #555;
    133     box-shadow: 1px 1px 1px #555;
    134156}
    135157
    136158.surveyButton:hover {
    137159    background-color: white;
    138     color: #333;
     160    color: #555;
    139161    border-color: deepskyblue;
    140162}

  • Dev/trunk/surveycreation.php

    r10 r24  
    1 <?php require 'classes/master.php'; ?>
     1<?php require 'classes/master.php';
     2
     3if (isset($_POST['timeStamp']))
     4    $timeStamp = $_POST['timeStamp'];
     5else {
     6    $timeStamp = null;
     7}
     8
     9?>
    210
    311<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    … …  
    1826            <div id="content">
    1927                <?php
    20                     new SurveyCreationTool();
     28                    new SurveyCreationTool(null, $timeStamp);
    2129                ?>
    2230            </div>
Note: See TracChangeset for help on using the changeset viewer.