Hugging Face's logo

Spaces:
Kiruthikaramalingam
/
Interactive_Python_Chatbot1
Runtime error

App Files Community
Kiruthikaramalingam commited on
Commit
1375847
·
verified ·
1 Parent(s): dd5f938

Update templates/tempor.html

Browse files
Files changed (1) hide show
  1. templates/tempor.html +164 -164
templates/tempor.html CHANGED
@@ -1,164 +1,164 @@
1
- <!DOCTYPE html>
2
- <html lang="en">
3
- <head>
4
- <meta charset="UTF-8">
5
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
- <title>Interactive Python Chatbot</title>
7
- <link rel="stylesheet" type="text/css" href="/static/temper.css">
8
- <script>
9
- async function sendMessage(event) {
10
- event.preventDefault();
11
- const userInput = document.getElementById("user_input").value.trim();
12
- if (!userInput) {
13
- alert("Please enter a valid message.");
14
- return;
15
- }
16
-
17
- const responseBox = document.getElementById("response-box");
18
- responseBox.innerHTML += `<p><strong>User:</strong> ${userInput}</p>`;
19
-
20
- try {
21
- const response = await fetch("/get_response", {
22
- method: "POST",
23
- headers: { "Content-Type": "application/json" },
24
- body: JSON.stringify({ user_input: userInput }),
25
- });
26
-
27
- const data = await response.json();
28
- responseBox.innerHTML += `<p><strong>Chatbot:</strong> ${data.reply}</p>`;
29
- document.getElementById("user_input").value = "";
30
- } catch (error) {
31
- alert("Error: Unable to send the message.");
32
- }
33
- }
34
-
35
- async function startQuiz() {
36
- const difficulty = document.getElementById("difficulty").value;
37
-
38
- try {
39
- const response = await fetch("/start_quiz", {
40
- method: "POST",
41
- headers: { "Content-Type": "application/json" },
42
- body: JSON.stringify({ user_id: "default", level: difficulty }),
43
- });
44
-
45
- const data = await response.json();
46
- const quizBox = document.getElementById("quiz-box");
47
-
48
- if (data.question && data.options) {
49
- quizBox.innerHTML = `
50
- <p class="quiz-question"><strong>Question:</strong> ${data.question}</p>
51
- <form id="quiz-form">
52
- ${data.options.map((option, index) => `
53
- <div class="quiz-option">
54
- <input type="radio" id="option${index}" name="answer" value="${option.split('. ')[0]}">
55
- <label for="option${index}">${option}</label>
56
- </div>
57
- `).join('')}
58
-
59
- </form>
60
-
61
- <button type="button" class="btn btn-primary" onclick="submitAnswer()">Submit Answer</button>
62
- `;
63
- } else {
64
- quizBox.innerHTML = `<p class="quiz-end">Quiz finished! Great job!</p>`;
65
- }
66
- } catch (error) {
67
- alert("Error: Unable to start the quiz.");
68
- }
69
- }
70
-
71
- async function submitAnswer() {
72
- const form = document.getElementById("quiz-form");
73
- const answer = form.querySelector('input[name="answer"]:checked')?.value;
74
-
75
- if (!answer) {
76
- alert("Please select an answer.");
77
- return;
78
- }
79
-
80
- try {
81
- const response = await fetch("/submit_answer", {
82
- method: "POST",
83
- headers: { "Content-Type": "application/json" },
84
- body: JSON.stringify({ answer, user_id: "default" }),
85
- });
86
-
87
- const data = await response.json();
88
- const quizBox = document.getElementById("quiz-box");
89
-
90
- // Display feedback for the answer
91
- quizBox.innerHTML = `<p class="quiz-feedback">${data.reply}</p>`;
92
-
93
- // Check if there's a next question
94
- if (data.next_question && data.options) {
95
- quizBox.innerHTML += `
96
- <p class="quiz-question"><strong>Next Question:</strong> ${data.next_question}</p>
97
- <form id="quiz-form">
98
- ${data.options.map((option, index) => `
99
- <div class="quiz-option">
100
- <input type="radio" id="option${index}" name="answer" value="${option.split('. ')[0]}">
101
- <label for="option${index}">${option}</label>
102
- </div>
103
- `).join('')}
104
- <button type="button" class="btn btn-primary" onclick="submitAnswer()">Submit Answer</button>
105
- </form>
106
- `;
107
- } else {
108
- quizBox.innerHTML += `<p class="quiz-end">Quiz Completed! Great job!</p>`;
109
- }
110
- } catch (error) {
111
- alert("Error: Unable to submit the answer.");
112
- }
113
- }
114
-
115
- async function clearHistory() {
116
- try {
117
- const response = await fetch("/clear_history", { method: "POST" });
118
- const data = await response.json();
119
- document.getElementById("response-box").innerHTML = "";
120
- document.getElementById("quiz-box").innerHTML = "";
121
- alert(data.reply || "Chat history cleared!");
122
- } catch (error) {
123
- alert("Error: Unable to clear history.");
124
- }
125
- }
126
- </script>
127
- </head>
128
- <body>
129
- <div id="main-container">
130
- <div id="header">
131
- <h1>Interactive Python Chatbot</h1>
132
- </div>
133
- <div id="content-container">
134
- <!-- Chatbot Section -->
135
- <div id="chat-section">
136
- <h2>Chatbot</h2>
137
- <div id="response-box"></div>
138
- <form id="chat-form" onsubmit="sendMessage(event)">
139
- <input type="text" id="user_input" placeholder="Type your message..." required>
140
- <button type="submit">Send</button>
141
- </form>
142
- <button class="clear-history-btn" onclick="clearHistory()">Clear History</button>
143
-
144
- </div>
145
-
146
- <!-- Quiz Section -->
147
- <div id="quiz-section">
148
- <h2>Quiz</h2>
149
- <div>
150
- <label for="difficulty">Select Difficulty:</label>
151
- <select id="difficulty">
152
- <option value="beginner">Beginner</option>
153
- <option value="intermediate">Intermediate</option>
154
- <option value="advanced">Advanced</option>
155
- </select>
156
- <button class="btn btn-primary" onclick="startQuiz()">Start Quiz</button>
157
- </div>
158
- <div id="quiz-box"></div>
159
- </div>
160
- </div>
161
- </div>
162
- </body>
163
- </html>
164
-
 
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Interactive Python Chatbot</title>
7
+ <link rel="stylesheet" type="text/css" href="/static/tempor.css">
8
+ <script>
9
+ async function sendMessage(event) {
10
+ event.preventDefault();
11
+ const userInput = document.getElementById("user_input").value.trim();
12
+ if (!userInput) {
13
+ alert("Please enter a valid message.");
14
+ return;
15
+ }
16
+
17
+ const responseBox = document.getElementById("response-box");
18
+ responseBox.innerHTML += `<p><strong>User:</strong> ${userInput}</p>`;
19
+
20
+ try {
21
+ const response = await fetch("/get_response", {
22
+ method: "POST",
23
+ headers: { "Content-Type": "application/json" },
24
+ body: JSON.stringify({ user_input: userInput }),
25
+ });
26
+
27
+ const data = await response.json();
28
+ responseBox.innerHTML += `<p><strong>Chatbot:</strong> ${data.reply}</p>`;
29
+ document.getElementById("user_input").value = "";
30
+ } catch (error) {
31
+ alert("Error: Unable to send the message.");
32
+ }
33
+ }
34
+
35
+ async function startQuiz() {
36
+ const difficulty = document.getElementById("difficulty").value;
37
+
38
+ try {
39
+ const response = await fetch("/start_quiz", {
40
+ method: "POST",
41
+ headers: { "Content-Type": "application/json" },
42
+ body: JSON.stringify({ user_id: "default", level: difficulty }),
43
+ });
44
+
45
+ const data = await response.json();
46
+ const quizBox = document.getElementById("quiz-box");
47
+
48
+ if (data.question && data.options) {
49
+ quizBox.innerHTML = `
50
+ <p class="quiz-question"><strong>Question:</strong> ${data.question}</p>
51
+ <form id="quiz-form">
52
+ ${data.options.map((option, index) => `
53
+ <div class="quiz-option">
54
+ <input type="radio" id="option${index}" name="answer" value="${option.split('. ')[0]}">
55
+ <label for="option${index}">${option}</label>
56
+ </div>
57
+ `).join('')}
58
+
59
+ </form>
60
+
61
+ <button type="button" class="btn btn-primary" onclick="submitAnswer()">Submit Answer</button>
62
+ `;
63
+ } else {
64
+ quizBox.innerHTML = `<p class="quiz-end">Quiz finished! Great job!</p>`;
65
+ }
66
+ } catch (error) {
67
+ alert("Error: Unable to start the quiz.");
68
+ }
69
+ }
70
+
71
+ async function submitAnswer() {
72
+ const form = document.getElementById("quiz-form");
73
+ const answer = form.querySelector('input[name="answer"]:checked')?.value;
74
+
75
+ if (!answer) {
76
+ alert("Please select an answer.");
77
+ return;
78
+ }
79
+
80
+ try {
81
+ const response = await fetch("/submit_answer", {
82
+ method: "POST",
83
+ headers: { "Content-Type": "application/json" },
84
+ body: JSON.stringify({ answer, user_id: "default" }),
85
+ });
86
+
87
+ const data = await response.json();
88
+ const quizBox = document.getElementById("quiz-box");
89
+
90
+ // Display feedback for the answer
91
+ quizBox.innerHTML = `<p class="quiz-feedback">${data.reply}</p>`;
92
+
93
+ // Check if there's a next question
94
+ if (data.next_question && data.options) {
95
+ quizBox.innerHTML += `
96
+ <p class="quiz-question"><strong>Next Question:</strong> ${data.next_question}</p>
97
+ <form id="quiz-form">
98
+ ${data.options.map((option, index) => `
99
+ <div class="quiz-option">
100
+ <input type="radio" id="option${index}" name="answer" value="${option.split('. ')[0]}">
101
+ <label for="option${index}">${option}</label>
102
+ </div>
103
+ `).join('')}
104
+ <button type="button" class="btn btn-primary" onclick="submitAnswer()">Submit Answer</button>
105
+ </form>
106
+ `;
107
+ } else {
108
+ quizBox.innerHTML += `<p class="quiz-end">Quiz Completed! Great job!</p>`;
109
+ }
110
+ } catch (error) {
111
+ alert("Error: Unable to submit the answer.");
112
+ }
113
+ }
114
+
115
+ async function clearHistory() {
116
+ try {
117
+ const response = await fetch("/clear_history", { method: "POST" });
118
+ const data = await response.json();
119
+ document.getElementById("response-box").innerHTML = "";
120
+ document.getElementById("quiz-box").innerHTML = "";
121
+ alert(data.reply || "Chat history cleared!");
122
+ } catch (error) {
123
+ alert("Error: Unable to clear history.");
124
+ }
125
+ }
126
+ </script>
127
+ </head>
128
+ <body>
129
+ <div id="main-container">
130
+ <div id="header">
131
+ <h1>Interactive Python Chatbot</h1>
132
+ </div>
133
+ <div id="content-container">
134
+ <!-- Chatbot Section -->
135
+ <div id="chat-section">
136
+ <h2>Chatbot</h2>
137
+ <div id="response-box"></div>
138
+ <form id="chat-form" onsubmit="sendMessage(event)">
139
+ <input type="text" id="user_input" placeholder="Type your message..." required>
140
+ <button type="submit">Send</button>
141
+ </form>
142
+ <button class="clear-history-btn" onclick="clearHistory()">Clear History</button>
143
+
144
+ </div>
145
+
146
+ <!-- Quiz Section -->
147
+ <div id="quiz-section">
148
+ <h2>Quiz</h2>
149
+ <div>
150
+ <label for="difficulty">Select Difficulty:</label>
151
+ <select id="difficulty">
152
+ <option value="beginner">Beginner</option>
153
+ <option value="intermediate">Intermediate</option>
154
+ <option value="advanced">Advanced</option>
155
+ </select>
156
+ <button class="btn btn-primary" onclick="startQuiz()">Start Quiz</button>
157
+ </div>
158
+ <div id="quiz-box"></div>
159
+ </div>
160
+ </div>
161
+ </div>
162
+ </body>
163
+ </html>
164
+