使用 reveal.js 禁用某些方向的导航

Question

我最近一直在使用 reveal.js，想知道是否可以禁用某些方向的导航。例如，如果用户单击按钮或输入通过验证测试的内容，我只能允许用户继续下一节。

有办法实现吗？

Answer 1

这并非万无一失，但当您进入需要用户执行任务才能继续的幻灯片时，您可以使用 Reveal.configure 禁用所有幻灯片导航方法。例如，如果您有一张带有 data-state="question1" 属性的幻灯片，那么您可以执行如下操作。我制作了一个 JS 地图，可以跟踪已完成的问题，这样如果用户返回到该幻灯片，它就不会再次禁用导航。函数 questionComplete 用于说明目的，您的听众可以在幻灯片上的各种文本字段或按钮中调用。

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

唯一需要注意的是，用户在完成该幻灯片之前也无法向后导航。您可以通过为特定幻灯片提供直接锚链接并在发生这种情况时重新启用导航来绕过此问题。

附录：此外，如果启用概览，人们无论如何都可以跳到幻灯片的任何部分，因此您必须考虑是否要完全禁用它。

如果您想要从幻灯片放映的角度来看更强大但更难访问的内容，唯一的其他选择是将您的演示文稿分成几个较小的演示文稿，并使用自定义 JavaScript 切换每个演示文稿的可见性和焦点.当然，那样的话，向后导航会比较麻烦。

Answer 2

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

controlsBackArrows: 'faded',

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

使用 reveal.js 禁用某些方向的导航

Disable navigation in certain directions with reveal.js

html

javascript

reveal.js