Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript

Posted by Sirin Srikier
Sirin Srikier
7,671 Points

How do I check if the user checked an answer in the each question?

Here is my code. This code only works properly in the first question. How do I set it up so that it checks each question? The site is http://www.americansinus.com/sinus-symptoms/the-sinus-symptom-checker/.

$(".wpProQuiz_QuestionButton").click(function() {

$(".wpProQuiz_questionInput").each(function(){
   if ($(".wpProQuiz_questionInput").is(":checked")){

        var currValue = $( ".progressbar" ).data("value");
        currValue = parseInt(currValue) ? parseInt(currValue) : 0;
        if(currValue <= 100) {
            $( ".progressbar" ).progressbar({
              value: currValue+6
            }).data("value",currValue+6);          
        }
      }
     else {
       alert("Select answer");
     }
  });   
});
mikes02
mikes02
Courses Plus Student 16,968 Points

What are you trying to do exactly? I went through the quiz but I am not sure where you are running into issues.

4 Answers

Sirin Srikier
Sirin Srikier
7,671 Points
Sirin Srikier
Sirin Srikier
7,671 Points

I want the progress bar to increase by a certain value every time a user checks a radio option. So I need to check to see if the user checked anything before it can increase the progress bar. Right now when the user doesn't check anything on the first question is doesn't increment the progress bar, which is good, but on all the other questions it doesn't check user input of questions 2 - 18. For example, if I don't check anything on question 2, it will increment anyway. I'd like it to not increment the progress bar if is not checked. Hope that makes sense. Thank you!

mikes02
mikes02
Courses Plus Student 16,968 Points

Hi Sirin,

That makes sense, could you share your HTML and CSS along with the JS you posted above, it will make it easier for testing purposes.

Sirin Srikier
Sirin Srikier
7,671 Points
Sirin Srikier
Sirin Srikier
7,671 Points

The quiz is a wordpress plugin so I won't be able to share that part of the quiz. This is my div for the progress bar and I am using the jquery ui to create it.
<div class="progressbar></div>

mikes02
PLUS
mikes02
Courses Plus Student 16,968 Points
mikes02
mikes02
Courses Plus Student 16,968 Points

Hi,

I'm not certain you need each in this instance, but without seeing all of the code from the plugin I am not certain, but in the meantime I cleaned this up a bit so that it makes better use of variables:

var $button = $('.wpProQuiz_QuestionButton'),
    $option = $('wpProQuiz_questionInput'),
    $progress = $('.progressbar');


$button.click(function() {

    if($option.is(':checked')) {

        var $currentValue = $progress.data('value');
        $currentValue = parseInt(currentValue) ? parseInt(currentValue) : 0;

        if($currentValue <= 100) {
            $progress.progressbar({
                value: currentValue + 6
            }).data('value', currentValue + 6);
        } else {
            alert('Select Answer'); 
        }       
    }

});

Could you try this out and see what happens?

mikes02
PLUS
mikes02
Courses Plus Student 16,968 Points
mikes02
mikes02
Courses Plus Student 16,968 Points

In looking at your code you can also clean it up like below. The plugin also seems to be throwing it's own error message if a radio button is unchecked. Perhaps there is conflicting code?

$(document).ready(function() {

    $('.progressbar').progressbar({
        value: 0
    });

    $(".wpProQuiz_button").click(function(){
        $(".progressbar, .progressbar-container").show();
    });

    $(".wpProQuiz_QuestionButton").click(function() {

        if ($(".wpProQuiz_questionInput").is(":checked")){
            var currValue = $( ".progressbar" ).data("value");
            currValue = parseInt(currValue) ? parseInt(currValue) : 0;
            if(currValue <= 100) {      
                $( ".progressbar" ).progressbar({
                  value: currValue+6
                }).data("value",currValue+6);

            } else {
                alert("Select answer");
            }
        }

    }); 

});