Here is an example of how you could use javascript buttons on a page.
Inside a info node on the page if you add the name of your function.
^mainpage()^
In a script node if you name the function the same and enter the code –
function mainpage()
{
var outputHTML = “”;
outputHTML += “<div><br class=’temp-br’/><table style=’width: 55%;’ align=’center’>”;
outputHTML += “<tbody><tr>”;
outputHTML += “<td>”;
outputHTML += “<button id=’btn1′ class=’btn’ style =’opacity: 0.8;’>Button 1</button>”;
outputHTML += “</td></tr></tbody></table>”;
outputHTML += “</div>”
return outputHTML;
}
Inside of the info node instruction section you can add in a style.
<style>
.btn {
color: white;
width: 275px;
background: #1b2c3e;
display: inline-block;
padding: 6px 12px;
margin-bottom: 0;
font-size: 16px;
font-weight: 400;
line-height: 1.42857143;
text-align: center;
white-space: nowrap;
vertical-align: middle;
horizontal-align: middle;
-ms-touch-action: manipulation;
touch-action: manipulation;
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
background-image: none;
border: 1px solid transparent;
border-radius: 4px;
margin: 4px;
}
.btn:hover{
background: #92C6D1;
}
</style>
Inside of the javascript tab of the button function –
$(document).ready(function(){
$(‘#forwardbutton’).hide();
$(‘#backbutton’).hide();
$(‘#section_nav’).hide();
$(‘#btn1’).click(function(){
$(‘#section_nav’).val(‘Button1’);
// $(‘#forwardbutton’).trigger(‘click’);
console.log(“btn1 script”);
});
});
This will hide the back and forward buttons on the page and once btn1 has been clicked will set an open variable called “Section_nav” to Button1 which then can be used with IF condition which will allow you to navigate the user around a app/survey/process without the need for the survey back/forward buttons.