Update script.js

script.js

@@ -1,18 +1,129 @@
-function showScreen(n) {
-  document.querySelectorAll('.screen').forEach(el => {
-    el.classList.remove('active');
+// Function to switch between screens
+function showScreen(screenNumber) {
+  // Hide all screens
+  document.querySelectorAll('.screen').forEach(screen => {
+    screen.classList.remove('active');
   });
-  document.getElementById(`screen${n}`).classList.add('active');
+  
+  // Show the requested screen
+  document.getElementById('screen' + screenNumber).classList.add('active');
 }
 
+// Handle form submission
 function handleSubmit() {
-  const resp = document.getElementById('response').value.trim();
-  // Placeholder for real AI feedback:
-  const feedback =
-    "✅ Great approach! You might calmly approach her, validate her feelings, " +
-    "use simple reassuring words, offer a familiar comfort item, " +
-    "and gently guide her back to bed.";
-  
-  document.getElementById('feedbackText').innerText = feedback;
+  const response = document.getElementById('response').value.trim();
+  
+  if (response.length < 10) {
+    alert('Please provide a more detailed response.');
+    return;
+  }
+  
+  // Analyze the response and provide feedback
+  const feedback = analyzeResponse(response);
+  
+  // Display feedback
+  document.getElementById('feedbackText').innerHTML = feedback;
+  
+  // Show feedback screen
   showScreen(4);
 }
+
+// Function to analyze caregiver response
+function analyzeResponse(response) {
+  // Convert to lowercase for easier matching
+  const lowercaseResponse = response.toLowerCase();
+  
+  // Initialize score and feedback
+  let score = 0;
+  let positiveFeedback = [];
+  let improvementFeedback = [];
+  
+  // Check for positive approaches
+  if (lowercaseResponse.includes('calm') || lowercaseResponse.includes('gentle')) {
+    score += 1;
+    positiveFeedback.push('✓ Using a calm and gentle approach');
+  } else {
+    improvementFeedback.push('✗ Consider using a calm and gentle tone');
+  }
+  
+  if (lowercaseResponse.includes('distract') || lowercaseResponse.includes('redirect')) {
+    score += 2;
+    positiveFeedback.push('✓ Good use of redirection or distraction techniques');
+  } else {
+    improvementFeedback.push('✗ Consider using redirection or distraction');
+  }
+  
+  if (lowercaseResponse.includes('reassure') || lowercaseResponse.includes('comfort')) {
+    score += 1;
+    positiveFeedback.push('✓ Providing reassurance and comfort');
+  }
+  
+  if (lowercaseResponse.includes('listen') || lowercaseResponse.includes('understand')) {
+    score += 1;
+    positiveFeedback.push('✓ Taking time to listen and understand concerns');
+  }
+  
+  if (lowercaseResponse.includes('routine') || lowercaseResponse.includes('familiar')) {
+    score += 1;
+    positiveFeedback.push('✓ Recognizing the importance of routine or familiarity');
+  }
+  
+  // Check for approaches to avoid
+  if (lowercaseResponse.includes('force') || lowercaseResponse.includes('insist')) {
+    score -= 1;
+    improvementFeedback.push('✗ Avoid forcing or insisting when someone with dementia is agitated');
+  }
+  
+  if (lowercaseResponse.includes('argue') || lowercaseResponse.includes('reason with')) {
+    score -= 1;
+    improvementFeedback.push('✗ Avoid arguing or using complex reasoning');
+  }
+  
+  // Generate feedback based on score
+  let feedbackHTML = '';
+  
+  if (score >= 3) {
+    feedbackHTML += '<h3 class="feedback-positive">Great approach!</h3>';
+  } else if (score >= 1) {
+    feedbackHTML += '<h3 class="feedback-neutral">Good start, with room for improvement</h3>';
+  } else {
+    feedbackHTML += '<h3 class="feedback-negative">Consider a different approach</h3>';
+  }
+  
+  // Add detailed feedback
+  feedbackHTML += '<div class="feedback-details">';
+  
+  if (positiveFeedback.length > 0) {
+    feedbackHTML += '<div class="feedback-section"><h4>What you did well:</h4><ul>';
+    positiveFeedback.forEach(item => {
+      feedbackHTML += `<li>${item}</li>`;
+    });
+    feedbackHTML += '</ul></div>';
+  }
+  
+  if (improvementFeedback.length > 0) {
+    feedbackHTML += '<div class="feedback-section"><h4>Suggestions for improvement:</h4><ul>';
+    improvementFeedback.forEach(item => {
+      feedbackHTML += `<li>${item}</li>`;
+    });
+    feedbackHTML += '</ul></div>';
+  }
+  
+  // Add expert tips
+  feedbackHTML += `
+    <div class="feedback-section">
+      <h4>Expert tips:</h4>
+      <ul>
+        <li>Approach from the front, maintain eye contact</li>
+        <li>Use simple language and short sentences</li>
+        <li>Allow extra time for responses</li>
+        <li>Consider unmet needs (hunger, thirst, pain, toilet)</li>
+        <li>Create a calm environment (reduce noise, appropriate lighting)</li>
+      </ul>
+    </div>
+  `;
+  
+  feedbackHTML += '</div>';
+  
+  return feedbackHTML;
+}