Skip to content

O
OpenBoard
Commit 82cae538 authored by unknown's avatar unknown
Browse files
Options

upgraded Choisir app

parent 46e4d409
Hide whitespace changes
Inline Side-by-side
Showing with 137 additions and 26 deletions
resources/library/interactive/Choisir.wgt/css/basic.css
View file @ 82cae538
...@@ -136,7 +136,7 @@ body{ ...@@ -136,7 +136,7 @@ body{
padding: 3px; padding: 3px;
margin-left: 10px; margin-left: 10px;
margin-bottom: 10px; margin-bottom: 10px;
width: 100%; width: 95%;
font-family: Verdana,Arial,Helvetica,sans-serif; font-family: Verdana,Arial,Helvetica,sans-serif;
font-size: small; font-size: small;
border: 3px solid #ccc; border: 3px solid #ccc;
...@@ -177,17 +177,17 @@ body{ ...@@ -177,17 +177,17 @@ body{
float: left; float: left;
width: 100%; width: 100%;
margin: 3px; margin: 3px;
-webkit-border-radius: 5px;
border-radius: 5px;
} }
.ansSpan{ .ansSpan{
border: none; border: none;
background: url(../images/point.png) -0px -0px no-repeat;
background-color: white; background-color: white;
background-position: 0 50%;
color: #00C6FF; color: #00C6FF;
font-size: 14px; font-size: 14px;
float: left; float: left;
padding-left: 35px; margin: 0 3px;
width: 20px; width: 20px;
} }
...@@ -213,22 +213,25 @@ body{ ...@@ -213,22 +213,25 @@ body{
} }
.ansContentDisplay{ .ansContentDisplay{
padding: 1px 3px 3px 3px; padding: 1px 3px 3px 3px;
margin-left: 5px; margin-left: 5px;
font-family: Verdana,Arial,Helvetica,sans-serif; font-family: Verdana,Arial,Helvetica,sans-serif;
font-size: small; font-size: small;
width: 90%; width: 90%;
float: left; float: left;
-webkit-border-radius: 5px;
border-radius: 5px;
} }
.ansDelete{ .ansDelete{
float: right; float: left;
border: none; border: none;
background-image: url(../images/boldGreyClose.png); background-image: url(../images/boldGreyClose.png);
background-color: white; background-color: white;
background-repeat: no-repeat; background-repeat: no-repeat;
background-position: 0 50%; background-position: 0 50%;
cursor: pointer; cursor: pointer;
margin: 0 5px;
} }
.qstOptChoice{ .qstOptChoice{
......
resources/library/interactive/Choisir.wgt/scripts/selQuestionApp.js
View file @ 82cae538
...@@ -24,6 +24,7 @@ function init(){ ...@@ -24,6 +24,7 @@ function init(){
var mode = false; var mode = false;
questionArray = new Array(); questionArray = new Array();
var popupFlag = false var popupFlag = false
var flagForSelect = false;
// toggle button // toggle button
var buttonDiv = $("<div id='buttonDiv' class='buttonDiv'>").appendTo("body"); var buttonDiv = $("<div id='buttonDiv' class='buttonDiv'>").appendTo("body");
...@@ -49,11 +50,19 @@ function init(){ ...@@ -49,11 +50,19 @@ function init(){
for(var i in questionArray){ for(var i in questionArray){
addQstBlock(questionArray[i].id, questionArray[i].text, questionArray[i].type,"style='display: none;'"); addQstBlock(questionArray[i].id, questionArray[i].text, questionArray[i].type,"style='display: none;'");
for(var j in questionArray[i].answers) for(var j in questionArray[i].answers)
addAnsBlock(questionArray[i].answers[j].id, questionArray[i].id, questionArray[i].answers[j].text); addAnsBlock(questionArray[i].answers[j].id, questionArray[i].id, questionArray[i].answers[j].text, true, questionArray[i].rightAns, questionArray[i].type);
} }
/*for(var i in questionArray)
setInputSelected(questionArray[i].id, questionArray[i].type, questionArray[i].rightAns);
alert(2); */
} }
} }
//saving widget data into sankore object for a correct import
$("body").mouseout(function(){
if(window.sankore)
sankore.setPreference("qstArrayData", JSON.stringify(questionArray));
})
// add question // add question
addQstButton.click(function(){ addQstButton.click(function(){
//question block //question block
...@@ -119,6 +128,12 @@ function init(){ ...@@ -119,6 +128,12 @@ function init(){
$(".qstDiv").live('mouseover', function() { $(".qstDiv").live('mouseover', function() {
currentQstId = this.id; currentQstId = this.id;
}); });
//set used at this moment question id into the variable
$(".qstDivDisplay").live('mouseover', function() {
if(!flagForSelect)
currentQstId = this.id.replace("qstDivDisplay","");
});
//adding new answer //adding new answer
$(".ansAdd").live('click', function(){ $(".ansAdd").live('click', function(){
...@@ -176,9 +191,10 @@ function init(){ ...@@ -176,9 +191,10 @@ function init(){
$(".ansDelete").live('click', function(){ $(".ansDelete").live('click', function(){
popupText.hide(); popupText.hide();
var id = this.id.replace("ansDelete",""); var id = this.id.replace("ansDelete","");
$("#" + id).remove(); $("#" + currentQstId + " #" + id).remove();
for(var i in questionArray) for(var i in questionArray)
if(questionArray[i].id == currentQstId){ if(questionArray[i].id == currentQstId){
questionArray[i].rightAns = questionArray[i].rightAns.replace($("#" + currentQstId + " #" + id + " input:checkbox").val(),"");
for(var j in questionArray[i].answers) for(var j in questionArray[i].answers)
if(questionArray[i].answers[j].id == id){ if(questionArray[i].answers[j].id == id){
delete questionArray[i].answers[j]; delete questionArray[i].answers[j];
...@@ -215,14 +231,48 @@ function init(){ ...@@ -215,14 +231,48 @@ function init(){
}); });
//select option //select option
$("input:radio").live('click', function(event){ $(".qstOptChoice input:radio").live('click', function(event){
if(!mode){ if(!mode){
$("#" + currentQstId + " input:radio").removeAttr("checked"); $("#" + currentQstId + "qstOptChoice input:radio").removeAttr("checked");
$(event.target).attr("checked", "checked"); $(event.target).attr("checked", "checked");
getNeededElement(questionArray, currentQstId).type = $(event.target).attr("value"); getNeededElement(questionArray, currentQstId).type = $(event.target).attr("value");
} }
}); });
//select right ansver in edit mode and answer question in display mode
$(".newAnswer input").live('click', function(event){
if(!mode){
if(getNeededElement(questionArray, currentQstId).type == "1" || getNeededElement(questionArray, currentQstId).type == "3"){
$("#" + currentQstId + "ansDiv input").removeAttr("checked");
$(event.target).attr("checked", "checked");
getNeededElement(questionArray, currentQstId).rightAns = $(event.target).attr("value");
//alert(getNeededElement(questionArray, currentQstId).rightAns);
} else {
//alert(event.target.checked)
(event.target.checked) ? $(event.target).attr("checked", "checked") : $(event.target).removeAttr("checked", "checked");
getNeededElement(questionArray, currentQstId).rightAns = "";
for(var i in $("#" + currentQstId + "ansDiv input")){
if($("#" + currentQstId + "ansDiv input")[i].checked)
getNeededElement(questionArray, currentQstId).rightAns += $("#" + currentQstId + "ansDiv input")[i].value + ", ";
}
}
} else {
if(event.target.type == "radio"){
if(event.target.value == getNeededElement(questionArray, currentQstId).rightAns)
$(event.target).next().next().css("background-color","#6c0");
else
$(event.target).next().next().css("background-color","#f66");
} else {
//alert(event.target.value + " | " + getNeededElement(questionArray, currentQstId).rightAns + " | " + getNeededElement(questionArray, currentQstId).rightAns.replace(/,/g,"") + " | " + getNeededElement(questionArray, currentQstId).rightAns.replace(",","").indexOf(event.target.value + " ", 0) )
if(getNeededElement(questionArray, currentQstId).rightAns.replace(/,/g,"").indexOf(event.target.value + " ", 0) != -1)
$(event.target).next().next().css("background-color","#6c0");
else
$(event.target).next().next().css("background-color","#f66");
}
}
});
//popup messages //popup messages
$(".qstDelete").live('mouseover', function(evt){ $(".qstDelete").live('mouseover', function(evt){
popupFlag = true; popupFlag = true;
...@@ -252,16 +302,54 @@ function init(){ ...@@ -252,16 +302,54 @@ function init(){
}); });
}); });
$(".qstDelete, .ansDelete").live('mousemove', function(evt){ $(".newAnswer input").live('mouseover', function(evt){
popupText.css("top", evt.pageY + 15) if(!mode){
.css("left", evt.pageX - 40) popupFlag = true;
popupText.text("Right answer")
.css("top", evt.pageY + 15)
.css("left", evt.pageX - 40)
.css({
width:"105px"
})
.show("fast", function(){
if(!popupFlag)
popupText.hide();
});
}
}); });
$(".qstDelete, .ansDelete").live('mouseout', function(evt){ $(".qstDelete, .ansDelete, .newAnswer input").live('mousemove', function(evt){
popupFlag = false; if(!mode){
popupText.hide(); popupText.css("top", evt.pageY + 15)
.css("left", evt.pageX - 40);
}
});
$(".qstDelete, .ansDelete, .newAnswer input").live('mouseout', function(evt){
if(!mode){
popupFlag = false;
popupText.hide();
}
}); });
//answer the questions
$("select").live('change', function(evt){
if(mode){
//alert(currentQstId + " | " + event.target.value + " | " + getNeededElement(questionArray, currentQstId).rightAns)
if(event.target.value == getNeededElement(questionArray, currentQstId).rightAns)
$(event.target).parent().css("background-color","#6c0");
else
$(event.target).parent().css("background-color","#f66");
flagForSelect = false;
}
});
$("select").live('mousedown', function(evt){
if(mode){
flagForSelect = true;
}
});
//toggle button click trigger //toggle button click trigger
toggleButton.trigger("click"); toggleButton.trigger("click");
...@@ -286,11 +374,11 @@ function init(){ ...@@ -286,11 +374,11 @@ function init(){
var counter = 1; var counter = 1;
for(var i in array){ for(var i in array){
var qstDiv = $("<div class='qstDivDisplay'>"); var qstDiv = $("<div class='qstDivDisplay' id='" + array[i].id + "qstDivDisplay'>");
var spanOptConn = $("<div class='spanOptConn'>").appendTo(qstDiv); var spanOptConn = $("<div class='spanOptConn'>").appendTo(qstDiv);
var qstNumber = $("<span class='qstNumber'>Question " + counter + "</span>").appendTo(spanOptConn); var qstNumber = $("<span class='qstNumber'>Question " + counter + "</span>").appendTo(spanOptConn);
var qstContent = $("<div class='qstContentDisplay'>" + array[i].text + "</div>").appendTo(qstDiv); var qstContent = $("<div class='qstContentDisplay'>" + array[i].text + "</div>").appendTo(qstDiv);
var ansDiv = $("<div class='ansDiv'>").appendTo(qstDiv); var ansDiv = $("<div class='ansDiv' id='" + array[i].id + "ansDiv'>").appendTo(qstDiv);
var ansCount = 1; var ansCount = 1;
var type = array[i].type; var type = array[i].type;
...@@ -305,26 +393,26 @@ function init(){ ...@@ -305,26 +393,26 @@ function init(){
switch(type){ switch(type){
case "1": case "1":
newAnswer = $("<div class='newAnswer'>"); newAnswer = $("<div class='newAnswer'>");
var ansInput = $("<input type='radio' name='" + counter + "' style='float: left; margin-right: 10px;'/>").appendTo(newAnswer); var ansInput = $("<input type='radio' name='" + counter + "' value='" + array[i].answers[j].value + "' style='float: left; margin-right: 10px;'/>").appendTo(newAnswer);
var ansSpan = $("<span class='ansSpanDisplay'>" + ansCount + ".</span>").appendTo(newAnswer); var ansSpan = $("<span class='ansSpanDisplay'>" + ansCount + ".</span>").appendTo(newAnswer);
var ansContent = $("<div class='ansContentDisplay'>" + array[i].answers[j].text + "</div>").appendTo(newAnswer); var ansContent = $("<div class='ansContentDisplay'>" + array[i].answers[j].text + "</div>").appendTo(newAnswer);
newAnswer.appendTo(ansDiv); newAnswer.appendTo(ansDiv);
break; break;
case "2": case "2":
newAnswer = $("<div class='newAnswer'>"); newAnswer = $("<div class='newAnswer'>");
ansInput = $("<input type='checkbox' style='float: left; margin-right: 10px;'/>").appendTo(newAnswer); ansInput = $("<input type='checkbox' value='" + array[i].answers[j].value + "' style='float: left; margin-right: 10px;'/>").appendTo(newAnswer);
ansSpan = $("<span class='ansSpanDisplay'>" + ansCount + ".</span>").appendTo(newAnswer); ansSpan = $("<span class='ansSpanDisplay'>" + ansCount + ".</span>").appendTo(newAnswer);
ansContent = $("<div class='ansContentDisplay'>" + array[i].answers[j].text + "</div>").appendTo(newAnswer); ansContent = $("<div class='ansContentDisplay'>" + array[i].answers[j].text + "</div>").appendTo(newAnswer);
newAnswer.appendTo(ansDiv); newAnswer.appendTo(ansDiv);
break; break;
case "3": case "3":
ansInput = $("<option value='" + ansCount + "'>" + array[i].answers[j].text + "</option>").appendTo(selInput); ansInput = $("<option value='" + array[i].answers[j].value + "'>" + array[i].answers[j].text + "</option>").appendTo(selInput);
break; break;
} }
ansCount++; ansCount++;
} }
qstDiv.appendTo("body"); qstDiv.appendTo("body");
counter ++; counter++;
} }
} else { } else {
counter = 1; counter = 1;
...@@ -413,13 +501,32 @@ function addQstBlock(id, text, type, style){ ...@@ -413,13 +501,32 @@ function addQstBlock(id, text, type, style){
} }
//add answers //add answers
function addAnsBlock(id, currId, text){ function addAnsBlock(id, currId, text, stage, rightAns, type){
var newAnswer = $("<div class='newAnswer' id='" + id + "'>"); var newAnswer = $("<div class='newAnswer' id='" + id + "'>");
var value;
var check = "";
if(stage){
value = getNeededElement(getNeededElement(questionArray, currId).answers,id).value;
if(type != "2"){
if(rightAns == value)
check = "checked='true'";
}
else {
rightAns = rightAns.replace(/,/g,"");
if(rightAns.indexOf(value + " ", 0) != -1)
check = "checked='true'";
}
}
else {
value = ($("#" + currId + " .newAnswer input:checkbox").last().val()) ? parseInt($("#" + currId + " .newAnswer input:checkbox").last().val()) + 1 : 1;
getNeededElement(getNeededElement(questionArray, currId).answers,id).value = value;
}
var count = $("#" + currId + " .newAnswer").size() + 1; var count = $("#" + currId + " .newAnswer").size() + 1;
var input = $("<input type='checkbox' style='float: left;' value='" + value + "' " + check + ">").appendTo(newAnswer);
var ansSpan = $("<span class='ansSpan'>A" + count + "</span>").appendTo(newAnswer); var ansSpan = $("<span class='ansSpan'>A" + count + "</span>").appendTo(newAnswer);
var ansContent = $("<div class='ansContent' id='" + id +"ansContent' contenteditable='true'>" + text + "</div>").appendTo(newAnswer); var ansContent = $("<div class='ansContent' id='" + id +"ansContent' contenteditable='true'>" + text + "</div>").appendTo(newAnswer);
var ansDelete = $("<button class='ansDelete' id='" + id + "ansDelete'>").appendTo(newAnswer); var ansDelete = $("<button class='ansDelete' id='" + id + "ansDelete'>").appendTo(newAnswer);
newAnswer.insertBefore("#" + currId + "ansDiv .ansAdd"); newAnswer.insertBefore("#" + currId + "ansDiv .ansAdd");
if(window.sankore) if(window.sankore)
sankore.setPreference("qstArrayData", JSON.stringify(questionArray)); sankore.setPreference("qstArrayData", JSON.stringify(questionArray));
...@@ -466,7 +573,7 @@ function Question(){ ...@@ -466,7 +573,7 @@ function Question(){
this.id = ""; this.id = "";
this.rightAns = 1; this.rightAns = "";
this.answers = new Array(); this.answers = new Array();
...@@ -479,4 +586,5 @@ function Answer(){ ...@@ -479,4 +586,5 @@ function Answer(){
this.text = ""; this.text = "";
this.value = "";
} }
\ No newline at end of file
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment