CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Maya Renee
Maya Renee

Reputation: 13

Issues with quiz logging correct answer and issues with answer highlighting green

I am new to coding and I am having a few issues with my quiz app. For one, after altering my code with adding radio buttons, my quiz for some reason no longer logs the correct answer and the score remains 0. Also, I would like to keep it in the same for

const myQuestions = [{
    'question': 'WHAT IS THE OFFICE AWARDS NIGHT CALLED?',
    'answers': ["DORKIES", "DUNDIES", "DWEEBIES", "DINGLES"],
    'correct': 1
  },
  {
    'question': 'WHAT IS THE GIANT POT THAT KEVIN DROPS ALL OVER THE OFFICE FLOOR?',
    'answers': ["GRAVY", "SOUP", "MAC & CHEESE", "CHILI"],
    'correct': 3
  },
  {
    'question': "HOW LONG HAD JIM AND PAM BEEN DATING BEFORE HE BOUGHT HER ENGAGEMENT RING",
    'answers': ["ONE WEEK", "ONE MONTH", "ONE YEAR", "TWO YEARS"],
    'correct': 0
  },
  {
    'question': "WHAT DOES MICHAEL CHOOSE AS HIS USERNAME WHEN HE SIGNS UP FOR AN ONLINE DATING SITE?",
    'answers': ["LITTLEKIDLOVER", "IAMTHEBOSS", "DUNDERMIFF", "READYFORMARRIAGE"],
    'correct': 0
  },
  {
    'question': "WHAT IS ERIN'S REAL FIRST NAME?",
    'answers': ["BRITTANY", "CHRISTINE", "BECCA", "KELLY"],
    'correct': 3
  },
  {
    'question': "WHICH COUNTRY DOES TOBY MOVE TO WHEN HE LEAVES HIS JOB AT DUNDER MIFLIN ONLY TO RETURN LATER?",
    'answers': ["JAMAICA", "COSTA RICA", "ITALY", "CUBA"],
    'correct': 1
  },
  {
    'question': "DWIGHT AND ANDY HAVE A DUEL OVER WHICH WOMAN IN THE OFFICE?",
    'answers': ["ANGELA", "ERIN", "KELLY", "MEREDITH"],
    'correct': 0
  },
  {
    'question': "WHAT IS THE NAME OF THE CAT THAT ANGELA THROWS AT OSCAR DURING THE FIRE DRILL?",
    'answers': ["SPRINKLES", "CUPCAKE", "BANDIT", "TINKERBELL"],
    'correct': 2
  },
  {
    'question': "WHAT DOES JAN NAME THE BABY SHE HAS VIA SPERM DONOR?",
    'answers': ["AXON", "ALLY", "APPLE", "ASTRID"],
    'correct': 3
  },
  {
    'question': "HOW MANY KIDS DO PAM AND JIM HAVE?",
    'answers': ["3", "2", "1", "0"],
    'correct': 1
  }];

let score = 0;
let current = 0;
$(document).ready(function() {
  // start button event listener
  $(".start-button").click(function() {
    $('.start-page').hide();
    $('.next').hide();
    $('.questions').show();
    displayQuestion();
    $('.score').text('Current Score: ' + score);
    console.log("Start Quiz button clicked");
  });
  // next button event listener
  $(".next-button").click(function(event) {
    console.log("Next button clicked");
    displayQuestion();
    $('.next').hide();
    $('.submit').show();
  });
  $(".submit-button").click(function(event) {
    event.preventDefault();
    var selected = $('input.selected');
    console.log(event);
    if (selected.length) {
      let answer = $('input.selected').attr('id');
      console.log(answer);
      checkAnswer(answer);
      console.log("hey world");
      $('.next').show();
      $('.submit').hide();
    } else {
      alert('Please select an answer');
    }
  });
  // retry button click listener
  $(".retry-button").click(function() {
    location.reload();
    console.log("Retake button clicked");
  });
  //click listener to make questions change color on hover
  $('div.questions-selector').on('click', 'input', function(event) {
    $('.selected').removeClass();
    $(this).addClass('selected');
  });
});

//FUNCTIONS
function displayQuestion() {
  $('.question-number').text('Question Number: ' + (current + 1) + "/10");

  if (current < myQuestions.length) {
    let listQuestion = myQuestions[current];
    $('h2').text(listQuestion.question);
    $('div.questions-selector').html('');
    for (let i = 0; i < listQuestion.answers.length; i++) {
      $('div.questions-selector').append(`<div><label 
       for"input${i}">${listQuestion.answers[i]}</label>
        <input type="radio" name="choice" value="0" id = "input${i}"></input></div>`)
    }
  } else {
    // show summary that says how many you got correct
    displayScore();
  }
}

// function stub to check answer
function checkAnswer(answer) {
  let listQuestion = myQuestions[current];
  if (listQuestion.correct == answer) {
    score++;
    $('label.selected').addClass('correct');
  } else {
    $('label.selected').addClass('incorrect');
  }
  $('.score').text('Current Score: ' + score);
  current++;
}

//function to display score
function displayScore() {
  $('.questions').hide();
  $('.end-quiz').show();
  $('.end-score').text("Your score: " + score + '/10');
  if (score >= 7) {
    $('.comment').text('Nice job, Superfan!');
  } else {
    $('.comment').text('Get to binge watching and try again!')
  }
};
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  background: #586060;
  background-repeat: no-repeat;
  background-size: cover;
  font-family: 'Mina', sans-serif;
  color: white;
  font-size: 20px;
  margin: 10px;
}

.topbar {
  max-width: 800px;
  margin-top: 20px;
  font-size: 12px;
  padding-bottom: 30px;
  font-weight: bold;
  color: white;
}

h1,
h2 {
  text-align: center;
  font-weight: bold;
  color: white;
  display: block;
}

h2 {
  font-size: 20px;
  color: white;
  display: block;
}

button {
  width: 300px;
  height: 40px;
  background: #d4f4dd;
  font-family: 'Mina', sans-serif;
  font-size: 20px;
  font-weight: 300;
  color: #424b54;
  border: 2px solid #d4f4dd;
}

.start-page {
  width: 500px;
  height: 300px;
  margin: 10px auto;
  text-align: center;
  padding-bottom: 200px;
  color: white;
}

.questions,
.end-quiz {
  display: none;
  text-align: center;
  padding-bottom: 0px;
  margin: 0 auto 0 auto;
  text-align: center;
  width: 500px;
  height: 300px;
  min-height: 300px;
}

.end-quiz {
  padding-top: 80px;
  height: 100px;
  font-size: 30px;
  color: white;
}

.question-number,
.score {
  font-size: 30px;
  color: white;
  padding-top: 0px;
}

.div {
  list-style: none;
  padding: 0;
}

.input {
  border: 1px solid #d6d6cf;
  width: 200px;
  margin: 5px auto;
  font-size: 18px;
  border-radius: 5px;
  padding: 5px;
}

.selected {
  background: #f2b632;
  color: #252839;
}

.correct {
  background-color: lightgreen;
}

.incorrect {
  background-color: red;
}

@media screen and (min-width: 300px) {
  .topbar {
    width: 50%;
    margin: auto;
    padding-top: 30px;
    font-size: 20px;
  }
  .questions .end-quiz {
    width: 200px;
    margin: 0 auto;
  }
}

@media screen and (min-width: 600px) {
  .topbar {
    width: 80%;
    font-size: 40px;
    margin: 0 auto;
  }
  .questions .end-quiz {
    width: 400px;
    margin: 0 auto;
  }
}

@media screen and (max-width: 900px) {
  .topbar {
    font-size: 60px;
    font-weight: bold;
    margin: 0 auto;
  }
}

.questions .end-quiz {
  width: 600px;
  margin: 0 auto;
}


}
fieldset {
  min-height: 300px;
}

}
.label {
  display: block;
}

}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <!DOCTYPE html>
  <html lang="en">

  <head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial- 
 scale=1.0">
 <meta http-equiv="X-UA-Compatible" content="ie=edge">
 <link rel="stylesheet" href="./float-grid.css" />
 <link rel="stylesheet" href="index.css">
 <link href="https://fonts.googleapis.com/css?family=Mina" 
  rel="stylesheet">
 <title>Quiz App</title>

</head>

<body>
<main>

   <!--Section 1 WELCOME-->
   <h1 class="topbar"><marquee behavior="alternate">The Office 
   Quiz</marquee></h1>
  
 

  <div class="start-page">
  <p>Are you a true fan of The Office? Let's find out!</p>
  <button value="start" type="start" class="start-button">Begin 
  Quiz</button>
</div>


  <!--Section 2 QUESTIONS-->

  <form class="questions">
  <fieldset>
   <Legend>
   <h2 class="question"></h2></Legend>
   <div class="questions-selector"></div>
    <div class="submit">
    <button value="submit" type="submit" class="submit-button">Check 
Your Answer</button>
    </div>
  </fieldset>
 </form>
<div class="questions">
  <div class="next">
    <button value="next" type="next" class="next-button">Next 
Question</button>
  </div>
  <p class="score">Score:</p>
  <p class="question-number"></p>
</div>
   
<!--SECTION 3 RESULTS-->

<section class='end-quiz'>
  <p class='end-score'></p>
  <p class='comment'></p>
  <button value="retry" type="retry" class="retry-button">Retake 
Quiz</button>
</section>
</main>
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="index.js"></script>
   </body>
 
</html>

mat, however, I do not want buttons because I would like it to highlight the correct answer green.

Upvotes: 1

Views: 142

Answers (3)

Guizmo
Guizmo

Reputation: 111

You got close, but a couple things you missed:

  • You are styling (through your classes) your input and not your selected label with your jQuery process, which makes the background changes hard to see
  • In your checkAnswerfunction you're actually not comparing the two same things, which results in bad conditionnal test

See your code revised for something working (note it is styling the div and not the label, I let you work this out). You can search for MODIFICATIONS BELOW tag to see where I touched it.

const myQuestions = [{
    'question': 'WHAT IS THE OFFICE AWARDS NIGHT CALLED?',
    'answers': ["DORKIES", "DUNDIES", "DWEEBIES", "DINGLES"],
    'correct': 1
  },
  {
    'question': 'WHAT IS THE GIANT POT THAT KEVIN DROPS ALL OVER THE OFFICE FLOOR?',
    'answers': ["GRAVY", "SOUP", "MAC & CHEESE", "CHILI"],
    'correct': 3
  },
  {
    'question': "HOW LONG HAD JIM AND PAM BEEN DATING BEFORE HE BOUGHT HER ENGAGEMENT RING",
    'answers': ["ONE WEEK", "ONE MONTH", "ONE YEAR", "TWO YEARS"],
    'correct': 0
  },
  {
    'question': "WHAT DOES MICHAEL CHOOSE AS HIS USERNAME WHEN HE SIGNS UP FOR AN ONLINE DATING SITE?",
    'answers': ["LITTLEKIDLOVER", "IAMTHEBOSS", "DUNDERMIFF", "READYFORMARRIAGE"],
    'correct': 0
  },
  {
    'question': "WHAT IS ERIN'S REAL FIRST NAME?",
    'answers': ["BRITTANY", "CHRISTINE", "BECCA", "KELLY"],
    'correct': 3
  },
  {
    'question': "WHICH COUNTRY DOES TOBY MOVE TO WHEN HE LEAVES HIS JOB AT DUNDER MIFLIN ONLY TO RETURN LATER?",
    'answers': ["JAMAICA", "COSTA RICA", "ITALY", "CUBA"],
    'correct': 1
  },
  {
    'question': "DWIGHT AND ANDY HAVE A DUEL OVER WHICH WOMAN IN THE OFFICE?",
    'answers': ["ANGELA", "ERIN", "KELLY", "MEREDITH"],
    'correct': 0
  },
  {
    'question': "WHAT IS THE NAME OF THE CAT THAT ANGELA THROWS AT OSCAR DURING THE FIRE DRILL?",
    'answers': ["SPRINKLES", "CUPCAKE", "BANDIT", "TINKERBELL"],
    'correct': 2
  },
  {
    'question': "WHAT DOES JAN NAME THE BABY SHE HAS VIA SPERM DONOR?",
    'answers': ["AXON", "ALLY", "APPLE", "ASTRID"],
    'correct': 3
  },
  {
    'question': "HOW MANY KIDS DO PAM AND JIM HAVE?",
    'answers': ["3", "2", "1", "0"],
    'correct': 1
  }];

let score = 0;
let current = 0;
$(document).ready(function() {
  // start button event listener
  $(".start-button").click(function() {
    $('.start-page').hide();
    $('.next').hide();
    $('.questions').show();
    displayQuestion();
    $('.score').text('Current Score: ' + score);
    console.log("Start Quiz button clicked");
  });
  // next button event listener
  $(".next-button").click(function(event) {
    console.log("Next button clicked");
    displayQuestion();
    $('.next').hide();
    $('.submit').show();
  });
  $(".submit-button").click(function(event) {
    event.preventDefault();
    var selected = $('input.selected');
    //console.log(event);
    if (selected.length) {
      let answer = $('input.selected').attr('id');
      console.log("answer: " + answer);
      checkAnswer(answer);
      $('.next').show();
      $('.submit').hide();
    } else {
      alert('Please select an answer');
    }
  });
  // retry button click listener
  $(".retry-button").click(function() {
    location.reload();
    console.log("Retake button clicked");
  });
  //click listener to make questions change color on hover
  $('div.questions-selector').on('click', 'input', function(event) {
    $('.selected').removeClass();
    $(this).addClass('selected');

    // MODIFICATIONS BELOW
    $(this).parent().addClass('selected');
  });
});

//FUNCTIONS
function displayQuestion() {
  $('.question-number').text('Question Number: ' + (current + 1) + "/10");

  if (current < myQuestions.length) {
    let listQuestion = myQuestions[current];
    $('h2').text(listQuestion.question);
    $('div.questions-selector').html('');
    for (let i = 0; i < listQuestion.answers.length; i++) {
      $('div.questions-selector').append(`<div><label 
       for"input${i}">${listQuestion.answers[i]}</label>
        <input type="radio" name="choice" value="0" id = "input${i}"></input></div>`)
    }
  } else {
    // show summary that says how many you got correct
    displayScore();
  }
}

// function stub to check answer
function checkAnswer(answer) {
  let listQuestion = myQuestions[current];

  // MODIFICATIONS BELOW
  const inputString = "input";
  const correctId = inputString.concat(listQuestion.correct);
  console.log("correctId: " + correctId);
  if (correctId == answer) {
    score++;
  } else {
    $('#'+answer).parent().addClass('incorrect');
  }
  $('#'+correctId).parent().addClass('correct');
  $('.score').text('Current Score: ' + score);
  current++;
}

//function to display score
function displayScore() {
  $('.questions').hide();
  $('.end-quiz').show();
  $('.end-score').text("Your score: " + score + '/10');
  if (score >= 7) {
    $('.comment').text('Nice job, Superfan!');
  } else {
    $('.comment').text('Get to binge watching and try again!')
  }
};
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  background: #586060;
  background-repeat: no-repeat;
  background-size: cover;
  font-family: 'Mina', sans-serif;
  color: white;
  font-size: 20px;
  margin: 10px;
}

.topbar {
  max-width: 800px;
  margin-top: 20px;
  font-size: 12px;
  padding-bottom: 30px;
  font-weight: bold;
  color: white;
}

h1,
h2 {
  text-align: center;
  font-weight: bold;
  color: white;
  display: block;
}

h2 {
  font-size: 20px;
  color: white;
  display: block;
}

button {
  width: 300px;
  height: 40px;
  background: #d4f4dd;
  font-family: 'Mina', sans-serif;
  font-size: 20px;
  font-weight: 300;
  color: #424b54;
  border: 2px solid #d4f4dd;
}

.start-page {
  width: 500px;
  height: 300px;
  margin: 10px auto;
  text-align: center;
  padding-bottom: 200px;
  color: white;
}

.questions,
.end-quiz {
  display: none;
  text-align: center;
  padding-bottom: 0px;
  margin: 0 auto 0 auto;
  text-align: center;
  width: 500px;
  height: 300px;
  min-height: 300px;
}

.end-quiz {
  padding-top: 80px;
  height: 100px;
  font-size: 30px;
  color: white;
}

.question-number,
.score {
  font-size: 30px;
  color: white;
  padding-top: 0px;
}

.div {
  list-style: none;
  padding: 0;
}

.input {
  border: 1px solid #d6d6cf;
  width: 200px;
  margin: 5px auto;
  font-size: 18px;
  border-radius: 5px;
  padding: 5px;
}

.selected {
  background: #f2b632;
  color: #252839;
}

div.correct {
  background-color: lightgreen;
}

div.incorrect {
  background-color: red;
}

@media screen and (min-width: 300px) {
  .topbar {
    width: 50%;
    margin: auto;
    padding-top: 30px;
    font-size: 20px;
  }
  .questions .end-quiz {
    width: 200px;
    margin: 0 auto;
  }
}

@media screen and (min-width: 600px) {
  .topbar {
    width: 80%;
    font-size: 40px;
    margin: 0 auto;
  }
  .questions .end-quiz {
    width: 400px;
    margin: 0 auto;
  }
}

@media screen and (max-width: 900px) {
  .topbar {
    font-size: 60px;
    font-weight: bold;
    margin: 0 auto;
  }
}

.questions .end-quiz {
  width: 600px;
  margin: 0 auto;
}


}
fieldset {
  min-height: 300px;
}

}
.label {
  display: block;
}

}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <!DOCTYPE html>
  <html lang="en">

  <head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial- 
 scale=1.0">
 <meta http-equiv="X-UA-Compatible" content="ie=edge">
 <link rel="stylesheet" href="./float-grid.css" />
 <link rel="stylesheet" href="index.css">
 <link href="https://fonts.googleapis.com/css?family=Mina" 
  rel="stylesheet">
 <title>Quiz App</title>

</head>

<body>
<main>

   <!--Section 1 WELCOME-->
   <h1 class="topbar"><marquee behavior="alternate">The Office 
   Quiz</marquee></h1>
  
 

  <div class="start-page">
  <p>Are you a true fan of The Office? Let's find out!</p>
  <button value="start" type="start" class="start-button">Begin 
  Quiz</button>
</div>


  <!--Section 2 QUESTIONS-->

  <form class="questions">
  <fieldset>
   <Legend>
   <h2 class="question"></h2></Legend>
   <div class="questions-selector"></div>
    <div class="submit">
    <button value="submit" type="submit" class="submit-button">Check 
Your Answer</button>
    </div>
  </fieldset>
 </form>
<div class="questions">
  <div class="next">
    <button value="next" type="next" class="next-button">Next 
Question</button>
  </div>
  <p class="score">Score:</p>
  <p class="question-number"></p>
</div>
   
<!--SECTION 3 RESULTS-->

<section class='end-quiz'>
  <p class='end-score'></p>
  <p class='comment'></p>
  <button value="retry" type="retry" class="retry-button">Retake 
Quiz</button>
</section>
</main>
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="index.js"></script>
   </body>
 
</html>

Upvotes: 0

Adityarachman
Adityarachman

Reputation: 86

There is something missed in this function.

function displayQuestion() {
  $('.question-number').text('Question Number: ' + (current + 1) + "/10");

  if (current < myQuestions.length) {
    let listQuestion = myQuestions[current];
    $('h2').text(listQuestion.question);
    $('div.questions-selector').html('');
    for (let i = 0; i < listQuestion.answers.length; i++) {
      $('div.questions-selector').append(`<div><label 
       for"input${i}">${listQuestion.answers[i]}</label>
        <input type="radio" name="choice" value="0" id = "input${i}"></input></div>`)
    }
  } else {
    // show summary that says how many you got correct
    displayScore();
  }
}

You should fix this part.

<input type="radio" name="choice" value="0" id = "input${i}"></input></div>`)

this input${i} is the reason you can't get the correct answer. Simply modify your code to be like this.

<input type="radio" name="choice" value="0" id = "${i}"></input></div>`)

Upvotes: 0

Mat.Now
Mat.Now

Reputation: 1725

You have a little mess in your code, and I am not proud of my improvement but I've made changes and code is working again. Look on my changes:

  1. In function displayQuestions I've added new attribute to radio button (ans)

    <input type="radio" **ans=${i}** name="choice" value="0" id = "input${i}"> 
</input></div>`)

  2. $(.submit-button) I've added quest variable and I've changed answer variable

    $(".submit-button").click(function(event) {
   event.preventDefault();
   var selected = $('input.selected');
   if (selected.length) {
     **let answer = $('input.selected').attr('ans');**
     **let quest = $('input.selected').attr('id');**
     **checkAnswer(answer,quest);**
     $('.next').show();
     $('.submit').hide();
  } else {
    alert('Please select an answer');
  }
});

  3. I've changed checkAnswer function

    function checkAnswer(answer,question) {
  let listQuestion = myQuestions[current];
  if (listQuestion.correct === Number.parseInt(answer)) {
    score++;
    document.getElementById(question).previousElementSibling.classList.add('correct');
 } else {
   document.getElementById(question).previousElementSibling.classList.add('incorrect')
 }
    $('.score').text('Current Score: ' + score);
    current++;
 }

I hope this will help you. Good luck!

Upvotes: 1

Related Questions