Question
Please include comments! The Chegg site is not letting me upload images, but if you look at the code provided below you should see where
Please include comments! The Chegg site is not letting me upload images, but if you look at the code provided below you should see where the "copy and paste" and "create email" buttons should be edited in the HTML and then locate in the javascript code which handles the onclick event that should represent the "send feedback" button you replaced the "copy and paste" and "create email" buttons with.
After you start speaking, you should see only one button Send Feedback instead of "copy and paste" and "create email"
After you click Send Feedback button two things should happen:
You should get a confirmation page that says "Thanks for your feedback"
You should see the feedback message being logged on the Node server showing the customer feedback.
Hints:
3. Locate the HTML code that you will replace the Copy/Paste and Email buttons with just one button Send Feedback.
4. Modify the Javascript code which handles the onclick event for this new button you have added.
5. There is no form elements defined in this example by Google, but you can dynamically create and submit a form using DOM. Here is a sample solution. You can come up with your own:
function sendFeedback() {
var feedbackform = document.createElement("FORM");
feedbackform.method = "POST";
feedbackform.action = "/feedback";
var forminput = document.createElement("INPUT");
forminput.type = "TEXT";
forminput.name = "feedback";
forminput.value = final_transcript;
index.html
Web Speech API Demo
Web Speech API Demonstration
Click on the microphone icon and begin speaking.
Speak now.
No speech was detected. You may need to adjust your microphone settings.
No microphone was found. Ensure that a microphone is installed and that microphone settings are configured correctly.
Click the "Allow" button above to enable your microphone.
Permission to use microphone was denied.
Permission to use microphone is blocked. To change, go to chrome://settings/contentExceptions#media-stream
Web Speech API is not supported by this browser. Upgrade to Chrome version 25 or later.
Copy and Paste
Press Control-C to copy text. (Command-C on Mac.)
Create Email
Text sent to default email application. (See chrome://settings/handlers to change.)
server.js
#!/bin/env node // OpenShift sample Node application var express = require('express'); var fs = require('fs');
/** * Define the sample application. */ var SampleApp = function() {
// Scope. var self = this;
/* ================================================================ */ /* Helper functions. */ /* ================================================================ */
/** * Set up server IP address and port # using env variables/defaults. */ self.setupVariables = function() { // Set the environment variables we need. //self.ipaddress = process.env.IP; //self.port = process.env.PORT || 5000;
//if (typeof self.ipaddress === "undefined") { // self.ipaddress = "127.0.0.1"; //}; };
/** * Populate the cache. */ self.populateCache = function() { if (typeof self.zcache === "undefined") { self.zcache = { 'index.html': '' }; }
// Local cache for static content. self.zcache['index.html'] = fs.readFileSync('./index.html'); };
/** * Retrieve entry (content) from cache. * @param {string} key Key identifying content to retrieve from cache. */ self.cache_get = function(key) { return self.zcache[key]; };
/** * terminator === the termination handler * Terminate server on receipt of the specified signal. * @param {string} sig Signal to terminate on. */ self.terminator = function(sig){ if (typeof sig === "string") { console.log('%s: Received %s - terminating sample app ...', Date(Date.now()), sig); process.exit(1); } console.log('%s: Node server stopped.', Date(Date.now()) ); };
/** * Setup termination handlers (for exit and a list of signals). */ self.setupTerminationHandlers = function(){ // Process on exit and signals. process.on('exit', function() { self.terminator(); });
// Removed 'SIGPIPE' from the list - bugz 852598. ['SIGHUP', 'SIGINT', 'SIGQUIT', 'SIGILL', 'SIGTRAP', 'SIGABRT', 'SIGBUS', 'SIGFPE', 'SIGUSR1', 'SIGSEGV', 'SIGUSR2', 'SIGTERM' ].forEach(function(element, index, array) { process.on(element, function() { self.terminator(element); }); }); };
/* ================================================================ */ /* App server functions (main app logic here). */ /* ================================================================ */
/** * Create the routing table entries + handlers for the application. */ self.createRoutes = function() { self.routes = { }; self.routes['/feedback'] = function(req, res) { console.log("-- Received a customer feedback: [" + req.body.feedback + "]"); res.send("
WTCU Feedback
Thanks for your feedback!
"); };
self.routes['/'] = function(req, res) { res.setHeader('Content-Type', 'text/html'); res.send(self.cache_get('index.html') ); }; };
/** * Initialize the server (express) and create the routes and register * the handlers. */ self.initializeServer = function() { self.createRoutes(); //self.app = express.createServer(); self.app = express(); self.app.set('port', process.env.PORT || 5000); self.app.set('ip', process.env.IP || "127.0.0.1"); self.app.use(express.static(__dirname)); //self.app.use(express.bodyParser()); self.app.use(express.json()); self.app.use(express.urlencoded());
// Add handlers for the app (from the routes). for (var r in self.routes) { self.app.get(r, self.routes[r]); // maps the HTTP GET request self.app.post(r, self.routes[r]); // maps the HTTP POST request } };
/** * Initializes the sample application. */ self.initialize = function() { self.setupVariables(); self.populateCache(); self.setupTerminationHandlers();
// Create the express server and routes. self.initializeServer(); };
/** * Start the server (starts up the sample application). */ self.start = function() { // Start the app on the specific interface (and port). self.app.listen(self.app.get('port'), function() { console.log('%s: Node server started on %s:%d ...', Date(Date.now() ), self.app.get('ip'), self.app.get('port')); }); };
}; /* Sample Application. */
/** * main(): Main code. */ var zapp = new SampleApp(); zapp.initialize(); zapp.start();
Step by Step Solution
There are 3 Steps involved in it
Step: 1
Get Instant Access to Expert-Tailored Solutions
See step-by-step solutions with expert insights and AI powered tools for academic success
Step: 2
Step: 3
Ace Your Homework with AI
Get the answers you need in no time with our AI-driven, step-by-step assistance
Get Started