Search code examples
javascriptjqueryhtmljquery-selectbox

Displaying Certain Div/Answer Based on Question1


I'm using jquery selectbox and I'm trying to get the first question to determine the link that displays at the end of the set of questions. If the user selects the first answer they are directed to the first link, if they pick answer 2 then the second link,etc..

<div class="step question">
    <h2>Select An Answer</h2>
    <div id="q1_one" class="button button_green next">Answer 1</div>
    <div id="q1_two" class="button button_red next">Answer 2</div>
    <div id="q1_three" class="button button_red next">Answer 3</div>
</div>

And Here are the set of answers I'm trying to display. Currently they all display no matter what answer is selected in question 1, I'm just trying to have the 1 correct answer to display for each selection:

<div id="if_one">
    <a href="http://websitelinkhere.com/1" class="button_primary agree">If Question 1 = Answer 1</a>
</div>
<div id="if_two">
    <a href="http://websitelinkhere.com/2" class="button_primary agree">If Question 1 = Answer 2</a>
</div>
<div id="if_three">
    <a href="http://websitelinkhere.com/3" class="button_primary agree">If Question 1 = Answer 3</a>
</div>

Here it is on JSFiddle


Solution

  • After digging through your code, the problem is you're not storing/displaying your answer, you're just displaying everything. Here's how I hacked it. I recommend you come up with a better strategy.

    Full Fiddle: http://jsfiddle.net/RqvEX/

    Around line 616, I added a global storage for answers, and recorded them as they came in:

    document.storedAnswers = [];
    
    
    $('.next, .agree').click(function () {
    
        next = false;
        if ($(this).hasClass('agree')) {
            button_type = 'agree';
        } else {
            button_type = 'next';
            document.storedAnswers.push(this.id);
        }
        //.... rest of code
    }
    

    And finally, after "validating," I modified your timeout:

    setTimeout(function () {
    
        jQuery('.verify_container .loader').hide();
        //This line showed all answers... we want to be more selective.
        //jQuery('.verify_container .button_primary').css('display', 'block');
        var answerToShow = '';
        switch(document.storedAnswers[0]) {
            case 'q1_one': {
                answerToShow = 'if_one';
                break;
            }
            case 'q1_two': {
                answerToShow = 'if_two';
                break;
            }
            default: {
                answerToShow = 'if_three';
                break;
            }           
        }
    
        if (answerToShow.length > 0) {
            $('#' + answerToShow + ' .button_primary').css('display', 'block');
        }
    
    }, 1000);