voice_recognition_added_to_feed_bak_form

apu52 · Apr 17, 2024 · de12ecc · de12ecc
1 parent 3540542
commit de12ecc
Show file tree

Hide file tree

Showing 4 changed files with 198 additions and 13 deletions.
diff --git a/Eduversity/index.html b/Eduversity/index.html
@@ -1320,7 +1320,7 @@ <h3 class="h3">
                       <h2 class="h2 section-title">How was your Experience</h2>
 
                       <div class="button-container">
-                          <a href="/feedback.html" class="feedback-button">Give Feedback</a>
+                          <a href="../feedback.html" class="feedback-button">Give Feedback</a>
                       </div>
 
                   </div>

diff --git a/feedback.css b/feedback.css
@@ -362,3 +362,77 @@ p {
   box-shadow: #3c4fe0 0 3px 7px inset;
   transform: translateY(2px);
 }
+
+
+/* JS accessibility */
+/* acceesibility class  */
+.screen-reader-enabled .hover-speak:hover {
+  border: 2px solid #e26111;
+  border-radius: 5px;
+  padding: 3px;
+  z-index: 3;
+}
+
+
+
+.accessibility-button {
+  position: fixed;
+  bottom: 30px;
+  right: 10px;
+  width: 60px;
+  height: 60px;
+  /* background-color: #007bff;  */
+  background-image: url("https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcR6O-gPv_x4ilQWYp-pyPaM-SkUUp32Kny_NIEqKZsWCw&s");
+  background-size: cover;
+  color: white;
+  border-radius: 50%;
+  cursor: pointer;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  z-index: 1000;
+  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
+}
+#accessibilityMenu li{
+  font-size: 16px;
+  padding: 1px;
+}
+.accessibility-menu {
+  position: fixed;
+  bottom: 70px;
+  right: 40px;
+  background-color: #f1f1f1;
+  border-radius: 5px;
+  padding: 10px;
+  display: none;
+  z-index: 999;
+}
+
+.accessibility-menu.active {
+  display: block;
+}
+
+
+.accessibility-menu ul {
+  list-style-type: none;
+  padding: 0;
+  margin: 0;
+}
+
+.accessibility-menu li {
+  margin-bottom: 10px;
+}
+
+.accessibility-menu button {
+  background: none;
+  border: none;
+  padding: 0;
+  font: inherit;
+  color: #007bff;
+  cursor: pointer;
+  text-decoration: underline;
+}
+
+.accessibility-menu button:hover {
+  color: #0056b3;
+}
diff --git a/feedback.html b/feedback.html
@@ -16,7 +16,7 @@
 <body>
     <div class="container">
         <div class="glassmorphism-container">
-            <h1 class="feedback-heading">HOW WAS YOUR EXPERIENCE?</h1>
+            <h1 class="feedback-heading hover-speak" onmouseover="speakText('HOW WAS YOUR EXPERIENCE')" onmouseleave="stopSpeaking()">HOW WAS YOUR EXPERIENCE?</h1>
 
             <!-- <div class="stars" id="stars-container"> -->
             <!-- Stars will be added dynamically using JavaScript -->
@@ -25,47 +25,66 @@ <h1 class="feedback-heading">HOW WAS YOUR EXPERIENCE?</h1>
 
 
 
-            <p>How easy was it to navigate through the website?</p>
+            <p class="hover-speak" onmouseover="speakText('How easy was it to navigate through the website')" onmouseleave="stopSpeaking()">How easy was it to navigate through the website?</p>
             <div class="stars" id="navEase-stars-container"></div>
             <p id="navEase-rating-text">Rating: 0</p>
 
-            <p>How much straightforward and easy was the QUIZ process?</p>
+            <p class="hover-speak" onmouseover="speakText('How much straightforward and easy was the QUIZ process')" onmouseleave="stopSpeaking()">How much straightforward and easy was the QUIZ process?</p>
             <div class="stars" id="bookingProcess-stars-container"></div>
             <p id="bookingProcess-rating-text">Rating: 0</p>
 
-            <p>How much you will recommend Our courses to your Community?</p>
+            <p class="hover-speak" onmouseover="speakText('How much you will recommend Our courses to your Community')" onmouseleave="stopSpeaking()">How much you will recommend Our courses to your Community?</p>
             <div class="stars" id="paymentOptions-stars-container"></div>
             <p id="paymentOptions-rating-text">Rating: 0</p>
 
-            <p>How responsive and helpful was the customer support team?</p>
+            <p class="hover-speak" onmouseover="speakText('How responsive and helpful was the customer support team?')" onmouseleave="stopSpeaking()">How responsive and helpful was the customer support team?</p>
             <div class="stars" id="customerSupport-stars-container"></div>
             <p id="customerSupport-rating-text">Rating: 0</p>
 
-            <p>How much would you recommend this Eduversity Web App to others?</p>
+            <p class="hover-speak" onmouseover="speakText('How much would you recommend this Eduversity Web App to others')" onmouseleave="stopSpeaking()">How much would you recommend this Eduversity Web App to others?</p>
             <div class="stars" id="recommendation-stars-container"></div>
             <p id="recommendation-rating-text">Rating: 0</p>
 
-            <p>If you've bought a Course from this website, how was the overall experience?</p>
+            <p class="hover-speak" onmouseover="speakText('If you have bought a Course from this website, how was the overall experience')" onmouseleave="stopSpeaking()">If you've bought a Course from this website, how was the overall experience?</p>
             <div class="stars" id="packageTour-stars-container"></div>
             <p id="packageTour-rating-text">Rating: 0</p>
 
             <!-- Feedback input box section -->
             <div>
 
-                <label for="feedback-input" id="rating-text">Your feedback:</label>
+                <label for="feedback-input" id="rating-text" class="hover-speak" onmouseover="speakText('Your feedback')" onmouseleave="stopSpeaking()">Your feedback:</label>
                 <br><br>
-                <textarea id="feedback-input" placeholder="Please Write Your honest review!"></textarea>
+                <textarea id="feedback-input" placeholder="Please Write Your honest review!" method="post"></textarea>
             </div>
-            <button class="button" onclick="submitFeedback()">Submit</button>
+            <button id="myButton" class="button hover-speak" onclick="submitFeedback()" onmouseover="speakText('Submit Your feedback')" onmouseleave="stopSpeaking()">Submit</button>
         </div>
-        <div><button class="button" onclick="location.href = 'Eduversity/index.html';">Return To Home Page</button></div>
+        <div><button class="button hover-speak" onclick="location.href = 'Eduversity/index.html';" onmouseover="speakText('Return To Home Page')" onmouseleave="stopSpeaking()">Return To Home Page</button></div>
     </div>
 
     </div>
     <!-- SweetAlert2 -->
     <script src="https://cdn.jsdelivr.net/npm/sweetalert2@10"></script>
 
     <script src="feedback.js" defer></script>
+    <script src="//cdnjs.cloudflare.com/ajax/libs/annyang/2.6.0/annyang.min.js"></script>
+
+    <!-- Accessibility Mode Button -->
+<div class="accessibility-button hover-speak" onclick="toggleAccessibilityMenu()"
+onmouseover="speakText('click here to select accessibility mode')" onmouseleave="stopSpeaking()">
+<div class="accessibility-icon">
+
+</div>
+</div>
+
+<!-- Accessibility Menu -->
+<div class="accessibility-menu" id="accessibilityMenu">
+<ul>
+  <li><button class="hover-speak" onclick="toggleScreenReader()" id="screenReaderButton"
+      onmouseover="speakText('click here to change the screen reader mode')" onmouseleave="stopSpeaking()">Enable
+      Screen Reader</button></li>
+      <li><button onclick="toggleVoiceRecognition()" id="voiceRecognitionButton">Enable Voice Recognition</button></li>
+</ul>
+</div>
 </body>
 
 </html>
diff --git a/feedback.js b/feedback.js
@@ -68,4 +68,96 @@ document.addEventListener('DOMContentLoaded', () => {
       }
     });
 
-  }
+  }
+
+// JS FOR ACCESSIBILITY 
+var screenReaderEnabled = false;
+var voiceRecognitionEnabled = false;
+
+function toggleAccessibilityMenu() {
+ var menu = document.getElementById("accessibilityMenu");
+ menu.classList.toggle("active");
+}
+
+function toggleScreenReader() {
+ screenReaderEnabled = !screenReaderEnabled;
+ var menuButton = document.getElementById("screenReaderButton");
+ if (screenReaderEnabled) {
+   speakText("Screen reader enabled");
+   menuButton.innerText = "Disable Screen Reader";
+   document.body.classList.add("screen-reader-enabled");
+   setTimeout(toggleAccessibilityMenu, 5000);
+ } else {
+   speakText("Screen reader disabled");
+   menuButton.innerText = "Enable Screen Reader";
+   document.body.classList.remove("screen-reader-enabled");
+   toggleAccessibilityMenu();
+ }
+}
+
+function speakText(text) {
+ if (screenReaderEnabled) {
+   var utterance = new SpeechSynthesisUtterance(text);
+   window.speechSynthesis.speak(utterance);
+ }
+}
+
+function stopSpeaking() {
+ window.speechSynthesis.cancel();
+}
+
+function toggleVoiceRecognition() {
+  voiceRecognitionEnabled = !voiceRecognitionEnabled;
+  var menuButton = document.getElementById("voiceRecognitionButton");
+  if (voiceRecognitionEnabled) {
+      startVoiceRecognition();
+      menuButton.innerText = "Disable voice recognition";
+  } else {
+      stopVoiceRecognition();
+      menuButton.innerText = "Enable voice recognition";
+      toggleAccessibilityMenu();
+  }
+}
+
+function startVoiceRecognition() {
+  if (annyang) {
+      annyang.start();
+      speakText("Voice recognition enabled");
+  }
+}
+
+function stopVoiceRecognition() {
+  if (annyang) {
+      annyang.abort();
+      speakText("Voice recognition disabled");
+  }
+}
+
+// Voice commands
+if (annyang) {
+  var commands = {
+      'enable voice recognition': toggleVoiceRecognition,
+      'disable voice recognition': toggleVoiceRecognition,
+      'submit': submit,
+      'go to feedback': focusOnfeedback,
+      'enter feedback *feedback': enterfeedback,
+  };
+
+  annyang.addCommands(commands);
+  annyang.debug(true);
+}
+
+// function submit() {
+//   var submit = document.getElementById('myButton');
+//   if (submit) {
+//     button.click(); 
+//   }
+// };
+
+function focusOnfeedback() {
+  document.getElementById('feedback-input').focus();
+}
+
+function enterfeedback(fb) {
+  document.getElementById('feedback-input').value = fb;
+}