Move "Mark as done" button below page

Move "Mark as done" button below page

by Elias B -
Number of replies: 7
Most of my courses are made up of pages with the content. Some of them can be quite long. In the workflow for the user it makes more sense, if they can read the page, mark it as done below the page and then navigate to the next page.

For our case it makes more sense to let users mark the activities manually. We have also received the Feedback, that many forget to mark it, which is why I wanted to ask, if and how it is possible to move/duplicate it below the page.

Thanks for your help
Average of ratings: -
In reply to Elias B

Re: Move "Mark as done" button below page

by Visvanath Ratnaweera -
Picture of Particularly helpful Moodlers Picture of Translators
"Mark as done" has a long history with ups and downs. If you tell us your Moodle version and the Theme used we can give you an idea of your options.

In reply to Visvanath Ratnaweera

Re: Move "Mark as done" button below page

by Elias B -
I'm using Edwiser Remui Version 4.1.9 with the Edwiser course format. The moodle version is 4.1.8 (Build: 20231222). PHP Version is PHP Version 8.1.22
In reply to Elias B

Re: Move "Mark as done" button below page

by Visvanath Ratnaweera -
Picture of Particularly helpful Moodlers Picture of Translators
The theme used changes the visuals strongly. You must decide which theme you are going to use. If Remui then you have to reach its developers.

This is how Moodle 4.1 LTS displays Mark as done in its default theme Boost:



If you go this path there are all sorts of CSS tricks circulating that adjust the visuals. Note that somewhere (4.3?) the default changed. I've lost touch. Hope somebody who is good at visuals come to help.
Average of ratings: Useful (2)
In reply to Visvanath Ratnaweera

Re: Move "Mark as done" button below page

by Elias B -
I already messaged the Edwiser support. This is their message: "As for the repositioning of the mark as a done button, we would like to inform you that it is a moodle feature and controlled by the moodle itself. We as a theme can only influence how it looks and appears, we cannot change the positioning of the option with CSS."

But perhaps I can ask again and insist on their help.



I've added a mockup  as an example. When opening the page material, the button should be below the content. This way the user doesn't have to scroll up again after reading longer pages

Is there any other forum which is more fitting?
In reply to Elias B

Re: Move "Mark as done" button below page

by Visvanath Ratnaweera -
Picture of Particularly helpful Moodlers Picture of Translators
Note that we are talking of two different places: I was thinking of the Mark as done on the course homepage, you are interested in the Mark as done button in the activity itself. Since I avoid the manual Mark as done, I don't know whether all the activities display it the same way. You see the reason in my screen-shot earlier. The button breaks the style of other "Done" switches - "Receive grade" in my sample screen-shot.

Personally I don't like the Mark as done in the activity itself, whether above or below, I think the student should have long enough memory to remember what he has just done when returned to the course homepage. I agree, if there need to be a button in the activity, it should be at the end. That is not only logical but the button at the top is also too tempting.

I am not the web design person, so I may be wrong. I could imagine that moving this button around needs major code changes, just CSS magic might not be enough. So tend to agree with the Edwiser support, until a CSS wizard proves me wrong.
wink
In reply to Elias B

Re: Move "Mark as done" button below page

by John Provasnik -
Picture of Particularly helpful Moodlers Picture of Testers
It's always best for consistency's sake to leave this at the top so all activities have the same look and feel, but I understand your concern about users forgetting to scroll back up and manually mark it as complete.... so, just for possibility's sake, this is possible to do with CSS. 

For the "Page" module, the Activity Completion Conditions (Mark as done button) is connected to the "Description" box -- this 'top section' sits above the page content section. CSS can be used to reverse the page content section and top section.... This means on all Page activity modules, if you choose to use the Description field then it will appear at the bottom along with the mark as complete button using very little code: 

.path-mod-page section#region-main {
    display: flex;
    flex-direction: column-reverse; 
}

Depending on your theme and Moodle version, you might have to also consider the page-to-page navigation that used to be located at the bottom of the page but either way, it's possible to do this with CSS, just might not look so clean. I've attached a before/after image. 
Attachment after.png
Attachment before.png
Average of ratings: Useful (2)