面向对象编程

function Question(text,choices,answer){//question.js
this.text=text;
this.choices=choices;
this.answer=answer;
}

Question.prototype.isCorrectAnswer=function(choice){
return this.answer===choice;
}

function Quiz(questions){//quiz.js
this.score=0;
this.questions=questions;
this.currentQuestionIndex=0;
}

Quiz.prototype.guess=function(answer){
if(this.getCurrentQuestion().isCorrectAnswer(answer)){
this.score++;
}
this.currentQuestionIndex++;
}

Quiz.prototype.getCurrentQuestion=function(){
return this.questions[this.currentQuestionIndex];
}

Quiz.prototype.hasEnded=function(){
return this.currentQuestionIndex>=this.questions.length;
}

var QuizUI={//quiz_ui.js
displayNext:function(){
if(quiz.hasEnded()){
this.displayScore();
}else{
this.displayQuestion();
this.displayChoices();
this.displayProgress();
}
},
displayQuestion:function(){
this.populateIdWithHTML("question",quiz.getCurrentQuestion().text);
},
displayChoices:function(){
var choices=quiz.getCurrentQuestion().choices;
for(var i=0;i<choices.length;i++){
this.populateIdWithHTML("choice"+i,choices[i]);
this.guessHandler("guess"+i,choices[i]);
}
},
displayScore:function(){
var gameOverHTML="<h1>Game Over</h1>";
gameOverHTML+="<h2>Your score is: "+quiz.score+"</h2>";
this.populateIdWithHTML("quiz",gameOverHTML);
},
populateIdWithHTML:function(id,text){
var element=document.getElementById(id);
element.innerHTML=text;
},
guessHandler:function(id,guess){
var button=document.getElementById(id);
button.onclick=function(){
quiz.guess(guess);
QuizUI.displayNext();
}
},
displayProgress:function(){
var currentQuestionNumber=quiz.currentQuestionIndex+1;
this.populateIdWithHTML("progress","Question "+currentQuestionNumber+" of "+quiz.questions.length);
}
}

var questions=[//app.js
new Question("who was the ?",["G W","T J"],"G W"),
new Question("what is the ?",["ps","42"],"42")
];

var quiz=new Quiz(questions);

QuizUI.displayNext();