Spaces:
Runtime error
Runtime error
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Interactive Python Chatbot</title> | |
| <link rel="stylesheet" type="text/css" href="/static/temper.css"> | |
| <script> | |
| async function sendMessage(event) { | |
| event.preventDefault(); | |
| const userInput = document.getElementById("user_input").value.trim(); | |
| if (!userInput) { | |
| alert("Please enter a valid message."); | |
| return; | |
| } | |
| const responseBox = document.getElementById("response-box"); | |
| responseBox.innerHTML += `<p><strong>User:</strong> ${userInput}</p>`; | |
| try { | |
| const response = await fetch("/get_response", { | |
| method: "POST", | |
| headers: { "Content-Type": "application/json" }, | |
| body: JSON.stringify({ user_input: userInput }), | |
| }); | |
| const data = await response.json(); | |
| responseBox.innerHTML += `<p><strong>Chatbot:</strong> ${data.reply}</p>`; | |
| document.getElementById("user_input").value = ""; | |
| } catch (error) { | |
| alert("Error: Unable to send the message."); | |
| } | |
| } | |
| async function startQuiz() { | |
| const difficulty = document.getElementById("difficulty").value; | |
| try { | |
| const response = await fetch("/start_quiz", { | |
| method: "POST", | |
| headers: { "Content-Type": "application/json" }, | |
| body: JSON.stringify({ user_id: "default", level: difficulty }), | |
| }); | |
| const data = await response.json(); | |
| const quizBox = document.getElementById("quiz-box"); | |
| if (data.question && data.options) { | |
| quizBox.innerHTML = ` | |
| <p class="quiz-question"><strong>Question:</strong> ${data.question}</p> | |
| <form id="quiz-form"> | |
| ${data.options.map((option, index) => ` | |
| <div class="quiz-option"> | |
| <input type="radio" id="option${index}" name="answer" value="${option.split('. ')[0]}"> | |
| <label for="option${index}">${option}</label> | |
| </div> | |
| `).join('')} | |
| </form> | |
| <button type="button" class="btn btn-primary" onclick="submitAnswer()">Submit Answer</button> | |
| `; | |
| } else { | |
| quizBox.innerHTML = `<p class="quiz-end">Quiz finished! Great job!</p>`; | |
| } | |
| } catch (error) { | |
| alert("Error: Unable to start the quiz."); | |
| } | |
| } | |
| async function submitAnswer() { | |
| const form = document.getElementById("quiz-form"); | |
| const answer = form.querySelector('input[name="answer"]:checked')?.value; | |
| if (!answer) { | |
| alert("Please select an answer."); | |
| return; | |
| } | |
| try { | |
| const response = await fetch("/submit_answer", { | |
| method: "POST", | |
| headers: { "Content-Type": "application/json" }, | |
| body: JSON.stringify({ answer, user_id: "default" }), | |
| }); | |
| const data = await response.json(); | |
| const quizBox = document.getElementById("quiz-box"); | |
| // Display feedback for the answer | |
| quizBox.innerHTML = `<p class="quiz-feedback">${data.reply}</p>`; | |
| // Check if there's a next question | |
| if (data.next_question && data.options) { | |
| quizBox.innerHTML += ` | |
| <p class="quiz-question"><strong>Next Question:</strong> ${data.next_question}</p> | |
| <form id="quiz-form"> | |
| ${data.options.map((option, index) => ` | |
| <div class="quiz-option"> | |
| <input type="radio" id="option${index}" name="answer" value="${option.split('. ')[0]}"> | |
| <label for="option${index}">${option}</label> | |
| </div> | |
| `).join('')} | |
| <button type="button" class="btn btn-primary" onclick="submitAnswer()">Submit Answer</button> | |
| </form> | |
| `; | |
| } else { | |
| quizBox.innerHTML += `<p class="quiz-end">Quiz Completed! Great job!</p>`; | |
| } | |
| } catch (error) { | |
| alert("Error: Unable to submit the answer."); | |
| } | |
| } | |
| async function clearHistory() { | |
| try { | |
| const response = await fetch("/clear_history", { method: "POST" }); | |
| const data = await response.json(); | |
| document.getElementById("response-box").innerHTML = ""; | |
| document.getElementById("quiz-box").innerHTML = ""; | |
| alert(data.reply || "Chat history cleared!"); | |
| } catch (error) { | |
| alert("Error: Unable to clear history."); | |
| } | |
| } | |
| </script> | |
| </head> | |
| <body> | |
| <div id="main-container"> | |
| <div id="header"> | |
| <h1>Interactive Python Chatbot</h1> | |
| </div> | |
| <div id="content-container"> | |
| <!-- Chatbot Section --> | |
| <div id="chat-section"> | |
| <h2>Chatbot</h2> | |
| <div id="response-box"></div> | |
| <form id="chat-form" onsubmit="sendMessage(event)"> | |
| <input type="text" id="user_input" placeholder="Type your message..." required> | |
| <button type="submit">Send</button> | |
| </form> | |
| <button class="clear-history-btn" onclick="clearHistory()">Clear History</button> | |
| </div> | |
| <!-- Quiz Section --> | |
| <div id="quiz-section"> | |
| <h2>Quiz</h2> | |
| <div> | |
| <label for="difficulty">Select Difficulty:</label> | |
| <select id="difficulty"> | |
| <option value="beginner">Beginner</option> | |
| <option value="intermediate">Intermediate</option> | |
| <option value="advanced">Advanced</option> | |
| </select> | |
| <button class="btn btn-primary" onclick="startQuiz()">Start Quiz</button> | |
| </div> | |
| <div id="quiz-box"></div> | |
| </div> | |
| </div> | |
| </div> | |
| </body> | |
| </html> | |