source: PerfectFit/Web/src/main/webapp/chat.html

Last change on this file was 7, checked in by Wouter Pasman, 10 months ago

#124 release PerfectFit sources
File size: 7.1 KB
Line 
1<?xml version="1.0" encoding="UTF-8"?>
2<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
3<head>
4<meta charset="utf-8" />
5<title>PerfectFit Chat App</title>
6<link rel="stylesheet" type="text/css" media="screen"
7 href="css/chat.css" />
8</head>
9
10<script type="application/javascript">
11 const mysessionid = 12345; //Math.random();
12 /**
13 get the question from server and post it in the chat area
14 */
15 function getQuestion() {
16 const xmlHttp = new XMLHttpRequest();
17 xmlHttp.open( "GET", "chat", true ); // async is fine here
18 xmlHttp.onreadystatechange=function() {
19 if (xmlHttp.readyState==4) {
20 const text = xmlHttp.responseText;
21 if (xmlHttp.status==400) {
22 alert("we're finixhed. You can reload the page if you want to talk again.")
23 return;
24 }
25 if (xmlHttp.status!=200) {
26 alert(text);
27 return;
28 }
29
30 showStimulus( JSON.parse(text));
31 }
32 }
33 xmlHttp.send( null );
34
35 }
36
37 /*
38 send the text as answer to the server
39 @param callback the function to call when the request is done.
40 */
41 function sendAnswer(text) {
42 var xmlHttp = new XMLHttpRequest();
43 xmlHttp.open( "POST", "chat", false ); // synchronized, we MUST wait for reply otherwise we may get the next question before the answer was processed
44 xmlHttp.onreadystatechange=function(oEvent) {
45 if (xmlHttp.readyState==4) {
46 if (xmlHttp.status!=200) {
47 alert("oops, something went wrong on the server.. Please ask the system administrator.");
48 return;
49 }
50 }
51 }
52 xmlHttp.send( text );
53 }
54
55
56 /**
57 @param json the StimAnswer object serialized as json
58 Shows entire stimulus.
59 */
60 function showStimulus(json) {
61 // decode the question and answertype.
62 const questiontext = json["stimulus"]["Textual"]["question"];
63 progressivelyShowText(questiontext.split("\n"), function() {prepareAnswer(json)} );
64
65 }
66
67 /*
68 Sets the answer area so that user can type/press button according to expectations.
69 */
70 function prepareAnswer(json) {
71 const answertype = json["answertype"];
72 if ("TextAnswer" in answertype) {
73 setText("Type a message", true);
74 } else if ("SelectFromListAnswer" in answertype) {
75 showButtons(answertype["SelectFromListAnswer"]["options"])
76 } else alert("BUG unknown question type");
77
78 }
79
80 /*
81 @texts array of text lines. Each line is shown after a few secs,
82 taking longer for longer sentences.
83 @callback is called after all text lines have been shown.
84 */
85 function progressivelyShowText(texts, callback) {
86 if (texts.length==0) {
87 callback();
88 return;
89 }
90 var nextline = texts.shift();
91
92 // wait some time first.
93 document.getElementById("busy").hidden=false;
94 setTimeout(function() {
95 document.getElementById("busy").hidden=true;
96 addTextBalloon(nextline,true);
97 progressivelyShowText(texts, callback);
98 }, 1000+25*nextline.length);
99 }
100
101 /**
102 Adds text balloon to chat area
103 @param questiontext the text for in the balloon
104 @param isBotBalloon true if this is bot balloon, false if user balloon.
105 */
106 function addTextBalloon(questiontext, isBotBalloon) {
107 var div = document.createElement("div");
108 div.setAttribute('class',isBotBalloon? 'bot-chat-balloon':'user-chat-balloon');
109 div.innerHTML=questiontext;
110
111 const chatarea = document.getElementsByClassName("chat-area")[0];
112 chatarea.appendChild(div);
113 window.scrollTo(0, document.body.scrollHeight);
114 }
115
116
117 /*
118 Sets the usertext to given text.
119 @param text the text to load in the text area
120 @param enabled true if user can edit the text.
121 Also then the arrow at the right is enabled.
122 */
123 function setText(text, enabled) {
124 var elt = document.getElementById("usertext").value=text;
125 document.getElementById("usertext").disabled=enabled?false:"true";
126 document.getElementById("sendbutton").style.display=enabled?"":"none";
127 }
128
129 /**
130 @param buttons a dict of plaintext-fancytext , one for each button.
131 The fancytext is for the button, the plain text is the real text answer
132 when that button is clicked.
133 */
134 function showButtons(buttons) {
135 setText("Use one of the buttons to answer", false);
136
137 elt = document.getElementById("buttons");
138 elt.innerHTML='';
139 for (plaintext in buttons) {
140 var fancytext = buttons[plaintext];
141 var div = document.createElement("BUTTON");
142 div.onclick = function(e) { userReply(e.target.getAttribute("plaintext")); };
143 div.setAttribute('class',"choicebutton");
144 div.setAttribute("plaintext", plaintext);
145 div.innerHTML=fancytext;
146 elt.appendChild(div);
147 }
148 }
149
150 /**
151 Called when user clicks an option button in buttonarea
152 It sends the answer to the server and gets the next reply.
153 */
154 function userReply(text) {
155 addTextBalloon(text,false);
156 showButtons([]); // clear answer area
157 sendAnswer(text);
158 getQuestion();
159 }
160
161 /*called when user clicks the send button
162 */
163 function sendButton() {
164 userReply(document.getElementById("usertext").value)
165 }
166
167 /* Show alert if cookies disabled, as website does not work properly then.
168 */
169 function checkCookies() {
170 document.cookie = "cookie";
171
172 if (document.cookie!="cookie") {
173 alert("Your browsesr blocks the session cookie, therefore this application does not work correctly. Please enable the local session cookie.");
174 }
175 }
176
177 /**
178 request server to initialize state.
179 */
180 function initServer() {
181 const xmlHttp = new XMLHttpRequest();
182 xmlHttp.open( "OPTIONS", "chat"+window.location.search, true ); // async is fine here
183 xmlHttp.send( null );
184 }
185</script>
186
187<body onload="checkCookies(); initServer(); getQuestion(); showButtons([]);";>
188
189
190 <div class="chat-area">
191
192 </div>
193 <dic class="responsearea">
194 <div class="buttonarea" id="buttons">
195 <div class="choicebutton">Choice 1</div>
196 <div class="choicebutton">Choice 2</div>
197 </div>
198 <img src="images/busytyping.gif" width="40px;" id="busy">
199 <div class="textarea">
200 <textarea class="textautosize" id="usertext" rows="1" cols="50">--- </textarea>
201 <button id="sendbutton" onclick="sendButton()"><img src="images/arrow.png" width="20px;"/></button>
202 </div>
203 </dic>
204</body>
205
206
207</html>
Note: See TracBrowser for help on using the repository browser.