988 lines
34 KiB
JavaScript
988 lines
34 KiB
JavaScript
// vim:ft=javascript
|
|
|
|
//----------------------------------------------------------------
|
|
//
|
|
// Initialize namespace
|
|
//
|
|
//----------------------------------------------------------------
|
|
|
|
(function() {
|
|
if (typeof WebGUI == "undefined") {
|
|
var WebGUI = {};
|
|
}
|
|
var Survey = {};
|
|
|
|
//----------------------------------------------------------------
|
|
//
|
|
// Global Params
|
|
//
|
|
//----------------------------------------------------------------
|
|
var objects = new Array();
|
|
objects[0] = undefined;
|
|
var slength = 1;
|
|
|
|
//----------------------------------------------------------------
|
|
//
|
|
// List Super Object
|
|
//
|
|
//----------------------------------------------------------------
|
|
//function listObject(type){
|
|
Survey.listObject = function(type){
|
|
var loType = type;
|
|
this.dom;
|
|
this.toggleOn = function(){
|
|
if(loType == 'section'){
|
|
this.dom.className="sselected";
|
|
}else if(loType == 'question'){
|
|
this.dom.className="qselected";
|
|
}
|
|
}
|
|
this.toggleOff = function(){
|
|
this.dom.className=loType;
|
|
}
|
|
this.getType = function(){return loType;}
|
|
}
|
|
|
|
|
|
//----------------------------------------------------------------
|
|
//
|
|
// Section definition
|
|
//
|
|
//----------------------------------------------------------------
|
|
//function section(text,s,randomize){
|
|
Survey.Section = function(text,s,randomize){
|
|
//inheritence
|
|
this.inherit= Survey.listObject;
|
|
this.inherit("section");
|
|
|
|
var sectionUL = document.getElementById('sections');
|
|
|
|
this.text = text;
|
|
this.sId = "S"+(slength++);
|
|
this.id = s.toString();
|
|
this.randomize = randomize;
|
|
this.questions = new Array();
|
|
this.dd;
|
|
this.ddt;
|
|
this.addThyself = function(){
|
|
if(this.dom != undefined){alert("dom already defined");return}
|
|
this.dom = document.createElement('li');
|
|
this.dom.id=this.id;//use slice to get just the number. Q used to protect namespace from A numbered objects
|
|
this.updateHTML();
|
|
// this.className = this.getType();
|
|
|
|
var holder = document.createElement('ul');
|
|
holder.className = "questionList";
|
|
holder.id = this.id + "QL";
|
|
holder.innerHTML = "<li></li>";
|
|
|
|
|
|
var pli = document.createElement('li');//parent li, containter to hold section li and question ul.
|
|
pli.id = this.id+"div";
|
|
pli.className = this.getType();
|
|
sectionUL.appendChild(pli);
|
|
pli.appendChild(this.dom);
|
|
pli.appendChild(holder);
|
|
|
|
this.ddt = new YAHOO.util.DDTarget(this.id+"QL","questions");
|
|
|
|
this.dd = new WebGUI.DDList(this.id+"div","sections");
|
|
this.dd.isTarget = false;
|
|
this.dd.addToGroup("trashcan");
|
|
this.dd.setHandleElId(this.id);
|
|
|
|
YAHOO.util.Event.addListener(this.id, "click", WebGUI.SectionHandler.clicked);
|
|
}
|
|
this.updateHTML = function(){
|
|
this.dom.innerHTML="<b>["+this.sId+"]</b>"+ " " + this.text.substr(0,25) + " ...";
|
|
}
|
|
this.updateLoc = function(loc){
|
|
this.sId = "S"+loc;
|
|
this.updateHTML();
|
|
}
|
|
this.removeQuestion = function(id){
|
|
for(var i = 0; i <= this.questions.length; i++){
|
|
if(this.questions[i] == id){
|
|
this.questions.splice(i,1);
|
|
break;
|
|
}
|
|
}
|
|
}
|
|
this.addThyself();
|
|
|
|
this.noDrag = function(){
|
|
this.dd.lock();
|
|
},
|
|
|
|
this.removeThyself = function(){
|
|
if(this.dom == undefined){ alert("dom is not defined"); return; }
|
|
YAHOO.util.Event.removeListener(this.id, "click");
|
|
this.dd.setHandleElId(undefined);
|
|
this.dd.unreg();
|
|
this.dd = undefined;
|
|
var p = this.dom.parentNode;
|
|
p.removeChild(this.dom.nextSibling);
|
|
p.removeChild(this.dom);
|
|
p.parentNode.removeChild(p);
|
|
this.dom = undefined;
|
|
}
|
|
|
|
this.showThyself = function(){
|
|
document.getElementById("sid").innerHTML = this.sId;
|
|
document.getElementById("sectioninputtext").value = this.text;
|
|
var menu = WebGUI.Menu.getsMenu();
|
|
menu.getItem(0).cfg.setProperty("checked",this.randomize);
|
|
}
|
|
this.update = function(text,randomize){
|
|
this.text = text;
|
|
this.randomize = randomize;
|
|
this.updateHTML();
|
|
}
|
|
this.DESTROY = function(){
|
|
for(var q in this.questions){
|
|
objects[this.questions[q]].DESTROY();
|
|
}
|
|
this.removeThyself();
|
|
slength--;
|
|
objects[this.id] = undefined;
|
|
WebGUI.Menu.newS();
|
|
}
|
|
}
|
|
//Notes, use previousSibling,nextSibling to get ids of siblings, and insertBefore or appendChild to add elements.
|
|
WebGUI.SectionHandler = function(){
|
|
return{
|
|
clicked: function() {//new section event button, prompts the new section menu
|
|
WebGUI.DM.showThis(this.id);
|
|
}
|
|
}
|
|
}();
|
|
|
|
|
|
|
|
//----------------------------------------------------------------
|
|
//
|
|
// Answer definition
|
|
//
|
|
//----------------------------------------------------------------
|
|
Survey.Answer = function(id,qid){
|
|
//inheritence
|
|
this.inherit= Survey.listObject;
|
|
this.inherit("answer");
|
|
this.avalues = [{'atext':"",'ameta':""}]; //array of associative arrays. Array maps to answer types. associate arrays map to all possible responses
|
|
this.qId = qid;
|
|
this.id = id;
|
|
this.aId = "A"+objects[this.qId].answers.length;
|
|
var answerUL = document.getElementById("answers");
|
|
objects[this.qId].answers[objects[this.qId].answers.length] = this.id;
|
|
this.addThyself = function(){
|
|
if(this.dom != undefined){alert("dom already defined");return}
|
|
this.dom = document.createElement('li');
|
|
this.dom.id=this.id;//use slice to get just the number. Q used to protect namespace from A numbered objects
|
|
this.dom.className = this.getType();
|
|
this.updateHTML();
|
|
answerUL.appendChild(this.dom);
|
|
this.dd = new WebGUI.DDList(this.id.toString(),"answers");
|
|
this.dd.addToGroup("trashcan");
|
|
YAHOO.util.Event.addListener(this.id.toString(), "click", WebGUI.AnswerHandler.clicked);
|
|
}
|
|
this.updateHTML = function(){
|
|
this.dom.innerHTML="<b>["+this.aId+"]</b>";
|
|
}
|
|
this.showThyself = function(){
|
|
document.getElementById('asid').innerHTML = objects[this.sId].sId;
|
|
document.getElementById('aqid').innerHTML = objects[this.qId].qId;
|
|
document.getElementById('aid').innerHTML = this.aId;
|
|
}
|
|
this.hide = function(){
|
|
}
|
|
this.show = function(){
|
|
}
|
|
this.DESTROY = function(){
|
|
if(this.dom == undefined){ alert("dom is not defined"); return; }
|
|
YAHOO.util.Event.removeListener(this.id, "click");
|
|
this.dom.parentNode.removeChild(this.dom);
|
|
this.dom = undefined;
|
|
this.dd.unreg();
|
|
objects[this.id] = undefined;
|
|
}
|
|
}
|
|
WebGUI.AnswerHandler = function(){
|
|
return{
|
|
clicked: function() {//new section event button, prompts the new section menu
|
|
alert('click');
|
|
// WebGUI.DM.showThis(this.id);
|
|
}
|
|
}
|
|
}();
|
|
|
|
|
|
|
|
|
|
//----------------------------------------------------------------
|
|
//
|
|
// Question definition
|
|
//
|
|
//----------------------------------------------------------------
|
|
//function question(qid,type,typeName,text,options,toptions,sid){
|
|
Survey.Question = function(qid,type,typeName,text,options,toptions,sid){
|
|
//inheritence
|
|
this.inherit= Survey.listObject;
|
|
this.inherit("question");
|
|
this.type = type; //index to the qMenu YUI menu containing this question type
|
|
this.typeName = typeName;
|
|
this.text = text; //Question text
|
|
this.id = qid;
|
|
this.sId = sid; //Section parent node id attribute
|
|
objects[sid].questions[objects[sid].questions.length] = qid;
|
|
this.qId = "Q"+ objects[this.sId].questions.length //Nodes id attribute
|
|
this.options = options; //indexes to the oMenu YUI menu
|
|
this.textOptions = toptions; //strings indexed by the ids of the option input fields
|
|
this.answers = new Array();
|
|
this.answersRef = new Array(); //2D array of [qid][aid] which point at this qid. Used for updating answers when this question is reordered/deleted
|
|
|
|
var questionUL = document.getElementById(this.sId.toString()+"QL");
|
|
|
|
this.loc;
|
|
|
|
this.addThyself = function(){
|
|
this.dom = document.createElement('li'); //reference to this questions dom object
|
|
this.dom.className = this.getType();
|
|
this.dom.id = this.id.toString();
|
|
this.updateHTML();
|
|
questionUL.appendChild(this.dom);
|
|
this.dd = new WebGUI.DDList(this.id.toString(),"questions");
|
|
this.dd.addToGroup("trashcan");
|
|
YAHOO.util.Event.addListener(this.id.toString(), "click", WebGUI.QuestionHandler.clicked);
|
|
}
|
|
this.updateHTML = function(){
|
|
this.dom.innerHTML="<b>["+this.qId+ " "+ this.typeName+"]</b> " + this.text.substr(0,25) + " ...";
|
|
}
|
|
this.addThyself();
|
|
|
|
this.index = function(){
|
|
var t = this.qId.split("-");
|
|
return (t[1].slice(1)-1);
|
|
}
|
|
|
|
this.removeThyself = function(){
|
|
if(this.dom == undefined){ alert("dom is not defined"); return; }
|
|
YAHOO.util.Event.removeListener(this.id.toString(), "click");
|
|
this.dom.parentNode.removeChild(this.dom);
|
|
this.dom = undefined;
|
|
this.dd.unreg();
|
|
objects[this.sId].removeQuestion(this.id);
|
|
}
|
|
this.showThyself = function(){
|
|
document.getElementById("qid").innerHTML = this.qId;
|
|
document.getElementById("qsid").innerHTML = objects[this.sId].sId;
|
|
document.getElementById("questioninputtext").value = this.text;
|
|
WebGUI.Menu.clearMenus();
|
|
var menu = WebGUI.Menu.getqMenu();
|
|
menu.getItem(this.type).cfg.setProperty("checked",true);
|
|
//WebGUI.Menu.qTypeClick(null,[null,qMenu.getItem(q['type'])],null);
|
|
WebGUI.Menu.loadOMenu(this.type);
|
|
var oMenu = WebGUI.Menu.getoMenu();
|
|
for(var i in this.options){
|
|
oMenu.getItem(this.options[i]).cfg.setProperty("checked",true);
|
|
}
|
|
try{
|
|
document.getElementById('max').value = q['max'];
|
|
}catch(e){}
|
|
try{
|
|
document.getElementById('min').value = q['min'];
|
|
}catch(e){}
|
|
try{
|
|
document.getElementById('step').value = q['step'];
|
|
}catch(e){}
|
|
|
|
}
|
|
this.update = function(type, typeName,text,options,toptions){
|
|
this.type=type;
|
|
this.typeName = typeName;
|
|
this.text = text;
|
|
this.options = options;
|
|
this.textOptions = toptions;
|
|
this.updateHTML();
|
|
}
|
|
this.updateLoc = function(sid,loc){
|
|
this.sId = sid;
|
|
this.qId = "Q"+loc;
|
|
this.updateHTML();
|
|
}
|
|
this.DESTROY = function(){
|
|
//remove event handler, dom, answerRefs, question, and answers
|
|
for(var i in this.answers){
|
|
this.answers[i].DESTROY();
|
|
}
|
|
for(var i in this.answersRef){
|
|
this.answersRef[i].unlink();
|
|
}
|
|
this.removeThyself();
|
|
objects[this.id] = undefined;
|
|
WebGUI.Menu.newQ();
|
|
}
|
|
}
|
|
WebGUI.QuestionHandler = function(){
|
|
return{
|
|
clicked: function() {//new question event button, prompts the new question menu
|
|
WebGUI.DM.showThis(this.id);
|
|
}
|
|
}
|
|
}();
|
|
|
|
|
|
//----------------------------------------------------------------
|
|
//
|
|
// Display Manager
|
|
//
|
|
//----------------------------------------------------------------
|
|
WebGUI.DM = function(){
|
|
var lastObject;//Current Question
|
|
return{
|
|
updateSectionDOMLists: function(){
|
|
//Loop through sections ul then answer ul and make sure everything is in the right place.
|
|
var q = document.getElementById('sections');
|
|
var loc = 1;
|
|
var tsections = new Array();
|
|
var start = q.firstChild;//the li which contains the a ul which contains the current section li and
|
|
while(start){
|
|
var section = start.firstChild.id;
|
|
start = start.nextSibling;
|
|
objects[section].updateLoc(loc++);
|
|
objects[section].questions = new Array();
|
|
this.updateQuestionDOMList(section,section+"QL");
|
|
}
|
|
|
|
},
|
|
updateQuestionDOMList: function(sid, parent){
|
|
var q = document.getElementById(parent);
|
|
var start = q.firstChild;
|
|
var loc = 1;
|
|
while(start){
|
|
var section = start.id;
|
|
if(! start.id){
|
|
start = start.nextSibling;
|
|
continue;
|
|
}
|
|
start = start.nextSibling;
|
|
objects[section].updateLoc(sid,loc++);
|
|
objects[sid].questions[objects[sid].questions.length] = section;
|
|
}
|
|
},
|
|
|
|
updateAnswerDOMLists: function(){
|
|
},
|
|
showThis: function(Id) {
|
|
this.clearLast();
|
|
lastObject = Id;
|
|
try{
|
|
objects[lastObject].toggleOn();
|
|
WebGUI.Menu.sselected(lastObject);
|
|
WebGUI.Menu.showEditSection();
|
|
}catch(e){}
|
|
try{
|
|
objects[objects[lastObject].sId].toggleOn();
|
|
WebGUI.Menu.sselected(objects[objects[lastObject].sId].id);
|
|
WebGUI.Menu.qselected(lastObject);
|
|
WebGUI.Menu.showEditQuestion();
|
|
}catch(e){}
|
|
try{
|
|
objects[objects[objects[lastObject].qId].sId].toggleOn();
|
|
WebGUI.Menu.sselected(objects[objects[objects[lastObject].qId].sId].id);
|
|
WebGUI.Menu.qselected(objects[objects[lastObject].qId].id);
|
|
WebGUI.Menu.aselected(lastObject);
|
|
WebGUI.Menu.showEditAnswer();
|
|
}catch(e){}
|
|
objects[lastObject].showThyself();
|
|
},
|
|
clearLast: function(){
|
|
try{
|
|
objects[lastObject].toggleOff();
|
|
}catch(e){}
|
|
try{
|
|
objects[objects[lastObject].sId].toggleOff();
|
|
}catch(e){}
|
|
try{
|
|
objects[objects[objects[lastObject].qId].sId].toggleOff();
|
|
}catch(e){}
|
|
lastObject = undefined;
|
|
WebGUI.Menu.sselected(undefined);
|
|
WebGUI.Menu.qselected(undefined);
|
|
WebGUI.Menu.aselected(undefined);
|
|
},
|
|
getLastSection: function(){
|
|
var q = document.getElementById('sections');
|
|
try{
|
|
return (parseInt(q.lastChild.firstChild.id))//the li which contains the a ul which contains the current section li and
|
|
}catch(e){}
|
|
}
|
|
}
|
|
}();
|
|
|
|
//----------------------------------------------------------------
|
|
//
|
|
// Menu definition
|
|
//
|
|
//----------------------------------------------------------------
|
|
WebGUI.Menu = function(){
|
|
var qMenu = new YAHOO.widget.Menu("qmenu",{position: "static", hidedelay: 750, lazyload: true});
|
|
var oMenu = new YAHOO.widget.Menu("omenu",{position: "static", hidedelay: 750, lazyload: true});
|
|
var sMenu = new YAHOO.widget.Menu("smenu",{position: "static", hidedelay: 750, lazyload: true});
|
|
var aMenu = new YAHOO.widget.Menu("amenu",{position: "static", hidedelay: 750, lazyload: true});
|
|
|
|
var last = -1;//Last qMenu option selected, keep track so we can unselect on next click
|
|
var qselected = 0;//Currently selected qMenu item.
|
|
var sselected = 'S1';
|
|
|
|
return{
|
|
sselected: function(i){ sselected = i; },
|
|
qselected: function(i){ qselected = i; },
|
|
aselected: function(i){ aselected = i; },
|
|
|
|
init: function() {
|
|
document.getElementById("questiontext").innerHTML="<textarea id=questioninputtext maxlength=2056 cols=30 rows=5></textarea>";
|
|
WebGUI.Menu.clearMenus();
|
|
qMenu.subscribe("click", this.qTypeClick);
|
|
oMenu.subscribe("click", this.oTypeClick);
|
|
|
|
sMenu.addItems([ "Randomly Ordered" ] );
|
|
sMenu.render("sectionmenu");
|
|
sMenu.subscribe("click", this.sTypeClick);
|
|
|
|
document.getElementById("qsubmitbutton").style.display="none";
|
|
WebGUI.Menu.showEditSection();
|
|
new YAHOO.widget.Button({ type: "button", label: "Submit Question", container: "qsubmitbutton",
|
|
onclick: {fn: WebGUI.Menu.addQ} });
|
|
new YAHOO.widget.Button({ type: "button", label: "Submit Section", container: "ssubmitbutton",
|
|
onclick: {fn: WebGUI.Menu.addS} });
|
|
new YAHOO.widget.Button({ type: "button", label: "Submit Answer", container: "asubmitbutton",
|
|
onclick: {fn: WebGUI.Menu.addA} });
|
|
|
|
},
|
|
|
|
getsMenu: function(){ return sMenu; },
|
|
getqMenu: function(){ return qMenu; },
|
|
getoMenu: function(){ return oMenu; },
|
|
getaMenu: function(){ return aMenu; },
|
|
|
|
addQ: function() {
|
|
// var id = document.getElementById("qid").innerHTML;
|
|
var text = document.getElementById('questioninputtext').value;
|
|
var options = new Array();
|
|
|
|
var qindex;
|
|
var qtype;
|
|
var temp = qMenu.getItems();
|
|
for(var i in temp){
|
|
if(temp[i].cfg.getProperty("checked")){
|
|
qtype = temp[i].value;
|
|
qindex = temp[i].index;
|
|
}
|
|
}
|
|
temp = oMenu.getItems();
|
|
for(var i in temp){
|
|
if(temp[i].cfg.getProperty("checked")){
|
|
options[options.length] = temp[i].index;
|
|
}
|
|
}
|
|
var toptions = new Array();
|
|
var sid = sselected;
|
|
|
|
try{toptions['max'] = document.getElementById('max').value;}catch(err){}
|
|
try{toptions['min'] = document.getElementById('min').value;}catch(err){}
|
|
try{toptions['step'] = document.getElementById('step').value;}catch(err){}
|
|
|
|
if(qselected != undefined){
|
|
objects[qselected].update(qindex,qtype,text,options,toptions);
|
|
}else{
|
|
objects[objects.length] = new Survey.Question(objects.length,qindex,qtype,text,options,toptions,sselected);
|
|
}
|
|
WebGUI.Menu.newQ();
|
|
},
|
|
addS: function(){
|
|
var id;
|
|
if(sselected){
|
|
id = sselected;
|
|
}else{
|
|
id = objects.length;
|
|
}
|
|
var text = document.getElementById('sectioninputtext').value;
|
|
var checked = sMenu.getItem(0).cfg.getProperty("checked");
|
|
if(objects[id] != undefined){//editing an existing section which knows how to update itself
|
|
objects[id].update(text,checked);
|
|
}else{
|
|
objects[id] = new Survey.Section(text,id,checked);
|
|
}
|
|
WebGUI.Menu.newS();
|
|
},
|
|
addA: function(){
|
|
var qtype = objects[qselected].type;
|
|
var id;
|
|
if(aselected){
|
|
id = sselected;
|
|
}else{
|
|
id = objects.length;
|
|
}
|
|
if(objects[id] == undefined){//editing an existing answer which knows how to update itself
|
|
objects[id] = new Survey.Answer(id,qselected)
|
|
}
|
|
for(var q in objects[id].avalues[qtype]){
|
|
objects[id].avalues[qtype][q] = document.getElementById(q).value;
|
|
}
|
|
objects[id].addThyself();
|
|
WebGUI.Menu.newA();
|
|
},
|
|
|
|
newS: function() {//new section event button, prompts the new section menu
|
|
sselected = undefined;
|
|
qselected = undefined;
|
|
aselected = undefined;
|
|
WebGUI.DM.clearLast();
|
|
WebGUI.Menu.showEditSection();
|
|
document.getElementById('sectioninputtext').value = '';
|
|
document.getElementById('sid').innerHTML = "S"+(slength);
|
|
sMenu.getItem(0).cfg.setProperty("checked",false);
|
|
},
|
|
|
|
newA: function() {
|
|
aselected = undefined;
|
|
if(!sselected){
|
|
sselected = WebGUI.DM.getLastSection();
|
|
}
|
|
if(!qselected){
|
|
qselected = objects[sselected].questions[objects[sselected].questions.length-1];
|
|
}
|
|
if(!qselected){
|
|
alert("At least one question must be selected to add an answer.");
|
|
return;
|
|
}
|
|
document.getElementById('asid').innerHTML = objects[sselected].sId;
|
|
document.getElementById('aqid').innerHTML = objects[qselected].qId;
|
|
document.getElementById('aid').innerHTML = "A"+(objects[qselected].answers.length + 1);
|
|
WebGUI.DM.showThis(qselected);
|
|
WebGUI.Menu.showEditAnswer();
|
|
WebGUI.Menu.clearOMenus();
|
|
var input = document.getElementById("answerinput");
|
|
input.innerHTML="";
|
|
var qtype = objects[qselected].type;
|
|
if(qtype == 0){//multiple choice
|
|
input.innerHTML = "Please enter the text: <input type='text' id='atext'><br>"+
|
|
"Please enter the meta tag: <input type='text' id='ameta'>";
|
|
}else if(qtype == 1){//Text
|
|
alert("Answers can not be added to a text type");
|
|
WebGUI.Menu.newQ();
|
|
}else if(qtype == 2){//Slider
|
|
}else if(qtype == 3){//Date
|
|
}else if(qtype == 4){//True/False
|
|
}
|
|
},
|
|
newQ: function() {
|
|
qselected = undefined;
|
|
aselected = undefined;
|
|
if(!sselected){
|
|
sselected = WebGUI.DM.getLastSection();
|
|
}
|
|
if(!sselected){
|
|
alert("At least one section must be selected to add an answer.");
|
|
return;
|
|
}
|
|
WebGUI.DM.showThis(sselected);
|
|
WebGUI.Menu.showEditQuestion();
|
|
WebGUI.Menu.clearMenus();
|
|
document.getElementById('qsid').innerHTML = objects[sselected].sId;
|
|
var nextQ = objects[sselected].questions.length;
|
|
document.getElementById('qid').innerHTML = "Q"+ (nextQ + 1);
|
|
document.getElementById("questioninputtext").value = "";
|
|
WebGUI.Menu.loadOMenu(0);
|
|
},
|
|
clearOMenus: function(){
|
|
aMenu.clearContent();
|
|
},
|
|
|
|
clearMenus: function() {
|
|
qMenu.clearContent();
|
|
qMenu.addItems([
|
|
{text: "Multiple Choice",value: "Multiple Choice"},
|
|
{text: "Text",value: "Text"},
|
|
{text: "Slider",value: "Slider"},
|
|
{text: "Date",value: "Date"},
|
|
{text: "True/False",value: "True/False"},
|
|
] );
|
|
qMenu.render("questionmenu");
|
|
oMenu.clearContent();
|
|
document.getElementById("qsubmitbutton").style.display="none";
|
|
document.getElementById("qoptionmenu").style.display="none";
|
|
},
|
|
|
|
|
|
loadQ: function(e) {
|
|
WebGUI.Menu.clearMenus();
|
|
var q = questions[ this.id.slice(1) - 1 ];
|
|
document.getElementById('qid').innerHTML = "Q"+q['id']+":";
|
|
document.getElementById('questioninputtext').value = q['text'];
|
|
qMenu.getItem(q['type']).cfg.setProperty("checked");
|
|
//WebGUI.Menu.qTypeClick(null,[null,qMenu.getItem(q['type'])],null);
|
|
WebGUI.Menu.loadOMenu(qMenu.getItem(q['type']).index);
|
|
for(var i in q['moptions']){
|
|
oMenu.getItem(q['moptions'][i]).cfg.setProperty("checked",true);
|
|
}
|
|
try{
|
|
document.getElementById('max').value = q['max'];
|
|
}catch(e){}
|
|
try{
|
|
document.getElementById('min').value = q['min'];
|
|
}catch(e){}
|
|
try{
|
|
document.getElementById('step').value = q['step'];
|
|
}catch(e){}
|
|
},
|
|
|
|
showEditQuestion: function() {
|
|
document.getElementById("editquestion").style.display="inline";
|
|
document.getElementById("editanswer").style.display="none";
|
|
document.getElementById("editsection").style.display="none";
|
|
},
|
|
showEditAnswer: function() {
|
|
document.getElementById("editquestion").style.display="none";
|
|
document.getElementById("editanswer").style.display="inline";
|
|
document.getElementById("editsection").style.display="none";
|
|
},
|
|
showEditSection: function() {
|
|
document.getElementById("editquestion").style.display="none";
|
|
document.getElementById("editanswer").style.display="none";
|
|
document.getElementById("editsection").style.display="inline";
|
|
},
|
|
|
|
sTypeClick: function(p_sType, p_aArgs, p_oValue) {
|
|
if(p_aArgs[1].cfg.getProperty("checked")){
|
|
p_aArgs[1].cfg.setProperty("checked", false);
|
|
}else{
|
|
p_aArgs[1].cfg.setProperty("checked", true);
|
|
}
|
|
|
|
},
|
|
|
|
oTypeClick: function(p_sType, p_aArgs, p_oValue) {
|
|
var checked = p_aArgs[1].cfg.getProperty("checked");
|
|
var index = p_aArgs[1].index;
|
|
if(qselected == 1 && index >= 0 && index < 4){
|
|
for(var i=0; i<=3; i++){
|
|
oMenu.getItem(i).cfg.setProperty("checked",false);
|
|
}
|
|
p_aArgs[1].cfg.setProperty("checked",checked);
|
|
}
|
|
else if(qselected == 4 && index >= 0 && index <= 1){
|
|
for(var i=0; i<=1; i++){
|
|
oMenu.getItem(i).cfg.setProperty("checked",false);
|
|
}
|
|
p_aArgs[1].cfg.setProperty("checked",checked);
|
|
}
|
|
|
|
if(p_aArgs[1].cfg.getProperty("checked")){
|
|
p_aArgs[1].cfg.setProperty("checked", false);
|
|
}else{
|
|
p_aArgs[1].cfg.setProperty("checked", true);
|
|
}
|
|
if(qselected == 0 && index == 1 && p_aArgs[1].cfg.getProperty("checked") == false){
|
|
document.getElementById('max').value = 1;
|
|
}
|
|
},
|
|
|
|
validateMultipleMax: function(){
|
|
var v = this.value;
|
|
if (v != parseInt(v) || v < 1){
|
|
this.value = 1;
|
|
}
|
|
},
|
|
|
|
qTypeClick: function(p_sType, p_aArgs, p_oValue) {
|
|
var index = p_aArgs[1].index;
|
|
|
|
WebGUI.Menu.showEditQuestion();
|
|
|
|
WebGUI.Menu.loadOMenu(index);
|
|
},
|
|
|
|
loadOMenu: function(index) {
|
|
|
|
if(last > -1){
|
|
qMenu.getItem(last).cfg.setProperty("checked",false);
|
|
}
|
|
qMenu.getItem(index).cfg.setProperty("checked",true);
|
|
last = index;
|
|
|
|
oMenu.clearContent();
|
|
|
|
document.getElementById("qsubmitbutton").style.display="inline";
|
|
document.getElementById("qoptionmenu").style.display="inline";
|
|
document.getElementById("textoptions").innerHTML="";
|
|
|
|
var temp = document.createElement("div");
|
|
|
|
if(index == 0){//Multipe choice options
|
|
try{
|
|
YAHOO.util.Event.removeListener("max", "click");
|
|
}catch(e){}
|
|
YAHOO.util.Event.addListener("max", "blur", WebGUI.Menu.validateMultipleMax);
|
|
temp.innerHTML = "Max Answers: <input id=max type=text value=1 size=2><br/>";
|
|
oMenu.addItems([
|
|
"Randomize",
|
|
"Horizontal display",
|
|
"Multiple Answers",
|
|
"Comment Box",
|
|
] );
|
|
}
|
|
else if(index == 1){//Text options
|
|
temp.innerHTML = "Max length <input type=text value=50 size=4 id=max><br/>";
|
|
oMenu.addItems([
|
|
"Multi-Line",
|
|
"Numerical",
|
|
"Phone Number",
|
|
"Currency Amount",
|
|
] );
|
|
}
|
|
else if(index == 2){//Slider options
|
|
temp.innerHTML = "Start Value: <input type=text value=0 size=2 id=min><br/> End Value: <input id=max type=text value=10 size=2><br/> Step Value: <input id=step type=text value=2 size=2><br/>";
|
|
}
|
|
else if(index == 3){//Date options
|
|
oMenu.addItems([
|
|
"Range",
|
|
] );
|
|
}
|
|
else if(index == 4){//True/False options
|
|
oMenu.addItems([
|
|
"Yes/No",
|
|
"Male/Female",
|
|
] );
|
|
}
|
|
document.getElementById("textoptions").appendChild(temp);
|
|
oMenu.addItems(["Optional"]);
|
|
oMenu.render("qoptionmenu");
|
|
},
|
|
|
|
}
|
|
}();
|
|
|
|
|
|
|
|
|
|
//----------------------------------------------------------------
|
|
//
|
|
// Initialize survey
|
|
//
|
|
//----------------------------------------------------------------
|
|
WebGUI.OnLoad = function() {
|
|
var e = YAHOO.util.Event;
|
|
return {
|
|
init: function() {
|
|
//e.onDOMReady(this.initHandler, "The onDOMReady event fired. The DOM is now safe to modify via script.");
|
|
e.onDOMReady(this.initHandler);
|
|
},
|
|
initHandler: function(){
|
|
new YAHOO.widget.Button({ type: "button", label: "New Question", container: "addqbutton",
|
|
onclick: {fn: WebGUI.Menu.newQ} });
|
|
new YAHOO.widget.Button({ type: "button", label: "New Answer", container: "addabutton",
|
|
onclick: {fn: WebGUI.Menu.newA} });
|
|
new YAHOO.widget.Button({ type: "button", label: "New Section", container: "addsbutton",
|
|
onclick: {fn: WebGUI.Menu.newS} });
|
|
|
|
WebGUI.Menu.init();
|
|
|
|
document.getElementById("editanswer").style.display="none";
|
|
objects[objects.length] = new Survey.Section("First Section",objects.length,false);
|
|
WebGUI.DM.showThis(objects.length-1);
|
|
WebGUI.Menu.newQ();
|
|
},
|
|
}
|
|
}();
|
|
|
|
WebGUI.OnLoad.init();
|
|
|
|
|
|
|
|
var Dom = YAHOO.util.Dom;
|
|
var Event = YAHOO.util.Event;
|
|
var DDM = YAHOO.util.DragDropMgr;
|
|
|
|
//////////////////////////////////////////////////////////////////////////////
|
|
// example app
|
|
//////////////////////////////////////////////////////////////////////////////
|
|
//YAHOO.example.DDApp = {
|
|
WebGUI.DD = {
|
|
init: function() {
|
|
|
|
new YAHOO.util.DDTarget("sections","sections");
|
|
new YAHOO.util.DDTarget("answers","answers");
|
|
new YAHOO.util.DDTarget("trashcan","trashcan");
|
|
|
|
Event.on("showButton", "click", this.showOrder);
|
|
Event.on("switchButton", "click", this.switchStyles);
|
|
},
|
|
|
|
showOrder: function() {
|
|
var parseList = function(ul, title) {
|
|
var items = ul.getElementsByTagName("li");
|
|
var out = title + ": ";
|
|
for (i=0;i<items.length;i=i+1) {
|
|
out += items[i].id + " ";
|
|
}
|
|
return out;
|
|
};
|
|
|
|
var ul1=Dom.get("ul1"), ul2=Dom.get("ul2");
|
|
alert(parseList(ul1, "List 1") + "\n" + parseList(ul2, "List 2"));
|
|
|
|
},
|
|
|
|
switchStyles: function() {
|
|
Dom.get("ul1").className = "draglist_alt";
|
|
Dom.get("ul2").className = "draglist_alt";
|
|
}
|
|
};
|
|
|
|
//////////////////////////////////////////////////////////////////////////////
|
|
// custom drag and drop implementation
|
|
//////////////////////////////////////////////////////////////////////////////
|
|
|
|
WebGUI.DDList = function(id, sGroup, config) {
|
|
WebGUI.DDList.superclass.constructor.call(this, id, sGroup, config);
|
|
|
|
this.logger = this.logger || YAHOO;
|
|
var el = this.getDragEl();
|
|
Dom.setStyle(el, "opacity", 0.3); // The proxy is slightly transparent
|
|
|
|
this.goingUp = false;
|
|
this.lastY = 0;
|
|
};
|
|
|
|
YAHOO.extend(WebGUI.DDList, YAHOO.util.DDProxy, {
|
|
|
|
startDrag: function(x, y) {
|
|
this.logger.log(this.id + " startDrag");
|
|
|
|
// make the proxy look like the source element
|
|
var dragEl = this.getDragEl();
|
|
var clickEl = this.getEl();
|
|
Dom.setStyle(clickEl, "visibility", "hidden");
|
|
|
|
dragEl.innerHTML = clickEl.innerHTML;
|
|
|
|
Dom.setStyle(dragEl, "color", Dom.getStyle(clickEl, "color"));
|
|
Dom.setStyle(dragEl, "backgroundColor", Dom.getStyle(clickEl, "backgroundColor"));
|
|
Dom.setStyle(dragEl, "border", "2px solid gray");
|
|
},
|
|
|
|
endDrag: function(e) {
|
|
|
|
var srcEl = this.getEl();
|
|
var proxy = this.getDragEl();
|
|
|
|
// Show the proxy element and animate it to the src element's location
|
|
Dom.setStyle(proxy, "visibility", "");
|
|
var a = new YAHOO.util.Motion(
|
|
proxy, {
|
|
points: {
|
|
to: Dom.getXY(srcEl)
|
|
}
|
|
},
|
|
0.2,
|
|
YAHOO.util.Easing.easeOut
|
|
)
|
|
var proxyid = proxy.id;
|
|
var thisid = this.id;
|
|
|
|
// Hide the proxy and show the source element when finished with the animation
|
|
a.onComplete.subscribe(function() {
|
|
Dom.setStyle(proxyid, "visibility", "hidden");
|
|
Dom.setStyle(thisid, "visibility", "");
|
|
});
|
|
a.animate();
|
|
|
|
//call appropriate update function depending on the element type moved.
|
|
var t = this.getEl().id;
|
|
t = t.replace(/[a-zA-Z]/g,"");
|
|
if(document.getElementById(this.id).parentNode.id == 'trashcan' || document.getElementById(this.id).parentNode.parentNode.id == 'trashcan'){
|
|
WebGUI.DM.updateAnswerDOMLists();
|
|
WebGUI.DM.updateSectionDOMLists();
|
|
objects[t].DESTROY();
|
|
return;
|
|
}
|
|
if(objects[t].constructor == Survey.Answer){
|
|
WebGUI.DM.updateAnswerDOMLists();
|
|
}else{
|
|
WebGUI.DM.updateSectionDOMLists();
|
|
}
|
|
},
|
|
|
|
onDragDrop: function(e, id) {
|
|
|
|
// If there is one drop interaction, the li was dropped either on the list,
|
|
// or it was dropped on the current location of the source element.
|
|
if (DDM.interactionInfo.drop.length === 1) {
|
|
|
|
// The position of the cursor at the time of the drop (YAHOO.util.Point)
|
|
var pt = DDM.interactionInfo.point;
|
|
|
|
// The region occupied by the source element at the time of the drop
|
|
var region = DDM.interactionInfo.sourceRegion;
|
|
|
|
// Check to see if we are over the source element's location. We will
|
|
// append to the bottom of the list once we are sure it was a drop in
|
|
// the negative space (the area of the list without any list items)
|
|
if (!region.intersect(pt)) {
|
|
var destEl = Dom.get(id);
|
|
var destDD = DDM.getDDById(id);
|
|
destEl.appendChild(this.getEl());
|
|
destDD.isEmpty = false;
|
|
DDM.refreshCache();
|
|
}
|
|
}
|
|
},
|
|
|
|
onDrag: function(e) {
|
|
|
|
// Keep track of the direction of the drag for use during onDragOver
|
|
var y = Event.getPageY(e);
|
|
|
|
if (y < this.lastY) {
|
|
this.goingUp = true;
|
|
} else if (y > this.lastY) {
|
|
this.goingUp = false;
|
|
}
|
|
|
|
this.lastY = y;
|
|
},
|
|
|
|
onDragOver: function(e, id) {
|
|
|
|
var srcEl = this.getEl();
|
|
var destEl = Dom.get(id);
|
|
|
|
// We are only concerned with list items, we ignore the dragover
|
|
// notifications for the list.
|
|
document.getElementById('log1').innerHTML = srcEl.className;
|
|
document.getElementById('log2').innerHTML = destEl.className;
|
|
document.getElementById('log').innerHTML = destEl.nodeName;
|
|
|
|
if ( destEl.nodeName.toLowerCase() == "li" )
|
|
{
|
|
//destEl.className == "questionList" || destEl.className == "question" || destEl.className == "qselected")
|
|
var orig_p = srcEl.parentNode;
|
|
var p = destEl.parentNode;
|
|
|
|
if (this.goingUp) {
|
|
p.insertBefore(srcEl, destEl); // insert above
|
|
} else {
|
|
p.insertBefore(srcEl, destEl.nextSibling); // insert below
|
|
}
|
|
|
|
DDM.refreshCache();
|
|
}
|
|
}
|
|
});
|
|
|
|
//Event.onDOMReady(YAHOO.example.DDApp.init, YAHOO.example.DDApp, true);
|
|
Event.onDOMReady(WebGUI.DD.init, WebGUI.DD, true);
|
|
|
|
})();
|
|
|