Your Community is getting an upgrade!
Read about our partnership with Higher Logic and how we will build the next generation of the Instructure Community.
This was one of my early works and before I learned how to package it to make it easy for people to use. I've repackaged it and made it act more like the other Canvancements I've written. The script still worked after these two years, so I didn't change it other than to make it easier to install and make sure it runs on the correct page.
Here are the quick install steps. It has been tested with Firefox and Chrome.
This script intentionally does not run on the course Home page. You'll need to go to the Modules page to use it.
When a user clicks on the Add Items to a module, the order of the pages is inconsistent. Some items are listed in order of most recent edit and others are listed alphabetically. This can make it difficult to find items. This post will show you how to add a script that will sort those lists alphabetically for you.
This issue may not be as popular as the one addressed by Sorting Rubrics Made Easy , but it will help demonstrate some of what can be done with Greasemonkey and injecting your own user scripts onto a page.
@Chris_Hofer created a feature request that managed to get a whole 4 votes in the three months it was open for voting. After that one had been archived, @epokryfki created a feature request that basically asked for the same thing. Deactivated user suggested the two of them collaborate and come up with a compelling description.
Here is a short 55 second video demonstrating the problem and the proposed solution.
The key to doing this is Greasemonkey, which is a Firefox add-on. For Chrome users, there is Tampermonkey. I haven't tested Tampermonkey myself, but the principles are the same.
Here is a short video on how to install Greasemonkey and start your first script.
Make sure you have enabled Greasemonkey. Then go to New User Script.
Hint: Greasemonkey will automatically attempt to use the name of the page you're on, so you might want to navigate to the proper page before you create it.
Complete the configuration form.
Then click OK and you'll be given an editor. Paste the code below into the editor. Note that you may want to start after the header so that you don't wipe out the work you just did.
Note, this code is also available as an attachment to this post.
// ==UserScript==
// @name Canvas Sort Module Add Item
// @namespace
https://people.richland.edu/james
// @description Alphabetically sort the Add Items to a Module lists
// @include
https://richland.instructure.com/courses/*/modules
// @include
https://richland.*.instructure.com/courses/*/modules
// @version 1
// @grant none
// ==/UserScript==
var itemTypes = [
'assignments',
'discussion_topics',
'wiki_pages',
'quizs'
];
for (var i = 0; i < itemTypes.length; i++) {
var sel = '#' + itemTypes[i] + '_select select.module_item_select';
if ($(sel + ' optgroup').length > 0) {
sel += ' optgroup';
}
console.log(sel);
$(sel).each(function () {
sortOptions($(this));
});
}
function sortOptions(j) {
var newRegex = new RegExp('^\\[ New');
var numRegex = new RegExp('^([^0-9]*)([0-9.]+)');
var options = $(j).children('option');
if (options.length > 0) {
options.sort(function (a, b) {
var atxt = a.text;
var btxt = b.text;
if (newRegex.test(atxt)) {
return - 1;
}
if (newRegex.test(btxt)) {
return 1;
}
var anum = numRegex.exec(atxt);
var bnum = numRegex.exec(btxt);
if (anum && bnum && anum[1] == bnum[1]) {
return parseFloat(anum[2]) > parseFloat(bnum[2]) ? 1 : - 1;
}
return atxt.localeCompare(btxt);
});
$(j).empty().append(options);
}
}
Then click Save and enjoy alphabetically sorted lists when you add items on the modules page.
If you need to edit the code and you're on one of the included pages, just open up the Greasemonkey menu and right click on the script name at the bottom. If you're not on that page, then you can go to Manage User Scripts and right click on the script there.
There are no additional JavaScript libraries needed to run this as jQuery comes with every page in Canvas.
Greasemonkey and User Scripts have the potential to provide interim solutions for a lot of feature requests. They allow you to do some things that would normally require access to the Global JavaScript file. One major benefit is that anyone can run user scripts, not just administrators. Another is that you can decide what you want to do, so if one instructor wants the items sorted alphabetically and another doesn't, then that's doable. With the Global JavaScript file, that's not an option.
You also get to manage the scripts separately rather than one large JavaScript file. If you need to include other libraries, that can usually be done by adding a single @require statement to the configuration in the heading. All GitHub hosted JavaScript files can be loaded through a content distribution network (CDN) so that you don't even have to host it yourself. And if you want to do something that requires a newer version of jQuery than the 1.7.2 that ships with Canvas, you can load that as well (usually this isn't needed).
The important thing to remember is that User Scripts do not run for anyone other than you and they only run on the pages you tell them to run on. That means that you cannot insert JavaScript that will do anything for anyone else, like embed a video or show a tweet. If you are asking a question like, "Can I use this so that the students will ..." the answer is "no!". But if you're designing a course, they can provide some added or improved functionality to make your workflow faster.
If you have Firefox sync enabled, you can sync your Greasemonkey scripts with your other computers.
You must be a registered user to add a comment. If you've already registered, sign in. Otherwise, register and sign in.
I'm James Jones. My full-time job is teaching mathematics at a community college, with an extra-duty assignment that involves Canvas. I hate repetitive tasks and will spend 13 hours writing a computer program to automate something that takes 5 minutes to do. This often benefits others in the form of Canvancements, which are my Canvas Enhancments that I freely contribute to the Canvas Community.
To interact with Panda Bot, our automated chatbot, you need to sign up or log in:
Sign InTo interact with Panda Bot, our automated chatbot, you need to sign up or log in:
Sign In