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

From Catglobe Wiki
Jump to: navigation, search
 
(12 intermediate revisions by 2 users not shown)
Line 1: Line 1:
 +
<accesscontrol>Main:MyGroup</accesscontrol>
 +
[[Category:Miscellaneous]]
 +
 
== Challenge ==
 
== Challenge ==
  
Line 5: Line 8:
 
As a system consultant
 
As a system consultant
  
I want to create a portal element showing 2 different&nbsp;answers of a question in every 30 seconds
+
I want to create a portal element showing randomly 2 different answers of a question in every 30 seconds
 +
 
 +
[[Image:MyPotal_DCSWebService.jpg]]
  
 
== Solution ==
 
== Solution ==
Line 11: Line 16:
 
*Create a questionnaire cache containing data of the questionnaire
 
*Create a questionnaire cache containing data of the questionnaire
 
*Create a user-defined portal element with script
 
*Create a user-defined portal element with script
*Connect to registered DCS web service to retrieve the data
+
*Connect to registered DCS web service to retrieve the data (see [[DCS Web Service]])
*Change answers after every 30 seconds
+
*Change answers after every 30 seconds:
 +
**setTimeout(function_to_execute, interval)
  
 
== Code  ==
 
== Code  ==
 +
The below code is the old version, it could be enhanced using jQuery
  
 
<source lang="javascript" line="1">
 
<source lang="javascript" line="1">
Line 97: Line 104:
 
this.getDCSData = function()
 
this.getDCSData = function()
 
{
 
{
var columns = new Array();
+
var columns = "'StartDate','Q25','BankName'";
columns[0] = "StartDate";
 
columns[1] = "Q25";
 
columns[2] = "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 condition = "";
 
  
var xml = this.getCriteria(dcsId, topN, orderByColumn, orderType, condition, columns);
+
  var parameters = "{'dcsId':" + dcsId + ",'columns':[" + columns + "],'topN':" + topN + ",'orderByColumn':'" + orderByColumn + "','orderType':'" + orderType+"'}";
CatGlobe.Web.DataModule.DataCache.WebService.DCSWebService.GetDCSData(xml.toString(), this.onSuccess, null, this);
+
  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 124: Line 142:
 
CommentDisplay.executeInEachInterval();
 
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)
 
this.onerror = function(e)
 
{
 
{
debugger;
+
  debugger;
 
}
 
}
 
</source>
 
</source>

Latest revision as of 11:44, 17 October 2013

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