Skip to content

Instantly share code, notes, and snippets.

@jbell0385
Created June 28, 2018 22:14
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save jbell0385/17a063ef0fdaa07172edc7403871abed to your computer and use it in GitHub Desktop.
Save jbell0385/17a063ef0fdaa07172edc7403871abed to your computer and use it in GitHub Desktop.
Module Completion Tracker
////////////////////////////////////////////////////////////////////////////////
// Create colored left borders on module items that indicate completion status//
////////////////////////////////////////////////////////////////////////////////
//Check to see if we're on the module page by looking for '.module-item-status-icon i'
$('.module-item-status-icon i').ready(function(){
//I was having problems with this code executing before the page fully loaded. document.ready doesn't even seem to work. Probably needs to be refactored
$(document).ready(()=>{
//to solve my code running before page finished loading problem I had to put in this bandaid. You may need to adjust the timeout or if you can refactor this that would be great.
setTimeout(()=>{
//grab each context module block that is on the modules page.
var contextModule = $(".context_module");
//loop through each module block that you have
$.each(contextModule, function() {
//Each 'item' inside a module block is identified by the class of .ig-row. Grab all those
var igRows = $(this).find(".ig-row");
var totalItems = igRows.length;
//Grabs the element that currently says "complete all item". We're going to change that
var requirementsMsg = $(this).find(".requirements_message");
var completedItems = 0;
//loop through each item in the module block. If it has a green check, then we add one to our completeItems
$.each(igRows, function(index, value) {
if ($(this).find("i.icon-check").css("display") === "inline-block") {
completedItems++;
//this is optional styling flair I added to the items in my module block. You can delete or edit this line
$(this).css("border-left", "3px solid #aebe37");
} else {
$(this).css("border-left", "3px solid #ebbab9");
}
})
//Change the "complete all items" to instead be a tracker with total items completed.
$(requirementsMsg).find("ul li").text(completedItems + "/" + totalItems);
})
},1000)
})
})
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment