Move to different anchor tags depending on total score

user_3892314 0
Viewed 42

I have multiple choice questions and depending on the progressive score, users need to move to different questions. For example, each question has 4 answers, each with a score.

Question 1
Answer 1 = 5 points
Answer 2 = 10 points
Answer 3 = 15 points
Answer 4 = 20 points

Question 2
Answer 1 = 5 points
Answer 2 = 10 points
Answer 3 = 15 points
Answer 4 = 20 points

The conditions are set in the backend where I can say if the total score is 25 then go to question 7 otherwise if any other score other than 25, proceed to the next question ie: question 3.

I am just using anchor tags to move between the questions. Where I get tripped up is if you look in the LOGIC bit below. The jump to logic requires the current score to compare to. To pinpoint the line, it is this one:

 <?php if( get_field( 'go_to' )  && get_sub_field( 'score' ) == // CURRENT SCORE): ?>

The current score changes every time a user clicks on a radio button choice. 

$().ready(function(){
function calcscore(){
    var score = 0;
    $(".calc:checked").each(function(){
        score+=parseInt($(this).val());
    });  
}
    $(".calc").change(function(){
        calcscore()
    });
});

PHP: 

<?php if ($questions->have_posts() ):
            while ($questions->have_posts() ): $questions->the_post();

?>
<!--Show Question-->
   <div class="question-container" id="<?php echo get_the_ID(); ?>">
    <div class="question">
        <h5><?php the_title(); ?></h5>


        <!-- Show answers-->

        <?php if (have_rows( 'answers' ) ):
                while (have_rows( 'answers' ) ): the_row();
        ?>
            <input type="radio" name="input<?php echo get_the_ID(); ?>" id="input<?php echo get_row_index(); ?>" value="<?php echo get_sub_field( 'score' ); ?>" class="calc">
            <label for="input<?php echo get_row_index(); ?>"><?php echo get_sub_field( 'answer' ); ?></label>
        <?php endwhile; ?>
        <?php endif; ?>



        <!--logic-->
        <?php if (have_rows( 'condition' ) ):
                    while (have_rows( 'condition' ) ): the_row();

        ?>     
            <?php if( get_field( 'go_to' )  && get_sub_field( 'score' ) == // CURRENT SCORE): ?>
             <a href="#<?php echo get_field( 'go_to' )->ID; ?>" class="next-btn">Next</a>
            <?php else: ?>
             <a href="#<?php echo get_the_ID() + 1; ?>" class="next-btn">Next</a>
            <?php endif; ?>

        <?php endwhile; ?>
        <?php endif; ?>
        <!--end logic-->


        <!-- end show answers-->
    </div>
</div>
<!--End Question-->
<?php endwhile; wp_reset_postdata(); ?>
<?php endif; ?>
php jquery javascript
1 Answers

Let's do this in JavaScript. You already have a JS function that runs every time an answer is clicked. Within this function, you have an each that loops on each radio button...

$(".calc:checked").each(function(){...}

And the radio button names are connected to the anchor names, right? Let's use that connection! So try adding in this...

if(this.prop('checked')) { // we only care about ANSWERED questions
    var newanchorlink = 'input' + parseInt($(this).attr('name').replace('input', ''), 10) + 1;
    $('.next-btn').attr('href', '#' + newanchorlink);
}

You should see what is happening here: your radio buttons have property name="input(SOMENUMBER)", so, I take that property, replace "input" with "", parsing it as an integer, add 1 to it, and concatting it with the word "input". The second thing I'm doing is just changing the href to link to our new URL.

This will only work, though, under various conditions: your inputs are incremental, i.e., input1, input2, etc.. Your inputs must have the name property of input(somenumber), it would not work on a nextinput(somenumber). Also, we are checking that something is answered by means of it being last in the input list satisfying the condition prop('checked'), and this will need recoding if you change the orders or use other inputs.

Granted, I did not test this myself! There is a lot going on here, a bit much for making a demo. But I hope this helps!

user_24305490
Related