-
Notifications
You must be signed in to change notification settings - Fork 2
/
help.html
344 lines (313 loc) · 17.8 KB
/
help.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>InterConn</title>
<script type="text/javascript" src="./Assets/jquery.min.js"></script>
<script type="text/javascript" src="./Assets/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" />
<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-glyphicons.css" />
<style>
.faqHeader {
font-size: 27px;
margin: 20px;
}
.panel-heading .accordion-toggle:after {
font-family: 'Glyphicons Halflings'; /* essential for enabling glyphicon */
content: "\e114"; /* adjust as needed, taken from bootstrap.css */
float: right; /* adjust as needed */
color: grey; /* adjust as needed */
}
.panel-heading .accordion-toggle.collapsed:after {
/* symbol for "collapsed" panels */
content: "\e080"; /* adjust as needed, taken from bootstrap.css */
}
.marker {
background-color: yellow;
font-weight: bold;
}
.highlight {
background-color: yellow !important;
}
.container {
width: 879px;
}
</style>
</head>
<body>
<script>
$(document).ready(function(){
var highlightRe = /<span class="highlight">(.*?)<\/span>/g,
highlightHtml = '<span class="highlight">$1</span>';
function highlight(word){
var term = word;
var txt = $('.mainDiv').html().replace(highlightRe,'$1');
if(term !== '') {
txt = txt.replace(new RegExp('(' + term + ')', 'gi'), highlightHtml);
}
$('.mainDiv').html(txt);
}
$(document).on('click','.submit',function(){
$('.mainDiv').find('.highlight').removeClass('highlight');
var commonWords = ["an","the","these","those","that","and","at","or","is","for","1","2","3","4","5","6","7","8","9","10"];
var searchQuery = $('#query').val();
console.log(searchQuery);
var words = searchQuery.split(" ");
// console.log(words);
words.forEach(function(ele){
if(commonWords.includes(ele)){
var a = 1;
}else{
highlight(ele);
}
});
$('.collapse').find('.highlight').closest('.panel').find('.panel-heading').addClass('highlight');
});
});
</script>
<div class="container mainDiv">
<br />
<br />
<br />
<div class="form-group row">
<div class="col-md-10">
<input type="text" class="form-control" placeholder="Search" id="query">
</div>
<div class="col-md-2">
<button type="button" class="btn btn-info submit">Submit</button>
</div>
</div>
<br />
<div class="panel-group" id="accordion">
<div class="faqHeader">General</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a class="accordion-toggle collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseOne">How to edit my profile?</a>
</h4>
</div>
<div id="collapseOne" class="panel-collapse collapse">
<div class="panel-body">
<div class="row">
<div class="col-md-7">
You can find a link with your name in the top left corner which takes you to your profile page once you are logged in, where you can edit your profile pic as well
as any other information provided during registration. Also you can find the workspace you are in under that link.
</div>
<div class="col-md-5">
<img src="./Assets/helpPage/1.PNG" alt="no image"/>
</div>
</div>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a class="accordion-toggle collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseTen">Can I view others profiles?</a>
</h4>
</div>
<div id="collapseTen" class="panel-collapse collapse">
<div class="panel-body">
<div class="row" style="margin-left: 2%;">
You can click on a person's name present either in the messages to directly view their profile. Also you can directly go to the same view by replacing your
userid in the profile page with their userid (If you remember it). You can also find a search box at the top which automatically suggest the names which contains
the part you typed in.
</div>
<div class="row" style="margin-top: 2%;margin-left: 25%;">
<img src="./Assets/helpPage/2.PNG" alt="no image"/>
</div>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a class="accordion-toggle collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseEleven">Are there any limitations on uploading an image as profile page</a>
</h4>
</div>
<div id="collapseEleven" class="panel-collapse collapse">
<div class="panel-body">
Yes, you can only upload an image with minimum dimensions 250x250 and maximum dimensions being 1250x1250. And the image can be any one of
the following formats.
<ul>
<li> .png, .PNG </li>
<li> .jpg, .jpeg, .JPG, .JPEG</li>
<li> .gif, .GIF </li>
</ul>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a class="accordion-toggle collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseTwelve">Is there an option to logoff?</a>
</h4>
</div>
<div id="collapseTwelve" class="panel-collapse collapse">
<div class="panel-body">
<div class="row">
<div class="col-md-7">
You can find a button beside your name in the top left corner which helps you signout of the application once you are logged in.
</div>
<div class="col-md-5">
<img src="./Assets/helpPage/1.PNG" alt="no image"/>
</div>
</div>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a class="accordion-toggle collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseSix">What are the stars in the profile page?</a>
</h4>
</div>
<div id="collapseSix" class="panel-collapse collapse">
<div class="panel-body">
Each user is given a rating based on the number of channels created and the number of channels the user is a part of. Also the number of posts of a user and the reactions are also considered in the evaluation of rating of a person. For now we considered the count of reactions and the number of posts is of higher importance than the number of channels he is a member of as he may be inactive in all of them.
<br/><br/><strong>User metric value = Reaction count + Posts count + Channels created + channelsPartof</strong><br/><br/>
As every person’s metric is represented on a scale of 0-5, we calculated the raw metric value for all users and the one with the maximum value is given 5 star rating and every other person’s metric is evaluated relative to the highest rated guy.
</div>
</div>
</div>
<div class="faqHeader">Channels</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a class="accordion-toggle collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo">Where to create a channel?</a>
</h4>
</div>
<div id="collapseTwo" class="panel-collapse collapse">
<div class="panel-body">
<div class="row">
<div class="col-md-8">
<div class="row" style="margin-left:4px; !important">
You can find the list of all channels in the current workspace in the side navbar present to the left of the window under Channels section. There
is a <strong>'+'</strong> button beside it where you can create a new channel. All the public channels have an open lock icon beside the channel whereas
private channels have closed lock icon.
</div>
<div class="row" style="margin-top: 4%;margin-left: 25%;">
<div style="margin:auto;">
<img src="./Assets/helpPage/3.PNG" alt="no image"/>
</div>
</div>
</div>
<div class="col-md-4">
<img src="./Assets/helpPage/4.PNG" alt="no image"/>
</div>
</div>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a class="accordion-toggle collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseThree">What are archived channels?</a>
</h4>
</div>
<div id="collapseThree" class="panel-collapse collapse">
<div class="panel-body">
Administrator of a workspace has the ability to archive a channel when the users of that particular channel can only view the past messages,
threads and reactions. There is a special section in the side navigation bar which has a list of archived channels.
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a class="accordion-toggle collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseFive">Can I invite a user after creating a channel?</a>
</h4>
</div>
<div id="collapseFive" class="panel-collapse collapse">
<div class="panel-body">
<div class="row">
<div class="col-md-7">
Don't worry if you didn't invite a user at the time of creating a channel. If you created a private channel, you can find something like <strong>Invite Members</strong> at the top of a channel
when you open it. It shows the number of people currently present in the channel.
</div>
<div class="col-md-5">
<img src="./Assets/helpPage/5.PNG" alt="no image"/>
</div>
</div>
<div class="row" style="margin-top: 3%;width: 474px;margin-left: 8%;">
<img src="./Assets/helpPage/6.PNG" style="width:700px" alt="no image"/>
</div>
<div class="row" style="margin-top:2%;margin-left:3%;">
Also if you are admin, you can invite users to any channel in the workspace whether it is public or private. This can
be done by clicking on the users icon under the channel name(only for <strong>admin</strong>).
</div>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a class="accordion-toggle collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseEight">How to know if I am an admin? And what are the extra powers?</a>
</h4>
</div>
<div id="collapseEight" class="panel-collapse collapse">
<div class="panel-body">
The easiest way to find whether you are an admin is to just hover over your name in the left corner which welcomes you with a message <strong>"Welcome Admin"</strong>
. If you are in an Administrator position, you can archive/unrachive a channel <strong>(button present beside the search bar at the top)</strong>, similarly users can
be invited or deleted from channel <strong>(by clicking on the users icon under the channel name at the top)</strong>.<br/>
<img src="./Assets/helpPage/8.PNG" style="width:420px;margin-top:2%;margin-left:4%;margin-bottom:2%" alt="no image"/>
<img src="./Assets/helpPage/9.PNG" style="width: 305px;margin-left: 5%;" alt="no image" />
<img src="./Assets/helpPage/10.PNG" style="margin-left: 70%;margin-bottom: 2%;" alt="no image" />
<br/>Admin has an option of deleting messages and threads by hovering on message.<strong>(last icon from the left)</strong>.
</div>
</div>
</div>
<!-- <div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a class="accordion-toggle collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseNine">When do I get paid?</a>
</h4>
</div>
<div id="collapseNine" class="panel-collapse collapse">
<div class="panel-body">
Our standard payment plan provides for monthly payments. At the end of each month, all accumulated funds are transfered to your account.
The minimum amount of your balance should be at least 70 USD.
</div>
</div>
</div> -->
<div class="faqHeader">Posts and threads</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a class="accordion-toggle collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseFour">How to add reactions to a post?</a>
</h4>
</div>
<div id="collapseFour" class="panel-collapse collapse">
<div class="panel-body">
Currently a user can react to any post in three different ways (like, dislike or a thread). You can get these options once you hover on a message in a channel.
You can even like or dislike or a thread (which is a reply to some other post). Threads to a post are shown as a number of replies under the message along with
the reactions which can be expanded to the threads section on a click.
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a class="accordion-toggle collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseSeven">How can I add an image or a code snippet in a post?</a>
</h4>
</div>
<div id="collapseSeven" class="panel-collapse collapse">
<div class="panel-body">
<div class="row" style="margin-left: 1%; !important">
You can find a more-options tab at the top of input box where you type the post. It has two Options
<ul>
<li><strong>Code-snippet</strong> : You can add a code-snippet which will be shown differently as indentation is important here</li>
<li><strong>Image</strong> : Images can be uploaded here. Also you can add urls of images from external resources which will be shown here</li>
</ul>
</div>
<div class="row">
<img src="./Assets/helpPage/7.PNG" style="width: 750px;margin-left: 6%;margin-top: 1%;" alt="no image"/>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>