Changeset 103 for Dev/trunk/classes/QuestionCreationTool.php

Timestamp:

09/14/11 14:01:25 (14 years ago)

Author:

fpvanagthoven

Message:

QuestionCreationTool? inputs

File:

• Dev/trunk/classes/QuestionCreationTool.php (modified) (5 diffs)

Dev/trunk/classes/QuestionCreationTool.php

@@ -12 +12 @@
 
     public function __construct() {
+        $this->javascript();
         $this->displayList();
         $this->displayEditPanel();
+    }
+
+    private function javascript() {
+        ?>
+        <script type="text/javascript">
+            function handleType(select)
+            {
+                var type = select.valueOf().value;
+                clearSpecifications();
+                                                        
+                /* set answerCount for options */
+                document.getElementById("answerSpecifications").answerCount = 1;
+                                                        
+                switch (type) {
+                    case "text":
+                        break;
+                    case "mc":
+                        addOption();
+                        break;
+                    case "int":
+                        minMax();
+                        break;
+                    case "checkboxes":
+                        addOption();
+                        break;
+                    case "scale":
+                        minMaxIncr();
+                        break;
+                    default:
+                                                                
+                        break;
+                }
+
+            }
+                                                    
+            function clearSpecifications()
+            {
+                var specs = document.getElementById("answerSpecifications");
+                specs.innerHTML = "";
+                specs.clicked = null;
+                specs.lastAnswer = null;
+                                        
+                var questionType = document.getElementById("questionType");
+                var buttons = document.getElementById("questionButtons");
+                if(buttons != null)
+                    questionType.removeChild(buttons);
+            }
+                                                    
+            function addOption()
+            {                       
+                var specs = document.getElementById("answerSpecifications");
+                                                        
+                addAddRemoveOptionButtonsOnce(specs);
+                addAnswerInput(specs);
+                                                        
+            }
+                                                    
+            function removeOption()
+            {
+                var specs = document.getElementById("answerSpecifications");
+                                                        
+                if(specs.lastAnswer.prev != null)
+                {
+                    specs.removeChild(specs.lastAnswer);
+                    specs.lastAnswer = specs.lastAnswer.prev;
+                    specs.answerCount--;
+                }
+            }
+                                                    
+            function addAnswerInput(specs)
+            {
+                var answerCount = specs.answerCount;
+                                                        
+                /* set value for option textbox */
+                var optionStr = "Option " + answerCount;
+                                                        
+                /* the input textbox */
+                var answerInput = document.createElement("input");
+                answerInput.setAttribute("type", "text");
+                answerInput.setAttribute("name", "ans" + answerCount);
+                answerInput.setAttribute("value", optionStr);
+                answerInput.className = "answerInput";
+                                                        
+                specs.appendChild(answerInput);
+                                                        
+                /* Singly linked list */
+                answerInput.prev = specs.lastAnswer; // remember last one
+                specs.lastAnswer = answerInput; // new lastAnswer
+                                                        
+                specs.answerCount++;               
+            }
+                                                    
+            function addAddRemoveOptionButtonsOnce(specs)
+            {
+                if (specs.clicked == null)
+                {
+                    var buttonsDiv = document.createElement("div");
+                    buttonsDiv.id = "questionButtons";
+                    buttonsDiv.style.display = "inline";
+                    var typeBox = document.getElementById("questionType");
+                    typeBox.appendChild(buttonsDiv);
+                                            
+                    addAddOptionButton(buttonsDiv);                                  
+                    addRemoveOptionButton(buttonsDiv);
+                                                            
+                    specs.clicked = true;
+                }
+            }
+                                                    
+            function addAddOptionButton(buttonsDiv)
+            {    
+                var addOpt = document.createElement("input");
+                addOpt.setAttribute("type", "button");
+                addOpt.setAttribute("id", "addOpt");
+                addOpt.setAttribute("class", "surveyButton");
+                addOpt.setAttribute("onclick", "addOption()");
+                addOpt.setAttribute("value", "Add Option");
+                buttonsDiv.appendChild(addOpt);                                  
+            }
+                                                    
+            function addRemoveOptionButton(buttonsDiv)
+            {
+                var removeOpt = document.createElement("input");
+                removeOpt.setAttribute("type", "button");
+                removeOpt.className = "surveyButton";
+                removeOpt.setAttribute("onclick", "removeOption()");
+                removeOpt.setAttribute("value", "x");
+                buttonsDiv.appendChild(removeOpt);
+            }
+                                                   
+            function minMax(min, max)
+            {
+                if (min == null)
+                    var min = '';
+                if (max == null)
+                    var max = '';
+                                                                                                                                                                                                                                                                                
+                var specs = document.getElementById("answerSpecifications");
+                                                                                                                                                                                                                                                                                                                                                                                                                       
+                var answerDiv = document.createElement("div");
+                                                                                                                                                                                                                                                                                                                                                                                        
+                answerDiv.className = "answerDiv";
+                answerDiv.innerHTML = "<label for='min'>Min</label><input type='text' class='intBox' onchange='checkInt(this)' value='" + min + "' name='ans1' />" +
+                    "<label for='max'>Max</label><input type='text' class='intBox' onchange='checkInt(this)' value='" + max + "' name='ans2' />";
+                                                                                                                                                                                                                                                                                                                                                                                                                   
+                specs.appendChild(answerDiv);
+            }      
+                            
+            function checkInt(input)
+            {
+                input.style.borderWidth = '1px' ;
+                var value = input.value;
+                if (isNaN(value))
+                {
+                    input.style.borderColor = 'red';
+                    input.checkPassed = 'no';
+                }
+                else
+                {
+                    input.style.border = '1px solid #888;';
+                    input.checkPassed = null;
+                }
+            }
+            
+            function minMaxIncr(left, right, incr)
+            {
+                if (left == null)
+                    var left = '';
+                else
+                    left.replace("'", "&#39;");
+                if (right == null)
+                    var right = '';
+                else
+                    right.replace("'", "&#39;");
+                if (incr == null)
+                    var incr = '';
+                                                                                                                                                                                                        
+                var specs = document.getElementById("answerSpecifications");
+                                                                                                                                                                                                                                                                                                                                                                                               
+                var answerDiv = document.createElement("div");
+                answerDiv.className = "answerDiv";
+                                                                                                                               
+                var leftLabel = document.createElement("label");
+                var rightLabel = document.createElement("label");
+                var scaleLabel = document.createElement("label");
+                leftLabel.innerHTML = "Left label";
+                rightLabel.innerHTML = "Right label";
+                scaleLabel.innerHTML = "Scale count";
+                                                                                                                                
+                var leftInput = document.createElement("input");
+                leftInput.type = "text";
+                leftInput.value = left;
+                leftInput.name= "ans1";
+                leftInput.setAttribute("onchange", "handleAnswerChange()");
+                                                                                                                                
+                var rightInput = document.createElement("input");
+                rightInput.type = "text";
+                rightInput.value = right;
+                rightInput.name = "ans2";
+                rightInput.setAttribute("onchange", "handleAnswerChange()");
+                                                                                                                                
+                var scaleInput = document.createElement("input");
+                scaleInput.type = "text";
+                scaleInput.className = "intBox";
+                scaleInput.value = incr;
+                scaleInput.setAttribute("onblur", "checkInt(this)");
+                scaleInput.setAttribute("onchange", "");
+                scaleInput.name = "ans3";
+                                                                                                                                
+                answerDiv.appendChild(leftLabel);
+                answerDiv.appendChild(leftInput);
+                answerDiv.appendChild(rightLabel);
+                answerDiv.appendChild(rightInput);
+                answerDiv.appendChild(scaleLabel);
+                answerDiv.appendChild(scaleInput);
+                                                                                                                                                                                                                                                                                                                                                                           
+                specs.appendChild(answerDiv);
+            }         
+                                                    
+        </script>
+        <?php
     }
 
@@ -19 +241 @@
         ?>
         <div id="questionListWrapper">
-            <select id="questionsList" size="2">
+            <select id="questionsList" size="9999">
             </select>
         </div>
@@ -27 +249 @@
     private function displayEditPanel() {
         ?>
-        <div class="creation">
+        <div id="creation">
             <form id="questionEditForm" action="">
                 <table class="questionTable">
@@ -44 +266 @@
                     <tr>
                         <td><label for="questionType">Type answer</label></td>
-                        <td>
-                            <select name="questionType" onchange>
+                        <td id="questionType">
+                            <select name="questionType" onchange="handleType(this)">
                                 <option value='text' selected='selected'>Text</option>
                                 <option value='int'>Integer</option>
@@ -55 +277 @@
                     </tr>
                 </table>
+                <div id="answerSpecifications"></div>
             </form>
         </div>