面向对象的Javascript测验,带有加权答案,将每个答案数组映射到选择数组

时间:2017-04-10 19:35:01

标签: javascript arrays function oop object

我有一个我正在处理的测验应用程序,如果有一个字符串格式的答案来匹配选择数组,它可以正常工作。但我希望它有加权答案,每个选项都有不同的值。我写了它,所以有一个数组问题包含多个Question对象,包含文本(问题),选择(数组)和答案(数组)。我可以遍历每个Question对象并访问answers数组,但我正在努力将每个答案附加到Object--第52-57行中的选项。在此之后,我需要更新第22-30行的分数,并将分数打印出正确的值(从所有答案数组中加起来)。有什么提示吗?

Repository

Live

function Quiz(questions) {
    this.score = 0;
    this.questions = questions;
    this.questionIndex = 0;
}


Quiz.prototype.getQuestionIndex = function() {
    return this.questions[this.questionIndex];
};

Quiz.prototype.isEnded = function() {
    return this.questions.length === this.questionIndex;
};

Quiz.prototype.guesses = function (answers) {

    if(this.getQuestionIndex().correctAnswer(answers)){            

        console.log(this.score + answers);

        }
    this.questionIndex++;
};


function Question(text, choices, answers){
    this.text = text;
    this.choices = choices;
    this.answers = answers;
}

Question.prototype.correctAnswer = function(choice) {
    for (i=0; i<Question.length; i++){
         console.log(this.choices[i] = this.answers[i]);

    }
};



function populate() {
    if(quiz.isEnded()){
        showScores();
    } else {
        var element = document.getElementById("question");
        element.innerHTML = quiz.getQuestionIndex().text;

        var choices = quiz.getQuestionIndex().choices;
        for(var i = 0; i < choices.length; i++ ){
            var choiceElement = document.getElementById("choice" + i);
            choiceElement.innerHTML = choices[i];
            guesses("btn" + i, choices[i]);
        }

        showProgress();

    }
}

function showScores() {
    var gameOverHtml = "<h1>Result</h1>";
    gameOverHtml += "<h2 id='score'> Your Score: " + quiz.score + "</h2>";
    var element = document.getElementById("quizContainer");
    element.innerHTML = gameOverHtml;
}

function guesses(id, guess){
    var button = document.getElementById(id);
    button.onclick = function() {

        quiz.guesses(guess);
        populate();
    };
}

function showProgress(){
    var currentQuestionNumber = quiz.questionIndex + 1;
    var element = document.getElementById("progress");
    element.innerHTML = "Question " + currentQuestionNumber + " of " + quiz.questions.length;
}


var questions = [
    new Question("Best Van Halen lead singer?", ["Diamond David Lee Roth","Sammy Hagar", "I don't know"], [0,10,0]),
    new Question("Are the bartenders wearing Aloha Shirts?", ["No", "Yes, but they are very touristy", "Yes, and they're pretty sweet"],[0,5,10]),
    new Question("Can you see any whole limes behind the bar?", ["Yes", "No", "Yes, but they're moldy"], [5,0,1]),
    new Question("Are there any tiki gods on the wall?",["No", "Yes, and they are hand carved", "Yes, generic store-bought"], [0,15,5]),
    new Question("How many drinks have you seen lit on fire go by?", ["0 safety hazard!", "0 but I've seen them on #Instagram","1 or more"], [0,5,15]),
    new Question("Is there a rum section on the menu?", ["No", "Yes, but nothing special", "Yes and they're divided by country"],[0,1,15]),
    new Question("Are any surfaces around you covered in Bamboo?", ["No", "A few", "All of them"],[0,1,15]),
    new Question("From where you sit, how many bottles of flavored rum can you count? ", ["0", "1-3", "NOT ENOUGH!!"],[10,1,0]),
    new Question("How many different types of Tiki Mugs are behind the bar?", ["1 Generic mug reserved for Tiki Tuesday", "1-3 One of those mugs costs $20+ to buy, but its cool ", "10+ but you cant drink out of them, they're the owner's personal collection"],[0,1,15]),
    new Question("Are you in the basement of a hotel or somehow attached to a hotel?", ["No", "How is this relevant?", "Yes"],[0,1,15]),
    new Question("Does the bar ever host guest DJ's?", ["No, cause I'm in a tiki bar!!", "Yes, for retro dance party on an off night", "Yes, for Friday night Dance Parties"],[15,1,0]),
    new Question("Does the bar have signature swizzle sticks? ", ["No", "Yes", "I don't now"],[0,15,0]),
    new Question("Are any of the patrons wearing swim trunks or flip-flops?", ["No", "Yes, but I doubt they know how to swim", "Yes, they just got off the water"],[15,0,0]),
    new Question("Do they offer Scorpion Bowls / Communal Drinks?", ["No, they are time consuming", "Of course, B-52s met over a Scorpion Bowl", "The have pitches of daquiris"],[0,15,1]),
    new Question("Are there fresh flowers in any of the drinks?", ["Yes, and I love it!", "Yes, and I'm insecure about it.", "No. But that reminds me to call my mom for mothers day."],[10,5,0]),
    new Question("Can you see the words 'Cabo Wabo' from where you sit?", ["No, Im in a tiki bar. ", "Yes, that’s why I came to this bar.", "Its tattood on my neck, but I can't see it"],[15,0,0]),
    new Question("Can the Bartender talk to a patron for more than 3 minutes without saying 'Orgeat'", ["No", "Yes", "Is that a word?"],[5,0,0]),
    new Question("Yell 'Is it just me or is Jimmy Buffet a big ole Burger Breathed Bozo?'", ["Getting thrown out?", "Getting a free shot?", "Getting thrown out but its worth it!"],[0,5,10])
    ];

var quiz = new Quiz(questions);

populate();

1 个答案:

答案 0 :(得分:0)

更面向对象的方式是将choice及其各自的weight打包到他们自己的班级Choice中。因此,Question会有一组Choice个对象,每个对象都有textscore(或“权重”)。 然后在您的函数correctAnswer中,您可以遍历choices以确定最高weight并检查其是否与guess

匹配
Question.prototype.correctAnswer = function(guess) {
    var highestWeight = -1;
    for(var i = 0; i < this.choices.length; i++) {
        var choiceWeight = this.choices[i].weight;
        if (choiceWeight > highestWeight) {
            highestWeight = choiceWeight;
        }
    }
    return highestWeight === guess.weight;
}

或简而言之

Question.prototype.correctAnswer = function(guess) {
    return max(this.choices.map(c => c.weight) === guess.weight
}