CODEWITHSUNDEEP
ionic-frameworkionic2ionic3
Jini
Jini

Reputation: 21

Ionic 3 - How to prevent the user from clicking slide pager from slide 0 to slide 2 if slide 1 is not answered

I am working on a Ionic 3 questionnaire application where the user cannot go from one slide to another until the question is answered on a slide. I got everything working except pager (this dots) is allowing the user to go from one slide to another even though question# 2 is not answered.

I added the following logic but its not working as expected. Its still allowing me to jump from slide 0 to slide 2. Adding this.slideTo(this.currentIndex) changed the dot to be highlighted for slide 0 however its showing the contents of Slide# 2. 

onSlideWillChange(event) {
    let answerNotSelected: boolean = false;
    for (let i: number = 0; i < this.slides.getActiveIndex(); i++) {
      answerNotSelected = this.questionnaire.questions[i].selectedAnswer === undefined;
      if (answerNotSelected) { 
        console.log('Returning from newQuestionIndex ' + this.slides.getActiveIndex() +  ' to current slide:' + this.currentQuestionIndex);
        this.slideTo(this.currentQuestionIndex);
      }
    }  }

Upvotes: 2

Views: 1572

Answers (2)

HannahCarney
HannahCarney

Reputation: 3631

I had the same problem - for anyone in the future I solved it in a albeit slightly hacky way (since _paginationContainer is an internal variable). You could probably also as easily just find elements in the DOM.

I called this on

ionSlideWillChange

, but it could probably be called on any of the swipe events.

ion-slide is very poorly documented, but it is based off of http://idangero.us/swiper/api/ and has all the same methods so you can look here for better documentation.

lockAll() {
    var current = this.slider.getActiveIndex();
    let array = this.slider._paginationContainer.childNodes
    for (let index = 0; index < array.length; index++) {
      var button : any = array[index];
      if (this.inRange(index, current -1, current +1)) {
        button.disabled = false;
      }
      else {
        button.disabled = true
      }
    }
}

inRange(x, min, max) {
    return ((x-min)*(x-max) <= 0);
}

Upvotes: 0

sebaferreras
sebaferreras

Reputation: 44669

You could just lock the slides, and only enable back when the question has an answer. That way, the pager won't change the current slide (It would just be there to give the user some feedback about how many other questions are there in the questionnaire):

import { Component, ViewChild } from '@angular/core';
import { NavController, Content, Slides } from 'ionic-angular';

@Component({
  selector: 'page-home',
  templateUrl: 'app/home.page.html'
})
export class HomePage {
  @ViewChild(Slides) slides: Slides;

  ngOnInit() {
    this.slides.lockSwipes(true); // Lock the slides
  }

  public showPrevious(): void {
    this.slides.lockSwipes(false); // Unlock the slides
    this.slides.slidePrev(500);    // Move the the previous
    this.slides.lockSwipes(true);  // Lock the slides again
  }

  public showNext(): void {
    this.slides.lockSwipes(false); // Unlock the slides
    this.slides.slideNext(500);    // Move the the next
    this.slides.lockSwipes(true);  // Lock the slides again
  }
}

Please take a look at this working plunker for a demo.

Upvotes: 1

Related Questions