- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我正在尝试用随机问题进行测验。我希望每个问题都附有一个声音剪辑,该声音剪辑会在问题出现后立即自动播放。我还希望有一个按钮,使用户可以重播声音剪辑。我究竟怎样才能实现这一目标?
我知道如何使用 audioClips.play();
播放单个音频剪辑。但是如何从数组中播放与问题“同步”的音频剪辑呢?
这是我到目前为止所拥有的:
var country = ["Italy", "Spain", "Portugal", "France", "Greece", "Ireland", "Germany"];
var audioClips = ["italy.mp3", "spain.mp3", "portugal.mp3", "france.mp3", "greece.mp3", "ireland.mp3", "germany.mp3"];
var capital = ["rome", "madrid", "lisbon", "paris", "athens", "dublin", "berlin"];
var random001 = Math.floor(Math.random() * country.length);
document.getElementById("country").textContent = country[random001];
function submit001() {
var b = input001.value.toLowerCase();
var text;
if (b === capital[random001]) {
goToNextQuestion();
text = "Correct!";
} else {
text = input001.value.bold() + " is not correct!";
}
document.getElementById("input001").value = "";
document.getElementById("answer001").innerHTML = text;
}
function goToNextQuestion() {
document.getElementById("answer001").innerHTML = "";
random001 = Math.floor(Math.random() * country.length);
document.getElementById("country").innerHTML = country[random001];
document.getElementById("input001").focus();
}
<p id="message001">What is the capital of <text id="country"></text>?</p>
<input type="text" id="input001" autofocus onKeyDown="if(event.keyCode==13) submit001()">
<p id="answer001"></p>
<button onclick="playAudio()" type="button">Replay Audio</button>
最佳答案
对于这个问题,您需要根据数组来思考,并且需要根据对象来思考。将相关信息组合到一个对象中,您可以通过清晰、易于阅读的代码来实现您的目标。
为了完成这项工作,我必须广泛重构您的代码。这就是我的想法。
HTML
<head>
<style>
#startButton {
display: block;
}
#quiz {
display: none;
}
</style>
</head>
<body>
<div id="startButton">
<button type="button" onclick="startQuiz()">Start Quiz</button>
</div>
<div id="quiz">
<p id="message001">What is the capital of <text id="country"></text>?</p>
<input type="text" id="input001" autofocus onKeyDown="if(event.keyCode==13) checkAnswer()" value="">
<p id="answer001"></p>
<button id="replayButton" type="button" onclick="setAudio()">Replay Audio</button>
</div>
</body>
Javascript
<script>
var country = {
"Italy": {
"audio": "italy.mp3",
"capital": "rome"
},
"Spain": {
"audio": "spain.mp3",
"capital": "madrid"
},
"Portugal": {
"audio": "portugal.mp3",
"capital": "lisbon"
},
"France": {
"audio": "france.mp3",
"capital": "paris"
},
"Greece": {
"audio": "greece.mp3",
"capital": "athens"
},
"Ireland": {
"audio": "ireland.mp3",
"capital": "dublin"
},
"Germany": {
"audio": "germany.mp3",
"capital": "berlin"
}
};
var countryArray = Object.keys(country);
function getRandomInt(min, max) {
return Math.floor(Math.random() * (max - min + 1)) + min;
}
function nextCountryName(){
let randIndex = getRandomInt(1, countryArray.length) - 1;
return countryArray[randIndex];
};
function playAudio(file){
let playFile = new Audio(file);
playFile.play();
}
function newCountry(newCountryName) {
document.getElementById("country").textContent = newCountryName;
document.getElementById("input001").value = "";
}
function isAnswerCorrect(answer, useCountry) {
let answerId = document.getElementById("answer001");
let ans = answer.toLowerCase();
let text;
if(ans == country[useCountry].capital){
answerId.innerHTML = "Correct!";
return true;
} else {
answerId.innerHTML = ans.bold() + " is not correct!";
return false;
}
};
function setAudio(){
let thisCountry = document.getElementById("country").textContent;
let audioFile = country[thisCountry].audio;
let callStr = "playAudio(\'" + audioFile + "\')";
document.getElementById('replayButton').setAttribute('onclick', callStr);
}
function checkAnswer(){
let inputId = document.getElementById('input001');
let answer = inputId.value;
let thisCountry = document.getElementById("country").textContent;
let audioFile = country[thisCountry].audio;
let result = isAnswerCorrect(answer, thisCountry);
if(result) {
let cntryName = nextCountryName();
newCountry(cntryName);
playAudio(country[cntryName].audio);
}
};
function startQuiz(){
let startingCountry = nextCountryName();
newCountry(startingCountry);
document.getElementById('startButton').style.display = "none";
document.getElementById('quiz').style.display = "block";
playAudio(country[startingCountry].audio);
};
</script>
varcountry
、varaudioClips
和 varcapital
数组转换为名为 varcountry
的单个对象。这样您就可以使用 country.capital
或 country.audio
来获取您要查找的值。.play()
方法之前设置音频文件类型 new Audio("file_name")
。虽然answer002
、answer003
、input002
、input003
等超出了您的问题范围,但此代码可以轻松修改接受此类参数以进行更广泛的测验。
关于Javascript - 播放声音以及数组中的随机值,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/52784387/
我正在尝试创建一个包含 int[][] 项的数组 即 int version0Indexes[][4] = { {1,2,3,4}, {5,6,7,8} }; int version1Indexes[
我有一个整数数组: private int array[]; 如果我还有一个名为 add 的方法,那么以下有什么区别: public void add(int value) { array[va
当您尝试在 JavaScript 中将一个数组添加到另一个数组时,它会将其转换为一个字符串。通常,当以另一种语言执行此操作时,列表会合并。 JavaScript [1, 2] + [3, 4] = "
根据我正在阅读的教程,如果您想创建一个包含 5 列和 3 行的表格来表示这样的数据... 45 4 34 99 56 3 23 99 43 2 1 1 0 43 67 ...它说你可以使用下
我通常使用 python 编写脚本/程序,但最近开始使用 JavaScript 进行编程,并且在使用数组时遇到了一些问题。 在 python 中,当我创建一个数组并使用 for x in y 时,我得
我有一个这样的数组: temp = [ 'data1', ['data1_a','data1_b'], ['data2_a','data2_b','data2_c'] ]; // 我想使用 toStr
rent_property (table name) id fullName propertyName 1 A House Name1 2 B
这个问题在这里已经有了答案: 关闭13年前。 Possible Duplicate: In C arrays why is this true? a[5] == 5[a] array[index] 和
使用 Excel 2013。经过多年的寻找和适应,我的第一篇文章。 我正在尝试将当前 App 用户(即“John Smith”)与他的电子邮件地址“jsmith@work.com”进行匹配。 使用两个
当仅在一个边距上操作时,apply 似乎不会重新组装 3D 数组。考虑: arr 1),但对我来说仍然很奇怪,如果一个函数返回一个具有尺寸的对象,那么它们基本上会被忽略。 最佳答案 这是一个不太理
我有一个包含 GPS 坐标的 MySQL 数据库。这是我检索坐标的部分 PHP 代码; $sql = "SELECT lat, lon FROM gps_data"; $stmt=$db->query
我需要找到一种方法来执行这个操作,我有一个形状数组 [批量大小, 150, 1] 代表 batch_size 整数序列,每个序列有 150 个元素长,但在每个序列中都有很多添加的零,以使所有序列具有相
我必须通过 url 中的 json 获取文本。 层次结构如下: 对象>数组>对象>数组>对象。 我想用这段代码获取文本。但是我收到错误 :org.json.JSONException: No valu
enter code here- (void)viewDidLoad { NSMutableArray *imageViewArray= [[NSMutableArray alloc] init];
知道如何对二维字符串数组执行修剪操作,例如使用 Java 流 API 进行 3x3 并将其收集回相同维度的 3x3 数组? 重点是避免使用显式的 for 循环。 当前的解决方案只是简单地执行一个 fo
已关闭。此问题需要 debugging details 。目前不接受答案。 编辑问题以包含 desired behavior, a specific problem or error, and the
我有来自 ASP.NET Web 服务的以下 XML 输出: 1710 1711 1712 1713
如果我有一个对象todo作为您状态的一部分,并且该对象包含数组列表,则列表内部有对象,在这些对象内部还有另一个数组listItems。如何更新数组 listItems 中 id 为“poi098”的对
我想将最大长度为 8 的 bool 数组打包成一个字节,通过网络发送它,然后将其解压回 bool 数组。已经在这里尝试了一些解决方案,但没有用。我正在使用单声道。 我制作了 BitArray,然后尝试
我们的数据库中有这个字段指示一周中的每一天的真/假标志,如下所示:'1111110' 我需要将此值转换为 boolean 数组。 为此,我编写了以下代码: char[] freqs = weekday
我是一名优秀的程序员,十分优秀!