Remove "Next" button from last page of module.

[je9xj]

I'm not sure if there is already a way to do this but it would be nice if the last page of the module instead of saying "Next" and going to a new module it said "Home" and took you back to the home page. I know you can create prerequisites for modules but for our purposes it doesn't matter what order they do the modules in as long as they all get done. I don't want students to just go through 3 modules and not realize what they have completed. 

[DannonMcg734]

I was looking for the same thing.  Did you ever get a solution?

[tpavlic]

Bump. Any progress on this? My guess is that we're stuck with a "Next" on every single page, regardless of whether it is at the end of a module.

[bcarpenter]

We're having the same issue with teachers who want to build their agendas into modules for organization, but are not having students work through the modules. Any way to turn it off?

[cholling]

it's not ideal, and doesn't remove the next button, but using a text header to "close" each module at least creates a speed bump for students to know they have concluded a module.

[michael_casselm]

Another bump for you, we have found it would be nice to hide both the "Previous" and "Next" buttons as we gamify our courses.

[ThisGuyRic]

Yes, please! I want!

[Lauren_Zatto]

I am also in favor of Canvas removing the "next" button at the end of a module. I want my students to know when they complete a module. I am currently adding a "page" at the end of each module which reads "You have completed Module X". However, I would like to see a way for a module to have closure so that my students are not working through a module and then all of a sudden enter the next module. Thank you in advance for addressing this matter 🙂

[jerry_nguyen]

Yes, it's possible with custom Javascript as follow:

if (window.location.href.match('module_item_id')) {
var currentURL = window.location.href;
    console.log("I'm in a module page");

	var moduleID_Reg = /(?:^|module_item_id)=(\d*?)(?:\D|$)/g; //Get Module ID from URL
    var moduleID_Result = moduleID_Reg.exec(window.location.href); //Get Module ID from URL
	var module_id = moduleID_Result[1]; //Get Module ID from URL
	var courseID = currentURL.match(/\/courses\/(\d+)/g); //Get Course ID
	console.log(module_id);

$.get('/api/v1'+ courseID + '/module_item_sequence?asset_type=ModuleItem&asset_id=' + module_id, function (response) { //Run API to get module position
        
	console.log(response.items[0].current.module_id); //Get current item Module number
	console.log(response.items[0].next.module_id); //Get next module number
	
	if (response.items[0].current.module_id != response.items[0].next.module_id ) { //If next module number is different then ....
	console.log("Last item of module")

		waitForElm('.module-sequence-footer-button--next').then((elm) => {
    console.log('Next button is available');
	$("span[class='module-sequence-footer-button--next']").remove(); //remove next button
});
		
	}
	

});


}

function waitForElm(selector) {
    return new Promise(resolve => {
        if (document.querySelector(selector)) {
            return resolve(document.querySelector(selector));
        }

        const observer = new MutationObserver(mutations => {
            if (document.querySelector(selector)) {
                resolve(document.querySelector(selector));
                observer.disconnect();
            }
        });

        observer.observe(document.body, {
            childList: true,
            subtree: true
        });
    });
}

[jerry_nguyen]

@michael_casselm  you can simply use custom CSS

span.module-sequence-footer-button--previous, span.module-sequence-footer-button--next {
    display: none;
}

[sjjorstad]

There needs to be an easy way to remove the next button from the last page of a module.

[rwollner]

@jerry_nguyen Where do you apply that code? On the page itself? I'm also unclear which parts of your code to fill in, and with what. Should 'module_item-id' be replaced with just the number or 'module_itemid=number'? What should go in place of "I'm in a module page"?

Thank you!

[jerry_nguyen]

@rwollner 

You don't need to change anything in my code. Youll need to upload those codes to the theme editor, refer to this article for instructions: https://community.canvaslms.com/t5/Admin-Guide/How-do-I-upload-custom-JavaScript-and-CSS-files-to-an...

[rwollner]

@jerry_nguyen Thank you! I thought that applied to CSS but not HTML

[jerry_nguyen]

@rwollner 

If you want to remove the button completely then just need to use the CSS code. If you want to remove the "Next" button at the last item of each Module then use the Javascript code

[sjjorstad]

@jerry_nguyen 

Thanks so much for your contributions to this conversation!

I used to be able to hide the "next" and "previous" buttons by using the Cidi Labs DesignPLUS tools interface outlined here: Hidden Gems. I realize no everyone may have access to these tools, however. The tools are used for building course shells styling content without having to know enormous amounts of HTML (though it helps to know HTML).

I would just go to the HTML attributes and add a class to an element:

1. kl_hide_next  (to hide only the next button), or 
2. kl_hide_previous (to hide only the previous button), or 
3. kl_hide_next kl_hide_previous (to hide both), but it no longer works.

I am apparently not the only one having this problem, so I submitted a comment and included the HTML markup.

For those interested, if your institution does have the Cidi Labs DesignPLUS tools, you can view the conversation on Implementing Hidden Gems from the Cidi Labs Support Center here.

Sue

[Wimpress]

Apparently, this is still a thing.  Why isn't there a way to say "this is the end of the module", so there's no next button shown???

[JD_Morkel]

We have the same request, namely the ability to end a module and the ability to link it back to the home page. 

[WarwickVonHagen]

@jerry_nguyen I have copied and pasted the JavaScript you provided and applied it to the theme of our Sub-Account within our CANVAS, I am unsure if I made an error as the Next Button is still visible at the end of the module.

The CSS works 100%, but the JavaScript is giving me the middle finger and not working with CANVAS. Any Suggestions?

[jerry_nguyen]

@WarwickVonHagen 

I just updated the script above,it should work now.

[WarwickVonHagen]

@jerry_nguyen It works 😄

Thank you so much