Take the 2-minute tour ×
Code Review Stack Exchange is a question and answer site for peer programmer code reviews. It's 100% free, no registration required.

In my JavaScript quiz, I have two functions below which are not DRY. What i want to do is to cut it, so everything below var = text would be used only once not twice.

My concept is to enclose these two functions in bigger function (e.g. guess()) and keep the trimmed correctGuess() and incorrectGuess() within it.

Now here's the question: how can I call such nested function as described above from outside scope. I was thinking about something like: guess().correctGuess() which is obviously wrong but I wanted to share a concept.

Additionally, when e.g. correctGuess() would be called, is rest of the commands within our main guess() function would be executed?

Fiddle with full code

function correctGuess(i) {

    totalScore++;
    questionNumber++;

    var text = "Correct!";

    var updatePage = ['<div id="answerDiv">' +
        '<h1>' + text + '<h1>' +
        '<h2>Total Score: ' + totalScore + '</h2></div>'
    ];

    mainContent[html](updatePage);

    $('#answerDiv')[fadeIn]("slow");
    $('#answerDiv').append('<button id="nextButton">Next Question</button>');

    $('#nextButton').on('click', function() {
        if (questionNumber == allQuestions.length && totalScore <= 4) {
            results()
        } else {
            question(questionNumber)
        }
    })
};

function incorrectGuess(i) {
    totalScore--;
    questionNumber++;

    var text = "Wrong!";

    var updatePage = ['<div id="answerDiv">' +
        '<h1>' + text + '<h1>' +
        '<h2>Total Score: ' + totalScore + '</h2></div>'
    ];

    mainContent[html](updatePage);

    $('#answerDiv')[fadeIn]("slow");
    $('#answerDiv').append('<button id="nextButton">Next Question</button>');

    $('#nextButton').on('click', function() {
        if (questionNumber == allQuestions.length && totalScore <= 4) {
            results();
        } else {
            question(questionNumber);
        }

    });

};
share|improve this question

1 Answer 1

i did not test or execute this code

just put it in an object?

var Guess = {

    score : 0,
    questions_count : 0,

    text : null,

    correct : function () {
        this.score+= 1;
        this.questions_count += 1;
        this.text = 'Correct!';
    },

    incorrect : function () {
        this.score-=1;
        this.questions_count += 1;
        this.text = 'Wrong!';
    },

    update : function () {
        var updatePage = ['<div id="answerDiv">' +
        '<h1>' + text + '<h1>' +
        '<h2>Total Score: ' + this.score + '</h2></div>'
        ];

        mainContent[html](updatePage);

        $('#answerDiv')[fadeIn]("slow");
        $('#answerDiv').append('<button id="nextButton">Next Question</button>');

        $('#nextButton').on('click', function() {
            if (this.questions_count == allQuestions.length && totalScore <= 4) {
                results();
            } else {
                question(this.questions_count);
            }

        });
    }
};

chaining

key to chaining calls is to return the right thing. Simple example:

function test() {
    var x = {
        correct : function () {
            console.log('correct');
        },
        incorrect : function() {
            console.log('incorrect');
        }
    };

return x;
}

test().correct();
share|improve this answer
    
Hey,that's basically 3 functions within Object Literal,I was thinking about doing the same. But do you know maybe a way to make a big function guess() and within it enclose correctGuess() and incorrectGuess() so we would avoid making 4 objects? –  Johnny Feb 11 at 20:51
1  
@Johnny updated my answer –  braunbaer 2 days ago

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.