Toggle menu
862
3.8K
30.2K
279.1K
Catglobe Wiki
Toggle personal menu
Not logged in
Your IP address will be publicly visible if you make any edits.

Display a questionnaire's answers in real time: Difference between revisions

From Catglobe Wiki
New page: == Challenge == In order to keep track of real time response for a questionnaire As a system consultant I want to create a portal element showing 2 different answers of a question ...
 
No edit summary
Line 14: Line 14:
*Change answers after every 30 seconds
*Change answers after every 30 seconds


== Code ==
== Code ==
 
<source lang="javascript" line="1">
<source lang="javascript" line="1">
var MovieclipViewer3 =
this.nRecords = 1000;
 
var CommentDisplay =  
{
{
onInit: function(clip, element, linkText)
onInit: function(valueStr, element)
{
CommentDisplay.comments = eval(valueStr);
CommentDisplay.interval = 30000;
CommentDisplay.PortalElement = element;
if (typeof(CommentDisplay.comments) != 'string')
CommentDisplay.removeShortComments();
},
removeShortComments: function()
{
var i = 0;
while(i<CommentDisplay.comments.length)
{
if (CommentDisplay.comments[i][1].length <20)
//remove from comemnts
CommentDisplay.comments.splice(i, 1);
else
i = i + 1;
}
},
displayComment: function(i)
{
{
MovieclipViewer3.flash = CGFlashPlayers.initialize("cgflash", "http://fire.catglobe.com/Script/CGFlashPlayer/CGFlashPlayer.swf", 298,265);
var body = "<table width=\"100%\"><tbody>";
MovieclipViewer3.flash.appendTo(element);
body = body + "<tr><td style=\"COLOR: #217afd; FONT-FAMILY: verdana; BACKGROUND-COLOR: #dbedff\">";
body = body + "<b>" + CommentDisplay.comments[i][0] + ": " + CommentDisplay.comments[i][2] + ":</b>";
var p = $("<p>");
$(p).append($("<u>" + linkText + "</u>").css("cursor","pointer").css("font-style", "italic").click(
function()
{
getPlayList();
}
));
$(element).append($("<br/>"));
$(element).append($(p));
$(element).append($("<br/>"));
MovieclipViewer3.flash.visiblePlaylistButton(false);
body = body + "</td></tr><tr><td style=\"COLOR: #555555; FONT-FAMILY: verdana\">";
MovieclipViewer3.flash.visibleControlBar(false);
body = body + CommentDisplay.comments[i][1];
MovieclipViewer3.flash.registerEvent(CGFlashPlayers.Events.OnPlayListReady, MovieclipViewer3.onPlayListReady);
body = body + "</td></tr>";
MovieclipViewer3.flash.registerEvent(CGFlashPlayers.Events.OnStop, MovieclipViewer3.onStop);


// Prepare the play list
body = body + "</tbody></table><br/>";
MovieclipViewer3.flash.openPlayList(clip);
return body;
},
},
onPlayListReady: function()
//display the comments in each interval
executeInEachInterval: function()
{
{
MovieclipViewer3.flash.play();
if (typeof(CommentDisplay.comments) == 'string')
},
{
onStop: function()
CommentDisplay.PortalElement.showComment(CommentDisplay.comments);
{
return;
getPlayList();
}
var n = CommentDisplay.comments.length - 1;
if (n<0)
{
CommentDisplay.PortalElement.showComment("There is no record satisfying the conditions.");
return;
}
var index1 = Math.floor(Math.random()*n);
var index2 = Math.floor(Math.random()*n);
var body = "<p>";
body = body + CommentDisplay.displayComment(index1);
body = body + CommentDisplay.displayComment(index2);
body = body + "</p>";
 
CommentDisplay.PortalElement.showComment(body);
setTimeout(CommentDisplay.executeInEachInterval, CommentDisplay.interval);
}
}
}
}


var _this;
this.onload = function()
{     
this.get_contentDiv().innerHTML = "Please wait...";
//retrieve data the first time
this.getDCSData();
}
 
 
this.getDCSData = function()
{
var columns = new Array();
columns[0] = "StartDate";
columns[1] = "Q25";
columns[2] = "BankName";
var dcsId = 2755;
var topN = this.nRecords;
var orderByColumn = "StartDate";
var orderType = "desc";
var condition = "";
 
var xml = this.getCriteria(dcsId, topN, orderByColumn, orderType, condition, columns);
CatGlobe.Web.DataModule.DataCache.WebService.DCSWebService.GetDCSData(xml.toString(), this.onSuccess, null, this);
}


//get the play list
this.showComment = function(value)
function getPlayList()
{
{
_this.set_title("Main list");
this.get_contentDiv().innerHTML = value;
var clipLinks = new Array();
    this.getManager().updateElementOrdination();
clipLinks[0] = "http://fire.catglobe.com/Attachments/GetAttachment.aspx?id=369842";
}
clipLinks[1] = "http://fire.catglobe.com/Attachments/GetAttachment.aspx?id=369843";
clipLinks[2] = "http://fire.catglobe.com/Attachments/GetAttachment.aspx?id=369844";
clipLinks[3] = "http://fire.catglobe.com/Attachments/GetAttachment.aspx?id=369845";
clipLinks[4] = "http://fire.catglobe.com/Attachments/GetAttachment.aspx?id=369846";
var clipNames = new Array();
clipNames[0] = "Clip 1";
clipNames[1] = "Clip 2";
clipNames[2] = "Clip 3";
clipNames[3] = "Clip 4";
clipNames[4] = "Clip 5";


var content = _this.get_contentDiv();
//called when the web service method has been executed successfully
content.innerHTML = "";
this.onSuccess = function(result, userContext,methodName)
var p = $("<p>").css("padding-bottom", "5");
{
var ul = $("<ul>");
CommentDisplay.onInit(result, userContext);
//show comment
$(content).append($(p));
CommentDisplay.executeInEachInterval();
$(p).append($(ul));
}
 
for(var i= 0; i<clipLinks.length; i++)
this.getCriteria = function(dcsId, topN, orderBy, orderType, condition, selectedColumns)
{
var xml = new Document();
var root = xml.createElement("criteria");
root.setAttribute("dcs-id",dcsId);
root.setAttribute("top-N", topN);
root.setAttribute("order-by-column", orderBy);
root.setAttribute("order-type", orderType);
root.setAttribute("condition", condition);    
var c;
for(var i=0; i<selectedColumns.length; i++)
{
{
$(ul).append($("<li>").text(clipNames[i]).css("cursor","pointer").css("font-style", "italic").val(i)
c = xml.createElement("column");
.click(
c.setAttribute("name", selectedColumns[i]);
function()
root.appendChild(c);
{
_this.set_title(clipNames[this.value]);
MovieclipViewer3.onInit(clipLinks[this.value], content, "&lt;&lt;&lt; Back to main list");
}
)
)
}
}
}
xml.appendChild(root);
return xml;
}  


this.onload = function()
this.onerror = function(e)
{
{
_this = this;
debugger;
//play a default clip
_this.set_title("Intro");
//MovieclipViewer3.onInit("http://fire.catglobe.com/Attachments/GetAttachment.aspx?id=369836", _this.get_contentDiv(), "Skip &gt;&gt;");
getPlayList();
}
}
</source>
</source>

Revision as of 02:15, 2 January 2009

Challenge

In order to keep track of real time response for a questionnaire

As a system consultant

I want to create a portal element showing 2 different answers of a question in every 30 seconds

Solution

  • Create a questionnaire cache containing data of the questionnaire
  • Create a user-defined portal element with script
  • Connect to registered DCS web service to retrieve the data
  • Change answers after every 30 seconds

Code

this.nRecords = 1000;

var CommentDisplay = 
{
	onInit: function(valueStr, element)
	{
		CommentDisplay.comments = eval(valueStr);
		CommentDisplay.interval = 30000;
		CommentDisplay.PortalElement = element;
		if (typeof(CommentDisplay.comments) != 'string')
			CommentDisplay.removeShortComments();
	},
	
	removeShortComments: function()
	{
		var i = 0;
		while(i<CommentDisplay.comments.length)
		{
			if (CommentDisplay.comments[i][1].length <20)
			//remove from comemnts
				CommentDisplay.comments.splice(i, 1);
			else
				i = i + 1;
		}
	},
	
	displayComment: function(i)
	{
		var body = "<table width=\"100%\"><tbody>";
		body = body + "<tr><td style=\"COLOR: #217afd; FONT-FAMILY: verdana; BACKGROUND-COLOR: #dbedff\">";
		body = body + "<b>" + CommentDisplay.comments[i][0] + ": " + CommentDisplay.comments[i][2] + ":</b>";
		
		body = body + "</td></tr><tr><td style=\"COLOR: #555555; FONT-FAMILY: verdana\">";
		body = body + CommentDisplay.comments[i][1];
		body = body + "</td></tr>";

		body = body + "</tbody></table><br/>";
		return body;
	},
	
	//display the comments in each interval
	executeInEachInterval: function()
	{
		if (typeof(CommentDisplay.comments) == 'string')
		{
			CommentDisplay.PortalElement.showComment(CommentDisplay.comments);
			return;
		}
		
		var n = CommentDisplay.comments.length - 1;
		if (n<0)
		{
			CommentDisplay.PortalElement.showComment("There is no record satisfying the conditions.");
			return;
		}
		
		var index1 = Math.floor(Math.random()*n);	
		var index2 = Math.floor(Math.random()*n);	
		
		var body = "<p>";	
		body = body + CommentDisplay.displayComment(index1);
		body = body + CommentDisplay.displayComment(index2);
		body = body + "</p>";

		CommentDisplay.PortalElement.showComment(body);
		setTimeout(CommentDisplay.executeInEachInterval, CommentDisplay.interval);
	}
}

this.onload = function()
{       
	this.get_contentDiv().innerHTML = "Please wait...";
		
	//retrieve data the first time
	this.getDCSData();		
}


this.getDCSData = function()
{
	var columns = new Array();
	columns[0] = "StartDate";
	columns[1] = "Q25";
	columns[2] = "BankName";
	var dcsId = 2755;
	var topN = this.nRecords;
	var orderByColumn = "StartDate";
	var orderType = "desc";
	var condition = "";

	var xml = this.getCriteria(dcsId, topN, orderByColumn, orderType, condition, columns);
	CatGlobe.Web.DataModule.DataCache.WebService.DCSWebService.GetDCSData(xml.toString(), this.onSuccess, null, this);  
}

this.showComment = function(value)
{
	this.get_contentDiv().innerHTML = value;
    this.getManager().updateElementOrdination();
}

//called when the web service method has been executed successfully
this.onSuccess = function(result, userContext,methodName)
{
	CommentDisplay.onInit(result, userContext);	
	//show comment
	CommentDisplay.executeInEachInterval();	
}

this.getCriteria = function(dcsId, topN, orderBy, orderType, condition, selectedColumns)
{
	var xml = new Document();
	var root = xml.createElement("criteria");
	root.setAttribute("dcs-id",dcsId);
	root.setAttribute("top-N", topN);
	root.setAttribute("order-by-column", orderBy);
	root.setAttribute("order-type", orderType);
	root.setAttribute("condition", condition);      
	var c;
	for(var i=0; i<selectedColumns.length; i++)
	{
		c = xml.createElement("column");
		c.setAttribute("name", selectedColumns[i]);
		root.appendChild(c);
	}
	xml.appendChild(root);
	return xml;
}   

this.onerror = function(e)
{
	debugger;
}