3
\$\begingroup\$

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);
        }

    });

};
\$\endgroup\$
1
\$\begingroup\$

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();
\$\endgroup\$
  • \$\begingroup\$ 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? \$\endgroup\$ – Johnny Feb 11 '15 at 20:51
  • 1
    \$\begingroup\$ @Johnny updated my answer \$\endgroup\$ – braunbaer Feb 12 '15 at 10:32

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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