can someone help me incorporate this javascript code and turn it into html

plz

$(document).ready(function() { $("#speaker").hide(); }); var score=0; //Creating Array var QAarray=new Array(); var QA2=[]; var SpeechRecognition = SpeechRecognition || webkitSpeechRecognition; var SpeechGrammarList = SpeechGrammarList || webkitSpeechGrammarList; var SpeechRecognitionEvent = SpeechRecognitionEvent || webkitSpeechRecognitionEvent; /* var phrases = [ 'I love to sing because it\'s fun', 'where are you going', 'can I call you tomorrow', 'why did you talk while I was talking', 'she enjoys reading books and playing games', 'where are you going', 'have a great day', 'she sells seashells on the seashore' ]; */ var phrasePara = document.querySelector('.phrase'); //var resultPara = document.querySelector('.result'); var diagnosticPara = document.querySelector('.output'); var testBtn = document.querySelector('.button1'); //Reload the data for retaking a test function reload(){ QAarray=shuffleMatrix(QAarray); //Making Exact copy of actual array QA2=[...QAarray]; window.alert("Reloading the data"); } //Speaking function var utterance function readText(textspeak) { var text = textspeak; utterance = new SpeechSynthesisUtterance(text); utterance.lang = "en-EN"; utterance.rate = 1.0; window.speechSynthesis.speak(utterance); } //Add Q and A function function add1(addq=QAarray) { var Q = document.forms["QA-form"]["QUES"].value; var A = document.forms["QA-form"]["ANS"].value; //Creating 2d arrary addq.push([Q,A]); alert("Added"); QAarray=shuffleMatrix(QAarray); //Making Exact copy of actual array QA2=[...QAarray]; return false; } //Shuffle the array function function shuffleMatrix(matrix){ for(let i = matrix.length-1; i > 0; i--){ const j = Math.floor(Math.random() * i) const temp = matrix[i] matrix[i] = matrix[j] matrix[j] = temp } return matrix; } //Speech recogniton function testSpeech() { //Stop once the quiz is done if (QA2.length==0){ $("#speaker").hide(); var arraylen=QAarray.length; readText("Quiz is finished and you scored " + score + "out of " + arraylen); window.alert("Reload the data for retaking the Quiz"); throw new Error(); } //Else proceed to this code testBtn.disabled = true; var count=0; var rd=QA2[QA2.length-1][0]; //To count words for (var i = 0; i < rd.split(' ').length; i++) { count++; } count=Math.floor(count); //It is determined that computer takes about 291 miliseconds to say a one word count=count*291; //To read a question readText(QA2[QA2.length-1][0]); var phrase = QA2[QA2.length-1][1]; QA2.pop(); // To ensure case consistency while checking with the returned output text phrase = phrase.toLowerCase(); phrasePara.textContent = phrase; //resultPara.textContent = 'Right or wrong?'; //resultPara.style.background = 'rgba(0,0,0,0.2)'; var grammar = '#JSGF V1.0; grammar phrase; public  = ' + phrase +';'; //Run this function after computer is done speaking setTimeout(function(){ //To show the mic $("#speaker").show(); diagnosticPara.textContent = 'Speech Recognition'; testBtn.textContent = 'Speak Now'; var recognition = new SpeechRecognition(); var speechRecognitionList = new SpeechGrammarList(); speechRecognitionList.addFromString(grammar, 1); recognition.grammars = speechRecognitionList; recognition.lang = 'en-US'; recognition.interimResults = false; recognition.maxAlternatives = 1; recognition.start(); recognition.onresult = function(event) { // The SpeechRecognitionEvent results property returns a SpeechRecognitionResultList object // The SpeechRecognitionResultList object contains SpeechRecognitionResult objects. // It has a getter so it can be accessed like an array // The first [0] returns the SpeechRecognitionResult at position 0. // Each SpeechRecognitionResult object contains SpeechRecognitionAlternative objects that contain individual results. // These also have getters so they can be accessed like arrays. // The second [0] returns the SpeechRecognitionAlternative at position 0. // We then return the transcript property of the SpeechRecognitionAlternative object var speechResult = event.results[0][0].transcript.toLowerCase(); diagnosticPara.textContent = 'Speech received: ' + speechResult + '.'; if(speechResult === phrase) { readText("Correct Answer"); $("#speaker").hide(); setTimeout(testSpeech, 5000); score++; // resultPara.textContent = 'I heard the correct phrase!'; // resultPara.style.background = 'lime'; } else { var ct1=0; //Count words to measure the speed of speaking for (var t = 0; i < phrase.split(' ').length; t++) { ct1++; } ct1=Math.floor(ct1); ct1=ct1+9; ct1=ct1*290; $("#speaker").hide(); //Computer Speaking readText("Wrong, correct answer is " + phrase); setTimeout(testSpeech, ct1); } console.log('Confidence: ' + event.results[0][0].confidence); } recognition.onspeechend = function() { recognition.stop(); testBtn.disabled = false; testBtn.textContent = 'Start new test'; } recognition.onerror = function(event) { testBtn.disabled = false; testBtn.textContent = 'Start new test'; diagnosticPara.textContent = 'Error occurred in recognition: ' + event.error; } recognition.onaudiostart = function(event) { //Fired when the user agent has started to capture audio. console.log('SpeechRecognition.onaudiostart'); } recognition.onaudioend = function(event) { //Fired when the user agent has finished capturing audio. console.log('SpeechRecognition.onaudioend'); } recognition.onend = function(event) { //Fired when the speech recognition service has disconnected. console.log('SpeechRecognition.onend'); } recognition.onnomatch = function(event) { //Fired when the speech recognition service returns a final result with no significant recognition. This may involve some degree of recognition, which doesn't meet or exceed the confidence threshold. console.log('SpeechRecognition.onnomatch'); } recognition.onsoundstart = function(event) { //Fired when any sound  recognisable speech or not  has been detected. console.log('SpeechRecognition.onsoundstart'); } recognition.onsoundend = function(event) { //Fired when any sound  recognisable speech or not  has stopped being detected. console.log('SpeechRecognition.onsoundend'); } recognition.onspeechstart = function (event) { //Fired when sound that is recognised by the speech recognition service as speech has been detected. console.log('SpeechRecognition.onspeechstart'); } recognition.onstart = function(event) { //Fired when the speech recognition service has begun listening to incoming audio with intent to recognize grammars associated with the current SpeechRecognition. console.log('SpeechRecognition.onstart'); } },count); } testBtn.addEventListener('click', testSpeech);