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 Answer 1

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\$
2
  • \$\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, 2015 at 20:51
  • 1
    \$\begingroup\$ @Johnny updated my answer \$\endgroup\$
    – braunbaer
    Feb 12, 2015 at 10:32

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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