Переход к разным тегам привязки в зависимости от общего балла

Question

У меня есть вопросы с несколькими вариантами ответов, и в зависимости от прогрессивной оценки пользователи должны переходить к другим вопросам. Например, каждый вопрос имеет 4 ответа, каждый с оценкой. другой балл, кроме 25, переходите к следующему вопросу. ie: вопрос 3.

Я просто использую теги привязки для перемещения между вопросами. Я запутаюсь, если посмотрите на бит LOGI C ниже. Для перехода к logi c требуется текущий счет для сравнения. Чтобы точно определить линию, это:

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

Текущий счет меняется каждый раз, когда пользователь нажимает на переключатель выбора.

$().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; ?>

Answer 1

Давайте сделаем это в JavaScript. У вас уже есть функция JS, которая запускается каждый раз, когда нажимается ответ. Внутри этой функции у вас есть each, который зацикливается на каждой radio кнопке ...

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

И имена переключателей связаны с именами привязок, верно? Давайте использовать это соединение! Так что попробуйте добавить сюда ...

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);
}

Вы должны увидеть, что здесь происходит: ваши переключатели имеют свойство name="input(SOMENUMBER)", так что я понимаю, что свойство, замените "input" на "", проанализируйте его как целое число, добавьте к нему 1 и соединив его со словом "input". Второе, что я делаю, это просто меняю href для ссылки на наш новый URL.

Однако это будет работать только при различных условиях: ваши входные данные являются инкрементными, т.е. input1, input2 , et c .. Ваши входные данные должны иметь свойство name input(somenumber), это не будет работать на nextinput(somenumber). Кроме того, мы проверяем, что на что-то ответили, поскольку оно было последним в списке ввода, удовлетворяющим условию prop('checked'), и это потребует перекодирования, если вы измените заказы или используете другие входы.

Конечно, я сам не тестировал! Здесь много чего происходит, немало для создания демо. Но я надеюсь, что это поможет!