This article describes how to prevent navigation for a specified duration in AskiaDesign for web screens by using JavaScript. This can be a useful feature to prevent respondents from speeding through screens without really taking the time to read the question and provide a considered response.

Legacy Generated Screens (no ADP):

To hide the next button, add the following line to the properties of the next button

id="cmdNext" style="visibility:hidden;"

To hide the previous button, add the following line to the properties of the previous button

id="cmdPrevious" style="display:none;" 

JavaScript to add on the page:

<script type="text/javascript">

function addEvent(elem, event, fn) {
    // allow the passing of an element id string instead of the DOM elem
    if (typeof elem === "string") {
        elem = document.getElementById(elem);
    }

    function listenHandler(e) {
        var ret = fn.apply(this, arguments);
        if (ret === false) {
            e.stopPropagation();
            e.preventDefault();
        }
        return(ret);
    }

    function attachHandler() {
        // normalize the target of the event
        window.event.target = window.event.srcElement;
        // make sure the event is passed to the fn also so that works the same too
        // set the this pointer same as addEventListener when fn is called
        var ret = fn.call(elem, window.event);
        // support an optional return false to be cancel propagation and prevent default handling
        // like jQuery does
        if (ret === false) {
            window.event.returnValue = false;
            window.event.cancelBubble = true;
        }
        return(ret);
    }

    if (elem.addEventListener) {
        elem.addEventListener(event, listenHandler, false);
    } else {
        elem.attachEvent("on" + event, attachHandler);
    }
}

function enterKey(e) {
    if (!e) {
        e = window.event;  // Get event details for IE
        e.which = e.keyCode; // assign which property (so rest of the code works using e.which)
    }
    var elt = (e.target) ? e.target : e.srcElement;
    var key = e.which || e.keyCode;
    if (key == 13 && elt.tagName !== "TEXTAREA" && elt.type !== "submit") {
        return false;
    }
}
NavigatorHandler.keydown = function(e){
    var event = e;
    enterKey(event);
    return true;
}
var elem = document.documentElement || document.body;
addEvent(elem,"keydown",enterKey);

var ONE_SECOND=1000;            //One second in millisecond
var ONE_MINUTE=ONE_SECOND * 60; //One minute in millisecond
var m_IsPageUnLocked=false;     //Indicates that the page is unlocked (locked by default)

///Display the navigation buttons
function showNavigationButtons(){
    //Unlock the page
    m_IsPageUnLocked=true;
    //Display the button next
    document.getElementById("cmdNext").style.visibility="visible";
    //If the button previous was hide removes the comments
    //Display the button previous
    //document.getElementById("cmdPrevious").style.visibility="visible";
}

function verifySubmit(e){
    if (!e)e=window.event;
    e.returnValue=m_IsPageUnLocked;
    return m_IsPageUnLocked;
}

//Start the timer to wait (30seconds)
//You can change the second argument of call (ONE_SECOND * 30) to change the time to wait.
//You can also use the ONE_MINUTE * n to wait some minutes
setTimeout("showNavigationButtons();", ONE_SECOND * 30);
//Attach the submit event on the document to prevent use of the enter key
document.documentElement.onsubmit=verifySubmit;
</script>

ADP (Askia Design Page) Generated Screens:

Since screen generation settings get overwritten by ADPs, the methodology and script to hide the navigation buttons differs slightly depending on which screen generation process is used. Two scenarios will be shown, one to hide the Next button for 5 seconds only, and the second showing how to hide both Next and Previous buttons for 5 seconds.

Hide 'Next' Button Only:

Paste the following CSS script as a label on the desired screen to hide the Next button:

<style> input[name="Next"] { visibility:hidden;} </style>

Paste the following Javascript as a label on the screen to remove the "visibility:hidden" attribute after 5 seconds:

<script type="text/javascript">

function addEvent(elem, event, fn) {
// allow the passing of an element id string instead of the DOM elem
if (typeof elem === "string") {
elem = document.getElementsByName(elem)[0];
}

function listenHandler(e) {
var ret = fn.apply(this, arguments);
if (ret === false) {
e.stopPropagation();
e.preventDefault();
}
return(ret);
}

function attachHandler() {
// normalize the target of the event
window.event.target = window.event.srcElement;
// make sure the event is passed to the fn also so that works the same too
// set the this pointer same as addEventListener when fn is called
var ret = fn.call(elem, window.event);
// support an optional return false to be cancel propagation and prevent default handling
// like jQuery does
if (ret === false) {
window.event.returnValue = false;
window.event.cancelBubble = true;
}
return(ret);
}

if (elem.addEventListener) {
elem.addEventListener(event, listenHandler, false);
} else {
elem.attachEvent("on" + event, attachHandler);
}
}

function enterKey(e) {
if (!e) {
e = window.event; // Get event details for IE
e.which = e.keyCode; // assign which property (so rest of the code works using e.which)
}
var elt = (e.target) ? e.target : e.srcElement;
var key = e.which || e.keyCode;
if (key == 13 && elt.tagName !== "TEXTAREA" && elt.type !== "submit") {
return false;
}
}
NavigatorHandler.keydown = function(e){
var event = e;
enterKey(event);
return true;
}
var elem = document.documentElement || document.body;
addEvent(elem,"keydown",enterKey);

var ONE_SECOND=1000; //One second in millisecond
var ONE_MINUTE=ONE_SECOND * 60; //One minute in millisecond
var m_IsPageUnLocked=false; //Indicates that the page is unlocked (locked by default)

///Display the navigation buttons
function showNavigationButtons(){
//Unlock the page
m_IsPageUnLocked=true;
//Display the button next
document.getElementsByName("Next")[0].style.visibility="visible";
//If the button previous was hide removes the comments
//Display the button previous
//document.getElementsByName("navigation")[0].style.visibility="visible";
}

function verifySubmit(e){
if (!e)e=window.event;
e.returnValue=m_IsPageUnLocked;
return m_IsPageUnLocked;
}

//Start the timer to wait (5seconds)
//You can change the second argument of call (ONE_SECOND * 30) to change the time to wait.
//You can also use the ONE_MINUTE * n to wait some minutes
setTimeout("showNavigationButtons();", ONE_SECOND * 5);
//Attach the submit event on the document to prevent use of the enter key
document.documentElement.onsubmit=verifySubmit;
</script>

Hide 'Previous' & 'Next' Buttons:

Paste the following CSS script as a label on the desired screen to hide both navigation buttons:

<style> .navigation { visibility:hidden;} </style>

Paste the following Javascript as a label on the desired screen to remove the "visibility:hidden" attribute after 5 seconds:

<script type="text/javascript">

function addEvent(elem, event, fn) {
// allow the passing of an element id string instead of the DOM elem
if (typeof elem === "string") {
elem = document.getElementsByName(elem)[0];
}

function listenHandler(e) {
var ret = fn.apply(this, arguments);
if (ret === false) {
e.stopPropagation();
e.preventDefault();
}
return(ret);
}

function attachHandler() {
// normalize the target of the event
window.event.target = window.event.srcElement;
// make sure the event is passed to the fn also so that works the same too
// set the this pointer same as addEventListener when fn is called
var ret = fn.call(elem, window.event);
// support an optional return false to be cancel propagation and prevent default handling
// like jQuery does
if (ret === false) {
window.event.returnValue = false;
window.event.cancelBubble = true;
}
return(ret);
}

if (elem.addEventListener) {
elem.addEventListener(event, listenHandler, false);
} else {
elem.attachEvent("on" + event, attachHandler);
}
}

function enterKey(e) {
if (!e) {
e = window.event; // Get event details for IE
e.which = e.keyCode; // assign which property (so rest of the code works using e.which)
}
var elt = (e.target) ? e.target : e.srcElement;
var key = e.which || e.keyCode;
if (key == 13 && elt.tagName !== "TEXTAREA" && elt.type !== "submit") {
return false;
}
}
NavigatorHandler.keydown = function(e){
var event = e;
enterKey(event);
return true;
}
var elem = document.documentElement || document.body;
addEvent(elem,"keydown",enterKey);

var ONE_SECOND=1000; //One second in millisecond
var ONE_MINUTE=ONE_SECOND * 60; //One minute in millisecond
var m_IsPageUnLocked=false; //Indicates that the page is unlocked (locked by default)

///Display the navigation buttons
function showNavigationButtons(){
//Unlock the page
m_IsPageUnLocked=true;
//Display the button next
document.getElementsByClassName("navigation")[0].style.visibility="visible";
//If the button previous was hide removes the comments
//Display the button previous
//document.getElementsByName("navigation")[0].style.visibility="visible";
}

function verifySubmit(e){
if (!e)e=window.event;
e.returnValue=m_IsPageUnLocked;
return m_IsPageUnLocked;
}

//Start the timer to wait (5seconds)
//You can change the second argument of call (ONE_SECOND * 30) to change the time to wait.
//You can also use the ONE_MINUTE * n to wait some minutes
setTimeout("showNavigationButtons();", ONE_SECOND * 5);
//Attach the submit event on the document to prevent use of the enter key
document.documentElement.onsubmit=verifySubmit;
</script>