Question

I’m trying to test the effectiveness of a navigational function in my prototype. On the left side of the page, I have an unordered list with 30 list items that flows off of the page. On the right side of the page is a prompt that is asking users to click through the navigational items in a randomized sequence.

The right and left side are displayed inside of iFrames, with the clicks on the left navigation updating the content on the right and in turn prompting users to click on the next item in the sequence. I’d like to avoid having all 30 list items live at once, to avoid test users erroneously clicking any item other than the next item in the sequence. Is it possible, using jQuery (or anything else, for that matter), to have the HREF in the navigation track the order of my sequence and link each item when it appears in the sequence and be unlinked when it does not appear next in the sequence?

Thanks.

EDIT:

I’ve made a bit of headway here. My javascript is still not producing the desired result (disable all links except for the current link in the sequence, and once click, disable the link and activate the next one in the sequence). I’ve simplified the scope of the list to make the problem easier to handle for now.

var linkInterceptor = function(event) {
    if($(event.target).hasClass("active")) {
        $('a').removeClass("active");

// assume links have class="nextlink_##"
var nextTarget = $(event.target).getAttr('class');
var nextId = nextTarget.substr(9);
$('#' + nextId).addClass("active");

return true;
} else {
event.preventDefault();
}
};

$('a').on('click', linkInterceptor);

And here is the HTML

<div style="width:1024px; height:768px;">
    <div style="width:298px; height:708px; overflow:scroll; float:left;">
            <a class="nextlink_2" id="1" target="frame2" href="instruction_2.html">img</a>
            <a class="nextlink_3" id="2" target="frame2" href="instruction_3.html">img</a>
            <a class="nextlink_4" id="3" target="frame2" href="instruction_4.html">img</a>
            <a class="nextlink_5" id="4" target="frame2" href="instruction_5.html">img</a>
            <a id="5" target="frame2" href="instruction_6.html">img</a>
    </div>
    <div style="width:726px; float:left;">
        <iframe src="instruction_1.html" width="726" height="100%" scrolling="auto" frameborder="0" id="frame2"></iframe>
    </div>   
</div>

Any idea where I’m going astray?

Answer 1

Figured it out. Below is the code to deactivate the links in the list, step through a pre-determined, unordered sequence based on link ID and, on click, deactivate a link and activate the next in the sequence. The javascript:

<script>
    var linkInterceptor = function(event) {
    if($(event.target).hasClass("active")) {
    $('a').removeClass("active");

    // assume links have class="nextlink_##"
    var nextTarget = $(event.target).attr('class');
    var nextId = nextTarget.substr(9);
    $('#' + nextId).addClass("active");

    return true;
    } else {
    event.preventDefault();
    }
    };

    $('a').on('click', linkInterceptor);
</script>

And a sample of the final HTML:

    <div style="width:1024px; height:768px;">
    <div style="width:298px; height:708px; overflow-y: scroll; overflow-x:hidden; float:left; padding-bottom:-20px; margin-bottom:-20px;">
        <li><a class="nextlink_13" id="12" target="frame2" href="instruction_13.html">Name 1</a></li>
        <li><a class="nextlink_11" id="10" target="frame2" href="instruction_11.html">Name 2</a></li>
        <li><a class="nextlink_20" id="19" target="frame2" href="instruction_20.html">Name 3</a></li>
        <li><a class="nextlink_3" id="2" target="frame2" href="instruction_3.html">Name 4</a></li>
        <li><a class="nextlink_16" id="15" target="frame2" href="instruction_16.html">Name 5</a></li>
    </div>
    </div>

The list is 30 names long so I’ve truncated it above. To achieve the planned randomness, I just numbered the IDs based on the order we preferred.