Changeset 218 for Dev/trunk/js

Timestamp:

01/09/12 14:59:28 (13 years ago)

Author:

fpvanagthoven

Message:

Laatste versies van alles!

Location:

Dev/trunk/js

Files:

• questionEditorScripts.js (modified) (4 diffs)
• sequencerScripts.js (modified) (5 diffs)

Dev/trunk/js/questionEditorScripts.js

@@ -23 +23 @@
 //////////////////////////
 
+//////////////////////
+/* CREATE FUNCTIONS */
+//////////////////////
+
+function createQuestionEditor() {
+    // Outer div
+    var editorElement = ce("div");
+    this.className = "smallFrame questionEditor";
+    editorElement.id = sequencer.state.selectedObject.uid;
+    // Header
+    var titleDiv = ce("div");
+    titleDiv.className = "smallTitle";
+    var numberDiv = ce("div");
+    numberDiv.className = "listNumber";
+    numberDiv.innerHTML = "4";
+    var nameSpan = ce("span");
+    nameSpan.innerHTML = "New question";
+    titleDiv.appendChild(numberDiv);
+    titleDiv.innerHTML += "Editing: ";
+    titleDiv.appendChild(nameSpan);
+    editorElement.appendChild(titleDiv);
+    
+    //Content area
+    var contentDiv = ce("div");
+    contentDiv.className = "content";
+    var bodyText = createNewElement("textarea", null, "qBodyTextField", "qBodyTextField", null);
+    bodyText.value = "Question body text goes here";
+    
+    
+    // The dynamic questionParams div, where all the control elements and inputs will be located
+    var questionParams = ce("div");
+    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();
+    }, false);
+    // Add the select options. Do this in a block scope to prevent the o1 var from messing things up. 
+    // Also helps in structuring code.
+    {
+        var o1 = ce("option");
+        o1.value = null;
+        o1.text = "";
+        qTypeField.appendChild(o1);
+        
+        o1 = ce("option");
+        o1.value = "int";
+        o1.text = "Integer";
+        qTypeField.appendChild(o1);
+        
+        o1 = ce("option");
+        o1.value = "scale";
+        o1.text = "Scale";
+        qTypeField.appendChild(o1);
+        
+        o1 = ce("option");
+        o1.value = "choice";
+        o1.text = "Multiple choice";
+        qTypeField.appendChild(o1);
+        
+        o1 = ce("option");
+        o1.value = "text";
+        o1.text = "Text";
+        qTypeField.appendChild(o1);
+    }
+    
+    contentDiv.appendChild(questionParams);
+    editorElement.appendChild(contentDiv);
+    
+    // Controls bar
+    var controlsDiv = ce("div");
+    controlsDiv.className = "controls";
+    var btnDiscard = createNewElement("input", "button", "btnDiscard", null, "Discard");
+    var btnSave = createNewElement("input", "button", "btnSave", null, "Save");
+    controlsDiv.appendChild(btnDiscard);
+    controlsDiv.appendChild(btnSave);
+    btnSave.addEventListener("click", function(){
+        swapQuestionState(true);
+    }, false);
+    btnDiscard.addEventListener("click", function(){
+        swapQuestionState(false);
+    }, false);
+    editorElement.appendChild(controlsDiv);
+    
+    return editorElement;
+}
+
+function swapQuestionState(save) {
+    // Function that replaces a question display with the question editor, or vice versa.
+    if (sequencer.state.editing == false) {
+        // Start editing
+        sequencer.state.editing = true;
+        var questionElement = ge(sequencer.state.selectedObject.uid);
+        // test
+        var editor = new QuestionEditor();
+        editor.init();
+        // end test
+        //var editorElement = createQuestionEditor();
+        var content = ge("seqContentWrapper");
+        content.replaceChild(editor.element, questionElement);
+    }
+    else {
+        
+        if (save) {
+            if (save == true) {
+                alert("Saving shit yo!");
+            // User is done editing
+            // 1. Create the edited question in db (createObject.php), then set the proper properties (saveObject.php)
+            // 2. Revert back to question display
+            }
+            else {
+                // Anders discard gewoon alles en haal de question display weg.
+                ge("seqContentWrapper").removeChild(ge(sequencer.state.selectedObject.uid));
+            }
+        }
+    
+    }
+}
+
+
+//////////////////////////
+/* END CREATE FUNCTIONS */
+//////////////////////////
 
 var qUID, parentObjectUID, qName, qTag, qType, qAnswerLength;
 
 function selectAnswerType(){
-    var selectBox = document.getElementById("questionType");
+    var selectBox = document.getElementById("qTypeField");
     if (selectBox.value != undefined && selectBox.value != "") {
         qType = selectBox.value;
@@ -56 +188 @@
 
 function createNewElement(tag, type, id, cl, value) {
+    // This is a double of the ce() alias function in generalScripts.js. 
+    // It allows for more specific creation of elements on one line, 
+    // instead of 5 subsequent lines of code defining tag, id, class, value, etc...
+    // This is handy when doing creation-heavy operations such as adding inputs
+    //!!! Since this is defined in questionEditorScripts.js, it should only be used in this context.
+    //!!! Use ce() whenever possible, since it's included on every page and works faster.
+    
     var newElement = document.createElement(tag);
     if (type != undefined) newElement.type = type;
@@ -67 +206 @@
 }
 
-function createNewInputLabel(text, target) {
+function createNewInputLabel(text, target, align) {
     var newLabel = document.createElement("label");
     if (target) newLabel.setAttribute("for",target);
+    if (align) newLabel.className = "questionParamLabel "+align+"Align"; else newLabel.className="questionParamLabel";
     newLabel.innerHTML = text;
     return newLabel;
@@ -195 +335 @@
     alert(userText);
 }
+
+
+//TEST FUNCTIONS
+
+/*
+ * These functions are an attempt at making editors class based, for easier organisation and parameter storage and access.
+ * It prevents having to add more question-specific clutter to the sequencer object
+ */
+
+function QuestionEditor() {
+    // Properties    
+    this.uid = null;
+    this.element = null;
+    this.paramsElement = null;
+    
+    // Basic functionality
+    this.setValues = function(arguments) {
+        // Query question information from database, then fill element fields with correct information.
+        
+    }
+    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;
+        // Header
+        var titleDiv = ce("div");
+        titleDiv.className = "smallTitle";
+        var numberDiv = ce("div");
+        numberDiv.className = "listNumber";
+        numberDiv.innerHTML = "4";
+        var nameSpan = ce("span");
+        nameSpan.id = "qTitleField";
+        nameSpan.innerHTML = "New question";
+        titleDiv.appendChild(numberDiv);
+        titleDiv.innerHTML += "Editing: ";
+        titleDiv.appendChild(nameSpan);
+        this.element.appendChild(titleDiv);
+    
+        //Content area
+        var contentDiv = ce("div");
+        contentDiv.className = "content";
+        var bodyText = createNewElement("textarea", null, "qBodyTextField", "qBodyTextField", null);
+        bodyText.value = "Question body text goes here";
+    
+    
+        // The dynamic questionParams div, where all the control elements and inputs will be located
+        var questionParams = ce("div");
+        this.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();
+        }, false);
+        // Add the select options. Do this in a block scope to prevent the o1 var from messing things up. 
+        // Also helps in structuring code.
+        {
+            var o1 = ce("option");
+            o1.value = null;
+            o1.text = "";
+            qTypeField.appendChild(o1);
+        
+            o1 = ce("option");
+            o1.value = "int";
+            o1.text = "Integer";
+            qTypeField.appendChild(o1);
+        
+            o1 = ce("option");
+            o1.value = "scale";
+            o1.text = "Scale";
+            qTypeField.appendChild(o1);
+        
+            o1 = ce("option");
+            o1.value = "choice";
+            o1.text = "Multiple choice";
+            qTypeField.appendChild(o1);
+        
+            o1 = ce("option");
+            o1.value = "text";
+            o1.text = "Text";
+            qTypeField.appendChild(o1);
+        }
+    
+        contentDiv.appendChild(questionParams);
+        this.element.appendChild(contentDiv);
+    
+        // Controls bar
+        var controlsDiv = ce("div");
+        controlsDiv.className = "controls";
+        var btnDiscard = createNewElement("input", "button", "btnDiscard", null, "Discard");
+        var btnSave = createNewElement("input", "button", "btnSave", null, "Save");
+        controlsDiv.appendChild(btnDiscard);
+        controlsDiv.appendChild(btnSave);
+        btnSave.addEventListener("click", function(){
+            swapQuestionState(true);
+        }, false);
+        btnDiscard.addEventListener("click", function(){
+            swapQuestionState(false);
+        }, false);
+        this.element.appendChild(controlsDiv);
+        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
+        }
+        
+        newAjaxRequest(requestString, "createObject.php", function(result){
+            // Display a success message, or throw an error.
+        }, true);
+    }
+    
+    // Updating input fields
+    this.selectAnswertype = function () {
+        // Switch statement, call this.type_x where x is the relevant answer type.
+        // For all this.type_X funtions:
+        // Use the createNewElement and createNewInputLabel methods to add controls or input fields.
+        // Input field convention:  class = questionParamField, id = qTypeField / qScaleSize, etc...
+        // Input label class: "l" or "r" depending on alignment with respect to parent ("for") input element.
+        // 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!
+    }
+    this.type_Scale = function () {
+        
+    }
+    this.type_Integer = function () {
+        
+    }
+    this.type_Text = function () {
+        
+    }
+    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;
+}

Dev/trunk/js/sequencerScripts.js

@@ -73 +73 @@
         // settings fields first
         initSequencer();
-        debugger;
+        
         switch (sequencer.settings.content.contentType.toLowerCase()) {
             case "session":
@@ -414 +414 @@
         
     newAjaxRequest(c, u, function(result) {
+        debugger;
         sequencer.survey.questions.uids.push(removeNL(result.responseText));
         sequencer.survey.questions.upToDate.push(false);
@@ -565 +566 @@
         removeButton.className = "smallButton";
         editButton.addEventListener("click", function(e){
-            alert('Editing not yet supported!');
+            debugger;
+            selectStep(this.parentNode.parentNode.id);
+            if (sequencer.state.editing != true) swapQuestionState();
         }, false);
         removeButton.addEventListener("click", function(e){
@@ -629 +632 @@
 }
 
+
+
+
+
 // general functions and user actions
 
@@ -668 +675 @@
                 break;
         }
-        (type != "survey") ? ajaxInfoRequest(uid, ge("infoPanelContent"), type) : type=type /*This does nothing*/;
+        (type != "Question") ? ajaxInfoRequest(uid, ge("infoPanelContent"), type) : type=type /*This does nothing*/;
         sequencer.state.selectedObject.uid = uid;
         sequencer.state.selectedObject.index = null;  //Don't know how to do this yet.