CODEWITHSUNDEEP
javascripthtmlreveal.js
H Bellamy
H Bellamy

Reputation: 22705

Disable navigation in certain directions with reveal.js

I have been using reveal.js recently, and was wondering whether it is possible to disable navigation in certain directions. For example, I could only allow the user to proceed to the next section if she clicks on a button or enters content that passes a validation test.

Is there a way to achieve this?

Upvotes: 1

Views: 1838

Answers (2)

Jose Marquez
Jose Marquez

Reputation: 1

// Visibility rule for backwards navigation arrows; "faded", "hidden"
// or "visible"

controlsBackArrows: 'faded',

https://github.com/hakimel/reveal.js

Upvotes: 0

BoffinBrain
BoffinBrain

Reputation: 6525

This isn't foolproof, but you can use Reveal.configure to disable all methods of slide navigation when you enter a slide that needs the user to perform a task before continuing. For example, if you had a slide with the attribute data-state="question1" then you could do something like the following. I've made a JS map that can keep track of completed questions, so that if the user goes back to that slide, it won't disable the navigation again. The function questionComplete is for illustrative purposes, and could be called by your listeners in various text fields or buttons on your slides.

var questions = {};

function toggleNav(b) {
    Reveal.configure({
        controls: b,
        progress: b,
        keyboard: b,
        overview: b,
        touch: b
    });
}

Reveal.addEventListener('question1', function(event) {
    if (!questions['question1']) {
        toggleNav(false);
    }
});

function questionComplete(q) {
    questions[q] = true;
    toggleNav(true);
}

The only caveat is that the user won't be able to navigate backwards either, until they've completed that slide. You could bypass this issue by giving direct anchor links to specific slides and re-enabling the nav if that occurs.

Addendum: Also, if the overview is enabled, people will be able to skip to any part of the slideshow anyway, so you'd have to consider whether you want to disable it completely.

The only other option, if you want something more robust but less accessible from a slideshow perspective, is to separate your presentation into several smaller presentations, and use custom JavaScript to switch visibility and focus to each one. Of course, that will make backwards navigation more troublesome.

Upvotes: 1

Related Questions