fixed choisir

12 years ago · 7a4af64622
parent b0efd51364
commit 7a4af64622
2 changed files with 343 additions and 129 deletions
--- a/resources/library/interactivities/Choisir.wgt/css/basic.css
+++ b/resources/library/interactivities/Choisir.wgt/css/basic.css
@ -1,3 +1,16 @@
+/* 
+    Document   : basic
+    Created on : Sep 5, 2011, 12:01:33 PM
+    Author     : GEG.BY
+    Description:
+        Purpose of the stylesheet follows.
+*/
+
+/* 
+   TODO customize this sample style
+   Syntax recommendation http://www.w3.org/TR/REC-CSS2/
+*/
+
 html, body{
    width: 100%;
    height: 100%;
@ -10,174 +23,364 @@ body{
    background-image: url(../images/bg.png);
 }

-.toggleButton, .addButton{
+.toggleButton{
    width: 20px;
    height: 28px;
    border: none;
    background-image: url(../images/greySquare.png);
    font-weight: bold;
    font-family: Verdana;
-    color: yellow;
+    color: #00C6FF;;
    cursor: pointer;
-    -webkit-border-top-left-radius: 5px;
-    -webkit-border-bottom-left-radius: 5px;
-    border-top-left-radius: 5px;
-    border-bottom-left-radius: 5px;
 }

-.buttonDiv, .addButtonDiv{
+.buttonDiv{
    position: fixed;
    float: right;
    z-index: 1;
 }

-.addButtonDiv{
-    display: none;
+.addQstDiv{
+    float: left;
+    padding: 5px;
+    margin: 2px;
+    font-family: Verdana,Arial,Helvetica,sans-serif;
+    font-size: large;
 }

-.leftDiv{
-    width: 50%;
-    height: 100%;
+.addQstButton{    
+    margin: 0;
+    background: none;
+    color: white;
+    cursor: pointer;
+    border: 3px solid #ccc;
+    border-radius: 20px;
+}
+
+#addQsqSpan1{
+    font-size: 30px;
+    margin-right: 10px !important;
+}
+
+.qstDiv{
+    width: 90%;
+    margin: 2px auto;
+    padding: 5px;
    float: left;
-    background-color: black;
-    -webkit-border-top-left-radius: 7px;
-    -webkit-border-bottom-left-radius: 7px;
-    border-top-left-radius: 7px;
-    border-bottom-left-radius: 7px;
+    font-family: Verdana,Arial,Helvetica,sans-serif;
 }

-.rightDiv{
-    width: 50%;
-    height: 100%;
-    float: right;
-    background-color: yellow;
-    -webkit-border-top-right-radius: 7px;
-    -webkit-border-bottom-right-radius: 7px;
-    border-top-right-radius: 7px;
-    border-bottom-right-radius: 7px;
+.qstDivDisplay{
+    width: 90%;
+    margin: 5px 5%;
+    padding: 5px;
+    float: left;
+    font-family: Verdana,Arial,Helvetica,sans-serif;
+    border: 2px solid #cccccc;
+    -moz-border-radius: 5px;
+    -webkit-border-radius: 5px;
+    border-radius: 5px;
+    -moz-box-shadow: #dadada -1px 0 4px;
+    -webkit-box-shadow: #dadada -1px 0 4px;
+    box-shadow: #dadada -1px 0 4px;
 }

-.shadowDiv{
+.spanOptConn{
+    float: left;
    width: 100%;
-    display: none;
-    opacity: 0.7;
-    background-color: black;
-    -webkit-border-radius: 3px;
-    -webkit-border-radius: 3px;
-    border-radius: 3px;
-    border-radius: 3px;
-    z-index: 100;
 }

-.popupBack{
-    width: 360px;
-    height: 138px;
-    position: absolute;
-    background-image: url(../images/popupBack.png);
-    background-repeat: repeat;
-    -webkit-border-radius: 10px;
-    -webkit-border-radius: 10px;
-    border-radius: 10px;
+.qstNumber{
+    float: left;
+    font-size: 30px;
+    margin-left: 10px !important;
+    color: white;
+}
+
+.qstOptions{
+    float: right;
+}
+
+.changeOptions{
+    border: none;
+    height: 25px;
+    background-color: white;
+    width: auto;
+    color: black;
+    font-weight: bold;
+    cursor: pointer;
    border-radius: 10px;
-    display: none;
-    z-index: 500;
 }

-.popupContainers{
-    float: left;
-    width: 98%;
-    height: 36px;
-    padding: 5px 3px 5px 0;
-    overflow: hidden;
+.applyChanges{
+    border: none;
+    height: 25px;
+    background-color: white;
+    width: auto;
+    color: black;
+    font-weight: bold;
+    cursor: pointer;
+    border-radius: 10px;
 }

-.popupLabels{
-    color: yellow;
+.qstDelete{
+    border: none;
+    background-image: url(../images/bigBlackClose.png);
+    background-color: white;
+    background-repeat: no-repeat;
+    background-position: 45% 50%;
+    width: 25px;
+    height: 25px;
+    line-height: 25px;
+    cursor: pointer;
+    border-radius: 15px;
    margin: 0 5px;
 }

-.expresionInput{
-    float: right;
-    width: 70%;
-    border: none;
+.qstContent{
+    float: left;
+    padding: 3px;
+    margin-left: 10px;
+    margin-bottom: 10px;
+    width: 95%;
    font-family: Verdana,Arial,Helvetica,sans-serif;
-    background-color: #ffc;
-    -webkit-border-radius: 5px;
+    font-size: small;
+    border: 3px solid #ccc;
    -webkit-border-radius: 5px;
    border-radius: 5px;
-    border-radius: 5px;
+    -moz-box-shadow: #dadada -1px 0 4px;
+    -webkit-box-shadow: #dadada -1px 0 4px;
+    box-shadow: #dadada -1px 0 4px;
+    color: white;
 }

-.popupButtons{
-    float: right;
-    width: 74px;
-    height: 28px;
-    margin: 4px 5px;
+.qstContentDisplay{
+    float: left;
+    padding: 5px;
+    margin: 10px;
+    width: 100%;
+    font-family: Verdana,Arial,Helvetica,sans-serif;
+    color: white;
+}
+
+.ansDiv{
+    float: left;
+    margin-left: 100px;
+    width: 80%;
+}
+
+.ansAdd{
    border: none;
-    background-image: url(../images/greySquare2.png);
-    font-family: Verdana;
-    color: yellow;
+    height: 25px;
+    background-color: white;
+    font-weight: bold;
+    width: auto;
+    color: black;
    cursor: pointer;
-    -webkit-border-radius: 5px;
+    border-radius: 10px;
+}
+
+.newAnswer{
+    float: left;
+    width: 100%;
+    margin: 3px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
+}
+
+.ansSpan{
+    border: none;    
+    color: white;
+    font-size: 14px;
+    float: left;
+    margin: 0 3px;
+    width: 20px;
+}
+
+.ansSpanDisplay{
+    color: white;
+    font-size: 14px;
+    float: left;
+    font-weight: bold;
+}
+
+.ansContent{
+    padding: 1px 3px 3px 3px;
+    margin-left: 5px;
+    font-family: Verdana,Arial,Helvetica,sans-serif;
+    font-size: small;
+    width: 80%;
+    float: left;
+    border: 3px solid #ccc;
+    -webkit-border-radius: 5px;
    border-radius: 5px;
+    -moz-box-shadow: #dadada -1px 0 4px;
+    -webkit-box-shadow: #dadada -1px 0 4px;
+    box-shadow: #dadada -1px 0 4px;
+    color: white;
 }

-.readyTask{
-    margin: 2px;
-    padding: 2px;
-    width: 100%;
-    height: 100%;
-    overflow: hidden;
-    z-index: 100;
+.ansContentDisplay{
+    padding: 1px 3px 3px 3px;
+    margin-left: 5px;
+    font-family: Verdana,Arial,Helvetica,sans-serif;
+    font-size: small;
+    font-weight: bold;
+    width: 80%;
+    float: left;
+    -webkit-border-radius: 5px;
+    border-radius: 5px;    
+    color: white;
 }

-.taskContainer{
-    width: 96%;
+.ansDelete{
+    width: 25px;
+    height: 25px;
+    float: left;
+    border: none;
+    background-image: url(../images/bigBlackClose.png);
+    background-repeat: no-repeat;
+    background-position: 45% 50%;
+    background-color: white;
+    cursor: pointer;
+    margin: 0 5px;
+    border-radius: 15px;   
+}
+
+.qstOptChoice{    
+    width: 80%;
+    margin: 10px 10%;
+    float: left;
+    background-color: #F3F3F2;
+    border-top-width: 1px;
+    border-right-width: 1px;
+    border-bottom-width: 1px;
+    border-left-width: 1px;
+    border-top-style: solid;
+    border-right-style: solid;
+    border-bottom-style: solid;
+    border-left-style: solid;
+    border-top-color: #ECECEB;
+    border-right-color: #ECECEB;
+    border-bottom-color: #ECECEB;
+    border-left-color: #ECECEB;
+    border-top-left-radius: 5px 5px;
+    border-top-right-radius: 5px 5px;
+    border-bottom-right-radius: 5px 5px;
+    border-bottom-left-radius: 5px 5px;
+    -webkit-box-shadow: #dededd 0 0 2px inset;
+    padding: 0;
+}
+
+.optDescImg{
    padding: 2px;
+    margin: 5px;
+    background: url(../images/tool.png) -0px -0px no-repeat;
    float: left;
+    margin-left: 20px;
+    width: 56px;
+    height: 51px;
+}
+
+.optDescText{
    text-align: center;
+    width: 70%;
+    color: #666666;
+    float: left;
+    font-size: small;
    font-family: Verdana,Arial,Helvetica,sans-serif;
-    font-weight: bold;
+    margin: 3px 5px;
+    padding: 5px;
 }

-.editContainer{
-    position: absolute;
-    border: 5px solid #c7c7c7;
-    -webkit-border-radius: 5px;
+.type{
+    float: left;
+    margin: 10px;
+    padding: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
-    border-radius: 5px;
+    -moz-box-shadow: #dadada -1px 0 4px;
+    -webkit-box-shadow: #dadada -1px 0 4px;
+    box-shadow: #dadada -1px 0 4px;
+}
+
+.contentType{
+    width: 100%;
+    padding: 0;
+    margin: 0;
+    background-color: white;
+    border-bottom: 1px solid #DFDFDE;
+    border-top-left-radius: 5px 5px;
+    border-top-right-radius: 5px 5px;
 }

-.closeItem{
-    width: 30px;
+.divType1, .divType2, .divType3 {
+    width: 122px;
+    height: 97px;
+    padding: 0 15px;
+    margin-left: 30px;
+}
+
+.divType1{
+    background: url(../images/1thOption.png)-0px -0px no-repeat;
+}
+
+.divType2{
+    background: url(../images/2thOption.png)-0px -0px no-repeat;
+}
+
+.divType3{
+    background: url(../images/3thOption.png)-0px -0px no-repeat;
+}
+
+.textType{
+    width: 160px;
+    font-size: small;    
+    font-family: Verdana,Arial,Helvetica,sans-serif;
+    color: #666;
+    padding: 3px;
+    margin-left: 20px;
+}
+
+.radioDiv{
+    background-color: #F5F5F5;
+    border-top: 1px solid white;
+    width: 100%;
+    padding: 0;
+    margin: 0;
    height: 30px;
-    position: absolute;
-    background-image: url(../images/icon-close.png);
-    right: -15px;
-    top: -15px;
+    border-bottom-right-radius: 5px 5px;
+    border-bottom-left-radius: 5px 5px;
 }

-.rightResize{
-    width: 10px;
-    height: 65%;
-    cursor: e-resize;
-    position: absolute;
-    background: none;
-    right: -10px;
-    top: 20%;
+.radioType{
+    float: right;
+    margin: 2px;
+    padding: 3px;
 }

-.bottomResize{
-    width: 65%;
-    height: 10px;
-    cursor: n-resize;
+.popupWordInfo{
    position: absolute;
-    background: none;
-    bottom: -10px;
-    left: 20%;
+    display: none;
+    width: 100px;
+    height: 20px;
+    top: 0;
+    left: 0;
+    text-align: center;
+    border: 1px solid #B9B9B9;
+    background-color: #eaebeb;
+    color: black;
+    -webkit-border-radius: 5px;
+    border-radius: 5px;
+    -webkit-box-shadow: #dadada -1px 0 4px;
+    box-shadow: #dadada -1px 0 4px;
+    z-index: 100;
+}
+
+#answerText{
+    padding: 3px;
+    -webkit-border-radius: 3px;
+    border-radius: 3px;
 }

 /*new design*/
@ -254,22 +457,22 @@ body{

 #wgt_name{
    height: 44px;
-    width: 300px;
+    width: 220px;
    margin: 10px 10px 0 10px;
    padding: 0;
    float: left;
-    /*font-family: "Lobster13Regular";*/
+    font-family: "Lobster13Regular";
    font-size: 24px;
    color: #8c5730;
 }

-#wgt_reload, #wgt_edit, #wgt_display,#wgt_add{
+#wgt_reload, #wgt_edit, #wgt_display{
    cursor: pointer;
-    width: 95px;
+    width: 80px;
    height: 44px;
    margin: 10px 10px 0 0;
    float: right;
-    /*font-family: "Lobster13Regular";*/
+    font-family: "Lobster13Regular";
    font-size: 24px;   
    color: #8c5730;
 }
@ -298,17 +501,9 @@ body{
    background-position: top 0;
 }

-#wgt_add{
-    padding-left: 40px;
-    background-image: url(../images/plus.png);
-    background-repeat: no-repeat;
-    background-position: top 0;
-    display: none;
-}
-
 .style_select{    
    width: 120px;
-    /*font-family: "Lobster13Regular";*/
+    font-family: "Lobster13Regular";
    font-size: 24px;
    float: right;
    margin: 10px 20px 0 0;
@ -366,12 +561,8 @@ body{
    background-image: url(../images/slate-display.png) !important;
 }

-.pad_add{
-    background-image: url(../images/plus-white.png) !important;
-}
-
 .pad_select{
    background-color: black !important;
    color: white !important;
    background-image: url(../images/ar_down_white.png) !important;
-}
+}
--- a/resources/library/interactivities/Choisir.wgt/scripts/selQuestionApp.js
+++ b/resources/library/interactivities/Choisir.wgt/scripts/selQuestionApp.js
@ -75,7 +75,7 @@ function init(){
    
    //import saved data
    if(window.sankore){
-        if(sankore.preference("qstArrayData","")){
+        if(sankore.preference("qstArrayData","") && sankore.preference("qstArrayData","") != "[]"){
            questionArray = jQuery.parseJSON(sankore.preference("qstArrayData",""));
            for(var i in questionArray){
                addQstBlock(questionArray[i].id, questionArray[i].text, questionArray[i].type,"style='display: none;'");
@ -114,6 +114,8 @@ function init(){
                $("#wgt_edit").css("display", "block");
                displayData(true);
                mode = true;
+                sankore.setPreference("qstArrayData", JSON.stringify(questionArray));
+                sankore.setPreference("choisir_style", $(".style_select").find("option:selected").val());
            }
        } else {            
            if(!$(this).hasClass("selected")){
@ -129,7 +131,16 @@ function init(){
    });

    $("#wgt_reload").text(sankoreLang.reload).click(function(){
-        window.location.reload();
+        //window.location.reload();
+        //        if(!sankore.preference("qstArrayData","") || sankore.preference("qstArrayData","") == "[]" || sankore.preference("qstArrayData","") == "[null]"){
+        //            $(".qstDivDisplay").remove();
+        //            displayData(false);
+        //        }
+        //        else
+        if($("#wgt_edit").css("display") == "none")
+            $("#wgt_display").trigger("click");
+        else
+            window.location.reload();
    });
    
    $(".style_select option[value='1']").text(sankoreLang.slate);
@ -225,7 +236,13 @@ function init(){
                questionArray[i].rightAns = questionArray[i].rightAns.replace($("#" + currentQstId + " #" + id + " input:checkbox").val(),"");
                for(var j in questionArray[i].answers)
                    if(questionArray[i].answers[j].id == id){
-                        delete questionArray[i].answers[j];
+                        if(j == 0)
+                            questionArray[i].answers.shift();
+                        else
+                        if((j+1) == questionArray[i].answers.length)
+                            questionArray[i].answers.pop();
+                        else
+                            questionArray[i].answers = questionArray[i].answers.slice(0,j).concat(questionArray[i].answers.slice(j+1));  
                        break;
                    }
            }
@ -238,7 +255,13 @@ function init(){
        $("#" + currentQstId).remove();
        for(var i in questionArray)
            if(questionArray[i].id == currentQstId){
-                delete questionArray[i];
+                if(i == 0)
+                    questionArray.shift();
+                else
+                if((i+1) == questionArray.length)
+                    questionArray.pop();
+                else
+                    questionArray = questionArray.slice(0,i).concat(questionArray.slice(i+1));                
                break;
            }
        refreshQst();