SRMBOT_FirstModel/api_example.html at master · Project-SRM/SRMBOT_FirstModel · GitHub

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
<!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">
									<input data-conv-question="Hello! This is SRMBOT, here to help you!" name="first-question"data-no-answer="true">
	                                <select data-conv-question="How can I help you?" name="first-question">
	                                    <option value="srm">okay</option>
	                                    <option value="admission">yr</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(convState.current.answer.value==='1') {
		            convState.current.next = convState.newState({
						type: 'select',
						//noAnswer: true,
						name: 'dynamic-question-'+count,
						questions: ['What do you wanna know about SRM'],
						answers: [
							{text: 'Events', value: '3'},
							{text: 'Academics', value: '4'},
							{text: 'Campus Life', value: '5'},
							{text: 'END', value: 'end'}
						]
					});
					//emulating random response time (100-600ms)
					setTimeout(ready, Math.random()*500+100);
		        }
				else if(convState.current.answer.value==='2') {
		            convState.current.next = convState.newState({
						type: 'select',
						//noAnswer: true,
						name: 'dynamic-question-'+count,
						questions: ['You are looking for admission in: '+ answer],
						answers: [
							{text: 'Engineering', value: '6'},
							{text: 'Medical & Health Sciences', value: '7'},
							{text: 'Manangement', value: '8'},
							{text: 'Law', value: '9'},
							{text: 'END', value: 'end'}
						]
					});
					//emulating random response time (100-600ms)
					setTimeout(ready, Math.random()*500+100);
		        }

				// else if(convState.current.answer.value==='2') {
		        //     convState.current.next = convState.State({
				// 		type: 'select',
				// 		//noAnswer: true,
				// 		name: 'dynamic-question-'+count,
				// 		questions: ['You are looking for admission in: '+ answer],
				// 		answers: [
				// 			{text: 'Engineering', value: '6'},
				// 			{text: 'Medical & Health Sciences', value: '7'},
				// 			{text: 'Manangement', value: '8'},
				// 			{text: 'Law', value: '9'},
				// 			{text: 'END', value: 'end'}
				// 		]
				// 	});
				// 	//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: ['How can I help you?'],
						answers: [
							{text: 'Tell about SRM', value: '1'},
							{text: 'Admission', value: '2'},
							{text: 'END', value: 'end'}
						]
					});
					// 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+')'],

					// });
					//emulating random response time (100-600ms)
					setTimeout(ready, Math.random()*500+100);
		        }
		        count++;
		    }}});
		});
	</script>
</body>
</html>