0
我目前正在進行測驗，但被卡住了。我想通過從頂部狀態對象（state.possibleAnswers）中的一個數組中添加它們來爲<li>添加其他可能的答案。我在第67行的代碼中添加了一個隨機數生成器，但是我猜想這行上肯定有錯誤，因爲答案沒有顯示在DOM上。任何人都可以看看我的代碼，看看是什麼原因導致錯誤？製作測驗：卡住添加附加答案
var state = {
\t questions: [
\t {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},
\t {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},
\t {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},
\t {number: 10, question:"What is the capital of Uruguay", answer: "Lima", display:false}
\t ],
\t correctAnswers: 0,
\t possibleAnswers: ['Lima', 'Montevideo', 'Buenos Aires', 'Brasilia', 'Bogota', 'Caracas', 'Quito', 'San José', 'Paramaribo', 'La paz']
};
var template = (
\t '<li class="js-quiz-card">' +
\t \t '<h6 class="js-question-number"></h6>' +
\t \t '<h6 class="js-questions-correct"></h6>' +
\t
\t \t '<div class="js-card-main-section">' +
\t \t \t '<h3 class="js-question"></h3>' +
\t \t \t '<ul class="js-possible-answers">' +
\t \t \t '<li class="js-answer-1"></li>' +
\t \t \t '<li class="js-answer-2"></li>' +
\t \t \t '<li class="js-answer-3"></li>' +
\t \t \t '<li class="js-answer-4"></li>' +
\t \t '</div>' +
\t \t '<button class="js-next-question-button"> Next question </button>' +
\t '</li>'
);
function generateRandomNumber(number) {
\t Math.floor(Math.random() * number);
}
// STATE MANAGEMENT
function updateScore (state, index) {
\t var selectedChoice = $('.selected').text();
\t if (selectedChoice === state.questions[index].answer) {
\t \t state.correctAnswers ++;
\t }
}
function changeDisplay (state, index) {
\t var currentIndexDisplay = state.questions[index].display;
\t state.questions[index].display = !currentIndex;
\t var newIndexDisplay = state.questions[index + 1 ].display;
\t state.questions[index + 1].display = !newIndex;
}
// DOM MANIPULATION
function renderCard (item, itemId, template, itemDataAttr) {
\t var element = $(template);
\t if (item.display === false) {
\t \t element.addClass("cards-display");
\t }
\t
\t element.find('.js-question-number').text("Question " + item.number + "of 10");
\t element.find('.js-questions-correct').text(state.correctAnswers + " questions correct");
\t element.find('.js-question').text(item.question);
\t var listItems = element.find('.js-possible-answers').children();
\t listItems.eq(Math.floor(Math.random() * 4)).text(item.answer);
\t for (var i = 0; i < 4; i++) {
\t \t if (listItems.eq(i).text() === "") {
\t \t \t listItems.eq(i).text(state.possibleAnswers[Math.floor(Math.random() * 10)]) ;
\t \t }
\t }
\t element.attr(itemDataAttr, itemId);
\t
\t return element;
}
function renderList(state, listElement, itemDataAttr) {
\t var htmlString = state.questions.map(
\t \t function(item, index){
\t \t \t return renderCard(item, index, template, itemDataAttr);
\t \t });
\t 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() {
\t $('.js-possible-answers').on('click', 'li', function(event){
\t \t event.currentTarget.addClass('selected');
\t });
}
function clickNextButton (listElement, itemDataAttr, state) {
$('.js-next-question-button').click(function(event){
\t var index = event.currentTarget.parent('.js-quiz-card').attr(itemDataAttr);
\t updateScore(state, index);
\t $('js-possible-answers').find('.selected').removeClass('selected');
\t changeDisplay(state, index);
\t renderList(state,listElement, itemDataAttr);
});
}
$(function() {
\t // html ul on which we will add all the different question cards
var listElement = $('.question-cards');
\t // we'll use this attribute to store the id of the list item
var itemDataAttr = 'data-list-item-id';
\t
startQuiz(state, listElement, itemDataAttr);
selectAnswer();
clickNextButton();
});.question-cards{
\t border: 2px solid black;
\t padding: 20px;
}
.question-card{
\t border: 2px solid grey;
\t padding: 10px; \t
}
.cards-display {
display: none;
}
.selected {
\t background-color: #27E7E1;
}<!DOCTYPE html>
<html>
<head>
\t <title>Quiz night tonight</title>
\t <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'>
\t
</ul>
<script src="https://code.jquery.com/jquery-3.1.0.min.js"></script>
<script type="text/javascript" src="app.js"></script>
</body>
</html>
'=== false'看起來很奇怪。您正在將字符串與布爾值進行比較，並且不允許使用變量類型轉換，這總會導致它爲假。編輯：就在這裏正確顯示代碼，在編輯器中按Ctrl + M以調出現場代碼編輯器。 – Taplar
好的，你有什麼我可以改變它的建議，以便可能的答案被添加？ 感謝您的帖子提示了。 –
我沒有任何上下文項的值實際上下文。記下關於Ctrl + M的註釋並更新您的問題以包含與您的問題相關的邏輯。 – Taplar