Home > Article > Backend Development > How to add question audio and speech recognition elements to online quizzes
How to add question audio and speech recognition elements to online quizzes
- PHPzOriginal
- 2023-09-24 08:24:291407browse
How to add the audio and speech recognition elements of the question in online answering questions requires specific code examples
With the development of Internet technology, online answering questions has become a way for people to learn and One of the common ways of taking exams. By answering questions online, students can study and test anytime, anywhere, conveniently and quickly. In order to improve the interactive experience and efficiency of online answering questions, we can consider adding audio and speech recognition elements to the questions so that students can answer through voice and improve the learning effect. This article will introduce how to add the audio and speech recognition elements of the question to the online answer, and provide code examples.
1. Add audio elements of the question
In order for students to hear the audio content of the question, we need to add audio elements to the question. HTML5 provides
<!DOCTYPE html>
<html>
<head>
<title>在线答题</title>
</head>
<body>
<!-- 题目内容 -->
<h3>题目：请听音频并选择正确答案</h3>
<!-- 音频元素 -->
<audio controls>
<source src="题目音频文件路径" type="audio/mpeg">
</audio>
<!-- 题目选项 -->
<h4>A. 选项一</h4>
<h4>B. 选项二</h4>
<h4>C. 选项三</h4>
<h4>D. 选项四</h4>
<!-- 学生作答区域 -->
<input type="radio" name="choice" value="A" />A
<input type="radio" name="choice" value="B" />B
<input type="radio" name="choice" value="C" />C
<input type="radio" name="choice" value="D" />D
<!-- 确认按钮 -->
<button onclick="checkAnswer()">确认答案</button>
<!-- 答案显示区域 -->
<div id="result"></div>
<script>
// 验证答案的函数
function checkAnswer() {
// 获取学生的答案
var choice = document.querySelector('input[name="choice"]:checked').value;
// 比较学生的答案和正确答案
if (choice === "B") {
// 显示回答正确
document.getElementById('result').innerHTML = '回答正确！';
} else {
// 显示回答错误
document.getElementById('result').innerHTML = '回答错误！';
}
}
</script>
</body>
</html>In the above code, we use the
2. Add speech recognition elements
In order to allow students to answer by voice and realize the speech recognition function, we can use the Web Speech API. The Web Speech API enables speech synthesis and speech recognition in the browser. The specific code example is as follows:
<!DOCTYPE html>
<html>
<head>
<title>在线答题</title>
</head>
<body>
<!-- 题目内容 -->
<h3>题目：请听音频并用语音回答</h3>
<!-- 音频元素 -->
<audio controls>
<source src="题目音频文件路径" type="audio/mpeg">
</audio>
<!-- 语音输入按钮 -->
<button onclick="startListening()">开始语音输入</button>
<!-- 学生回答 -->
<p>学生回答：<span id="answer"></span></p>
<!-- 确认按钮 -->
<button onclick="checkAnswer()">确认答案</button>
<!-- 答案显示区域 -->
<div id="result"></div>
<script>
// 语音识别对象
var recognition = new webkitSpeechRecognition();
// 开始语音输入
function startListening() {
recognition.start();
}
// 接收识别结果
recognition.onresult = function(event) {
var transcript = event.results[0][0].transcript;
// 显示学生的回答
document.getElementById('answer').innerHTML = transcript;
}
// 验证答案的函数
function checkAnswer() {
// 获取学生的回答
var answer = document.getElementById('answer').innerHTML;
// 比较学生的回答和正确答案
if (answer === "正确答案") {
// 显示回答正确
document.getElementById('result').innerHTML = '回答正确！';
} else {
// 显示回答错误
document.getElementById('result').innerHTML = '回答错误！';
}
}
</script>
</body>
</html>In the above code, we first create a SpeechRecognition object for speech recognition. Then click the button startListening() to start voice input, and then obtain the result of the speech recognition in the onresult event and display it in the student's answer area. Finally, the checkAnswer() function is used to verify the student's answer and display the answer result.
Through the above code examples, we can add the audio and speech recognition elements of the question to the online answer to improve the learning experience and effect. I hope to be helpful!
The above is the detailed content of How to add question audio and speech recognition elements to online quizzes. For more information, please follow other related articles on the PHP Chinese website!