Javascript 在进行测验时，如何显示用户正在回答的问题？

我目前正在开发一个测验应用程序，需要一些帮助

我希望用户能够看到他们目前正在回答的问题（例如10个问题中的7个），他们当前的分数（例如4个问题中的3个正确），并收到关于他们答案的反馈（例如，正确答案显示“正确”，错误答案显示正确答案）

我试着做了一些研究，但没有发现任何有用的东西。我是一个比较新的编码，所以任何建议都非常感谢。谢谢

let得分=0；
设currentQuestion=0；
让问题=[
{
标题：“哈利·波特什么时候收到霍格沃茨的信？”，
答案：['7'，'10'，'11'，'13']，
正确：1
},
{
标题：“哪个不是霍格沃茨的房子？”，
答案：[‘邓德·米夫林’、‘拉文克劳’、‘斯莱特林’、‘格兰芬多’]，
正确：0
},
{
标题：“谁在霍格沃茨教变形术？”，
答案：[《鲁伯·海格》，《阿不思·邓布利多》，《西弗勒斯·斯诺》，《密涅瓦·麦贡纳格尔》，]，
正确：3
},
{
标题：“霍格沃茨魔法学校在哪里？”，
答案：[‘法国’、‘美国’、‘英国’、‘新西兰’]，
正确：2
},
{
标题：“哈利·波特的守护神魅力是什么形式？”，
答案：[‘牡鹿’、‘鹰’、‘熊’、‘龙’]，
正确：0
},
{
标题：“哈里的宠物是什么动物？”，
答案：[‘狗’、‘猫头鹰’、‘猫’、‘蛇’]，
正确：1
},
{
标题：“谁不是凤凰社的成员？”，
答案：[‘雷姆斯·卢平’、‘赛瑞斯·布莱克’、‘卢修斯·马尔福’、‘西弗勒斯·斯内普’]，
正确：2
},
{
标题：“什么不是死亡圣器？”，
答案：[《长老魔杖》、《隐形斗篷》、《复活石》、《格兰芬多之剑》]，
正确：3
},
{
标题：“哈利到达霍格沃茨后被分到了哪间房子？”，
答案：[‘斯莱特林’、‘拉文克劳’、‘格兰芬多’、‘赫奇帕夫’]，
正确：2
},
{
标题：“是什么阻止了伏地魔在小时候杀死哈利·波特？”，
答案：[‘爱’、‘愤怒’、‘友谊’、‘快乐’]，
正确：0
},
];
$（文档）.ready（函数（）{
$（'.start a'）。单击（函数（e）{
e、 预防默认值（）；
$（'.start'）.hide（）；
$（'.quick'）.show（）；
showQuestion（）；
});
$（'quick ul'）。在（'click'，'li'，函数（）上{
$（'.selected'）.removeClass（'selected'）；
$（this.addClass（'selected'）；
});
$（'.a'）。单击（函数（e）{
e、 预防默认值（）；
如果（$（'li.selected'）。长度）{
让guess=parseInt（$（'li.selected'）.attr（'id'）；
核对答案（猜测）；
}否则{
警报（“请选择答案”）；
}
});
$（'.summary a'）。单击（函数（e）{
e、 预防默认值（）；
restartquick（）；
});
});
函数showQuestion（）{
让问题=问题[当前问题]；
$（'小测验h2'）。文本（问题.标题）；
$（'.ul'）.html（''）；
for（变量i=0；i=questions.length）{
showSummary（）；
}否则{
showQuestion（）；
}
}
函数showSummary（）{
$（'.quick'）.hide（）；
$（'.summary'）.show（）；
$（'.summary p'）.text（“感谢您参加测验！以下是您的分数。您回答了“+问题中的“+分数+”。长度+”正确！是否重试？”）
}
函数restartquick（）{
$（'.summary'）.hide（）；
$（'.quick'）.show（）；
得分=0；
当前问题=0；
showQuestion（）；
}

.quick..summary{
显示：无；
}
.测验{
列表样式：无；
填充：0；
}
.李小奇{
光标：指针；
}
.选定{
背景色：红色；
}

JS-Bin
你对哈利波特了解多少？
做一个简短的测试来找出答案！
题目

选择
选择
选择
选择

结果
谢谢你参加这次测验！这是你得分的方式。你答对了y中的x！要不要再试一次

我会在代码中创建一个计数器，以配合您的测验

function checkAnswer(guess) {
let question = questions[currentQuestion];
<!-- Add Count Increase Here -->
if(question.correct === guess){
  score++;
}
//... Etc...

函数检查答案（猜测）{
让问题=问题[当前问题]；
如果（question.correct==猜测）{
分数++；
}
//……等等。。。

在这个区域中，我将递增count变量

在重置函数中，我会重置这个计数变量

总的来说，如何显示count变量取决于您自己

HTML元素

0

JS来填充该元素

document.querySelector（'.count'）.textContent=countVariableValue；

如果您需要帮助构建这些构件，请告诉我，我会更深入。希望这有帮助！

let得分=0；
设currentQuestion=0；
让问题=[{
标题：“哈利·波特什么时候收到霍格沃茨的信？”，
答案：['7'，'10'，'11'，'13']，
正确：1
},
{
标题：“哪个不是霍格沃茨的房子？”，
答案：['Dunder Mifflin'，'Ravenclaw'，'Slytherin'，'Gryffindor']，
正确：0
},
{
标题：“谁在霍格沃茨教变形术？”，
答案：[‘鲁比斯·海格’、‘阿不思·邓布利多’、‘西弗勒斯·斯诺’、‘密涅瓦·麦贡纳格尔’]，
正确：3
},
{
标题：“霍格沃茨魔法学校在哪里？”，
答案：[‘法国’、‘美国’、‘英国’、‘新西兰’]，
正确：2
},
{
标题：“哈利·波特的守护神魅力是什么形式？”，
答案：[‘雄鹿’、‘鹰’、‘熊’、‘龙’]，
正确：0
},
{
标题：“哈里的宠物是什么动物？”，
答案：[“狗”、“猫头鹰”、“猫”、“蛇”]，
正确：1
},
{
标题：“谁不是凤凰社的成员？”，
答案：[‘雷姆斯·卢平’、‘赛瑞斯·布莱克’、‘卢修斯·马尔福’、‘西弗勒斯·斯内普’]，
正确：2
},
{
标题：“什么不是死亡圣器？”，
答案：[‘长老魔杖’，‘隐形斗篷’
  <div class="quiz">
    <h2>Question Title</h2>
      <ul>
        <li>Choice</li>
        <li>Choice</li>
        <li>Choice</li>
        <li>Choice</li>
      </ul>
      <a href="#">Submit Answer</a>
      <div id="currentQuestion"></div> // these two divs are added
      <div id="isCorrect"></div> 
  </div>

function showQuestion(){
let question = questions[currentQuestion];
    $('.quiz h2').text(question.title);
    $('.quiz ul').html('');
    for(var i=0; i<question.answers.length; i++){
        $('.quiz ul').append(`<li id="${i}">${question.answers[i]}</li>`);
    }
    showProgress(); // everytime you show questions to also show progress
}

function checkAnswer(guess) {
    let question = questions[currentQuestion];
    if(question.correct === guess){ // when you check the answer you also show if it is correct also
        score++;
        showIsCorrect(true);
    }else{
        showIsCorrect(false);
    }

    currentQuestion++;
    if(currentQuestion >= questions.length){
        showSummary();
    } else {
        showQuestion();
    }
}

function showProgress(){ // this function shows the progress
    $('#currentQuestion').html(currentQuestion + " out of " + questions.length);
}

function showIsCorrect(isCorrect){ // this function shows if it is correct
    var result = "Wrong";
    if(isCorrect){
        result = "Correct";
    }
    $('#isCorrect').html(result);
}