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 ...)
 
 
(13 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  ==
 +
The below code is the old version, it could be enhanced using jQuery
  
−
== 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();
 +
}
 +
 
  
−
//get the play list
+
this.getDCSData = function()
−
function getPlayList()
 
 
{
 
{
−
_this.set_title("Main list");
+
var columns = "'StartDate','Q25','BankName'";
−
var clipLinks = new Array();
+
var dcsId = 2755;
−
clipLinks[0] = "http://fire.catglobe.com/Attachments/GetAttachment.aspx?id=369842";
+
var topN = this.nRecords;
−
clipLinks[1] = "http://fire.catglobe.com/Attachments/GetAttachment.aspx?id=369843";
+
var orderByColumn = "StartDate";
−
clipLinks[2] = "http://fire.catglobe.com/Attachments/GetAttachment.aspx?id=369844";
+
var orderType = "desc";
−
clipLinks[3] = "http://fire.catglobe.com/Attachments/GetAttachment.aspx?id=369845";
+
 
−
clipLinks[4] = "http://fire.catglobe.com/Attachments/GetAttachment.aspx?id=369846";
+
  var parameters = "{'dcsId':" + dcsId + ",'columns':[" + columns + "],'topN':" + topN + ",'orderByColumn':'" + orderByColumn + "','orderType':'" + orderType+"'}";
−
+
  var _this = this;
−
var clipNames = new Array();
+
  var webMethod = virtualAppHost +'/DataModule/DataCache/WebService/DCSWebService.asmx/GetTopDCSData';
−
clipNames[0] = "Clip 1";
+
   
−
clipNames[1] = "Clip 2";
+
  $.ajax({
−
clipNames[2] = "Clip 3";
+
      type: "POST",
−
clipNames[3] = "Clip 4";
+
      url: webMethod,
−
clipNames[4] = "Clip 5";
+
      data: parameters,
 +
      contentType: "application/json; charset=utf-8",
 +
      dataType: "json",
 +
      success: function(msg) {     
 +
        _this.onSuccess(msg.d, _this);
 +
      },
 +
      error: function(e) {
 +
        _this.onerror(e);
 +
      }
 +
  });
 +
}
  
−
var content = _this.get_contentDiv();
+
this.showComment = function(value)
−
content.innerHTML = "";
+
{
−
var p = $("<p>").css("padding-bottom", "5");
+
this.get_contentDiv().innerHTML = value;
−
var ul = $("<ul>");
+
    this.getManager().updateElementOrdination();
−
+
}
−
$(content).append($(p));
+
 
−
$(p).append($(ul));
+
//called when the web service method has been executed successfully
−
+
this.onSuccess = function(result, userContext,methodName)
−
for(var i= 0; i<clipLinks.length; i++)
+
{
−
{
+
CommentDisplay.onInit(result, userContext);
−
$(ul).append($("<li>").text(clipNames[i]).css("cursor","pointer").css("font-style", "italic").val(i)
+
//show comment
−
.click(
+
CommentDisplay.executeInEachInterval();
−
function()
 
−
{
 
−
_this.set_title(clipNames[this.value]);
 
−
MovieclipViewer3.onInit(clipLinks[this.value], content, "&lt;&lt;&lt; Back to main list");
 
−
}
 
−
)
 
−
)
 
−
}
 
 
}
 
}
  
−
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>

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 }
Retrieved from "http://wiki.catglobe.com/index.php?title=Display_a_questionnaire%27s_answers_in_real_time&oldid=24699"