console
document.getElementById('start').onclick = function () {
init();
}
function init() {
var num = 0;
var myJson = [
{ 'str': '夜间同方向近距离跟车行驶', 'now': '近光灯' },
{ 'str': '夜间在照明良好的道路行驶', 'now': '近光灯' },
{ 'str': '夜间通过路口', 'now': '近光灯' },
{ 'str': '夜间与机动车会车', 'now': '近光灯' },
{ 'str': '路边临时停车', 'now': '小灯报警灯' },
{ 'str': '夜间通过急弯、坡路', 'now': '双闪' },
{ 'str': '夜间超越前方车辆', 'now': '双闪' },
{ 'str': '夜间在没有路灯照明不良条件下行驶', 'now': '远光灯' }
];
document.getElementById('h3').style.display = 'none';
myJson = myJson.sort(function (a, b, c) {
return 0.5 - Math.random()
})
myJson.unshift({ 'str': '请开启前照灯', 'now': '近光灯' });
myJson.push({ 'str': '模拟灯光完成,请关闭所有灯光', 'now': '关闭灯光' });
for (var i = 0; i < myJson.length; i++) {
var str = myJson[i].str;
var now = myJson[i].now;
var person = prompt(str);
if (person != null && person != "") {
if (person === now) {
alert('正确')
num++;
} else {
alert('错误')
}
document.getElementById('h3').style.display = 'block';
document.getElementById('h3').innerHTML = '回答正确:' + num + ' 条。 错误:' + (10 - num) + ' 条。';
}
}
}
<div id="box">
<h1>下面将进行模拟灯光考试</h1>
<h2>请输入以下答案: <span>近光灯</span>、<span>远光灯</span>、<span>小灯报警灯</span>、<span>双闪</span>、<span>关闭灯光</span>,5个答案的其中1个进行答题。</h2>
<div class="btn_box">
<span id="start">开始答题</span>
</div>
<h3 id="h3"></h3>
</div>
#box {
max-width: 800px;
width: 90%;
margin: 50px auto;
background: #ccc;
border-radius: 10px;
padding: 10px 30px;
box-sizing: border-box;
}
h1 {
text-align: center;
}
h2 span {
color: #f00;
}
.btn_box {
text-align: center;
overflow: hidden;
padding: 20px;
}
.btn_box span {
display: inline-block;
padding: 10px;
border-radius: 5px;
margin: 0 20px;
cursor: pointer;
color: #fff;
}
#start {
background: #0793bd;
}
#reset {
background: #d0b34a;
}
#h3{
display: none;
}