-
Notifications
You must be signed in to change notification settings - Fork 8
/
index.html
123 lines (121 loc) · 6.75 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
120
121
122
123
121 lines (120 sloc) 6.73 KB
<!DOCTYPE html>
<html lang="en">
<meta></meta>
<head>
<title>convForm</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="Pop">Heavy Metal</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, of course!</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 touch 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! Honestly I tought they made me for something else, but stil....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-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>
var debug = false;
if (!debug) {
var console = {};
console.log = function(){};
}
function google() {
window.open("https://google.com");
}
function bing() {
window.open("https://bing.com");
}
var rollbackTo = false;
var originalState = false;
function storeState(stateWrapper) {
rollbackTo = stateWrapper.current;
console.log("storeState called: ",rollbackTo);
}
function rollback(stateWrapper) {
console.log("rollback called: ", rollbackTo, originalState);
console.log("answers at the time of user input: ", stateWrapper.answers);
if(rollbackTo!=false) {
if(originalState!=true) {
originalState = stateWrapper.current.next;
console.log('stored original state');
}
stateWrapper.current.next = rollbackTo;
console.log('changed current.next to rollbackTo');
}
}
function restore(stateWrapper) {
if(originalState != false) {
stateWrapper.current.next = originalState;
console.log('changed current.next to originalState');
}
}
</script>
<script>
jQuery(function($){
var convForm = $('#chat').convform();
console.log(convForm);
});
</script>
</body>
</html>