Changeset 235 for Dev/branches/jos-branch/js

Timestamp:

01/13/12 18:11:16 (13 years ago)

Author:

fpvanagthoven

Message:

getObject.php is de nieuwe pagina die gewoon PHP objecten in JSON zet en echoet. Nu werkt alleen de questionEditor er op, uiteindelijk zou dit ook de infopanel en de sequencer moeten gaan serven.

File:

• Dev/branches/jos-branch/js/questionEditorScripts.js (modified) (10 diffs)

Dev/branches/jos-branch/js/questionEditorScripts.js

@@ +1 @@
+// Old, should not be used anymore after class-based QuestionEditor() is finished!!!!!
 var qUID, parentObjectUID, qName, qTag, qType, qAnswerLength;
+
+var questionEditor = new QuestionEditor();
 
 function selectAnswerType(){
@@ -42 +45 @@
 }
 
-function createNewInputLabel(text, target) {
+function createNewInputLabel(text, target, side) {
     var newLabel = document.createElement("label");
     if (target) newLabel.setAttribute("for",target);
     newLabel.innerHTML = text;
+    if (side) newLabel.className = side;
     return newLabel;
 }
@@ -64 +68 @@
 }
 
-
-///////////////////
-/* INT SELECTION */
-///////////////////
-
-function selectIntType() {
-    var selectBox = document.getElementById("questionType");
-    var content = document.getElementById("questionEditor_questionParams");
-    // Add minimum value input
-    var minValueBox = createNewElement("input","text","minValueBox", "questionParamField", null);
-    var minValueBoxLabel = createNewInputLabel("Minimum value:", "minValueBox");
-    addClass(minValueBoxLabel, "formLineBreak");
-    content.appendChild(minValueBoxLabel);
-    content.appendChild(minValueBox);
-    // Add maximum value input
-    var maxValueBox = createNewElement("input", "text", "maxValueBox", "questionParamField", null);
-    var maxValueBoxLabel = createNewInputLabel("Maximum value:","maxValueBox");
-    addClass(maxValueBoxLabel, "formLineBreak");
-    content.appendChild(maxValueBoxLabel);
-    content.appendChild(maxValueBox);
-}
 
 /////////////////////
@@ -171 +154 @@
 }
 
+//////////////////////////////////////////
+/* QUESTION EDITOR CLASS BASED APPROACH */
+//////////////////////////////////////////
+
 function QuestionEditor() {
     // Properties    
-    this.uid = null;
-    this.element = null;
-    this.paramsElement = null;
-    
+    this.uid = null;    // The uid of the question contained in this editor
+    var me = this;      // Retarded self-reference because: Javascript
+    this.element = null;    // The parent div element containing the questionEditor
+    this.paramsElement = null;  // The parent parameters element where all the input sets will be located
+    this.paramSets = null;  // The currently enabled input sets to be displayed in the paramsElement
+    
+    // Methods
     // Basic functionality
     this.setValues = function(arguments) {
-        // Query question information from database, then fill element fields with correct information.
-        
+        var question = JSON.parse(arguments);        
     }
     this.init = function() {
         // Outer div
-        this.element = ce("div");
-        this.element.className = "smallFrame questionEditor";
-        this.element.id = sequencer.state.selectedObject.uid;
-        this.uid = sequencer.state.selectedObject.uid;
+        me.element = ce("div");
+        me.element.className = "smallFrame questionEditor";
+        me.element.id = sequencer.state.selectedObject.uid;
+        me.uid = sequencer.state.selectedObject.uid;
         // Header
         var titleDiv = ce("div");
@@ -193 +182 @@
         var numberDiv = ce("div");
         numberDiv.className = "listNumber";
-        numberDiv.innerHTML = "4";
+        numberDiv.innerHTML = "4"; //TODO
         var nameSpan = ce("span");
-        nameSpan.id = "qTitleField";
+        nameSpan.id = "qeTitleField";
         nameSpan.innerHTML = "New question";
         titleDiv.appendChild(numberDiv);
         titleDiv.innerHTML += "Editing: ";
         titleDiv.appendChild(nameSpan);
-        this.element.appendChild(titleDiv);
+        me.element.appendChild(titleDiv);
     
         //Content area
         var contentDiv = ce("div");
         contentDiv.className = "content";
-        var bodyText = createNewElement("textarea", null, "qBodyTextField", "qBodyTextField", null);
+        var bodyText = createNewElement("textarea", null, "qeBodyTextField", "qeBodyTextField", null);
         bodyText.value = "Question body text goes here";
-    
-    
+        contentDiv.appendChild(bodyText);
+        
         // The dynamic questionParams div, where all the control elements and inputs will be located
         var questionParams = ce("div");
-        this.paramsElement = questionParams;
+        me.paramsElement = questionParams;
         questionParams.className = "questionParams";
-        contentDiv.appendChild(bodyText);
-        var qIdentField = createNewElement("input", "text", "qIdentField", "questionParamField", null);
-        var qIdentField_lbl = createNewInputLabel("Question code:","qIdentField", "l");
-        questionParams.appendChild(qIdentField_lbl);
-        questionParams.appendChild(qIdentField);
-    
-        var qTypeField = createNewElement("select", null, "qTypeField", "questionParamField", null);
-        var qTypeField_lbl = createNewInputLabel("Answer type:","qTypeField", "l");
-        questionParams.appendChild(qTypeField_lbl);
-        questionParams.appendChild(qTypeField);
-        qTypeField.addEventListener("change", function(){
-            debugger;
-            selectAnswerType();
+        questionParams.id = "qeQuestionParamsDiv";
+        
+        var basicContainer = ce("div");
+        basicContainer.className = "basicInputs";
+        
+        var qeCodeField = createNewElement("input", "text", "qeCodeField", "qeParamField", null);
+        var qeCodeField_lbl = createNewInputLabel("Question code:","qeCodeField", "l");
+        basicContainer.appendChild(qeCodeField_lbl);
+        basicContainer.appendChild(qeCodeField);
+    
+        var qeTypeField = createNewElement("select", null, "qeTypeField", "qeParamField", null);
+        var qeTypeField_lbl = createNewInputLabel("Answer type:","qeTypeField", "l");
+        basicContainer.appendChild(qeTypeField_lbl);
+        basicContainer.appendChild(qeTypeField);
+        questionParams.appendChild(basicContainer);
+        qeTypeField.addEventListener("change", function(){
+            //debugger;
+            me.selectAnswerType();
         }, false);
         // Add the select options. Do this in a block scope to prevent the o1 var from messing things up. 
@@ -233 +227 @@
             o1.value = null;
             o1.text = "";
-            qTypeField.appendChild(o1);
+            qeTypeField.appendChild(o1);
         
             o1 = ce("option");
             o1.value = "int";
             o1.text = "Integer";
-            qTypeField.appendChild(o1);
+            qeTypeField.appendChild(o1);
         
             o1 = ce("option");
             o1.value = "scale";
             o1.text = "Scale";
-            qTypeField.appendChild(o1);
+            qeTypeField.appendChild(o1);
         
             o1 = ce("option");
             o1.value = "choice";
             o1.text = "Multiple choice";
-            qTypeField.appendChild(o1);
+            qeTypeField.appendChild(o1);
         
             o1 = ce("option");
             o1.value = "text";
             o1.text = "Text";
-            qTypeField.appendChild(o1);
+            qeTypeField.appendChild(o1);
         }
     
         contentDiv.appendChild(questionParams);
-        this.element.appendChild(contentDiv);
+        me.element.appendChild(contentDiv);
     
         // Controls bar
@@ -267 +261 @@
         controlsDiv.appendChild(btnSave);
         btnSave.addEventListener("click", function(){
-            swapQuestionState(true);
+            me.save();
         }, false);
         btnDiscard.addEventListener("click", function(){
-            swapQuestionState(false);
+            me.discard();
         }, false);
-        this.element.appendChild(controlsDiv);
+        me.element.appendChild(controlsDiv);
+        me.paramSets = new Array();
+        me.paramSets.push("basic");
+    }
+    this.save = function() {
         var request = {
-            "uid": this.uid,
-            "type": "Question"
-        }
-        var requestString = "args="+JSON.stringify(request);
-        newAjaxRequest(requestString, "returnObjectDisplay.php", function(result){
-            // Fill in the element with the correct values
-            // Result is sent to setValues in object form already, perhaps better idea to send in string format and parse within the target method?
-            this.setValues(JSON.parse(result.responseText));
-        }, true);
-    }
-    this.submit = function() {
-        var request = {
-            "title": ge("qTitleField").value,
-            "type": ge("qTypeField").value
+            "title": ge("qeTitleField").value,
+            "type": ge("qeTypeField").value
         }
         
@@ -294 +280 @@
         }, true);
     }
+    this.reset = function() {
+        me.init();
+    }
     
     // Updating input fields
-    this.selectAnswertype = function () {
+    this.selectAnswerType = function () {
         // Switch statement, call this.type_x where x is the relevant answer type.
         // For all this.type_X funtions:
@@ -304 +293 @@
         // Important: use the this.paramsElement to access the questionParams div!
         // To fully make use of this class-based approach, the editor should be added to a global variable. This global variable should be removed on page unload!
+    
+        var type = ge("qeTypeField").value;
+        switch (type) {
+            case "int":
+                me.type_Integer();
+                break;
+            case "scale":
+                me.type_Scale();
+                break;
+            case "choice":
+                me.type_Choice();
+                break;
+            case "text":
+                me.type_Text();
+                break;
+            default:
+                //Do nothing
+                break;
+                
+        }
+    
+    }
+    this.checkInputSets = function () {
+        // Loop through all input containers in the paramsField
+        for (var n = 0; n < me.paramsElement.childNodes.length; n++) {
+            if (me.paramsElement.childNodes[n].className == "basicInputs") continue;
+            // Check if the class (inputSet) is currently in paramSets
+            if (me.paramSets.indexOf(me.paramsElement.childNodes[n].className) < 0) {
+                me.paramsElement.childNodes[n].parentNode.removeChild(me.paramsElement.childNodes[n]);
+                n--;
+            }
+            
+        }
+    }
+    
+    this.type_Integer = function () {
+        if (me.paramSets.indexOf("int_basic") < 0) {
+            me.paramSets = new Array("int_basic");
+        }
+        else return;
+        
+        me.checkInputSets();
+                
+        var qeMinValueField = createNewElement("input", "text", "qeMinValueField", "qeParamField", null);
+        var qeMinValueField_lbl = createNewInputLabel("Minimum value: ", "qeMinValueField", "l");
+        var qeMaxValueField = createNewElement("input", "text", "qeMaxValueField", "qeParamField", null);
+        var qeMaxValueField_lbl = createNewInputLabel("Maximum value: ", "qeMaxValueField", "l");
+        var container = ce("div");
+        container.className = "int_basic";
+        container.appendChild(qeMinValueField_lbl);
+        container.appendChild(qeMinValueField);
+        container.appendChild(qeMaxValueField_lbl);
+        container.appendChild(qeMaxValueField);
+        me.paramsElement.appendChild(container);
+        
     }
     this.type_Scale = function () {
-        
-    }
-    this.type_Integer = function () {
-        
+        if (me.paramSets.indexOf("scale_basic") < 0) {
+            me.paramSets = new Array("scale_basic");
+        }
+        else return;
+        // Clear any input sets that should not be there
+        me.checkInputSets();
+        
+        var container = ce("div");
+        container.className = "scale_basic";
+        
+        // Number of choices SELECT
+        var numChoicesField = createNewElement("select", null, "qeNumChoicesField", "qeParamField", null);
+        var numChoicesField_lbl = createNewInputLabel("Number of choices", "qeNumChoicesField", "l");
+        // SELECT options
+        for (var n = 2; n < 11; n++) {
+            var o = ce("option");
+            o.value = n-1;
+            o.text = n-1;
+            numChoicesField.appendChild(o);
+        }
+        container.appendChild(numChoicesField_lbl);
+        container.appendChild(numChoicesField);
+        
+        // Scale labels CHECKBOX and TEXTs
+        var legendsEnabledField = createNewElement("input", "checkbox", "qeLegendsEnabledField", "qeParamField", null);
+        var legendsEnabledField_lbl = createNewInputLabel("Enable legends", "qeLegendsEnabledField", "l");
+        container.appendChild(legendsEnabledField_lbl);
+        container.appendChild(legendsEnabledField);
+        
+        var upperLegendText = createNewElement("input", "text", "qeUpperLegendField", "qeParamField", null);
+        var lowerLegendText = createNewElement("input", "text", "qeLowerLegendField", "qeParamField", null);
+        var upperLegendText_lbl = createNewInputLabel("Upper legend", "qeUpperLegendField", "l");
+        var lowerLegendText_lbl = createNewInputLabel("Lower legend", "qeLowerLegendField", "l");
+        container.appendChild(lowerLegendText_lbl);
+        container.appendChild(lowerLegendText);
+        container.appendChild(upperLegendText_lbl);
+        container.appendChild(upperLegendText);
+        
+        me.paramsElement.appendChild(container);
     }
     this.type_Text = function () {
@@ -315 +394 @@
     }
     this.type_Choice = function() {
-        
-    }
-    
-}
-
-function newEditor() {
-    // Get variables, ofc not null...
-    var arguments = null;
-    var editor = new QuestionEditor(arguments);
-    editor.setValues(arguments);
-    ge("seqContentWrapper").appendChild(editor.element);
-// Etc. We can put the switchModes() command in here as well, I'd say...
-// Or should that be in the QuestionEditor class? That's probably better, since it has direct access to all the internal variables.
-}
-
-function startEditingQuestion(uid) {
-    if (sequencer.state.editing == true) return;
-    
-    var element = ge(uid);
-    var editor = new QuestionEditor();
-    var newElement = editor.createElement();
-    // Query parameters
-    editor.setValues(parameters);
-    element.parentNode.replaceChild(newElement, element);
-    sequencer.state.editing = true;
-}
+        debugger;
+        if (me.paramSets.indexOf("choice_basic")) {
+            me.paramSets = new Array("choice_basic");
+        }
+        else return;
+        
+        me.checkInputSets();
+        
+        var container = ce("div");
+        container.className = "choice_basic";
+        // num options SELECT
+        var numOptionsSelect = createNewElement("select", null, "qeNumOptionsField", "qeParamField", null);
+        var numOptionsSelect_lbl = createNewInputLabel("Number of options", "qeNumOptionsField", "l");
+        for (var n = 2; n < 11; n++) {
+            var o = ce("option");
+            o.value = n-1;
+            o.text = n-1;
+            numOptionsSelect.appendChild(o);
+        }
+        container.appendChild(numOptionsSelect_lbl);
+        container.appendChild(numOptionsSelect);
+        
+        me.paramsElement.appendChild(container);
+    }
+        
+    // Editing
+    this.editQuestion = function(uid) {
+        if (sequencer.state.editing == true) return;
+        if (sequencer.state.loaded == false) return;
+        sequencer.state.editing = true;
+        
+        var request = {
+            "type": "Question",
+            "uid": uid
+        }
+        
+        var requestString = "args="+JSON.stringify(request);
+        sequencer.state.loaded = false;
+        newAjaxRequest(requestString, getObject.php, function(result){
+            // Once results are in
+            questionEditor.setValues(result.responseText);
+            sequencer.state.loaded = true;
+        }, true);
+    }
+    this.createNewQuestion = function() {
+        if (sequencer.state.editing == true) return;
+        if (sequencer.state.loading == true) return;
+        sequencer.state.editing = true;
+    
+        me.reset();
+        var container = ge("seqContentWrapper");
+        container.appendChild(me.element);
+    }
+}