Jquery Question posted in
The official Jquery Api Documentation can be found here.

Jquery – JavaScript Riddle Game: Incorrect Input Validation Always Returns Correct, How to Fix?

This basic riddle game presents the player with a random riddle from an array of objects and prompts them to input their answer. but, there’s an issue with input validation causing incorrect answers to be accepted as correct.

I tried checking for syntax errors, if there’s any mistakes in my if statements and making sure if the input validation is correct but no luck. I’m new to javascript

$(document).ready(function() {
  let riddles = [{
      question: 'What word contains all of the twenty-six letters?',
      answer: 'alphabet'
    },
    {
      question: 'Which word in the dictionary is spelled incorrectly?',
      answer: 'incorrectly'
    },
    {
      question: 'What color can you eat?',
      answer: 'orange'
    },

    {
      question: 'What has a head, a tail, is brown, and has no legs?',
      answer: 'penny'
    },
    {
      question: 'I’m tall when I’m young, and I’m short when I’m old. What am I?',
      answer: 'candle'
    },
    {
      question: 'What can travel around the world while staying in a corner?',
      answer: 'stamp'
    },
    {
      question: 'What has keys but can’t open locks?',
      answer: 'piano'
    },
    {
      question: 'What has one eye but can’t see?',
      answer: 'needle'
    }

  ];

  $('.startBtn').on('click', function() {
    // Select and display a random riddle
    let selectedRiddle = riddles[Math.floor(Math.random() * riddles.length)];
    $('.theRiddle').text(selectedRiddle.question);
    $('.result').empty();
  });

  $('.submitBtn').on('click', function() {
    let playerGuess = $('.answer-section').val();

    if (playerGuess === '') {
      $('.result').text('Please guess or enter "quit" to exit.');
    } else {
      let selectedRiddle = $('.theRiddle').text();

      if (playerGuess.toLowerCase() === 'quit') {
        $('.result').text('Thanks for playing! Goodbye.');
        $('.theRiddle').empty();
      } else if (playerGuess.toLowerCase() !== selectedRiddle.answer) {
        $('.result').text('Incorrect answer. Try again.');
      } else(playerGuess.toLowerCase() === selectedRiddle.answer)
      $('.result').text('CORRECT! You win!nThe answer is: ' + playerGuess);
      $('.theRiddle').empty();
    }

  });
});
.riddleSection {
  height: 100%;
  margin-top: 150px;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

.answer-section {
  padding-left: 170px;
  padding-right: 170px;
  padding-top: 30px;
  padding-bottom: 30px;
  border-radius: 30px;
}

.answer-section input::placeholder {
  color: #999;
  font-style: italic;
  text-align: center;
}

.submitBtn,
.startBtn {
  width: 120px;
  height: 40px;
  border-radius: 10px;
  border: none;
  margin-top: 10px;
  background-color: lightblue;
}

.startBtn:hover,
.submitBtn:hover {
  background-color: dimgray;
}

.theRiddle {
  margin-top: 80px;
  text-align: center;
  letter-spacing: 5px;
  font-size: 30px;
}

.headingOne {
  margin: 0;
  text-align: center;
  letter-spacing: 9px;
  font-size: 80px;
}

.result {
  text-align: center;
  letter-spacing: 5px;
  font-size: 50px;
}
<!-- heading section -->
<h1 class="headingOne">Riddle Game</h1>


<!-- riddle appears here -->
<p class="theRiddle"></p>

<!-- answer section -->
<div class="riddleSection">
  <input class="answer-section" placeholder="Enter your answer">
  <button class="submitBtn">Submit</button>
  <button class="startBtn">Start Game</button>
</div>

<div class="result"></div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
Tags:

2

Answers


  1. 0

    You’re doing this for the win-check:

     else if (playerGuess.toLowerCase() !== selectedRiddle.answer) {

    But right above it you call

    let selectedRiddle = $('.theRiddle').text();

    So selectedRiddle just hold the question text, retreived from the .theRiddle element. So it does not contain the object as you’re expecting.

    1. You can use riddles.find() to find the answer you need from the original array:

      let selectedRiddle = riddles.find(r => r.question === $('.theRiddle').text());

    2. I’ve inverted the if/else logic

      • If it matches, the answer is correct
      • else it’s not correct no need for a !==

    Demo showing the above points applied, the ‘Incorrect answer’ message is at the bottom of the page, so don’t forget to scroll down after giving the wrong answer.

    let riddles = [{question: 'What word contains all of the twenty-six letters?', answer: 'alphabet' }, {question: 'Which word in the dictionary is spelled incorrectly?', answer: 'incorrectly' }, {question: 'What color can you eat?', answer: 'orange' }, {question: 'What has a head, a tail, is brown, and has no legs?', answer: 'penny' }, {question: 'I’m tall when I’m young, and I’m short when I’m old. What am I?', answer: 'candle' }, {question: 'What can travel around the world while staying in a corner?', answer: 'stamp' }, {question: 'What has keys but can’t open locks?', answer: 'piano' }, {question: 'What has one eye but can’t see?', answer: 'needle' } ];

$('.startBtn').on('click', function() {
    // Select and display a random riddle
    let selectedRiddle = riddles[Math.floor(Math.random() * riddles.length)];
    $('.theRiddle').text(selectedRiddle.question);
    $('.result').empty(); 
});

$('.submitBtn').on('click', function() {
    let playerGuess = $('.answer-section').val();
    
    if (playerGuess === '') {
      $('.result').text('Please guess or enter "quit" to exit.');
    } else {
      let selectedRiddle = riddles.find(r => r.question === $('.theRiddle').text());
      if (playerGuess.toLowerCase() === 'quit') {
        $('.result').text('Thanks for playing! Goodbye.');
        $('.theRiddle').empty();
      } else if (playerGuess.toLowerCase() === selectedRiddle.answer) {
        $('.result').text('CORRECT! You win!nThe answer is: ' + playerGuess);
        $('.theRiddle').empty();
      } else {
        $('.result').text('Incorrect answer. Try again.');
      }
    } 
});
    .riddleSection {
  height: 100%;
  margin-top: 150px;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}


.answer-section{
 
  padding-left: 170px;
  padding-right: 170px;
  padding-top: 30px;
  padding-bottom: 30px;
  border-radius: 30px;
}

.answer-section input::placeholder {
  color: #999; 
  font-style: italic;
  text-align: center;
}

.submitBtn, .startBtn{
  width: 120px;
  height: 40px;
  border-radius: 10px;
  border: none;
  margin-top: 10px;
  background-color: lightblue;
}

.startBtn:hover, .submitBtn:hover{
  background-color: dimgray;
}
.theRiddle{
  margin-top: 80px;

  text-align: center;
  letter-spacing: 5px;
  font-size: 30px;
}

.headingOne{
  margin: 0;
  text-align: center;
  letter-spacing: 9px;
  font-size: 80px;
}

.result{

  text-align: center;
  letter-spacing: 5px;
  font-size: 50px;

}
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Riddle Game</title>
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="riddleStyles.css">
  </head>
  <body>
    <!-- heading section -->
    <h1 class="headingOne">Riddle Game</h1>


    <!-- riddle appears here -->
    <p class="theRiddle"></p>

    <!-- answer section -->
    <div class="riddleSection">
      <input class="answer-section" placeholder="Enter your answer">
      <button class="submitBtn">Submit</button>
      <button class="startBtn">Start Game</button>
    </div>

    <div class="result"></div>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
    <script src="riddleScript.js" async defer></script>
  </body>
</html>
    Login or Signup to reply.
  2. 0

    As 0stone0 said, let selectedRiddle = $('.theRiddle').text(); is just getting the text of that element so selectedRiddle.answer will always be undefined. You need to store the answer as data.

    After this line:

    let selectedRiddle = riddles[Math.floor(Math.random() * riddles.length)];

    Add this:

    jQuery(".theRiddle").data("answer", selectedRiddle.answer);

    then you can access the answer like:
    jQuery(".theRiddle").data("answer");

    That way you won’t have to filter/find anything

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search