Edit

Scroll XML page from TOD manual task using JavaScript

This page describes a solution for Manual Task with the Grid answer type that contains the page number which is required to scroll XML content using this page number.

Here is the preview from Manual Task that contains a link with page number which is necessary to click to get the page scrolled. For example, if a user makes a click on the page 5 link, the content is getting scrolled to page 6 automatically.

The Grid answer type contains the following default values in the JSON format:

{
"unknown_document_type_json": [{
"document_link": "<a href='#' class='linkSelectorFromGrid' tabindex='1'>page 1</a>",
"page_number": "1",
"document_type": "Cargo manifest"
}, {
"document_link": "<a href='#' class='linkSelectorFromGrid' tabindex='2'>page 2</a>",
"page_number": "2",
"document_type": "Cargo manifest"
}, {
"document_link": "<a href='#' class='linkSelectorFromGrid' tabindex='3'>page 3</a>",
"page_number": "3",
"document_type": "Cargo manifest"
}, {
"document_link": "<a href='#' class='linkSelectorFromGrid' tabindex='4'>page 4</a>",
"page_number": "4",
"document_type": "Cargo manifest"
}, {
"document_link": "<a href='#' class='linkSelectorFromGrid' tabindex='5'>page 5</a>",
"page_number": "5",
"document_type": "Airway Bill"
}, {
"document_link": "<a href='#' class='linkSelectorFromGrid' tabindex='6'>page 6</a>",
"page_number": "6",
"document_type": "Airway Bill"
}]
}

 <script type="text/javascript">
  
   function goToByScroll(tabIndex, speed){
        var selector =".TodApp_wrapper div[data-current-page=\"" + tabIndex + "\"]";
        $('html').animate({scrollTop: $('.TodApp_wrapper').offset().top},speed);
        var scrollTo =  $(selector).position().top;
        $('.TodApp_wrapper').animate({scrollTop:scrollTo},speed);
    }
    
 $(window).load(function () {
    $('.linkSelectorFromGrid').each(function( i ) {
         $(this).click(function() { 
            event.preventDefault();
            goToByScroll("1",'fast');
            setTimeout(() => { goToByScroll($(this).attr("tabindex"),'slow'); }, 500);
        });
    });
 });
    
</script>
  

The TOD IE manual task contains the following settings for the GRID answer type.