How to add a custom button with custom functionality in course Activity/Resource

Question

Using Moodle 3.1 and being fairly new to Moodle development, I would like to know how to add a custom button or link inside each Activity/Resource within a course that would do the same job as mark complete checkbox on course view page but from within the individual activity (or resource) page.

Ofcourse, would like to do this in the ideal modular Moodle manner so that even after upgrade, the functionality isn't wiped off.

Is there a setting or configuration that can be done to achieve this OR do I need to write a full fledged plugin ?

If via a plugin, then any steps in that direction would be helpful.

score 0 · Answer 1 · answered Feb 28 '17 at 03:20

0

I have been around Moodle a bit, and I am pretty certain this is not possible. Each resource and activity is stored in the /mod directory on your server. Each of these have their own view.php file. When the activity completes, and entry is written to the prefix_course_modules_completion table

Why not enable self completion by the user.

answered Feb 28 '17 at 03:20

Sean Marx

1

Thanks for your reply! We are aware of "self completion" option but for this particular instance, the requirement is to purposely want Students to manually mark it complete to ensure they have seen it and are doing this themselves. – user7616631 Feb 28 '17 at 10:45

score 0 · Accepted Answer · answered Mar 03 '17 at 10:42

Using the Additional HTML box in the Appearance section of Site Administration, you can add JavaScript that will manipulate the DOM.

It's a bit of a tall order to target all activities and resources, and no other Moodle functionality, but the approach that I used was to find an ID that is unique to that page, and use JavaScript to insert the button and functionality that you want.

For example, let's say that you want to add a new button on the News Forum activity.

There's a div in News Forum with class 'forumaddnew', so I will use that as a place to insert my new button.

var YourCustomButton =  '<input type="button" id="mybutton" value="New Function Button" class="custom"/>';

/* make sure script only runs if div exists */
if (!document.getElementsByClassName('forumaddnew')[0]) {
   /* do nothing */
} else {
    var forum = document.getElementsByClassName('forumaddnew')[0];
    forum.insertAdjacentHTML('beforebegin', YourCustomButton);
}

/* EVENT LISTENER FOR CUSTOM BUTTON */
if (!document.getElementById('mybutton')) {
   /* do nothing */
} else {
    document.getElementById("mybutton").addEventListener('click', function () {  
        alert('custom button clicked');
        //stuff you want your custom button to do
    });
}

How to add a custom button with custom functionality in course Activity/Resource

2 Answers2