Display a questionnaire's answers in real time

From Catglobe Wiki
Jump to: navigation, search

<accesscontrol>Main:MyGroup</accesscontrol>

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

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

  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 = "'StartDate','Q25','BankName'";	
 82 	var dcsId = 2755;
 83 	var topN = this.nRecords;
 84 	var orderByColumn = "StartDate";
 85 	var orderType = "desc";	
 86 
 87    var parameters = "{'dcsId':" + dcsId + ",'columns':[" + columns + "],'topN':" + topN + ",'orderByColumn':'" + orderByColumn + "','orderType':'" + orderType+"'}";
 88    var _this = this;
 89    var webMethod = virtualAppHost +'/DataModule/DataCache/WebService/DCSWebService.asmx/GetTopDCSData';
 90      
 91    $.ajax({
 92       type: "POST",
 93       url: webMethod,
 94       data: parameters,
 95       contentType: "application/json; charset=utf-8",
 96       dataType: "json",
 97       success: function(msg) {      
 98         _this.onSuccess(msg.d, _this);
 99       },
100       error: function(e) {
101         _this.onerror(e);
102       }
103    });
104 }
105 
106 this.showComment = function(value)
107 {
108 	this.get_contentDiv().innerHTML = value;
109     this.getManager().updateElementOrdination();
110 }
111 
112 //called when the web service method has been executed successfully
113 this.onSuccess = function(result, userContext,methodName)
114 {
115 	CommentDisplay.onInit(result, userContext);	
116 	//show comment
117 	CommentDisplay.executeInEachInterval();	
118 }
119 
120 this.onerror = function(e)
121 {
122    debugger;
123 }