-
Notifications
You must be signed in to change notification settings - Fork 109
/
index.html
119 lines (118 loc) · 6.65 KB
/
index.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
<!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" class="conv-form-wrapper">
<form action="" method="GET" class="hidden">
<select data-conv-question="Hello! I'm a bot created from a HTML form. Can I show you some features? (this question comes from a select)" name="first-question">
<option value="yes">Yes</option>
<option value="sure">Sure!</option>
</select>
<input type="text" name="name" data-conv-question="Alright! First, tell me your full name, please.|Okay! Please, tell me your name first.">
<input type="text" data-conv-question="Howdy, {name}:0! It's a pleasure to meet you. (note that this question doesn't expect any answer)" data-no-answer="true">
<input type="text" data-conv-question="This plugin supports multi-select too. Let's see an example." data-no-answer="true">
<select name="multi[]" data-conv-question="What kind of music do you like?" multiple>
<option value="Rock">Rock</option>
<option value="Pop">Pop</option>
<option value="Country">Country</option>
<option value="Classic">Classic</option>
</select>
<select name="programmer" data-callback="storeState" data-conv-question="So, are you a programmer? (this question will fork the conversation based on your answer)">
<option value="yes">Yes</option>
<option value="no">No</option>
</select>
<div data-conv-fork="programmer">
<div data-conv-case="yes">
<input type="text" data-conv-question="A fellow programmer! Cool." data-no-answer="true">
</div>
<div data-conv-case="no">
<select name="thought" data-conv-question="Have you ever thought about learning? Programming is fun!">
<option value="yes">Yes</option>
<option value="no">No..</option>
</select>
</div>
</div>
<input type="text" data-conv-question="convForm also supports regex patterns. Look:" data-no-answer="true">
<input data-conv-question="Type in your e-mail" data-pattern="^[a-zA-Z0-9.!#$%&’*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+\.[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*$" id="email" type="email" name="email" required placeholder="What's your e-mail?">
<input data-conv-question="Now tell me a secret (like a password)" type="password" data-minlength="6" id="senha" name="password" required placeholder="password">
<select data-conv-question="Selects also support callback functions. For example, try one of these:">
<option value="google" data-callback="google">Google</option>
<option value="bing" data-callback="bing">Bing</option>
</select>
<select name="callbackTest" data-conv-question="You can do some cool things with callback functions. Want to rollback to the 'programmer' question before?">
<option value="yes" data-callback="rollback">Yes</option>
<option value="no" data-callback="restore">No</option>
</select>
<select data-conv-question="This is it! If you like me, consider donating! If you need support, contact me. When the form gets to the end, the plugin submits it normally, like you had filled it." id="">
<option value="">Awesome!</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>
function google(stateWrapper, ready) {
window.open("https://google.com");
ready();
}
function bing(stateWrapper, ready) {
window.open("https://bing.com");
ready();
}
var rollbackTo = false;
var originalState = false;
function storeState(stateWrapper, ready) {
rollbackTo = stateWrapper.current;
console.log("storeState called: ",rollbackTo);
ready();
}
function rollback(stateWrapper, ready) {
console.log("rollback called: ", rollbackTo, originalState);
console.log("answers at the time of user input: ", stateWrapper.answers);
if(rollbackTo!=false) {
if(originalState==false) {
originalState = stateWrapper.current.next;
console.log('stored original state');
}
stateWrapper.current.next = rollbackTo;
console.log('changed current.next to rollbackTo');
}
ready();
}
function restore(stateWrapper, ready) {
if(originalState != false) {
stateWrapper.current.next = originalState;
console.log('changed current.next to originalState');
}
ready();
}
</script>
<script>
jQuery(function($){
convForm = $('#chat').convform({selectInputStyle: 'disable'});
console.log(convForm);
});
</script>
</body>
</html>