<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Quiz</title>
<link rel="stylesheet" type="text/css" href="style.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
</head>
<body>
<header>QUICKY QUIZ!</header>
<section class="container-fluid d-flex justify-content-center align-content-center" id="index-btn-grid">
</section>
<div class="container"></div>
<footer>
</footer>
</body>
</html>
我知道这个问题被问过太多次了，但是作为一个学习JavaScript的新手，我想你可以说这有点不知所措。因此，当前我正在尝试创建一个测验应用程序，单击“下一步”后，问题和答案都将发生变化。听起来很愚蠢，我终于有了下一个按钮才能正常工作，而且我终于设法在框中弹出了下一个问题。
我打算运行for循环的每个值，并在显示“下一步”按钮时显示每个新值。像这样：
示例： 我的数组是[a，b，c，d]
当我从“ a”开始点击“ next”时，我打算在“ b”弹出，然后在再次单击“ next”之后弹出“ c”。
相反，当我在“ a”之后按“ next”时，弹出“ d”。
我已经尽力了，并且花了足够的时间来阅读其他线程并对其进行“搜索”，但是现在阅读与他人的代码完全相同的解决方案，并且格式不同，现在很难理解我是菜鸟。
因此，以下是我所拥有的，请让我知道我可以做些什么来实现自己的目标。我宁愿不要在这样的问题中再说一遍，但由于我现在陷入困境，我希望获得一些帮助。在找出问题后，我想用我学到的东西做按钮。我去过YouTube，MDN，w3，并且在此上看到过线程...。忽略我的群集，感谢您的宝贵时间。谢谢你们！
let questionEl = document.getElementById('question');
const questions = [
{
question: 'What color is the White House',
answers:[
{ text: 'White', correct: true},
{ text: 'Black', correct: false},
{ text: 'Grey', correct: false},
{ text: 'Blue', correct: false},
]
},
{
question: 'What color is Rainbow?',
answers:[
{ text: 'All of Them', correct: true},
{ text: 'Apple', correct: false},
{ text: 'Only Brown', correct: false},
{ text: 'Ford Mustang', correct: false},
]
},
{
question: '9 + 1 =?',
answers:[
{ text: '10', correct: true},
{ text: '9', correct: false},
{ text: '01', correct: false},
{ text: '91', correct: false},
]
},
];
function showQuestion(){
let questionEl = document.getElementById("question").innerHTML = questions[0].question;
var answerButtonsEl = document.getElementById("answer0").innerHTML = questions[0].answers[0].text;
var answerButtonsEl = document.getElementById("answer1").innerHTML = questions[0].answers[1].text;
var answerButtonsEl = document.getElementById("answer2").innerHTML = questions[0].answers[2].text;
var answerButtonsEl = document.getElementById("answer3").innerHTML = questions[0].answers[3].text;
};
function nextQuestionSet(){
for (let i = 0; i < 3; i++) {
document.getElementById("question").innerHTML = (questions[i].question); }
};
答案 0 :(得分：1)
在执行下一个操作时使用全局变量来计算当前问题
var count=0;
function nextQuestionSet(){
count++;
if(count<7) {
document.getElementById("question").innerHTML = (questions[count].question);
document.getElementById("answer0").innerHTML = questions[count].answers[0].text;
document.getElementById("answer1").innerHTML = questions[count].answers[1].text;
document.getElementById("answer2").innerHTML = questions[count].answers[2].text;
document.getElementById("answer3").innerHTML = questions[count].answers[3].text;
}
else{
// you are already on last question
}
};
答案 1 :(得分：0)
我想你正在寻找类似的东西吗？
const questions =
[ { question: 'What color is the White House'
, answers:
[ { text: 'White', correct: true }
, { text: 'Black', correct: false }
, { text: 'Grey', correct: false }
, { text: 'Blue', correct: false }
] }
, { question: 'What color is Rainbow?'
, answers:
[ { text: 'All of Them', correct: true }
, { text: 'Apple', correct: false }
, { text: 'Only Brown', correct: false }
, { text: 'Ford Mustang', correct: false }
] }
, { question: '9 + 1 =?'
, answers:
[ { text: '10', correct: true }
, { text: '9', correct: false }
, { text: '01', correct: false }
, { text: '91', correct: false }
] } ]
const hmi=
{ question : document.getElementById('question')
, Answer : document.querySelectorAll('#answer-buttons button')
, No_Question: -1
, nb_Question: questions.length
, responses : []
}
const timer=
{ chrono : document.getElementById('chrono')
, ref : null
, delay : '2m 25s'
, timeEnd: null
}
const one_Sec = 1000
, one_Min = one_Sec *60
, hmi_score = document.getElementById('score')
, hmi_Buttons = document.querySelector('#answer-buttons')
;
function SetQuestion()
{
let isQuestion = (hmi.No_Question < hmi.nb_Question)
hmi.question.textContent = isQuestion ? questions[ hmi.No_Question ].question : 'Quizz ending'
hmi.Answer.forEach((el,n)=>
{
el.value = n
el.textContent = isQuestion ? questions[ hmi.No_Question ].answers[n].text : '---'
})
}
hmi_Buttons.onclick=e=>
{
if (!e.target.matches('button')) return
if (hmi.No_Question<0)
{ startChrono() }
else
{ hmi.responses.push({ qNo: hmi.No_Question, resp: parseInt(e.target.value )}) }
hmi.No_Question++
SetQuestion()
if (hmi.No_Question === hmi.nb_Question)
{ Quizending() }
}
function startChrono()
{
timer.chrono.textContent = timer.delay
timer.timeEnd = new Date().getTime() + get_MS( timer.delay )
timer.ref = setInterval(_=>
{
let now = new Date().getTime()
, tim = timer.timeEnd - now
;
if ( tim<=0 )
{
tim=0
Quizending()
}
timer.chrono.textContent = ` ${Math.floor(tim/one_Min)}m ${Math.floor((tim % one_Min )/one_Sec)}s`
}
,one_Sec);
}
function Quizending()
{
clearInterval(timer.ref)
hmi.No_Question = hmi.nb_Question
SetQuestion()
// score...
let Points = hmi.responses.reduce((a,c)=>a+=questions[c.qNo].answers[c.resp].correct ? 1:0,0)
hmi_score.textContent = `Score = ${Points} / ${hmi.nb_Question}`
// console.log( JSON.stringify(hmi.responses,0,2) )
}
// converse delay string 'Xm Ys' to milliseconds
function get_MS (timer_val)
{
let vDelay = { m:0, s:0 }
, vNum = '0'
, ret = { add: 0, dis: ''}
for (const c of timer_val)
{
if (/[0-9]/.test(c) )
{ vNum += c }
if (/[ms]/.test(c) )
{
vDelay[c] = parseInt(vNum)
vNum = '0'
} }
return (vDelay.m*one_Min)+(vDelay.s*one_Sec)
}#answer-buttons button {
display: block;
float: left;
clear: both;
width: 20em;
margin: .4em;
}<h5 id="chrono">?</h5>
<h4 id="question">Quizz</h4>
<h5 id="score"></h5>
<div id="answer-buttons" class="btn-grid">
<button class="btn"> click any button to start ! </button>
<button class="btn"> click any button to start ! </button>
<button class="btn"> click any button to start ! </button>
<button class="btn"> click any button to start ! </button>
</div>
我喜欢chronos代码，（get_MS来自 Modify countdown script to allow for multiple countdowns per page ）