*Questions 1 - 3 are based on the original index.html source code provided by th

ID: 3877200 • Letter: #

Question

*Questions 1 - 3 are based on the original index.html source code provided by the instructor. Questions 4 – 5 are based on the server.js source code.

Question 1: What type of variable is “langs”, is it an integer, a float, a boolean, a string, or an array?

Question 2: What do you think ‘webkitSpeechRecognition’ is on line 225? Do you think this mysterious thing exists only in Chrome web browser? Why?

Question 3: What do you think the ‘recognition’ variable is? How many events and their corresponding handlers are registered with this object? What are they?

Question 4: Can you point out where the in the server.js file the feedback is logged in the Node server console? (You can type the code out or give the line number.)

Question 5: What do I need to change if I want this web application to run on localhost port 3333 instead of port 5000? (Which line to change? How will you change it?)

index.html

<!DOCTYPE html>
<meta charset="utf-8">
<title>Web Speech API Demonstration</title>
<style>
* {
 font-family: Verdana, Arial, sans-serif;
}
a:link {
 color:#000;
 text-decoration: none;
}
a:visited {
 color:#000;
}
a:hover {
 color:#33F;
}
.button {
 background: -webkit-linear-gradient(top,#008dfd 0,#0370ea 100%);
 border: 1px solid #076bd2;
 border-radius: 3px;
 color: #fff;
 display: none;
 font-size: 13px;
 font-weight: bold;
 line-height: 1.3;
 padding: 8px 25px;
 text-align: center;
 text-shadow: 1px 1px 1px #076bd2;
 letter-spacing: normal;
}
.center {
 padding: 10px;
 text-align: center;
}
.final {
 color: black;
 padding-right: 3px;
}
.interim {
 color: gray;
}
.info {
 font-size: 14px;
 text-align: center;
 color: #777;
 display: none;
}
.right {
 float: right;
}
.sidebyside {
 display: inline-block;
 width: 45%;
 min-height: 40px;
 text-align: left;
 vertical-align: top;
}
#headline {
 font-size: 40px;
 font-weight: 300;
}
#info {
 font-size: 20px;
 text-align: center;
 color: #777;
 visibility: hidden;
}
#results {
 font-size: 14px;
 font-weight: bold;
 border: 1px solid #ddd;
 padding: 15px;
 text-align: left;
 min-height: 150px;
}
#start_button {
 border: 0;
 background-color:transparent;
 padding: 0;
}
</style>
<h1 class="center" id="headline">
<a href="http://dvcs.w3.org/hg/speech-api/raw-file/tip/speechapi.html">
 Wake Tech Credit Union (WTCU) Customer Feedback</a></h1>
<div id="info">
We would like to hear from you.
Speak now.
No speech was detected. You may need to adjust your
 <a href="//support.google.com/chrome/bin/answer.py?hl=en&answer=1407892">
 microphone settings</a>.

 No microphone was found. Ensure that a microphone is installed and that
 <a href="//support.google.com/chrome/bin/answer.py?hl=en&answer=1407892">
 microphone settings</a> 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 <a href="//www.google.com/chrome">Chrome</a>
 version 25 or later.
</div>
<div class="right">
<button id="start_button" onclick="startButton(event)">
 <img id="start_img" src="mic.gif" alt="Start"></button>
</div>
<div id="results">
<span id="final_span" class="final"></span>
<span id="interim_span" class="interim"></span>

</div>
<div class="center">
<div class="sidebyside" style="text-align:right">
 <button id="copy_button" class="button" onclick="copyButton()">
 Copy and Paste</button>
 <div id="copy_info" class="info">
 Press Control-C to copy text. (Command-C on Mac.)
 </div>
</div>
<div class="sidebyside">
 <button id="email_button" class="button" onclick="emailButton()">
 Create Email</button>
 <div id="email_info" class="info">
 Text sent to default email application. 
 (See chrome://settings/handlers to change.)
 </div>
</div>

<div id="div_language">
 <select id="select_language" onchange="updateCountry()"></select>
   
 <select id="select_dialect"></select>
</div>
</div>
<script>
var langs =
[['Afrikaans', ['af-ZA']],
['Bahasa Indonesia',['id-ID']],
['Bahasa Melayu', ['ms-MY']],
['Català', ['ca-ES']],
['eština', ['cs-CZ']],
['Deutsch', ['de-DE']],
['English', ['en-AU', 'Australia'],
 ['en-CA', 'Canada'],
 ['en-IN', 'India'],
 ['en-NZ', 'New Zealand'],
 ['en-ZA', 'South Africa'],
 ['en-GB', 'United Kingdom'],
 ['en-US', 'United States']],
['Español', ['es-AR', 'Argentina'],
 ['es-BO', 'Bolivia'],
 ['es-CL', 'Chile'],
 ['es-CO', 'Colombia'],
 ['es-CR', 'Costa Rica'],
 ['es-EC', 'Ecuador'],
 ['es-SV', 'El Salvador'],
 ['es-ES', 'España'],
 ['es-US', 'Estados Unidos'],
 ['es-GT', 'Guatemala'],
 ['es-HN', 'Honduras'],
 ['es-MX', 'México'],
 ['es-NI', 'Nicaragua'],
 ['es-PA', 'Panamá'],
 ['es-PY', 'Paraguay'],
 ['es-PE', 'Perú'],
 ['es-PR', 'Puerto Rico'],
 ['es-DO', 'República Dominicana'],
 ['es-UY', 'Uruguay'],
 ['es-VE', 'Venezuela']],
['Euskara', ['eu-ES']],
['Français', ['fr-FR']],
['Galego', ['gl-ES']],
['Hrvatski', ['hr_HR']],
['IsiZulu', ['zu-ZA']],
['Íslenska', ['is-IS']],
['Italiano', ['it-IT', 'Italia'],
 ['it-CH', 'Svizzera']],
['Magyar', ['hu-HU']],
['Nederlands', ['nl-NL']],
['Norsk bokmål', ['nb-NO']],
['Polski', ['pl-PL']],
['Português', ['pt-BR', 'Brasil'],
 ['pt-PT', 'Portugal']],
['Român', ['ro-RO']],
['Slovenina', ['sk-SK']],
['Suomi', ['fi-FI']],
['Svenska', ['sv-SE']],
['Türkçe', ['tr-TR']],
['', ['bg-BG']],
['P', ['ru-RU']],
['', ['sr-RS']],
['', ['ko-KR']],
['', ['cmn-Hans-CN', ' ()'],
 ['cmn-Hans-HK', ' ()'],
 ['cmn-Hant-TW', ' ()'],
 ['yue-Hant-HK', ' ()']],
['', ['ja-JP']],
['Lingua latna', ['la']]];

for (var i = 0; i < langs.length; i++) {
select_language.options[i] = new Option(langs[i][0], i);
}
select_language.selectedIndex = 6;
updateCountry();
select_dialect.selectedIndex = 6;
showInfo('info_start');

function updateCountry() {
for (var i = select_dialect.options.length - 1; i >= 0; i--) {
 select_dialect.remove(i);
}
var list = langs[select_language.selectedIndex];
for (var i = 1; i < list.length; i++) {
 select_dialect.options.add(new Option(list[i][1], list[i][0]));
}
select_dialect.style.visibility = list[1].length == 1 ? 'hidden' : 'visible';
}

var create_email = false;
var final_transcript = '';
var recognizing = false;
var ignore_onend;
var start_timestamp;
if (!('webkitSpeechRecognition' in window)) {
upgrade();
} else {
start_button.style.display = 'inline-block';
var recognition = new webkitSpeechRecognition();
recognition.continuous = true;
recognition.interimResults = true;

recognition.onstart = function() {
 recognizing = true;
 showInfo('info_speak_now');
 start_img.src = 'mic-animate.gif';
};

recognition.onerror = function(event) {
 if (event.error == 'no-speech') {
 start_img.src = 'mic.gif';
 showInfo('info_no_speech');
 ignore_onend = true;
 }
 if (event.error == 'audio-capture') {
 start_img.src = 'mic.gif';
 showInfo('info_no_microphone');
 ignore_onend = true;
 }
 if (event.error == 'not-allowed') {
 if (event.timeStamp - start_timestamp < 100) {
 showInfo('info_blocked');
 } else {
 showInfo('info_denied');
 }
 ignore_onend = true;
 }
};

recognition.onend = function() {
 recognizing = false;
 if (ignore_onend) {
 return;
 }
 start_img.src = 'mic.gif';
 if (!final_transcript) {
 showInfo('info_start');
 return;
 }
 showInfo('');
 if (window.getSelection) {
 window.getSelection().removeAllRanges();
 var range = document.createRange();
 range.selectNode(document.getElementById('final_span'));
 window.getSelection().addRange(range);
 }
 if (create_email) {
 create_email = false;
 createEmail();
 }
};

recognition.onresult = function(event) {
 var interim_transcript = '';
 for (var i = event.resultIndex; i < event.results.length; ++i) {
 if (event.results[i].isFinal) {
 final_transcript += event.results[i][0].transcript;
 } else {
 interim_transcript += event.results[i][0].transcript;
 }
 }
 final_transcript = capitalize(final_transcript);
 final_span.innerHTML = linebreak(final_transcript);
 interim_span.innerHTML = linebreak(interim_transcript);
 if (final_transcript || interim_transcript) {
 showButtons('inline-block');
 }
};
}

function upgrade() {
start_button.style.visibility = 'hidden';
showInfo('info_upgrade');
}

var two_line = / /g;
var one_line = / /g;
function linebreak(s) {
return s.replace(two_line, '').replace(one_line, ' ');
}

var first_char = /S/;
function capitalize(s) {
return s.replace(first_char, function(m) { return m.toUpperCase(); });
}

function createEmail() {
var n = final_transcript.indexOf(' ');
if (n < 0 || n >= 80) {
 n = 40 + final_transcript.substring(40).indexOf(' ');
}
var subject = encodeURI(final_transcript.substring(0, n));
var body = encodeURI(final_transcript.substring(n + 1));
window.location.href = 'mailto:?subject=' + subject + '&body=' + body;
}

function copyButton() {
if (recognizing) {
 recognizing = false;
 recognition.stop();
}
copy_button.style.display = 'none';
copy_info.style.display = 'inline-block';
showInfo('');
}

function emailButton() {
if (recognizing) {
 create_email = true;
 recognizing = false;
 recognition.stop();
} else {
 createEmail();
}
email_button.style.display = 'none';
email_info.style.display = 'inline-block';
showInfo('');
}

function startButton(event) {
if (recognizing) {
 recognition.stop();
 return;
}
final_transcript = '';
recognition.lang = select_dialect.value;
recognition.start();
ignore_onend = false;
final_span.innerHTML = '';
interim_span.innerHTML = '';
start_img.src = 'mic-slash.gif';
showInfo('info_allow');
showButtons('none');
start_timestamp = event.timeStamp;
}

function showInfo(s) {
if (s) {
 for (var child = info.firstChild; child; child = child.nextSibling) {
 if (child.style) {
 child.style.display = child.id == s ? 'inline' : 'none';
 }
 }
 info.style.visibility = 'visible';
} else {
 info.style.visibility = 'hidden';
}
}

var current_style;
function showButtons(style) {
if (style == current_style) {
 return;
}
current_style = style;
copy_button.style.display = style;
email_button.style.display = style;
copy_info.style.display = 'none';
email_info.style.display = 'none';
}
</script>

server.js

Explanation / Answer

Answer 1:
langs is a type of array. If you look closely, it is similar to this
var cars = ["Porche", "Audi", "Tesla"];
which is how we define arrays in javascript.

Answer 2:
webkitSpeechRecognition is a web speech API which enables the developers to provide speech-input feature in a browser. The API is very much supported by chrome and is in an experimental phase for firefox too. For now, it just produces a continous string of words but doesn't add punctuation.

Answer 3:
recognition is an instance of webkitSpeechRecognition.
Some events and handlers registered with this object are:
continuous - which allows the results to have multiple text results than just one
interimResults - this will provide you the text before they have been considered final.
onstart, onerror , onend and onresult - these are handlers which will let you to handle the event on start, when it gets in an error state, when it ends and when it provides the final results respectively.

Answer 4:
The following line is where the feedback would be logged-in :-
console.log('%s: Received %s - terminating sample app ...', Date(Date.now()), sig);

Answer 5:
we can do this by defining our desired port number using the following line, in place of 5000 :-
self.app.set('port', process.env.PORT || 5000);

Navigate

*Question after base and derived class public class Instrument { private String

*Read this before answering my question thanks* I have posted this question twic

Integrity-first tutoring: explanations and feedback only — we do not complete graded work. Learn more.

*Questions 1 - 3 are based on the original index.html source code provided by th

Question

Explanation / Answer

Related Questions

Navigate