Home > Software design >  Jquery steps customization
Jquery steps customization

Time:04-03

So now I'm trying to customize Jquery steps by adding a score for each question's option. But the problem is that I can't find where check if the next button is check or not and the same thing for previous button. Simply I want to push the score of the answer in array when next button is click and remove it from array when previous is clicked. But I can't call next and previous function.

This is Jquery steps:

$(function() {
      $("#wizard").steps({

            headerTag: "h4",
            bodyTag: "section",
            transitionEffect: "fade",
            enableAllSteps: true,
            transitionEffectSpeed: 500,
            onStepChanging: function(event, currentIndex, newIndex) {
                qIndex = newIndex;
                if (newIndex === 1) {
                  $('.steps ul').addClass('step-2');
                } else {
                  $('.steps ul').removeClass('step-2');
                }

and that 's what I', trying to do:

$('.forward').click(function() {
    $("#wizard").steps('next');
    total.push(currentScore);
})

$('.backward').click(function() {
    total.pop(currentScore);
    $("#wizard").steps('previous');
})

CodePudding user response:

So, there is something called Events in Jquery-Steps. You can use the events to do what exactly you are trying. Just a quick hint what you can do is use onStepChanging event which accepts 3 parameters event, currentIndex, newIndex You may compare currentIndex and newIndex to push and remove the score of the answer in array:

if(newIndex > currentIndex) {// push }
if(newIndex < currentIndex) {// pop }

Refer the doc here

  • Related