我正在进行一项测验,但我被困了。我想通过在我的状态对象中的数组(<li>
)中添加它们来为state.possibleAnswers
添加其他可能的答案。我在第67行的代码中添加了一个随机数生成器,但我想这行肯定有问题,因为答案没有在DOM上显示。任何人都可以查看我的代码并查看导致错误的原因吗?
var state = {
questions: [
{number: 1, question:"What is the capital of Perú?", answer: "Lima", display:true}, {number: 2, question:"What is the capital of Ecuador?", answer: "Quito", display:false}, {number: 3, question:"What is the capital of Colombia", answer: "Bogotá", display:false},
{number: 4, question:"What is the capital of Paraguay?", answer: "Ascuncion", display:false}, {number: 5, question:"What is the capital of Argentina?", answer: "Buenos Aires", display:false}, {number: 6, question:"What is the capital of Chile?", answer: "Santiago", display:false},
{number: 7, question:"What is the capital of Brazil?", answer: "Brasilia", display:false}, {number: 8, question:"What is the capital of Bolivia?", answer: "La paz", display:false}, {number: 9, question:"What is the capital of Venezuela?", answer: "Caracas", display:false},
{number: 10, question:"What is the capital of Uruguay", answer: "Lima", display:false}
],
correctAnswers: 0,
possibleAnswers: ['Lima', 'Montevideo', 'Buenos Aires', 'Brasilia', 'Bogota', 'Caracas', 'Quito', 'San José', 'Paramaribo', 'La paz']
};
var template = (
'<li class="js-quiz-card">' +
'<h6 class="js-question-number"></h6>' +
'<h6 class="js-questions-correct"></h6>' +
'<div class="js-card-main-section">' +
'<h3 class="js-question"></h3>' +
'<ul class="js-possible-answers">' +
'<li class="js-answer-1"></li>' +
'<li class="js-answer-2"></li>' +
'<li class="js-answer-3"></li>' +
'<li class="js-answer-4"></li>' +
'</div>' +
'<button class="js-next-question-button"> Next question </button>' +
'</li>'
);
function generateRandomNumber(number) {
Math.floor(Math.random() * number);
}
// STATE MANAGEMENT
function updateScore (state, index) {
var selectedChoice = $('.selected').text();
if (selectedChoice === state.questions[index].answer) {
state.correctAnswers ++;
}
}
function changeDisplay (state, index) {
var currentIndexDisplay = state.questions[index].display;
state.questions[index].display = !currentIndex;
var newIndexDisplay = state.questions[index + 1 ].display;
state.questions[index + 1].display = !newIndex;
}
// DOM MANIPULATION
function renderCard (item, itemId, template, itemDataAttr) {
var element = $(template);
if (item.display === false) {
element.addClass("cards-display");
}
element.find('.js-question-number').text("Question " + item.number + "of 10");
element.find('.js-questions-correct').text(state.correctAnswers + " questions correct");
element.find('.js-question').text(item.question);
var listItems = element.find('.js-possible-answers').children();
listItems.eq(Math.floor(Math.random() * 4)).text(item.answer);
for (var i = 0; i < 4; i++) {
if (listItems.eq(i).text() === "") {
listItems.eq(i).text(state.possibleAnswers[Math.floor(Math.random() * 10)]) ;
}
}
element.attr(itemDataAttr, itemId);
return element;
}
function renderList(state, listElement, itemDataAttr) {
var htmlString = state.questions.map(
function(item, index){
return renderCard(item, index, template, itemDataAttr);
});
listElement.html(htmlString);
}
// EVENT LISTENERS
// click the button and add all the li's to the DOM
function startQuiz(state, listElement, itemDataAttr) {
$('.start-quiz-button').click(function(event){
renderList(state, listElement, itemDataAttr);
});
}
function selectAnswer () {
$('.js-possible-answers').on('click', 'li', function(event){
event.currentTarget.addClass('selected');
});
}
function clickNextButton (listElement, itemDataAttr, state) {
$('.js-next-question-button').click(function(event){
var index = event.currentTarget.parent('.js-quiz-card').attr(itemDataAttr);
updateScore(state, index);
$('js-possible-answers').find('.selected').removeClass('selected');
changeDisplay(state, index);
renderList(state,listElement, itemDataAttr);
});
}
$(function() {
// html ul on which we will add all the different question cards
var listElement = $('.question-cards');
// we'll use this attribute to store the id of the list item
var itemDataAttr = 'data-list-item-id';
startQuiz(state, listElement, itemDataAttr);
selectAnswer();
clickNextButton();
});
.question-cards{
border: 2px solid black;
padding: 20px;
}
.question-card{
border: 2px solid grey;
padding: 10px;
}
.cards-display {
display: none;
}
.selected {
background-color: #27E7E1;
}
<!DOCTYPE html>
<html>
<head>
<title>Quiz night tonight</title>
<link rel="stylesheet" type="text/css" href="main.css">
</head>
<body>
<h1>Quiz night tonight</h1>
<h3>Try to answer 7 questions correctly</h3>
<button class="start-quiz-button">try me</button>
<ul class ='question-cards'>
</ul>
<script src="https://code.jquery.com/jquery-3.1.0.min.js"></script>
<script type="text/javascript" src="app.js"></script>
</body>
</html>
答案 0 :(得分:0)
您的按钮似乎没有点击事件处理程序。因此,当您单击它时,它什么都不做。在Chrome中,您可以通过检查按钮&amp;单击“事件侦听器”选项卡。它应该显示一个单击事件处理程序,但事实并非如此。在用户点击“试试我”按钮之前,您正在调用clickNextButton函数,该按钮会在HTML中创建下一个问题按钮,因此点击处理程序永远不会被添加。
看来你在第176行调用了clickNextButton而没有任何参数,但你在第150行写的函数需要3个参数。