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

From Catglobe Wiki
Jump to: navigation, search
(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 ...)
 
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 04: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

  1 this.nRecords = 1000;
  2 
  3 var CommentDisplay = 
  4 {
  5 	onInit: function(valueStr, element)
  6 	{
  7 		CommentDisplay.comments = eval(valueStr);
  8 		CommentDisplay.interval = 30000;
  9 		CommentDisplay.PortalElement = element;
 10 		if (typeof(CommentDisplay.comments) != 'string')
 11 			CommentDisplay.removeShortComments();
 12 	},
 13 	
 14 	removeShortComments: function()
 15 	{
 16 		var i = 0;
 17 		while(i<CommentDisplay.comments.length)
 18 		{
 19 			if (CommentDisplay.comments[i][1].length <20)
 20 			//remove from comemnts
 21 				CommentDisplay.comments.splice(i, 1);
 22 			else
 23 				i = i + 1;
 24 		}
 25 	},
 26 	
 27 	displayComment: function(i)
 28 	{
 29 		var body = "<table width=\"100%\"><tbody>";
 30 		body = body + "<tr><td style=\"COLOR: #217afd; FONT-FAMILY: verdana; BACKGROUND-COLOR: #dbedff\">";
 31 		body = body + "<b>" + CommentDisplay.comments[i][0] + ": " + CommentDisplay.comments[i][2] + ":</b>";
 32 		
 33 		body = body + "</td></tr><tr><td style=\"COLOR: #555555; FONT-FAMILY: verdana\">";
 34 		body = body + CommentDisplay.comments[i][1];
 35 		body = body + "</td></tr>";
 36 
 37 		body = body + "</tbody></table><br/>";
 38 		return body;
 39 	},
 40 	
 41 	//display the comments in each interval
 42 	executeInEachInterval: function()
 43 	{
 44 		if (typeof(CommentDisplay.comments) == 'string')
 45 		{
 46 			CommentDisplay.PortalElement.showComment(CommentDisplay.comments);
 47 			return;
 48 		}
 49 		
 50 		var n = CommentDisplay.comments.length - 1;
 51 		if (n<0)
 52 		{
 53 			CommentDisplay.PortalElement.showComment("There is no record satisfying the conditions.");
 54 			return;
 55 		}
 56 		
 57 		var index1 = Math.floor(Math.random()*n);	
 58 		var index2 = Math.floor(Math.random()*n);	
 59 		
 60 		var body = "<p>";	
 61 		body = body + CommentDisplay.displayComment(index1);
 62 		body = body + CommentDisplay.displayComment(index2);
 63 		body = body + "</p>";
 64 
 65 		CommentDisplay.PortalElement.showComment(body);
 66 		setTimeout(CommentDisplay.executeInEachInterval, CommentDisplay.interval);
 67 	}
 68 }
 69 
 70 this.onload = function()
 71 {       
 72 	this.get_contentDiv().innerHTML = "Please wait...";
 73 		
 74 	//retrieve data the first time
 75 	this.getDCSData();		
 76 }
 77 
 78 
 79 this.getDCSData = function()
 80 {
 81 	var columns = new Array();
 82 	columns[0] = "StartDate";
 83 	columns[1] = "Q25";
 84 	columns[2] = "BankName";
 85 	var dcsId = 2755;
 86 	var topN = this.nRecords;
 87 	var orderByColumn = "StartDate";
 88 	var orderType = "desc";
 89 	var condition = "";
 90 
 91 	var xml = this.getCriteria(dcsId, topN, orderByColumn, orderType, condition, columns);
 92 	CatGlobe.Web.DataModule.DataCache.WebService.DCSWebService.GetDCSData(xml.toString(), this.onSuccess, null, this);  
 93 }
 94 
 95 this.showComment = function(value)
 96 {
 97 	this.get_contentDiv().innerHTML = value;
 98     this.getManager().updateElementOrdination();
 99 }
100 
101 //called when the web service method has been executed successfully
102 this.onSuccess = function(result, userContext,methodName)
103 {
104 	CommentDisplay.onInit(result, userContext);	
105 	//show comment
106 	CommentDisplay.executeInEachInterval();	
107 }
108 
109 this.getCriteria = function(dcsId, topN, orderBy, orderType, condition, selectedColumns)
110 {
111 	var xml = new Document();
112 	var root = xml.createElement("criteria");
113 	root.setAttribute("dcs-id",dcsId);
114 	root.setAttribute("top-N", topN);
115 	root.setAttribute("order-by-column", orderBy);
116 	root.setAttribute("order-type", orderType);
117 	root.setAttribute("condition", condition);      
118 	var c;
119 	for(var i=0; i<selectedColumns.length; i++)
120 	{
121 		c = xml.createElement("column");
122 		c.setAttribute("name", selectedColumns[i]);
123 		root.appendChild(c);
124 	}
125 	xml.appendChild(root);
126 	return xml;
127 }   
128 
129 this.onerror = function(e)
130 {
131 	debugger;
132 }