我在同一页面上显示两个不同的测验。我有一个JS函数重复第二个测验的所有内容，唯一不同的是第二个函数开头的5个变量。
这个问题是，如果我想修改核心测验代码中的某些内容，我将不得不两次（或者更多，如果以后我做更多的测验）。
我想不要一遍又一遍地重复核心测验代码，而是每次创建新测验时只提供新变量。我读过关于OOP的内容，但我仍然觉得自己已经超过了我的头脑。我想知道是否有人能提供我应该做的事情的例子。
在测验的真实版本中，我使用外部JSON文件来存储测验数据。为了简单起见，我将其存储在变量中。
以下是代码：http://codepen.io/Jake_Ratliff/pen/QjrqRv?editors=001
这里的代码相同：
HTML：
<body>
<div id='main'>
<div id="question1"></div>
</div>
<br>
<div id='buttons'>
<button id='prev' class='button'>Back</button>
<button id='next' class='button'>Next</button><br><br>
<button id='restart' class='button'>Start Over?</button>
<br><br>
</div>
<div id='main2'>
<div id="question2"></div>
</div>
<br>
<div id='buttons'>
<button id='prev2' class='button'>Back</button>
<button id='next2' class='button'>Next</button><br><br>
<button id='restart2' class='button'>Start Over?</button>
<br><br>
</div>
</body>
JS：
quiz1();
quiz2();
function quiz1(){
var allQuestions = [{
question: "How many presidents were members of the Whig party?",
choices: ["Four", "Three", "Two"],
correct: 0
}, {
question: "Who was the first president to be impeached?",
choices: ["Andrew Jackson", "Andrew Johnson", "Warren Harding"],
correct: 1
}, {
question: "How many presidents died during their presidency?",
choices: ["Four", "Six", "Eight"],
correct: 2
}];
var counter = 0;
var main = $("#main");
var question = $("#question1");
var userInputs = [];
var numCorrect = 0;
var fadeSpeed = 700;
var next = $("#next");
var prev = $("#prev");
var restart = $("#restart")
createQDiv();
if (counter == 0) {
prev.hide();
}
//click handler for Next Question button
next.click(function() {
var selection = $("input[name=answer]:checked").val();
if (selection != undefined) {
choose();
fadeQuestion();
setTimeout(function() {
clearLast();
counter++;
//moveProgress();
prev.show();
createQDiv();
}, fadeSpeed);
} else {
alert("You must select an answer to proceed.")
};
});
//creates question element
function createQDiv() {
//$("#prev").hide();
question.fadeIn(fadeSpeed);
main.append(question);
if (counter <
allQuestions.length
) {
displayNext();
} else {
displayScore();
}
};
//fade out question element
function fadeQuestion() {
question.fadeOut(fadeSpeed);
};
//clears question element
function clearLast() {
question.empty();
};
//adds question and answers to question element
function displayNext() {
restart.hide();
var qPara = $("<p>" + allQuestions[counter].question + "</p>")
question.append(qPara);
createRadios();
addPrevSelection();
};
//creates radio buttons for each choice
function createRadios() {
var choices = allQuestions[counter].choices;
//var formElement = $("<form></form>");
//$("#question").append(formElement);
for (i = 0; i < choices.length; i++) {
question.append($("<input type='radio' name='answer' value='" + i + "'>" + choices[i] + "<br>"));
};
};
//checks user's answer choice and stores in array
function choose() {
var input = $("input[name=answer]:checked").val();
userInputs[counter] = input;
};
//create function for checking user's answers vs number correct. output = number of correct answers
function correctAns() {
for (i = 0; i < allQuestions.length; i++) {
if (userInputs[i] == allQuestions[i].correct) {
numCorrect++;
};
};
};
//create 'last page' for displaying user's score
function displayScore() {
next.hide();
prev.hide();
correctAns();
var score = (numCorrect / allQuestions.length);
//var encouragement;
var scoreElement = $("<p>You got " + numCorrect + " out of " + allQuestions.length + " correct.</p>");
$("#question1").append(scoreElement);
restart.show();
};
prev.click(function() {
if (counter > 0) {
fadeQuestion();
setTimeout(function() {
clearLast();
counter--;
//moveProgress();
createQDiv();
addPrevSelection();
choose();
}, fadeSpeed);
//Cristina: what if user changes input and then hits back? It isn't kept, only logged on the next button.
} else {
prev.hide();
}
});
function addPrevSelection() {
var selection = userInputs[counter];
var radioSelected = $("input[value='" + selection + "']");
//alert(radioSelected);
radioSelected.prop("checked", true);
};
restart.click(function() {
counter = 0;
next.show();
userInputs = [];
numCorrect = 0;
clearLast();
//moveProgress();
createQDiv();
});
}
function quiz2(){
var allQuestions = [{
question: "Sample text for second quiz?",
choices: ["Four", "Three", "Two"],
correct: 0
}, {
question: "Sample text 2 for second quiz?",
choices: ["Andrew Jackson", "Andrew Johnson", "Warren Harding"],
correct: 1
}, {
question: "Sample text 3?",
choices: ["Four", "Six", "Eight"],
correct: 2
}];
var counter = 0;
var main = $("#main2");
var question = $("#question2");
var userInputs = [];
var numCorrect = 0;
var fadeSpeed = 700;
var next = $("#next2");
var prev = $("#prev2");
var restart = $("#restart2")
createQDiv();
if (counter == 0) {
prev.hide();
}
//click handler for Next Question button
next.click(function() {
var selection = $("input[name=answer]:checked").val();
if (selection != undefined) {
choose();
fadeQuestion();
setTimeout(function() {
clearLast();
counter++;
//moveProgress();
prev.show();
createQDiv();
}, fadeSpeed);
} else {
alert("You must select an answer to proceed.")
};
});
//creates question element
function createQDiv() {
//$("#prev").hide();
question.fadeIn(fadeSpeed);
main.append(question);
if (counter <
allQuestions.length
) {
displayNext();
} else {
displayScore();
}
};
//fade out question element
function fadeQuestion() {
question.fadeOut(fadeSpeed);
};
//clears question element
function clearLast() {
question.empty();
};
//adds question and answers to question element
function displayNext() {
restart.hide();
var qPara = $("<p>" + allQuestions[counter].question + "</p>")
question.append(qPara);
createRadios();
addPrevSelection();
};
//creates radio buttons for each choice
function createRadios() {
var choices = allQuestions[counter].choices;
//var formElement = $("<form></form>");
//$("#question").append(formElement);
for (i = 0; i < choices.length; i++) {
question.append($("<input type='radio' name='answer' value='" + i + "'>" + choices[i] + "<br>"));
};
};
//checks user's answer choice and stores in array
function choose() {
var input = $("input[name=answer]:checked").val();
userInputs[counter] = input;
};
//create function for checking user's answers vs number correct. output = number of correct answers
function correctAns() {
for (i = 0; i < allQuestions.length; i++) {
if (userInputs[i] == allQuestions[i].correct) {
numCorrect++;
};
};
};
//create 'last page' for displaying user's score
function displayScore() {
next.hide();
prev.hide();
correctAns();
var score = (numCorrect / allQuestions.length);
//var encouragement;
var scoreElement = $("<p>You got " + numCorrect + " out of " + allQuestions.length + " correct.</p>");
question.append(scoreElement);
restart.show();
};
prev.click(function() {
if (counter > 0) {
fadeQuestion();
setTimeout(function() {
clearLast();
counter--;
//moveProgress();
createQDiv();
addPrevSelection();
choose();
}, fadeSpeed);
//Cristina: what if user changes input and then hits back? It isn't kept, only logged on the next button.
} else {
prev.hide();
}
});
function addPrevSelection() {
var selection = userInputs[counter];
var radioSelected = $("input[value='" + selection + "']");
//alert(radioSelected);
radioSelected.prop("checked", true);
};
restart.click(function() {
counter = 0;
next.show();
userInputs = [];
numCorrect = 0;
clearLast();
//moveProgress();
createQDiv();
});
}
答案 0 :(得分：2)
只需将变量作为函数参数传递：
func quiz(allQuestions, num) { /* code here */ }
quiz([{
question: "How many presidents were members of the Whig party?",
choices: ["Four", "Three", "Two"],
correct: 0
}, {
question: "Who was the first president to be impeached?",
choices: ["Andrew Jackson", "Andrew Johnson", "Warren Harding"],
correct: 1
}, {
question: "How many presidents died during their presidency?",
choices: ["Four", "Six", "Eight"],
correct: 2
}], 1);
quiz([{
question: "Sample text for second quiz?",
choices: ["Four", "Three", "Two"],
correct: 0
}, {
question: "Sample text 2 for second quiz?",
choices: ["Andrew Jackson", "Andrew Johnson", "Warren Harding"],
correct: 1
}, {
question: "Sample text 3?",
choices: ["Four", "Six", "Eight"],
correct: 2
}], 2);