View source for Display a questionnaire's answers in real time

<accesscontrol>Administrators,,Cem,,Maysunshine</accesscontrol>
[[Category:Miscellaneous]]

== 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

[[Image:MyPotal_DCSWebService.jpg]]

== 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

<source lang="javascript" line="1">
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;
}
</source>