correctGuess() and incorrectGuess() functions for a quiz

Question

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

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

• Johnny: 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?
• braunbaer: @Johnny updated my answer