Display a questionnaire's answers in real time: Difference between revisions
From Catglobe Wiki
More actions
m →Code  | 
				|||
| Line 101: | Line 101: | ||
this.getDCSData = function()  | this.getDCSData = function()  | ||
{  | {  | ||
	var columns   | 	var columns = "'StartDate','Q25','BankName'";	  | ||
	var dcsId = 2755;  | 	var dcsId = 2755;  | ||
	var topN = this.nRecords;  | 	var topN = this.nRecords;  | ||
	var orderByColumn = "StartDate";  | 	var orderByColumn = "StartDate";  | ||
	var orderType = "desc  | 	var orderType = "desc";	  | ||
	var   | 	var parameters = "{'dcsId':"+dcsId+",'columns':["+columns +"],'topN':"+topN+",'orderByColumn':'"+orderByColumn+"','orderType':'"+orderType+"'}";  | ||
   var _this = this;  | |||
   var webMethod = virtualAppHost +'/DataModule/DataCache/WebService/DCSWebService.asmx/GetTopDCSData';  | |||
   $.ajax({  | |||
      type: "POST",  | |||
      url: webMethod,  | |||
      data: parameters,  | |||
      contentType: "application/json; charset=utf-8",  | |||
      dataType: "json",  | |||
      success: function(msg) {        | |||
        _this.onSuccess(msg.d, _this);  | |||
      },  | |||
      error: function(e) {  | |||
        _this.onerror(e);  | |||
      }  | |||
   });  | |||
}  | }  | ||
| Line 118: | Line 129: | ||
{  | {  | ||
	this.get_contentDiv().innerHTML = value;  | 	this.get_contentDiv().innerHTML = value;  | ||
    this.getManager().updateElementOrdination();  | |||
}  | }  | ||
| Line 128: | Line 139: | ||
	CommentDisplay.executeInEachInterval();	  | 	CommentDisplay.executeInEachInterval();	  | ||
}  | }  | ||
this.onerror = function(e)  | this.onerror = function(e)  | ||
{  | {  | ||
  debugger;  | |||
}  | }  | ||
</source>  | </source>  | ||
Revision as of 02:42, 2 June 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 randomly 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 (see DCS Web Service)
 - Change answers after every 30 seconds:
- setTimeout(function_to_execute, interval)
 
 
Code
The below code is the old version, it could be enhanced using jQuery
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 = "'StartDate','Q25','BankName'";	
	var dcsId = 2755;
	var topN = this.nRecords;
	var orderByColumn = "StartDate";
	var orderType = "desc";	
	var parameters = "{'dcsId':"+dcsId+",'columns':["+columns +"],'topN':"+topN+",'orderByColumn':'"+orderByColumn+"','orderType':'"+orderType+"'}";
   var _this = this;
   var webMethod = virtualAppHost +'/DataModule/DataCache/WebService/DCSWebService.asmx/GetTopDCSData';
     
   $.ajax({
      type: "POST",
      url: webMethod,
      data: parameters,
      contentType: "application/json; charset=utf-8",
      dataType: "json",
      success: function(msg) {      
        _this.onSuccess(msg.d, _this);
      },
      error: function(e) {
        _this.onerror(e);
      }
   });
}
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.onerror = function(e)
{
  debugger;
}
				