2
\$\begingroup\$

I wanted to know whether this approach is correct or not for a basic quiz game. I have not used object oriented programming style, Defining the quiz questions as array elements and looping through the array with a variable.

let q = ["1.  What is the capital of Israel ?", 
"2. Who is the Prime Minister of India?", 
"3. What is the capital of Japan?", 
"4. Who is the president of the USA ?",
"5. When is International Mother Language Day celebrated?",
"6. What is the answer of this equation: 6 + 2 x 7 ?",
"7. Which one is the smallest ocean in the world ?",
"8. In which ocean 'Bermuda Triangle' region is located ?",
"9. Which country is also known as the 'Land of the rising sun' ?",
"10. Which continent has the highest number of countries ?"];

let score = 0;
let k = 0;
let len = q.length;

function quiz() {
    let var1 = document.getElementById("questions");
    var1.innerHTML = q[0];
    document.getElementById("ans").style.display = "block";
    document.getElementById("input").style.display = "block";
    document.getElementById("btn2").style.display = "block";
    document.getElementById("score").style.display = "block";

    //Making the button disappear//
    document.getElementById("btn").style.display = "none";
}

function evaluation() {
    let var2 = document.getElementById("questions");
    let var3 = document.getElementById("input");

    

    if (var2.innerHTML === "1.  What is the capital of Israel ?" && var3.value ==="Tel Aviv" || var3.value === "tel aviv")
    {
        alert("Correct Answer.");
        k++;
        var2.innerHTML = q[k];
        var3.value = null;
        score++;
        document.getElementById("score").innerHTML = "Score: " + score;
    } 

    else if (var2.innerHTML === "2. Who is the Prime Minister of India?" && var3.value ==="Narendra Modi" || var3.value ==="narendra modi" || var3.value ==="modi")
    {
        alert("Correct Answer.");
        k++;
        var2.innerHTML = q[k];
        var3.value = null;
        score++;
        document.getElementById("score").innerHTML = "Score: " + score;
    }

    else if (var2.innerHTML === "3. What is the capital of Japan?" && var3.value ==="Tokyo" || var3.value ==="tokyo")
    {
        alert("Correct Answer.");
        k++;
        var2.innerHTML = q[k];
        var3.value = null;
        score++;
        document.getElementById("score").innerHTML = "Score: " + score;
    }

    else if (var2.innerHTML === "4. Who is the president of the USA ?" && var3.value ==="Joe Biden" || var3.value ==="joe biden" || var3.value ==="Joseph Biden" || var3.value ==="joseph biden" || var3.value ==="biden")
    {
        alert("Correct Answer.");
        k++;
        var2.innerHTML = q[k];
        var3.value = null;
        score++;
        document.getElementById("score").innerHTML = "Score: " + score;
        
    }

    else if (var2.innerHTML === "5. When is International Mother Language Day celebrated?" && var3.value ==="21 February" || var3.value ==="21 february" || var3.value ==="21 feb")
    {
        alert("Correct Answer.");
        k++;
        var2.innerHTML = q[k];
        var3.value = null;
        score++;
        document.getElementById("score").innerHTML = "Score: " + score;
    }

    else if (var2.innerHTML === "6. What is the answer of this equation: 6 + 2 x 7 ?" && var3.value ==="20")
    {
        alert("Correct Answer.");
        k++;
        var2.innerHTML = q[k];
        var3.value = null;
        score++;
        document.getElementById("score").innerHTML = "Score: " + score;
    }

    else if (var2.innerHTML === "7. Which one is the smallest ocean in the world ?" && var3.value ==="Arctic" || var3.value ==="arctic")
    {
        alert("Correct Answer.");
        k++;
        var2.innerHTML = q[k];
        var3.value = null;
        score++;
        document.getElementById("score").innerHTML = "Score: " + score;
    }

    else if (var2.innerHTML === "8. In which ocean 'Bermuda Triangle' region is located ?" && var3.value ==="Atlantic" || var3.value ==="atlantic")
    {
        alert("Correct Answer.");
        k++;
        var2.innerHTML = q[k];
        var3.value = null;
        score++;
        document.getElementById("score").innerHTML = "Score: " + score;
    }

    else if (var2.innerHTML === "9. Which country is also known as the 'Land of the rising sun' ?" && var3.value ==="Japan" || var3.value ==="japan")
    {
        alert("Correct Answer.");
        k++;
        var2.innerHTML = q[k];
        var3.value = null;
        score++;
        document.getElementById("score").innerHTML = "Score: " + score;
    }

    else if (var2.innerHTML === "10. Which continent has the highest number of countries ?" && var3.value ==="Africa" || var3.value ==="africa")
    {
        alert("Correct Answer.");
        document.getElementById("ans").style.display = "none";
        document.getElementById("input").style.display = "none";
        document.getElementById("btn2").style.display = "none";
        var2.innerHTML = "Finished."
        var3.value = null;
        score++;
        document.getElementById("score").innerHTML = "Your Final Score is: " + score + " " + "Out of" + " " + len;
    }

    else {
        alert("Wrong Answer !!")
        document.getElementById("score").innerHTML = "Score: " + score;
        var3.value = null;
        if(k < len-1){
            k++;
            var2.innerHTML = q[k];
        }else {
            var2.innerHTML = "Finished."
            document.getElementById("ans").style.display = "none";
            document.getElementById("input").style.display = "none";
            document.getElementById("btn2").style.display = "none";
            document.getElementById("score").innerHTML = "Your Final Score is: " + score + " " + "Out of" + " " + len;
        }
      
        
    }
}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="script.js"></script>
    <link rel="stylesheet" href="style.css">
    <title>Document</title>
</head>
<body>
    <button id="btn" type="submit" onclick="quiz()">Start Quiz Game.</button>
    <h1 id="questions"></h1>
    <h3 id="ans" style="display: none;">Ans:</h3>
    <input type="text" id="input" style="display: none;" placeholder="Write your answer..">
    <br>
    <button id="btn2" type="submit" style="display: none;" onclick="evaluation()">Submit</button>
    <h3 id="score" style="display: none;">Score: </h3>

</body>
</html>

\$\endgroup\$
2
  • 1
    \$\begingroup\$ I have not used object oriented programming => you just answered your own question. In other words the code is fine if the quiz never changes in any way. \$\endgroup\$
    – radarbob
    Sep 18, 2022 at 2:37
  • \$\begingroup\$ Thanks, appreciate that. \$\endgroup\$
    – A K
    Sep 18, 2022 at 21:10

1 Answer 1

1
\$\begingroup\$

[is] this approach is correct ... for a basic quiz game.

No. A quiz game's nature is that it will change. This is hard coded through and through such that each fresh quiz will effectively be its own development project.

I have not used object oriented programming ...

Data structure and functional modularity is the foundation of excellent code. This is true whether we are "doing OO" or not.

FIRST think about problem domain parts and what they do, what information they provide. LATER worry about how to wire it up with a user interface. The present code literally does the opposite.


Data Structure Allows Simple Code

Simple now and therefore simple later.

A question and its answer obviously belong together

let q = [["What is the capital of Israel ?", "Tel Aviv"],
         ["Who is the Prime Minister of India?", "Narendra Modi"],
         ["What is the capital of Japan?", "Tokyo"],
        ]

Let's make objects for future functional togetherness:

 function Question (theQuestion, theAnswer) {
   this.question = theQuestion
   this.answer =  theAnswer
} 

let quiz = []
q.forEach( (query) => quiz.push(new Question(...query)) )

Functional modularity Allows Simple Code

Simple now and simple later.

Someone guesses and obviously we want to know if it's right. Obviously strongly associated with the question object.

.

 function Question (theQuestion, theAnswer) {
   this.question = theQuestion
   this.answer =  theAnswer
   this.guess = ''
} 

Question.prototype.response = function (myGuess) { if(myGuess) this.guess = myGuess }

Question.prototype.isCorrect = function () {
      return this.answer.toLowerCase() === this.guess.toLowerCase()
   }    

Data + Functionality, Everywhere

A quiz is a collection of questions. Off hand, we need to add to it and know the total score.

function Quiz() {
   this.quiz = []

} // Quiz

Quiz.prototype.add = function ( aQuestion ) { if( aQuestion ) this.quiz.push( aQuestion ) }
  
Quiz.prototype.score = function () {
     let correct = 0, inCorrect = 0

     this.quiz.forEach( (query) =>  { query.isCorrect() ? ++correct : ++inCorrect } )
            
     return { right: correct, wrong: inCorrect };
   } // score

let jeopardy = new Quiz();
q.forEach( (query) => jeopardy.add(new Question(...query)) )

What Hath Objects Wrought?

  • Easily create variable length quizzes
  • Testable without needing a web page
  • Later coding for UI interaction is greatly simplified
    • I see 80 lines of if else if going away
    • building new code with tested, working code
  • Decoupled business model and UI. A feature of excellent code
  • Simplified and flexible UI construction
    • Iterate the Quiz creating simple, common, HTML for each question
    • Object's provide the information needed by event handlers, for example Quiz.score() and Question.isCorrect()
\$\endgroup\$
1
  • \$\begingroup\$ Thanks a lot for your input. I have a more clearer picture in my mind now. Appreciate that. \$\endgroup\$
    – A K
    Sep 21, 2022 at 22:03

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.