We are starting to investigate js hack and speaking to other institutions and searching the community site I wondered if the community wanted to share hacks they have created or share information on potential hacks?
Oscelot project:
OSCELOT Projects > Projects > Javascript Hacks for Blackboard > Home
Myles,
I am a huge fan of this tool for incremental workarounds and minor modifications, but be aware of a couple things when considering what to deploy. Because the tool leverages an interface (RenderingHook) used only in the original experience browser display, "hacks" don't work in the native, mobile app experience and can't be applied to any of the Ultra-fied user interfaces.
Especially if you are implementing some changes inside courses, always best to test the impact new hacks might have in the apps, and all hacks need to be tested across various browsers. I also advise administrators to have a contingency plan in the event that updates to Learn prevent certain hacks - or even the B2 - from working as expected. Implementing mission critical customizations to Learn via JavaScript Hacks is a risky proposition.
That said, I find it most helpful in tweaking CSS and application text where implementing a custom theme or language pack would be over-kill.
Jeff
I had authored a large number of JSHacks back at the University of the Sunshine Coast, however since moving here I've only really had the chance to build one; a simple password complexity check utility for inbuilt Blackboard accounts. The 'Submit' button is only activated when the user's password meets the defined criteria.
The hack allows for a (Edit: user) SysAdmin to configure what they would like to enforce:
I've been very outspoken in the past about using hacks to do things like this, my belief is that a hack should only really provide a vanity fix and this is due to the fact they are very easy to workaround, this one is the same, but I'm not going to publish how . My hope is to do something more sustainable or more intelligent going forward to fill this hole (the fact that someone can enter a single character as a password for a Bb inbuilt account and this is treated as OK...).
Overall, this is a first release and there's still a lot of room for improvement, but an urgent request surfaced that needed a response and this is what I could spit out in a very tight time-frame.
Ashley, thanks for sharing this. For a bit of added security, you might also add this code to the login page to enforce compliance at login.
Ashley, this is some neat work! However, modern password security recommends against mandating special characters and other such composition rules. I know in this case you're probably bound by uni policy, but you might want to pass this blog post describing modern authentication recommendations around the powers-that-be: https://www.troyhunt.com/passwords-evolved-authentication-guidance-for-the-modern-era/
/soapbox
Thanks, David, for the resource. This is the type of easy to understand, but comprehensive explanation of contemporary thinking about password management that I have been seeking.
We use JS Hacks to inject a button into the Full Grade center for Faculty to allow them to send an Early Alert, or "ReachOut!", on at risk students and SSO into our Student Success Plan system. Feel free to use for your institution with some modification
This JS Hack uses some velocity templating injection that executes prior to injection - THAT'S WITCHCRAFT!!!! (Be careful! )
Particularly you will need to modify the Snippet portion for the following items:
var BASE_URL = 'https://some-prod-url.edu/ssp-platform/sso'; //Production URL
//var BASE_URL = 'https://some-dev-url.edu/ssp-platform/sso'; //Development URL
var HASH_KEY = 'SOMESECRETKEYHERE'; //MD5 Hash Key - dirty way of doing it
var BTN_TEXT = '<strong>ReachOut!</strong>'; //Name for Button
var BTN_ICON = '${resourcePath}/river_support.png'; //Button icon
Hope this helps someone!
Hah!
That is awesome, thank you.
Hi Jonathan Hart,
This is indeed a very cool hack. I am concerned about the security though. As your MD5 secret is rendered into the page, anyone can generate the hash for any username.
Honestly, I think this would be better wrapped up in it's own building block. If you are interested in attempting this, I've got documentation and a sample project on the JS Hack wiki:
http://projects.oscelot.org/gf/project/jshack/wiki/?pagename=renderinghook
If you put this into your own building block, you can calculate the hash server-side and then render it into the page, rather than publishing the secret and having the user's client generate the hash.
Cheers,
Shane.
hi guys,
I shared on the 'Show us your Blackboard' thread about the Content Layout Tool we built (via JSHack):
Very easy to customise for your purposes.
This was Ashley Fisher's idea and a good one - you can see how it works here:
I'll be doing a webinar on all the updates we've done to Blackboard over the past two years (including some JSHack hacks I've built) ->
You can register here: http://webinars.blackboard.com/EMEA_overview
WEBINAR:
Enhancing the User Experience: A Practical Guide to Customising Your Learn Interface
Tuesday 15th August, 2017 - 10:00am – 11:00am BST | GMT +1
Would you like to enhance the look and feel of your Blackboard environment and really make it pop? It may be that you’ve been reluctant to make any changes for fear that upgrades will lose your changes. This webinar will help you understand how to make significant visual changes to your Blackboard interface, so you can align it to your corporate theme or generally make the interface more appealing to your users.
Tim Jensen from the University of the Sunshine Coast in Australia will demonstrate why they made those changes, how and what the impact has been on the students and their use of the environment.
That's terrific, thanks Tim.
I'll see whether my functional support team here are interested.
Edit: Tim, I am also a massive fan of the assignment declaration hack that was built (I'm fairly sure that one is still almost entirely mine ), I would implore you to share an overview of this. The assignment 'workflow' at USC I imagine would be a very interesting concept for the audience in this community.
Edit 2: That hack also shows in practice that USC are thinking about the concern raised above, "what if the hacks do not run?".
That's a good point. I'll just have to remember - its been a while looking at that one.
We have a hack that opens up the text editor and then hides all of the buttons except the mashups when a student makes a video submissions using Medial. Happy to share if anyone wants it..
I am having a problem with it this year, it is throwing a JEXL error in the logs however it is still working.
org.oscelot.jshack.model.restrictions.AdvancedRestriction.setExpression@45![0,21]: 'context.content.Title == 'Video Submission Area-Final';' inaccessible or unknown property context
I am using an advanced expression to limit it to only certain named assessment areas.
context.content.Title == "Video Submission Area-Final"
Can anyone advice on a better solution or how to rewrite to avoid the error, ideally i wanted it to be any submission areas including the word video but i couldn't get it to work
Hi Matthew Holden,
The errors would be getting thrown on pages that do not have "content" in the context. This is the reason it is still working. On a page that has "content" the restriction can verify if the "Title" is correct. On pages that don't have "content" an exception is thrown and nothing is injected.
You should update your restriction to first check if "content" is set in the context:
context.content != null && context.content.Title == 'Video Submission Area-Final'
If you want to match all content items with the word "video" in it, I'd use JEXL's "In or Match" operator =~. This compares the string using a regular expression. Note, as regex is case sensitive, I've had to specify each letter can be either capital or lowercase.
context.content != null && context.content.Title =~ '.*[vV][iI][dD][eE][oO].*'
I've not actually had a chance to test this, but it should work.
Cheers,
Shane.
Hi Shane
Thanks for this. "context.content != null" didn't work however now i understand why the error is occurring i added an additional url restriction limiting it to only assignments (which will have context.content.title value) and the errors seem to have stopped.
The extra code you gave to search anywhere in the string for the value "video" works.
Many thanks
Mat
I've just gone back to look at the Assignment Declaration JS Hack you wrote Ashley Fisher.
You might need to fill in the gaps Ash, but the idea is that the hack displays an 'Assignment declaration' message with 'I agree' button on the item before entering the assignment submission area.
It does this by searching the page for an item that has:
We set these up at the beginning of a Course offering for assignments. The hack finds these items, then display the 'declaration' message and displays the 'mark as complete' checkbox as a button with 'I agree'.
In addition to this, the update I made was to insert a different message inside the DIV (when in EDIT mode) ie. Academics view. We had some issues with Academics ignoring or deleting the declaration DIV and breaking the 'Declaration' code.
What I did was create a warning message in HTML, put it in a content collection, and then display inside the DIV with ID via an iframe:
<div id="usc-assignment-declaration-item" style="display: none;">
<iframe width="100%" height="1950" src="/webdav/HACK_warning_message.html"></iframe>
</div>
Hey Tim,
Happy to, assignment stuff at USC relies on a student ticking "mark reviewed" on a piece of content (a notice where the student acknowledges that this is all their work) before the assignment submission area is open to them. This was in place for many years, but there were always questions from students as the "mark reviewed" was a strange phrase to use for an acknowledgement.
What we created was a hack that scanned for particulars in pieces of content on the page and if the piece of content appeared to be a declaration, it would kick off. The first action was to build a collapsible container to hold the declaration text, this can be open again to allow the student/user to re-read the declaration they have signed. The second part was to hide the "mark reviewed" button, and replace it with one named "I Agree" (this can be localised in the hack). The hiding of the mark reviewed also gave us an unintended benefit, a student could now not 'untick' the declaration. Now that they have signed that they have read and understood the terms and conditions (what constitutes academic misconduct, etc), they can submit their work.
There is also a second component embedded in this hack (or was), when I originally authored it, we were also providing 'just-in-time' assistance for students on their actual submissions, forgive the terrible image here, this is all I still have of this hack.
Because everything is controlled from here, the way that every assignment is configured at USC is consistent and incredibly easy to update, consistency is a major topic that Tim kept repeating in yesterday's webinar, it is core to how USC provides to its students. In the event that the hack no-longer works or fails to execute for a user, there are things in place so that a student still receives the information they need (if memory serves me, similar content, iframed and served out of the content collection), the only thing that is lacking from the declaration component then is that the 'mark reviewed' button is there instead of the "I Agree".
Hi Myles,
We use the JS Hacks for several operations:
1. Injecting our student portal navigation in to the to frame, for consistency of the student experience.
2. Modifying CSS for 3rd party plugins that don't render 100% correctly.
3. Applying modified CSS to our headers on each of our Blackboard environments - Production, Staging & Test. This provides a quick visual reference of which server your working on, which prevents accidents from happening!
Hope that's useful
John
Hi there everyone!
I have created a hack to solve a problem some of my clients are finding annoying in the pages where drag & drop is active: there is no indication that the send button was pressed, and no way to know if your file is loading.
So I made a javaScript hack that makes visible an animated gif that exists in the page but it is hidden. It shows when the "send" button is clicked, so at least you get a feeling that something happened. It is not a progress bar, which would be great, but just a way to say to the user "yes, it is clicked and loading".
Release First release · eLearningMedia/Progress-jsHack · GitHub
At the moment it works in the uplad assignment page, the upload file in course files/content and in the element creation page. If there is more drag & drop locations where it does not work, let me know and I'll add them to the code.
My hope is to find time (haha) and change that little gif for a proper progress bar, but for now this is all I had time to create.
Hope is userful for someone!
Ester
Hey All,
I just put up a quick blog post showing a small hack I threw together to show our GDPR (or AVG I've now been told I should be quoting internally) team what we could possibly do in Blackboard to be transparent with our users.
Shameless link: JSHack - GDPR, User Data and Blackboard
The above is awesome!
We have created a few hacks for the follwowing:
Save as Draft for assignments is causing student confusion when submitting assignments > JS Hack removes Saves as Draft Button
Assignment grading options and hidden by defaullt. This can lead to user confusion over how to access a rubric, comment box etc > JS Hack expands ! the assignment grading options by default
Group assignment name for delegated grading is cropping the group name making it unmanagable > JS Hack expands the group name dialogue box
Happy to share hack code for those that are interested
Not a JSHack package, but I did use some Javascript hacky sort of thing on the login page, to make login page announcements a bit more tailored to users' individual preferences in a bi/multilingual institution.
These screenshots are from a login page and theme modernisation plan to coincide with an end-of-year upgrade, the current login page is nothing like this.
I structure the announcements for the login page with two div elements, ID'd appropriately (div#uva-announcement-nl & div#uva-announcement-en). Inside of those is an H2 element, containing the text string I want shown as the 'localised' header on the page.
| Announcement Content | Login Page - Chrome set to EN | Login Page - Chrome set to NL |
|---|---|---|
 |  |  |
How it's working:
Currently I'm only looking at the language the user has selected in their browser, as this is a stepping stone for another addition I'm building, if the user has Blackboard's language set to English, but they have their browser set to Dutch (or vice-versa), I would like to inform them that they are able to change the language pack of Blackboard, the default language pack for us is English.
Blackboard presents announcements on the login page as an unordered list, in a div named "loginAnnouncements", I'm searching that element for all <li/> elements contained within and generating my own HTML based on the contents of these list elements and the language the user has selected.
If anyone wants to use what I've done, feel free, here's the current implementation, I'm calling replaceAnnouncementHeaders() at the start of the login page's <script> block.
Help
Privacy
Behind the Blackboard
Blackboard.com
function replaceAnnouncementHeaders() {
try {
// Grab the current announcements section.
var announcements = document.getElementById('loginAnnouncements');
// Extract all list elements from the announcements section.
var lis = announcements.querySelectorAll('li');
// Not used yet, an array containing references to the custom announcements
var customAnnouncements = [];
for(var x=0; x<lis.length; x++) {
var newOne = buildAnnouncement(lis[x]);
// Adds or removes the 'active' class from my announcements. The active class is responsible for display:none or display:block on the contents, as well as the red/black colouring of the header.
newOne.addEventListener('click', function() {
// If the clicked element is already active, remove the class/shrink this one.
if(this.classList.contains('active')) {
this.classList.remove('active');
} else {
// If there's already an active announcement, remove the active class.
if(this.parentNode.querySelector('.active')) {
this.parentNode.querySelector('.active').classList.remove('active');
}
// Finally, add the class.
this.classList.add('active');
}
})
if(x==0) {
// Default the first announcement to active on page load.
newOne.classList.add('active');
}
customAnnouncements.push(newOne); // Add the reference to that unused array.
announcements.appendChild(newOne); // Add this new custom announcement to the page.
}
lis = [];
} catch (ex) {
console.log ("Exception thrown: " + ex);
}
}
function buildAnnouncement(li) {
// Create the announcement parent div.
var x = document.createElement('div');
x.id = 'uva-custom-announcement';
// Create the header
var header = document.createElement('H3');
// Create the content/information section
var information = document.createElement('div');
// Check whether the user has the Dutch language set in their browser (tested in Chrome so far).
if(navigator.language.toLowerCase().indexOf('nl')>-1) {
if(li.querySelector('#uva-announcement-nl')) {
// If the announcement is built to my imposed standard (IE: an element with the ID uva-announcement-nl), fill the information panel with the entire contents of the announcement.
information.innerHTML = li.querySelector('#uva-announcement-nl').innerHTML;
// Set the header to that of the H2 element (H2 may change to something less used for a production release).
header.innerHTML = li.querySelector('#uva-announcement-nl').querySelector('h2').innerHTML;
// Finally, remove the H2 element from the contents before returning this custom announcement
information.removeChild(information.querySelector('H2'));
} else {
// Otherwise, I haven't been able to find the element with the ID, default to showing the old announcement, just as it was created.
information.innerHTML = li.querySelector('div').innerHTML;
header.innerHTML = li.querySelector('strong').innerHTML;
}
} else if (li.querySelector('#uva-announcement-en')) {
// The user has something other than Dutch selected in the browser, try to find the English announcement content.
information.innerHTML = li.querySelector('#uva-announcement-en').innerHTML;
header.innerHTML = li.querySelector('#uva-announcement-en').querySelector('h2').innerHTML;
information.removeChild(information.querySelector('H2'));
} else {
// Otherwise, I haven't been able to find the element with the ID, default to showing the old announcement, just as it was created.
information.innerHTML = li.querySelector('div').innerHTML;
header.innerHTML = li.querySelector('strong').innerHTML;
}
// Set an ID on the content.
information.id = 'uva-custom-announcement-content';
x.appendChild(header);
x.appendChild(information);
// Send the constructed element back to the calling function.
return x;
}
These are some neat uses for jsHacks. Here are some of our home-grown ones:
Course Copy Restrictions
We allow some faculty to copy courses, but not all. Unfortunately, we only have one role coming out of our ERP. I use jsHacks to hide course copy from those faculty who are not permitted to copy courses.
Stopping Multimedia Uploads
I have a jsHack that prohibits (but doesn't entirely prevent) faculty from uploading multimedia that should be going into Kaltura. They get a lightbox message with directions on uploading properly and then the submit button on the content is deactivated so they cannot create their Announcements or content items until the offending attachment or embed is removed. An email then goes to instructional tech support so they can follow-up with the violator to ensure it is done correctly. It isn't fool-proof, but it stops 99% of the uploads which in SaaS is a good thing.
360 View and XID Column in Content Collection
This one appends a column to the file listing in any part of the content collection which lists the XID and direct link to the 360 View. Saves countless hours.
Tutoring Link
We placed a LTI link to tutoring in the breadcrumb bar (next to Edit Mode link) in every course so students can access it from any part of the course.
Shortcuts in System Admin
We added form buttons in Sys Admin > Courses to allow us to check all applicable course IDs and then open either all their Grade Centers, or Course Files, or Enrollments in new tabs. Same thing for Users, but to Edit (for adding new Institution Roles) or list of Enrollments.
Thanks!
Heather
Hi Heather!
For "Stopping Multimedia Uploads" how do you send an email?
Hi Jeff!
An AJAX post in the jsHack to an external sub-domained PHP script. Surprisingly works pretty well.
Thanks!
Heather
Heather,
I'm really interested in the 360 View and XID Column in Content Collection jshack you use. Is there anyway you could share it? That would save me a lot of time.
Just emailed it over. Thanks!
Hi Heather Crites,
I'm curious what you're using for injection point to get new content within Sys Admin?
Hi Chris!
We're using Top Frame and then restricting the URL and the System Role. In the case of the extra buttons we added to Course Manager, our URL restricted field looks like this:
(.*/webapps/blackboard/execute/courseManager|.*/webapps/blackboard/course/course_manager\.jsp)
I hope this helps! Thanks!
Heather
One Hack to fix:
Course Message Inbox Results in a Contact Administrator Error
https://blackboard.secure.force.com/publickbarticleview?id=kA3390000008bO4
<script type="text/javascript">
Event.observe(document,"dom:loaded", function() {
document.getElementsByName("bottom_Enviar")[0].onclick = function() {if(encodeURI(document.getElementById('attach_f_attachmentName').innerHTML).length > 220) { window.alert('The name of the attached document is too long. Please modify the name avoiding using more than 220 characters.'); return(false); } else { return(true); }};
});
</script>
Take care with de Name (bottom_Enviar) of your send botton.
I think it's a pretty broad slate. We used it to create a custom footer with some dynamic content. We also use it to hide some things that we don't otherwise have any control over.