moreStudentDetails.user.js is a Greasemonkey script I’ve written to provide more details about a student when I’m using Moodle. Originally intended to help when responding to a student query in a course I teach that regularly has 300+ pre-service teachers from a range of backgrounds and locations. The current version produces something like the following image (click on it to see a larger version).
The script adds a link titled [details] to the Moodle page whenever it finds a link to a user profile (see above). When you click on that link a small dialog box pops up with some more student details. For my purposes, I’m particularly interested in what type of pre-service teacher they are and their mode/campus.
This script uses much the same technology as the gradebook fix mentioned in this post and @damoclarky’s Moodle Activity Viewer. The work on these scripts is part of an on-going project to identify some theories/principles that can be used to enhance institutional e-learning (see this paper for early development of these ideas).
The rest of this post is divided into two parts
- Recent developments – documents thinking about how to transform this simple script into something that provides more useful and specific process analytics (see this post for a definition of process analytics). Also documents early attempts to share this script via github.
- Initial development – a development diary of early steps in developing this script.
Recent developments
Sharing via github
Have just created the BAD repository on github. It currently hosts two scripts
- gradebookFix.user.js – briefly mentioned in this post this script modifies the Peoplesoft gradebook to highlight special cases.
- moreStudentDetails.user.js – the script described here. Only the client script, not the server at the moment.
Much of this code is still quite ugly and probably not at all useful by others (though the gradebookFix.user.js should be useful by any course examiner from USQ).
Creating the repository at the moment is more about having the scripts under source control, stored off my laptop and to start playing with the process and mechanisms of sharing these types of scripts.
The name “BAD” is based on the BAD (Bricolage/Affordances/Distributed) mindset formulated in the paper.
Extending it to include process analytics
Lockyer et al (2013) define process analytics as analytics that “provide direct insight into learner information processing and application” (p. 1448). i.e. analysis and representations that provide some additional detail about how the learning is progressing. I’m keen to add more of this to the “more student details” script. The following explains what I’d like to add and some reflection about how this might be best done with the technologies available.
As it happens, @Edu_K has just commented on a post and described nicely what I’m trying to achieve
I like your idea of in-built LA functions into the existing tools. This can help their use to adjust teaching “on-the-go” in response to needs of the particular cohort – which is one of the most important abilities of a good educator
The plan
I’m looking to add two additional groups of information about students specific to this course to the dialog box
- Activity completion; and,
Each week of the course has a learning path of set activities. Students get some marks for completing these activities and Moodle’s activity completion functionality is used to track their work. Having a usable summary of each student’s activity completion available in this dialog would help understand where they are up to in the learning path. - Blog post activity.
The course requires the students to create and post to their own external blog. The BIM Moodle module is used to mirror blog posts and help award marks to students based on # of posts, word count etc. Adding a summary of the student’s blog posts, related statistics and perhaps other analytics (e.g. emotion etc) could also be useful.
The mockup
This will probably involve some fairly advanced jQuery work – something I’m new to – hence the need to start with a mockup. Once the design is sort of working I’ll post this and a subsequent post will pick up the coding.
The initial mockup (ugly colour scheme and all) can be seen in the following image. Or you can actually play with the mockup here.
What the mockup shows in the above is the visual representation of the activities the student has completed (or not), some explanation
- There are 3 modules.
Each module in the above is coloured from green (most/all complete) through yellow (a fair bit complete) down to red (not much complete). Initially you can only see the summary of the module completion. But you can drill down. - Each module has 3 or 4 weeks.
The above shows Module 1 expanded to its three weeks. Each of the weeks are also colour coded based on the weekly activities that have been completed. - Each week has a number of activities.
The above shows Week 2 expanded to show its 5 activities. 2 are completed and are in green. 3 aren’t. The completed activities include the date/time when they were completed and also the week of semester in which that date occurs. The real version would have those activity names as links to the actual activity.
Initial development
The following is a description of long gestating approach to solving a problem I have when teaching. i.e. knowing a bit more about my students when I’m replying to a query on a discussion forum in a Moodle course. It describes a modification to the Moodle Activity Viewer (MAV) to solve this problem.
What I did
- Fork a new version of the MAV code.
- CLIENT: Get MAV running only on my course.
- Figure out how it will all work
- CLIENT: Get the data to send to the server (user ids) on the current page.
- CLIENT: Send that information to the server.
- CLIENT: Figure out the popup.
- SERVER: Return a collection of HTML to the client.
- CLIENT: Add a popup to the moodle page for each user link.
Yep Damo and Rolley, going with the kludge first up.
Add a new link for people to click on and use that
This does it.
[code lang=”javascript”]
$(element).after(‘<a id="user_"’+userID+’" class="makealink"><small> more </small></a>’ );
[/code]
But the problem is that there can be multiple such links (e.g. one around the image on a forum). May not want to add a link on all. Plus there are some other issues with passing values. Here’s what works now.
[code lang=”javascript”]
$(element).after(‘<a data="’+userID+’" class="showMoreUserDetailsLink"><small> [details] </small></a>’ );
$(".showMoreUserDetailsLink").click(
function() {
var id = $(this).attr("data");
getUserDetails(id);
}
);
[/code]
OUTSTANDING: Still have limit the situations where this is added.
Get some data from the server
- Create an empty server that returns nothing.
[code lang=”php”]
$html = "<h3>Getting data from the server</h3>" ;header(‘Content-Type: application/json’);
echo json_encode($html) ;
if(getenv(‘DEBUG’))
error_log(‘html=’.json_encode($html)) ;
[/code] - Update the client to query the server.
Copied an existing method. Passes the user id and displays information back from the server. Pared back the message length and its working well.
- Create the database tables for users for the MAV server.
Main issue here is that I’m dealing with two separate Moodle databases with different user ids. Two steps required here on my local Moodle database:
- Create a table to map between ids.
Need to extract list of user ids from the institution, match with local and stick in database.
The enrolled users report and some regular expression magic in vi etc gets me a list of ID and name in a text file.
Rather than create a new table, adding a column to the mdl_user table on the local server “usqMoodleId” is the kludge”.
- Create the table(s) required to store the additional information.
- Create a table to map between ids.
- Have the server extract and return real data.
* Modify the server to return specific data for each user
* Map the ids from study desk to my database
* Only add the [details] link for specific links and only for links associated with this course?
Fork a new version
This is a kludge. Not making this pretty so a new directory and start from scratch.
Only run on my course
I’ve the method balmi.getCoursePageLink returns NULL, MAV doesn’t work.
I’ve modified this to return NULL if the Moodle course ID for the page doesn’t match the ID for my current course. Obviously this would need to be more general in the future.
How will it work
Basic plan is
- Update the initial Moodle page: detect any links to user/view.php and bind a hover event on that link to function.
- That function will pass the user id to the MAV server, get some HTML back and generate a dialog box.
Get the dialog box working
First test is to modify the links and get the dialog box appearing without any interaction with the server.
Get the data to send to the server
The idea is that MAV will extract the Moodle user ids that it finds in the current page. If there aren’t any, then nothing to do. If there is some, it has to bundle those up and send them to the MAV server to get additional data about the user. To do that I have recognise the user profiles and then extract the URL.
User profile links are typically of the following form
moodle URL/user/view.php?id=userid&course=courseid
That should be fairly easy to recognise and the existing balmi.getMoodleLinks should serve as a template
Change the name to getMoodleUserLinks and fiddle with the regular expressions to focus on the user links. That’s working.
Some stuffing around to extract the user id thanks to limited knowledge of Javascript.
As it stands with just these changes, the client is sending the following JSON to the server
[code lang=”javascript”]
{ "mavVersion":"0.5.4",
"settings":{"activityType":"C","displayMode":"C","groups":[0]},
"courselink":"http://usqstudydesk.usq.edu.au/m2/course/view.php?id=4688",
"links":{"1093":"1093","18474":"18474","6622":"6622"}
}[/code]
In a proper development I’d actually change all this, but I need to get this working. Actually I will change it slightly.
Client/Server
Modify the request so that it’s going to the right server.
New server (API) getUserProfile.php
Figure out the popup
This is the bit that will stretch my non-existent JQuery skills. How to modify the Moodle page to add the dialog/popup I want for each bit of user data passed back from the server?
Apparently, I’ll be using the JQuery dialog widget and apparently the getStudentAccess method is a useful template. Of course that through me a bit until I assumed to use it as a model to modify the requestData method from the original MAV that I’m kludging.