Eric Belisle Giddings Eric Belisle Giddings - 3 months ago 12
CSS Question

Force Users to Click <a> Links In Sequential <ol> <li> Order

I have a order list with about 10 list items that have anchor tag links associated with them. I am trying to force the user to only be able to click the child of the parent li once the link is visited. So in a sense I want to force the user to click the li links in the sequential order that is generated by the ol.

Here is my html:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>titlePage</title>
<link rel="stylesheet" type="text/css" href="titlePage.css"></head>
<script src="../jsLibraries/jquery-3.1.0.js"></script>
<script src="titlePage.js"></script>
</head>

<body>

<img id="backgroundIMG" src="images/Chapter-v2.png">

<ol id="chapterNumbers">
<li><a href="../chapters/chapter0.html">Chapter 0 - Animate Content</a></li>
<li><a href="../chapters/chapter1.html">Chapter 1 - Animate Content 2</a></li>
<li><a href="../chapters/chapter2.html">Chapter 2 - Video Content</a></li>
<li><a href="../chapters/chapter3.html">Chapter 3 - Video Content 2</a></li>
<li><a href="../chapters/chapter4.html">Chapter 4 - Audio Content</a></li>
<li><a href="../chapters/chapter5.html">Chapter 5 - Blah</a></li>
<li><a href="../chapters/chapter6.html">Chapter 6 - Blah</a></li>
<li><a href="../chapters/chapter7.html">Chapter 7 - Blah</a></li>
<li><a href="../chapters/chapter8.html">Chapter 8 - Blah</a></li>
<li><a href="../chapters/exam.html">Exam</a></li>
</ol>

<header id="courseTitle"> 001234OOELNA - Example Course Using Adobe Animate </header>


</body>
</html>


Here is my jQuery JS that I was starting with:

$(document).ready(function(){

$("li").first().nextAll().click(function( event ) {
event.preventDefault();
});

});


Here is the CSS associated with the anchor tag being visited:

a:visited {
color:white;
}


Here is a link to the out put as it is:

http://skywest.theyard.space/index/titlePage.html

Can anyone please help me figure out where I'm going wrong and how to make it so once that first link is clicked the first-child's link is activated (returned true?) and so on so the user has to click the links in sequential order?

Thank you!
Eric

Answer

If user click on link, is navigated out of links page, so any trick with add/remove class will not work.

So this code is supposed to work even after return to page with links. And order is reseted after closing/opening browser.

$(document).ready( function() {
  if (!sessionStorage.active) {
    sessionStorage.active = "1";
  }

  (function set() {
    $("li a").each(function(idx, elm) {
      if (sessionStorage.active != idx+1) {
        $(elm)
          .parent().fadeTo(1, 0.7)
          .off("click").on("click", function(evt) {
            evt.preventDefault();
          });
      } else {
        $(elm)
          .parent().fadeTo(500, 1)
          .off("click").on("click", function() {
            sessionStorage.active = parseInt(sessionStorage.active, 10) + 1;
            set();
          });
      }
    });
  }());
});
Comments