-
Notifications
You must be signed in to change notification settings - Fork 0
/
api_example.html
75 lines (74 loc) · 3.33 KB
/
api_example.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
<!DOCTYPE html>
<html lang="en">
<head>
<title>convForm - example</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1">
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="dist/jquery.convform.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="demo.css">
</head>
<body>
<section id="demo">
<div class="vertical-align">
<div class="container">
<div class="row">
<div class="col-sm-6 col-sm-offset-3 col-xs-offset-0">
<div class="card no-border">
<div id="chat">
<form action="" method="GET" class="hidden">
<select data-conv-question="Hello! This is an example use of the plugin to dynamically generate questions (like using an API). This is the only question that was written on the initial HTML. To end the loop, select END." name="first-question">
<option value="understood">Understood</option>
<option value="okay">Okay, captain!</option>
</select>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<script type="text/javascript" src="jquery-1.12.3.min.js"></script>
<script type="text/javascript" src="dist/autosize.min.js"></script>
<script type="text/javascript" src="dist/jquery.convform.js"></script>
<script>
jQuery(function($){
var count = 0;
var convForm = $('#chat').convform({eventList:{onInputSubmit: function(convState, ready) {
console.log('input is being submitted...');
//here you send the response to your API, get the results and build the next question
//when ready, call 'ready' callback (passed as the second parameter)
if(convState.current.answer.value==='end') {
convState.current.next = false;
//emulating random response time (100-600ms)
setTimeout(ready, Math.random()*500+100);
} else {
if(Array.isArray(convState.current.answer)) var answer = convState.current.answer.join(', ');
else var answer = convState.current.answer.text;
convState.current.next = convState.newState({
type: 'select',
noAnswer: true,
name: 'dynamic-question-'+count,
questions: ['This question state was built on your previous answer (you answered: '+answer+') and doesnt expect an answer'],
});
convState.current.next.next = convState.newState({
type: 'select',
name: 'dynamic-question-'+count,
questions: ['This question state was built on your previous answer (you answered: '+answer+')'],
answers: [
{text: 'Answer 1', value: '1'},
{text: 'Answer 2', value: '2'},
{text: 'END', value: 'end'}
]
});
//emulating random response time (100-600ms)
setTimeout(ready, Math.random()*500+100);
}
count++;
}}});
});
</script>
</body>
</html>