Move Start Course button?

Feb 11, 2020

In Rise, is it possible to move the Start Course button to immediately below the introductory course text? I'm certain learners are starting the course before reading this important course info. 

35 Replies
Molly Kamper

Jumping in to the fray to add that the ability to switch the positions of the Logo and Start buttons would be helpful. We'd like our courses branded with our logo and the current position of the start button is prime real estate for branding. As so many have said - the introductory content is useless if the interface encourages a quick click to get started. What part of the UI gives any indication that there might be useful content on the page below the start button? It is just a waste of everybody's time to put any content on the cover page without the ability to put content above the start button or at the very least a UI that lets the user know that scrolling will give more info. Very disappointed that this issue is pre-pandemic and still hasn't been solved.  

Phil Foss

Hi Kelly thanks- I missed your prev message, notifications on here seem to be sporadic. But due to your compliment, I will make a video and provide the code. Are you ready to void your warranty? We're about to hot rod your SCORM export, the process is highly dangerous, and unsupported by Articulate.

Tim St. Clair

The degree of customisation of the start page depends on how you deploy the course. If you're using Reach or Review, then you're pretty much out of luck, but if you publish to a file (scorm, cmi5, web, etc) then you get access to a zip file which contains the `index.html` file which draws everything.

I have a bit of javascript that I can edit in to the end of the index.html file (just before where it says '</body>') which, depending on the navigation theme you are using, can move the start button to below the menu when the course first loads.

<script>
window.addEventListener("DOMContentLoaded", () => {
let_interval;
functioncheckAndMoveStartButton() {
conststartButton = document.querySelector('.cover__header-content-action-wrapper');
if (startButton) {
constdest = document.querySelector('.cover__details-content');
if (dest) {
dest.insertAdjacentElement('afterend', startButton);
startButton.style.marginTop = '5rem';
}
clearInterval(_interval);
}
}
_interval = setInterval(checkAndMoveStartButton, 100);
})
</script>

 

That can be enough as it ensure that at least they scroll down past the information area looking for the start button, so there's an increased chance any of that information might get read.

It does seem like asking for any changes to Rise is shouting to the void - so we have to come up with creative solutions for them.

p.s. I made a course some time ago describing how to customise the outputs in a Rise published course. It's hosted on my personal Moodle site. https://moodle.frumbert.org/course/view.php?id=7 - When it asks you to log in, just press 'Log in as guest'.

The course also goes into modifying the course data if you're into that, and talks about how to replace embedded iframes with locally sourced content - after I made that course, I ended up building a tool for that too - https://www.frumbert.org/risefix/index.php. That's a bit beyond the original quesiton on this post yet could be tangentially handy to someone :)

Phil Foss

Hi Tim I had to make a couple mods to make your script work, the js was not formatted correctly in your example and it throws a js error in my browser. But after getting it work, it's not a perfect solution. If you click back onto the cover screen from a lesson, the start button has returned to it's default position again. But the good news is I have a css-only solution, will post here soon with the code.