source: Dev/branches/jos-branch/js/questionEditorScripts.js @ 235

Last change on this file since 235 was 235, checked in by fpvanagthoven, 13 years ago

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 size: 16.8 KB
Line 
1// Old, should not be used anymore after class-based QuestionEditor() is finished!!!!!
2var qUID, parentObjectUID, qName, qTag, qType, qAnswerLength;
3
4var questionEditor = new QuestionEditor();
5
6function selectAnswerType(){
7    var selectBox = document.getElementById("questionType");
8    if (selectBox.value != undefined && selectBox.value != "") {
9        qType = selectBox.value;
10    }
11    else {
12        return;
13    }
14    removeWrongAnswerFields(selectBox);
15    switch (qType) {
16        case "int":
17            selectIntType();
18            break;
19        case "scale":
20            selectScaleType();
21            break;
22        case "choice":
23            //selectChoiceType();
24            break;
25        case "text":
26            //selectTextType();
27            break;
28        default:
29            alert("Invalid answer type selected!");
30            break;
31    }
32   
33}
34
35function createNewElement(tag, type, id, cl, value) {
36    var newElement = document.createElement(tag);
37    if (type != undefined) newElement.type = type;
38    if (id != undefined) newElement.id = id;
39    if (cl != undefined) newElement.className = cl;
40    if (value != undefined) {
41        newElement.value = value;
42        newElement.text = value;
43    }
44    return newElement;
45}
46
47function createNewInputLabel(text, target, side) {
48    var newLabel = document.createElement("label");
49    if (target) newLabel.setAttribute("for",target);
50    newLabel.innerHTML = text;
51    if (side) newLabel.className = side;
52    return newLabel;
53}
54
55function removeWrongAnswerFields(el) {
56    while (el.nextSibling) {
57        el.parentNode.removeChild(el.nextSibling);
58    }
59}
60
61function updateIdentifier() {
62    var identField = document.getElementById("questionIdentifierField");
63    if (identField.value == undefined && identField.value == "") {
64        return;
65    }
66    var headerField = document.getElementById("header_identifier");
67    headerField.innerHTML = identField.value;
68}
69
70
71/////////////////////
72/* SCALE SELECTION */
73/////////////////////
74
75function selectScaleType() {
76    // I heard you like walls of text!
77    var content = document.getElementById("questionEditor_questionParams");
78    // Add number of choices input
79    var numChoicesBox = createNewElement("select", null, "numChoicesBox","questionParamField",null);
80    var numChoicesBoxLabel = createNewInputLabel("Scale size:","numChoicesBox");
81    for (var i = 0; i < 10; i++) {
82        var option = createNewElement("option");
83        option.text = i+1;
84        option.value = i+1;
85        numChoicesBox.appendChild(option);
86    }
87    addClass(numChoicesBoxLabel, "formLineBreak");
88    content.appendChild(numChoicesBoxLabel);
89    content.appendChild(numChoicesBox);
90    // Add legends enabled input
91    var legendsEnabledCheckBox = createNewElement("input","checkbox","legendsEnabledCheckbox","questionParamField",null);
92    var legendsEnabledCheckBoxLabel = createNewInputLabel("Enable legends","legendsEnabledCheckBox");
93    addClass(legendsEnabledCheckBoxLabel, "formLineBreak");
94    content.appendChild(legendsEnabledCheckBoxLabel);
95    content.appendChild(legendsEnabledCheckBox);
96    // Add legend labels boxes
97    var upperLegendBox = createNewElement("input","text","upperLegendBox","questionParamField");
98    var lowerLegendBox = createNewElement("input","text","lowerLegendBox","questionParamField");
99    var lowerLegendBoxLabel = createNewInputLabel("Lower legend","lowerLegendBox");
100    var upperLegendBoxLabel = createNewInputLabel("Upper legend","upperLegendBox");
101    addClass(lowerLegendBoxLabel,"formLineBreak");
102    content.appendChild(lowerLegendBoxLabel);
103    content.appendChild(lowerLegendBox);
104    addClass(upperLegendBoxLabel,"formLineBreak");
105    content.appendChild(upperLegendBoxLabel);
106    content.appendChild(upperLegendBox);
107    // Disable these boxes, since the checkbox is unchecked by default
108    lowerLegendBox.disabled = true;
109    upperLegendBox.disabled = true;
110    if (legendsEnabledCheckBox.addEventListener) {
111        legendsEnabledCheckBox.addEventListener("click", toggleScaleLegends, true);
112    }
113}
114
115function toggleScaleLegends() {
116    var content = document.getElementById("questionEditor_questionParams");
117    var checkbox = document.getElementById("legendsEnabledCheckbox");
118    var upperLegendBox = document.getElementById("upperLegendBox");
119    var lowerLegendBox = document.getElementById("lowerLegendBox");
120    if (checkbox.checked == true) {
121        upperLegendBox.disabled = false;
122        lowerLegendBox.disabled = false;
123    }
124    else {
125        upperLegendBox.disabled = true;
126        lowerLegendBox.disabled = true;
127    }
128}
129
130///////////////////////////////
131/* MULTIPLE CHOICE SELECTION */
132///////////////////////////////
133
134function selectChoiceType() {
135    var selectionBox = document.getElementById("questionType");
136    var content = document.getElementById("questionEditor_questionParams");
137}
138
139function resizeTextArea() {
140    var textArea = document.getElementById("questionEditor_bodyText");
141    if (document.getElementById("hiddenScalingDiv")) {
142        var hiddenDiv = document.getElementById("hiddenScalingDiv");
143    }
144    else {
145        var hiddenDiv = document.createElement("div");
146        hiddenDiv.style.visibility = "hidden";
147        textArea.appendChild(hiddenDiv);
148    }
149   
150    debugger;
151    hiddenDiv.innerHTML = "";
152    var userText = textArea.firstChild;
153    alert(userText);
154}
155
156//////////////////////////////////////////
157/* QUESTION EDITOR CLASS BASED APPROACH */
158//////////////////////////////////////////
159
160function QuestionEditor() {
161    // Properties   
162    this.uid = null;    // The uid of the question contained in this editor
163    var me = this;      // Retarded self-reference because: Javascript
164    this.element = null;    // The parent div element containing the questionEditor
165    this.paramsElement = null;  // The parent parameters element where all the input sets will be located
166    this.paramSets = null;  // The currently enabled input sets to be displayed in the paramsElement
167   
168    // Methods
169    // Basic functionality
170    this.setValues = function(arguments) {
171        var question = JSON.parse(arguments);       
172    }
173    this.init = function() {
174        // Outer div
175        me.element = ce("div");
176        me.element.className = "smallFrame questionEditor";
177        me.element.id = sequencer.state.selectedObject.uid;
178        me.uid = sequencer.state.selectedObject.uid;
179        // Header
180        var titleDiv = ce("div");
181        titleDiv.className = "smallTitle";
182        var numberDiv = ce("div");
183        numberDiv.className = "listNumber";
184        numberDiv.innerHTML = "4"; //TODO
185        var nameSpan = ce("span");
186        nameSpan.id = "qeTitleField";
187        nameSpan.innerHTML = "New question";
188        titleDiv.appendChild(numberDiv);
189        titleDiv.innerHTML += "Editing: ";
190        titleDiv.appendChild(nameSpan);
191        me.element.appendChild(titleDiv);
192   
193        //Content area
194        var contentDiv = ce("div");
195        contentDiv.className = "content";
196        var bodyText = createNewElement("textarea", null, "qeBodyTextField", "qeBodyTextField", null);
197        bodyText.value = "Question body text goes here";
198        contentDiv.appendChild(bodyText);
199       
200        // The dynamic questionParams div, where all the control elements and inputs will be located
201        var questionParams = ce("div");
202        me.paramsElement = questionParams;
203        questionParams.className = "questionParams";
204        questionParams.id = "qeQuestionParamsDiv";
205       
206        var basicContainer = ce("div");
207        basicContainer.className = "basicInputs";
208       
209        var qeCodeField = createNewElement("input", "text", "qeCodeField", "qeParamField", null);
210        var qeCodeField_lbl = createNewInputLabel("Question code:","qeCodeField", "l");
211        basicContainer.appendChild(qeCodeField_lbl);
212        basicContainer.appendChild(qeCodeField);
213   
214        var qeTypeField = createNewElement("select", null, "qeTypeField", "qeParamField", null);
215        var qeTypeField_lbl = createNewInputLabel("Answer type:","qeTypeField", "l");
216        basicContainer.appendChild(qeTypeField_lbl);
217        basicContainer.appendChild(qeTypeField);
218        questionParams.appendChild(basicContainer);
219        qeTypeField.addEventListener("change", function(){
220            //debugger;
221            me.selectAnswerType();
222        }, false);
223        // Add the select options. Do this in a block scope to prevent the o1 var from messing things up.
224        // Also helps in structuring code.
225        {
226            var o1 = ce("option");
227            o1.value = null;
228            o1.text = "";
229            qeTypeField.appendChild(o1);
230       
231            o1 = ce("option");
232            o1.value = "int";
233            o1.text = "Integer";
234            qeTypeField.appendChild(o1);
235       
236            o1 = ce("option");
237            o1.value = "scale";
238            o1.text = "Scale";
239            qeTypeField.appendChild(o1);
240       
241            o1 = ce("option");
242            o1.value = "choice";
243            o1.text = "Multiple choice";
244            qeTypeField.appendChild(o1);
245       
246            o1 = ce("option");
247            o1.value = "text";
248            o1.text = "Text";
249            qeTypeField.appendChild(o1);
250        }
251   
252        contentDiv.appendChild(questionParams);
253        me.element.appendChild(contentDiv);
254   
255        // Controls bar
256        var controlsDiv = ce("div");
257        controlsDiv.className = "controls";
258        var btnDiscard = createNewElement("input", "button", "btnDiscard", null, "Discard");
259        var btnSave = createNewElement("input", "button", "btnSave", null, "Save");
260        controlsDiv.appendChild(btnDiscard);
261        controlsDiv.appendChild(btnSave);
262        btnSave.addEventListener("click", function(){
263            me.save();
264        }, false);
265        btnDiscard.addEventListener("click", function(){
266            me.discard();
267        }, false);
268        me.element.appendChild(controlsDiv);
269        me.paramSets = new Array();
270        me.paramSets.push("basic");
271    }
272    this.save = function() {
273        var request = {
274            "title": ge("qeTitleField").value,
275            "type": ge("qeTypeField").value
276        }
277       
278        newAjaxRequest(requestString, "createObject.php", function(result){
279            // Display a success message, or throw an error.
280        }, true);
281    }
282    this.reset = function() {
283        me.init();
284    }
285   
286    // Updating input fields
287    this.selectAnswerType = function () {
288        // Switch statement, call this.type_x where x is the relevant answer type.
289        // For all this.type_X funtions:
290        // Use the createNewElement and createNewInputLabel methods to add controls or input fields.
291        // Input field convention:  class = questionParamField, id = qTypeField / qScaleSize, etc...
292        // Input label class: "l" or "r" depending on alignment with respect to parent ("for") input element.
293        // Important: use the this.paramsElement to access the questionParams div!
294        // 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!
295   
296        var type = ge("qeTypeField").value;
297        switch (type) {
298            case "int":
299                me.type_Integer();
300                break;
301            case "scale":
302                me.type_Scale();
303                break;
304            case "choice":
305                me.type_Choice();
306                break;
307            case "text":
308                me.type_Text();
309                break;
310            default:
311                //Do nothing
312                break;
313               
314        }
315   
316    }
317    this.checkInputSets = function () {
318        // Loop through all input containers in the paramsField
319        for (var n = 0; n < me.paramsElement.childNodes.length; n++) {
320            if (me.paramsElement.childNodes[n].className == "basicInputs") continue;
321            // Check if the class (inputSet) is currently in paramSets
322            if (me.paramSets.indexOf(me.paramsElement.childNodes[n].className) < 0) {
323                me.paramsElement.childNodes[n].parentNode.removeChild(me.paramsElement.childNodes[n]);
324                n--;
325            }
326           
327        }
328    }
329   
330    this.type_Integer = function () {
331        if (me.paramSets.indexOf("int_basic") < 0) {
332            me.paramSets = new Array("int_basic");
333        }
334        else return;
335       
336        me.checkInputSets();
337               
338        var qeMinValueField = createNewElement("input", "text", "qeMinValueField", "qeParamField", null);
339        var qeMinValueField_lbl = createNewInputLabel("Minimum value: ", "qeMinValueField", "l");
340        var qeMaxValueField = createNewElement("input", "text", "qeMaxValueField", "qeParamField", null);
341        var qeMaxValueField_lbl = createNewInputLabel("Maximum value: ", "qeMaxValueField", "l");
342        var container = ce("div");
343        container.className = "int_basic";
344        container.appendChild(qeMinValueField_lbl);
345        container.appendChild(qeMinValueField);
346        container.appendChild(qeMaxValueField_lbl);
347        container.appendChild(qeMaxValueField);
348        me.paramsElement.appendChild(container);
349       
350    }
351    this.type_Scale = function () {
352        if (me.paramSets.indexOf("scale_basic") < 0) {
353            me.paramSets = new Array("scale_basic");
354        }
355        else return;
356        // Clear any input sets that should not be there
357        me.checkInputSets();
358       
359        var container = ce("div");
360        container.className = "scale_basic";
361       
362        // Number of choices SELECT
363        var numChoicesField = createNewElement("select", null, "qeNumChoicesField", "qeParamField", null);
364        var numChoicesField_lbl = createNewInputLabel("Number of choices", "qeNumChoicesField", "l");
365        // SELECT options
366        for (var n = 2; n < 11; n++) {
367            var o = ce("option");
368            o.value = n-1;
369            o.text = n-1;
370            numChoicesField.appendChild(o);
371        }
372        container.appendChild(numChoicesField_lbl);
373        container.appendChild(numChoicesField);
374       
375        // Scale labels CHECKBOX and TEXTs
376        var legendsEnabledField = createNewElement("input", "checkbox", "qeLegendsEnabledField", "qeParamField", null);
377        var legendsEnabledField_lbl = createNewInputLabel("Enable legends", "qeLegendsEnabledField", "l");
378        container.appendChild(legendsEnabledField_lbl);
379        container.appendChild(legendsEnabledField);
380       
381        var upperLegendText = createNewElement("input", "text", "qeUpperLegendField", "qeParamField", null);
382        var lowerLegendText = createNewElement("input", "text", "qeLowerLegendField", "qeParamField", null);
383        var upperLegendText_lbl = createNewInputLabel("Upper legend", "qeUpperLegendField", "l");
384        var lowerLegendText_lbl = createNewInputLabel("Lower legend", "qeLowerLegendField", "l");
385        container.appendChild(lowerLegendText_lbl);
386        container.appendChild(lowerLegendText);
387        container.appendChild(upperLegendText_lbl);
388        container.appendChild(upperLegendText);
389       
390        me.paramsElement.appendChild(container);
391    }
392    this.type_Text = function () {
393       
394    }
395    this.type_Choice = function() {
396        debugger;
397        if (me.paramSets.indexOf("choice_basic")) {
398            me.paramSets = new Array("choice_basic");
399        }
400        else return;
401       
402        me.checkInputSets();
403       
404        var container = ce("div");
405        container.className = "choice_basic";
406        // num options SELECT
407        var numOptionsSelect = createNewElement("select", null, "qeNumOptionsField", "qeParamField", null);
408        var numOptionsSelect_lbl = createNewInputLabel("Number of options", "qeNumOptionsField", "l");
409        for (var n = 2; n < 11; n++) {
410            var o = ce("option");
411            o.value = n-1;
412            o.text = n-1;
413            numOptionsSelect.appendChild(o);
414        }
415        container.appendChild(numOptionsSelect_lbl);
416        container.appendChild(numOptionsSelect);
417       
418        me.paramsElement.appendChild(container);
419    }
420       
421    // Editing
422    this.editQuestion = function(uid) {
423        if (sequencer.state.editing == true) return;
424        if (sequencer.state.loaded == false) return;
425        sequencer.state.editing = true;
426       
427        var request = {
428            "type": "Question",
429            "uid": uid
430        }
431       
432        var requestString = "args="+JSON.stringify(request);
433        sequencer.state.loaded = false;
434        newAjaxRequest(requestString, getObject.php, function(result){
435            // Once results are in
436            questionEditor.setValues(result.responseText);
437            sequencer.state.loaded = true;
438        }, true);
439    }
440    this.createNewQuestion = function() {
441        if (sequencer.state.editing == true) return;
442        if (sequencer.state.loading == true) return;
443        sequencer.state.editing = true;
444   
445        me.reset();
446        var container = ge("seqContentWrapper");
447        container.appendChild(me.element);
448    }
449}
Note: See TracBrowser for help on using the repository browser.