【发布时间】：2021-09-19 09:33:51
【问题描述】：
因此，对于一个更大的项目，我决定学习一门进行测验的课程，因此它非常适合我的更大项目。但由于某种原因，问题和答案没有显示，我所有的 jquery 和 js 似乎都不起作用。我尝试将函数放在代码上方和下方，但仍然无法正常工作。我尝试重命名类名，但仍然没有响应。请帮助，谢谢 这是html代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Baby animal names</title>
<link rel="stylesheet" type="text/css" href="style.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
</head>
<body>
<div class="quizContainer">
<h1>Chooze the correct animal baby names!</h1>
<div class="question"></div>
<ul class="choiceList"></ul>
<div class="quizMessage"></div>
<div class="result"></div>
<div class="nextButton">Next Question</div><br/>
</div>
<script type="text/javascript" src="script.js"></script>
</body>
</html>
CSS：
@import url(https://fonts.googleapis.com/css2?family=Caveat);
h1{
font-family: 'Caveat', serif;
text-align: center;
color: #000;
font-size: 35px;
font-weight: lighter;
}
ul{
list-style: none;
}
li{
font-family: 'Pacifico', serif;
font-size: 2em;
color: #feb135;
}
input[type=radio]{
border: 0px;
width: 20px;
height: 2em;
}
p{
font-family: 'Caveat';
}
.quizContainer{
background-color: #000398;
border-radius: 8px;
width: 75%;
margin: auto;
margin-top: 190px;
padding-top: 5px;
position: relative;
}
.nextButton{
border-radius: 6px;
width: 150px;
height: 40px;
text-align: center;
background-color: #cc0000;
color: #fff;
font-family: 'Caveat', serif;
font-weight: bold;
position: relative;
margin: auto;
padding-top: 20px;
}
.question{
font-family: 'Caveat';
font-size: 2em;
width: 90%;
height: auto;
margin: auto;
border-radius: 6px;
background-color: #f2f205;
text-align: center;
color: #27a63;
}
.quizMessage{
background-color: peachpuff;
border-radius: 6px;
width: 30%;
margin: auto;
text-align: center;
padding: 2px;
font-family: "Caveat";
color: red;
}
.choiceList{
font-family: 'Caveat';
color: blueviolet;
}
.result{
width: 30%;
height:auto;
border-radius: 6px;
background-color: linen;
margin: auto;
margin-bottom: 35px;
text-align: center;
font-family: 'Caveat';
}
还有js：
var questions = [{
question: "What is the baby of a Moth",
choices:["baby", "infant", "kitt", "larva"],
correctAns:4
},{
question: "What is the baby of a Moth",
choices:["baby", "infant", "kitt", "larva"],
correctAns:4
},{
question: "What is the baby of a Moth",
choices:["baby", "infant", "kitt", "larva"],
correctAns:4
},{
question: "What is the baby of a Moth",
choices:["baby", "infant", "kitt", "larva"],
correctAns:4
},{
question: "What is the baby of a Moth",
choices:["baby", "infant", "kitt", "larva"],
correctAns:4
},{
question: "What is the baby of a Moth",
choices:["baby", "infant", "kitt", "larva"],
correctAns:4
},{
question: "What is the baby of a Moth",
choices:["baby", "infant", "kitt", "larva"],
correctAns:4
},{
question: "What is the baby of a Moth",
choices:["baby", "infant", "kitt", "larva"],
correctAns:4
},{
question: "What is the baby of a Moth",
choices:["baby", "infant", "kitt", "larva"],
correctAns:4
},{
question: "What is the baby of a Moth",
choices:["baby", "infant", "kitt", "larva"],
correctAns:4
},{
question: "What is the baby of a Moth",
choices:["baby", "infant", "kitt", "larva"],
correctAns:4
},{
question: "What is the baby of a Moth",
choices:["baby", "infant", "kitt", "larva"],
correctAns:4
},{
question: "What is the baby of a Moth",
choices:["baby", "infant", "kitt", "larva"],
correctAns:4
},{
question: "What is the baby of a Moth",
choices:["baby", "infant", "kitt", "larva"],
correctAns:4
}];
var curruntQ = 0;
var correctA = 0;
var quizO = false;
$(document).ready(function() {
displayCurrentQuestion();
$(this).find('.quizMessage').hide();
$(this).find('.nextButton').on("click", function(){
if(!quizO){
value = $("input[type='radio']:checked").val();
if(value == undefined){
$(document).find(".quizMessage").text("Please select an answer");
$(document).find(".quizMessage").show();
}else {
$(document).find(".quizMessage").hide();
if (value == question[curruntQ].correctA){
correctA++;
}
curruntQ++;
if(curruntQ<question.length){
displayCurrentQuestion();
}else {
displatScore();
$(document).find(".nextButton").text("Take again!");
quizO = true;
}
}
}else {
quizO = false;
$(document).find(".nextButton").text("Next question");
resetQuiz();
displayCurrentQuestion();
hideScore();
}
});
});
function displayCurrentQuestion() {
console.log("On display current question")
var question = questions[curruntQ].question;
var questionClass = $(document).find(".quizContainer > .question");
var choicesList = $(document).find(".quizContainer > .choicesList");
var numChoices = questions[curruntQ].choices.length;
$(questionClass).text(question);
$(choicesList).find("li").remove();
var choice;
if (i = 0; i < choicesList; i++){
choice = questions[curruntQ].choices[i];
$('<li><input type="radio" value=' + i + ' name="dynradio"/>' + choice + '<li>').appendTo(choicesList);
}
}function resetQuiz() {
currentQ = 0;
correctA = 0;
hideScore();
}
function displatScore() {
$(document).find(".quizContainer > .result").text("You scored" + correctA + " out of: "+ questions.length);
$(document).find(".quizContainer > .result").show();
}
function hideScore() {
$(document).find(".result").hide();
}
【问题讨论】：
标签： javascript html jquery css fonts