Changeset 176 for Dev


Ignore:
Timestamp:
12/05/11 14:58:27 (13 years ago)
Author:
fpvanagthoven
Message:
  • Wat assorted questionEditor fixes. Probleem met resetting form fields gefixt, was het gebruik van innerHTML dat roet in het eten gooide. Nu een aparte label style en class gegeven aan de text labels, nu is het prima te doen.
Location:
Dev/trunk
Files:
3 edited

Legend:

Unmodified
Added
Removed

  • Dev/trunk/css/awesome.css

    r175 r176  
    3131    color: #333;
    3232}
    33 
     33/*
    3434label {
    3535    font-size: small;
    … …  
    3838    text-shadow: #fff 0px 0px 1px;
    3939}
    40 
     40*/
    4141legend {
    4242    padding-left: 0em;
    … …  
    873873    width: auto;
    874874    min-width: 51em;
    875     border: 3px solid #cccccc;
    876     background-color: white;
    877875    margin: 3px;
    878876}
    … …  
    884882
    885883.questionParamField {
    886     display: inline;
    887 }
     884    float: left;
     885    margin: 2px 0 2px 0;
     886}
     887
     888#questionEditor_questionParams label {
     889    width: 130px;
     890    float: left;
     891    margin: 4px 0 0 0;
     892}
     893
     894.formLineBreak {
     895    clear: left;
     896}

  • Dev/trunk/js/questionEditorScripts.js

    r175 r176  
     1//////////////////////
     2/* HELPER FUNCTIONS */
     3//////////////////////
     4
     5function hasClass(ele,cls) {
     6    if (ele.className)
     7        return ele.className.match(new RegExp('(\\s|^)'+cls+'(\\s|$)'));
     8}
     9 
     10function addClass(ele,cls) {
     11    if (!this.hasClass(ele,cls)) ele.className += " "+cls;
     12}
     13 
     14function removeClass(ele,cls) {
     15    if (hasClass(ele,cls)) {
     16        var reg = new RegExp('(\\s|^)'+cls+'(\\s|$)');
     17        ele.className=ele.className.replace(reg,' ');
     18    }
     19}
     20
     21//////////////////////////
     22/* END HELPER FUNCTIONS */
     23//////////////////////////
     24
     25
    126var qUID, parentObjectUID, qName, qTag, qType, qAnswerLength;
    227
    328function selectAnswerType(){
    4    
    529    var selectBox = document.getElementById("questionType");
    630    if (selectBox.value != undefined && selectBox.value != "") {
    … …  
    1034        return;
    1135    }
    12    
    1336    removeWrongAnswerFields(selectBox);
    14    
    1537    switch (qType) {
    1638        case "int":
    … …  
    3860    if (id != undefined) newElement.id = id;
    3961    if (cl != undefined) newElement.className = cl;
    40     if (value != undefined) newElement.value = value;
     62    if (value != undefined) {
     63        newElement.value = value;
     64        newElement.text = value;
     65    }
    4166    return newElement;
     67}
     68
     69function createNewInputLabel(text, target) {
     70    var newLabel = document.createElement("label");
     71    if (target) newLabel.setAttribute("for",target);
     72    newLabel.innerHTML = text;
     73    return newLabel;
    4274}
    4375
    … …  
    4880}
    4981
     82function updateIdentifier() {
     83    var identField = document.getElementById("questionIdentifierField");
     84    if (identField.value == undefined && identField.value == "") {
     85        return;
     86    }
     87    var headerField = document.getElementById("header_identifier");
     88    headerField.innerHTML = identField.value;
     89}
    5090
    5191
     92///////////////////
     93/* INT SELECTION */
     94///////////////////
    5295
    5396function selectIntType() {
    5497    var selectBox = document.getElementById("questionType");
    5598    var content = document.getElementById("questionEditor_questionParams");
     99    // Add minimum value input
    56100    var minValueBox = createNewElement("input","text","minValueBox", "questionParamField", null);
    57     content.innerHTML += "<br />Min value: ";
     101    var minValueBoxLabel = createNewInputLabel("Minimum value:", "minValueBox");
     102    addClass(minValueBoxLabel, "formLineBreak");
     103    content.appendChild(minValueBoxLabel);
    58104    content.appendChild(minValueBox);
     105    // Add maximum value input
    59106    var maxValueBox = createNewElement("input", "text", "maxValueBox", "questionParamField", null);
    60     content.innerHTML += "<br />Max value: ";
     107    var maxValueBoxLabel = createNewInputLabel("Maximum value:","maxValueBox");
     108    addClass(maxValueBoxLabel, "formLineBreak");
     109    content.appendChild(maxValueBoxLabel);
    61110    content.appendChild(maxValueBox);
    62    
    63     // set the selected value, because adding a DOM element to the parent element resets the selected value.
    64     for (var i = 0; i < selectBox.options.length; i++) {
    65         if (selectBox.options[i].value == "int") {
    66             selectBox.selectedValue = i;
    67             selectBox.selectedText = "Integer";
    68         // DIT WERKT NOG NIET, HIJ SELECTEERT HEM NIET, OOK AL IS SELECTED = TRUE
    69         // MET ANDERE WOORDEN: WTF.
    70         }
    71     }
    72111}
    73112
    74 
     113/////////////////////
     114/* SCALE SELECTION */
     115/////////////////////
    75116
    76117function selectScaleType() {
    77     debugger;
    78     var selectBox = document.getElementById("questionType");
     118    // I heard you like walls of text!
    79119    var content = document.getElementById("questionEditor_questionParams");
     120    // Add number of choices input
    80121    var numChoicesBox = createNewElement("select", null, "numChoicesBox","questionParamField",null);
    81     content.innerHTML += "<br />Scale size: ";
     122    var numChoicesBoxLabel = createNewInputLabel("Scale size:","numChoicesBox");
    82123    for (var i = 0; i < 10; i++) {
    83124        var option = createNewElement("option");
    … …  
    86127        numChoicesBox.appendChild(option);
    87128    }
     129    addClass(numChoicesBoxLabel, "formLineBreak");
     130    content.appendChild(numChoicesBoxLabel);
    88131    content.appendChild(numChoicesBox);
    89     numChoicesBox.addEventListener("change", selectScaleSize, false);
     132    // Add legends enabled input
     133    var legendsEnabledCheckBox = createNewElement("input","checkbox","legendsEnabledCheckbox","questionParamField",null);
     134    var legendsEnabledCheckBoxLabel = createNewInputLabel("Enable legends","legendsEnabledCheckBox");
     135    addClass(legendsEnabledCheckBoxLabel, "formLineBreak");
     136    content.appendChild(legendsEnabledCheckBoxLabel);
     137    content.appendChild(legendsEnabledCheckBox);
     138    // Add legend labels boxes
     139    var upperLegendBox = createNewElement("input","text","upperLegendBox","questionParamField");
     140    var lowerLegendBox = createNewElement("input","text","lowerLegendBox","questionParamField");
     141    var lowerLegendBoxLabel = createNewInputLabel("Lower legend","lowerLegendBox");
     142    var upperLegendBoxLabel = createNewInputLabel("Upper legend","upperLegendBox");
     143    addClass(lowerLegendBoxLabel,"formLineBreak");
     144    content.appendChild(lowerLegendBoxLabel);
     145    content.appendChild(lowerLegendBox);
     146    addClass(upperLegendBoxLabel,"formLineBreak");
     147    content.appendChild(upperLegendBoxLabel);
     148    content.appendChild(upperLegendBox);
     149    // Disable these boxes, since the checkbox is unchecked by default
     150    lowerLegendBox.disabled = true;
     151    upperLegendBox.disabled = true;
     152    if (legendsEnabledCheckBox.addEventListener) {
     153        legendsEnabledCheckBox.addEventListener("click", toggleScaleLegends, true);
     154    }
    90155}
    91156
    92 function selectScaleSize() {
    93     var numChoicesBox = document.getElementById("numChoicesBox");
     157function toggleScaleLegends() {
    94158    var content = document.getElementById("questionEditor_questionParams");
    95     for (var i = 0; i < numChoicesBox.value; i++) {
    96         var newBullet = createNewElement("input", "radio", "bullet"+i, "questionParamField","i");
    97         content.appendChild(newBullet);
     159    var checkbox = document.getElementById("legendsEnabledCheckbox");
     160    var upperLegendBox = document.getElementById("upperLegendBox");
     161    var lowerLegendBox = document.getElementById("lowerLegendBox");
     162    if (checkbox.checked == true) {
     163        upperLegendBox.disabled = false;
     164        lowerLegendBox.disabled = false;
     165    }
     166    else {
     167        upperLegendBox.disabled = true;
     168        lowerLegendBox.disabled = true;
     169    }
     170}
     171
     172///////////////////////////////
     173/* MULTIPLE CHOICE SELECTION */
     174///////////////////////////////
     175
     176function selectChoiceType() {
     177    var selectionBox = document.getElementById("questionType");
     178    var content = document.getElementById("questionEditor_questionParams");
     179}
     180
     181function resizeTextArea() {
     182    var textArea = document.getElementById("questionEditor_bodyText");
     183    if (document.getElementById("hiddenScalingDiv")) {
     184        var hiddenDiv = document.getElementById("hiddenScalingDiv");
     185    }
     186    else {
     187        var hiddenDiv = document.createElement("div");
     188        hiddenDiv.style.visibility = "hidden";
     189        textArea.appendChild(hiddenDiv);
    98190    }
    99191   
     192    debugger;
     193    hiddenDiv.innerHTML = "";
     194    var userText = textArea.firstChild.valueOf().value;
     195    alert(userText);
    100196}
    101 

  • Dev/trunk/questionEditor.php

    r175 r176  
    2020                <div id="questionEditor">
    2121                    <div id="questionEditor_header">
    22                         Editing: #QUESTION-IDENT-NO
     22                        Editing: <span id="header_identifier">#QUESTION-IDENT-NO</span>
    2323                    </div>
    2424                    <div id="questionEditor_content">
    2525                        <h2>Question text:</h2>
    2626                        <div id="questionEditor_bodyText">
    27                             <textarea id="questionEditor_bodyText_textArea">THIS IS THE QUESTION BODY TEXT. CLICK HERE TO EDIT!</textarea>
     27                            <textarea id="questionEditor_bodyText_textArea" onKeyUp="resizeTextArea();">THIS IS THE QUESTION BODY TEXT. CLICK HERE TO EDIT!</textarea>
    2828                        </div>
    2929                        <div id="questionEditor_questionParams" >
    30                             Answer type:
     30                            <label for="questionIdentifierField" class="formLineBreak">Question tag:</label> <input type="text" id="questionIdentifierField" class="questionParamField" onChange="updateIdentifier();" />
     31
     32                            <label for="questionType" class="formLineBreak">Answer type:</label>
    3133                            <select id="questionType" onChange="selectAnswerType();" class="questionParamField">
    3234                                <option value=""></option>
    … …  
    3638                                <option value="text">Text</option>
    3739                            </select>
    38                            
    39                            
     40
     41
     42
    4043                        </div>
    4144                    </div>
    4245                    <div id="questionEditor_controls">
    43                         <input type="button" value="Discard" />
     46                        <input type="button" id="discard" value="Discard" />
    4447                        <input type="button" value="Save" />
    4548                    </div>
Note: See TracChangeset for help on using the changeset viewer.