I request for reference if my question has answers else where.
I am creating a reading competition app in JavaScript. I have 2 divs, one for the text to be read and the other to display the styled text once read.
i have created an app which works fine. if i read the text in div1 it outputs correctly in the other div2.
my challenge is matching duplicated or omited words
the text to be read. hi all, am trying to read this passage. incase i fail help me out
the result should be such that;
if the word(s)/text/sentence is read correctly, it should be formatted green in color;
if the word(s)/text/sentence is read incorrectly, it should be formatted red in color;
if the word(s)/text/sentence is skipped, it should be formatted blue in color;
if the word(s)/text/sentence is read repeatedly, it should be formatted strike through;
as shown
my html code
<html>
<head>
<title>Speech to text Converter</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="stylesheet.css">
</head>
<body>
<h3 align="center">Speech to text converter JavaScript</h3>
<div id="result2">
most of the people in kenya are poor according to the latest information on the televisions. according to the news passed yesterday, the president of repuvloc of kenya has promised to tax kenyans.
</div>
<button id="mybtn"><i class="fa fa-microphone btn btn-danger" aria-hidden="true"></i></button>
<button id="mybtn2">check</button>
<div id="result"></div>
<script src="jquery.js" type="text/javascript"></script>
<script src="jquery.min.js" type="text/javascript"></script>
<script src="jqueryScript.js" type="text/javascript"></script>
</body>
</html>
my css
body{font-family: Open Sans;}
#result{
height: 200px;
border: 1px solid #ccc;
padding: 10px;
box-shadow: 0 0 10px 0 #bbb;
margin-bottom: 30px;
font-size: 14px;
line-height: 25px;
}
button{
font-size: 20px;
position: absolute;
top: 550px;
left: 50%;
cursor: pointer;
}
#result, #result2{
height: 200px;
border: 1px solid #ccc;
padding: 10px;
box-shadow: 0 0 10px 0 #bbb;
margin-bottom: 30px;
font-size: 20px;
line-height: 25px;
}
my javascript
$(document).ready(function(){
$("#mybtn").on("click",() => {
if('webkitSpeechRecognition' in window) {
var speechRecognizer = new webkitSpeechRecognition();
speechRecognizer.continuous = true;
speechRecognizer.interimResults = true;
speechRecognizer.lang = 'en-US';
speechRecognizer.start();
var finalTranscripts = $("#result").text() + '\n';
speechRecognizer.onresult = function(event) {
var interimTranscripts = '';
for(var i = event.resultIndex; i < event.results.length; i++){
var transcript = event.results[i][0].transcript;
transcript.replace("\n", ". <br>");
if(event.results[i].isFinal) {
finalTranscripts += transcript + ". ";
}else{
interimTranscripts += transcript;
}
}
$("#result").html(finalTranscripts + '<span style="color: #999">' + interimTranscripts + '</span>');
};
speechRecognizer.onerror = function (event) {
};
}else {
$("#result").html('Your browser is not supported. Please download Google chrome or Update your Google chrome!!');
}
});
$("#mybtn2").on("click",()=>{
var arr = $("#result2").text().split(" ");
var arr2 = $("#result").text().split(" ");
var string = " ";
console.log($('#result').html());
arr2.map (function (word, i) {
if (word == arr[i]){
string += "<span style= 'color:green;'>" + word + "</span><span> </span>";
} else{
string += "<span style='color:red;'>" + word + "</span><span> </span>";
}
});
$('#result').html(string);
});
});