-
Notifications
You must be signed in to change notification settings - Fork 8
/
api_example.html
83 lines (79 loc) · 4 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
76
77
78
79
80
81
82
83
<!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>
<option value="okay">Yes, Sir! Just do it!</option>
</select>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<script type="text/javascript" src="jquery-3.6.1.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) {
//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() * 400 + 100);
} else {
convState.current.next = convState.newState({
type: 'select',
name: 'dynamic-question-' + count,
questions: ['This question state was built on your previous answer (you answered: ' + convState.current.answer.text + ')'],
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() * 400 + 100);
}
count++;
}
}
});
});
</script>
</body>
</html>