Difference between revisions of "Display a questionnaire's answers in real time"
(→Solution) |
Wikicatglobe (talk | contribs) |
||
(7 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 | + | I want to create a portal element showing randomly 2 different answers of a question in every 30 seconds |
[[Image:MyPotal_DCSWebService.jpg]] | [[Image:MyPotal_DCSWebService.jpg]] | ||
Line 13: | 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) | **setTimeout(function_to_execute, interval) | ||
Line 110: | Line 104: | ||
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 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 127: | Line 132: | ||
{ | { | ||
this.get_contentDiv().innerHTML = value; | this.get_contentDiv().innerHTML = value; | ||
− | + | this.getManager().updateElementOrdination(); | |
} | } | ||
Line 137: | Line 142: | ||
CommentDisplay.executeInEachInterval(); | CommentDisplay.executeInEachInterval(); | ||
} | } | ||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
this.onerror = function(e) | this.onerror = function(e) | ||
{ | { | ||
− | + | 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
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 }