135 lines
5.2 KiB
JavaScript
135 lines
5.2 KiB
JavaScript
document.addEventListener('DOMContentLoaded', () => {
|
||
const questions = [
|
||
"I wake up feeling tired, even after a full night’s sleep.",
|
||
"By midday, I already feel mentally drained and out of energy.",
|
||
"I feel emotionally numb, detached, or “on autopilot” most of the time.",
|
||
"Things that used to excite me now feel pointless or like a chore.",
|
||
"I feel irritated or cynical about people I work or study with.",
|
||
"I struggle to focus and constantly procrastinate, even on important tasks.",
|
||
"I feel guilty for not doing “enough”, no matter how much I actually do.",
|
||
"I often think about quitting everything for a while or disappearing from social media and work.",
|
||
"I use caffeine, sugar, nicotine, alcohol, or scrolling to “numb out” instead of resting.",
|
||
"I feel like my life is just surviving, not really living."
|
||
];
|
||
|
||
const messageList = document.getElementById('message-list');
|
||
const inputArea = document.getElementById('input-area');
|
||
const userInput = document.getElementById('user-input');
|
||
const sendButton = document.getElementById('send-button');
|
||
|
||
let currentQuestionIndex = 0;
|
||
const userAnswers = [];
|
||
|
||
function addMessage(text, sender) {
|
||
const messageElement = document.createElement('div');
|
||
messageElement.classList.add('message', sender);
|
||
|
||
const avatar = document.createElement('div');
|
||
avatar.classList.add('avatar');
|
||
avatar.textContent = sender === 'bot' ? 'AI' : 'You';
|
||
|
||
const messageContent = document.createElement('div');
|
||
messageContent.classList.add('message-content');
|
||
messageContent.textContent = text;
|
||
|
||
if (sender === 'bot') {
|
||
messageElement.appendChild(avatar);
|
||
}
|
||
messageElement.appendChild(messageContent);
|
||
|
||
messageList.appendChild(messageElement);
|
||
messageList.scrollTop = messageList.scrollHeight;
|
||
}
|
||
|
||
function showTypingIndicator() {
|
||
const typingElement = document.createElement('div');
|
||
typingElement.id = 'typing-indicator';
|
||
typingElement.classList.add('message', 'bot');
|
||
typingElement.innerHTML = `
|
||
<div class="avatar">AI</div>
|
||
<div class="message-content">
|
||
<div class="typing-indicator">
|
||
<span></span><span></span><span></span>
|
||
</div>
|
||
</div>
|
||
`;
|
||
messageList.appendChild(typingElement);
|
||
messageList.scrollTop = messageList.scrollHeight;
|
||
}
|
||
|
||
function removeTypingIndicator() {
|
||
const typingElement = document.getElementById('typing-indicator');
|
||
if (typingElement) {
|
||
typingElement.remove();
|
||
}
|
||
}
|
||
|
||
function askNextQuestion() {
|
||
if (currentQuestionIndex < questions.length) {
|
||
showTypingIndicator();
|
||
setTimeout(() => {
|
||
removeTypingIndicator();
|
||
addMessage(questions[currentQuestionIndex], 'bot');
|
||
userInput.disabled = false;
|
||
sendButton.disabled = false;
|
||
userInput.focus();
|
||
}, 1000); // Simulate AI "thinking"
|
||
} else {
|
||
showTypingIndicator();
|
||
setTimeout(() => {
|
||
removeTypingIndicator();
|
||
addMessage("Thank you for your responses. Click the button below to see your analysis.", 'bot');
|
||
|
||
// Create a form to submit the results
|
||
const form = document.createElement('form');
|
||
form.method = 'POST';
|
||
form.action = 'results.php';
|
||
|
||
const hiddenInput = document.createElement('input');
|
||
hiddenInput.type = 'hidden';
|
||
hiddenInput.name = 'conversation';
|
||
hiddenInput.value = JSON.stringify(userAnswers);
|
||
form.appendChild(hiddenInput);
|
||
|
||
const submitButton = document.createElement('button');
|
||
submitButton.type = 'submit';
|
||
submitButton.textContent = 'Analyze My Results';
|
||
submitButton.id = 'analyze-button';
|
||
form.appendChild(submitButton);
|
||
|
||
inputArea.innerHTML = ''; // Clear the input field and send button
|
||
inputArea.appendChild(form);
|
||
inputArea.style.display = 'flex';
|
||
|
||
}, 1500);
|
||
}
|
||
}
|
||
|
||
function handleUserInput() {
|
||
const text = userInput.value.trim();
|
||
if (text === '') return;
|
||
|
||
addMessage(text, 'user');
|
||
userAnswers.push({ question: questions[currentQuestionIndex], answer: text });
|
||
|
||
userInput.value = '';
|
||
userInput.disabled = true;
|
||
sendButton.disabled = true;
|
||
|
||
currentQuestionIndex++;
|
||
askNextQuestion();
|
||
}
|
||
|
||
sendButton.addEventListener('click', handleUserInput);
|
||
userInput.addEventListener('keydown', (event) => {
|
||
if (event.key === 'Enter') {
|
||
handleUserInput();
|
||
}
|
||
});
|
||
|
||
// Start the conversation
|
||
setTimeout(() => {
|
||
addMessage("Hello! I'm here to help you assess your level of burnout. I'll ask you 10 questions. Please answer them honestly.", 'bot');
|
||
askNextQuestion();
|
||
}, 500);
|
||
}); |