Course Grade Display

Course Grade Display

by Chris Kenniburg -
Number of replies: 21
Picture of Particularly helpful Moodlers Picture of Plugin developers

Hello themers,

Can someone work with me to show a user's course total grade in a theme layout file?  Just the total percentage.  

I was hoping there might be a piece of code snippet I could just drop into the theme but for all the searching I do I cannot find any working code.

My idea is to include it with the user profile pic in the course theme layout page.   

Is there something already canned that can be dropped in?


Thank you kindly,

Chris

Average of ratings: -
In reply to Chris Kenniburg

Re: Course Grade Display

by Gareth J Barnard -
Picture of Core developers Picture of Particularly helpful Moodlers Picture of Plugin developers

Ouch! -> https://github.com/moodle/moodle/blob/MOODLE_29_STABLE/grade/report/user/index.php#L159-L165 -> https://github.com/moodle/moodle/blob/MOODLE_29_STABLE/grade/report/user/lib.php#L38 is a starting point but is all focused on making the table.  Not clear which bit is the total, seems to be the 'average' bit, but that then depends on settings.  Probably better off looking at the SQL, making your own query and calculating from that.  Also in the 'index.php' file there is intent about needing 'capability' too, so need to pick the right ones.

In reply to Gareth J Barnard

Re: Course Grade Display

by Chris Kenniburg -
Picture of Particularly helpful Moodlers Picture of Plugin developers

Yeah, I looked through some of this.  There is even a block that displays student grades that I was looking at too.  

I am just not sure what I need and where to put it so that it will display a grade in the theme layout file. 

In reply to Chris Kenniburg

Re: Course Grade Display

by Richard Oelmann -
Picture of Core developers Picture of Plugin developers Picture of Testers

You can probably take most of the code from the block, and put it into a lib or render file in a function.

You could then style the output from that into the layout of the theme page.

In reply to Richard Oelmann

Re: Course Grade Display

by Chris Kenniburg -
Picture of Particularly helpful Moodlers Picture of Plugin developers

Richard,

What you describe is what I do not know how to do.  I am pretty limited in my knowledge of programming.  

This is one of the last remaining todo's for my new theme. 

I have a course.php layout file and having the grade for the user displayed above the header image would be impressive and useful in our K-12 environment.  I have a programmer here who said we could take a look but he isn't all too familiar with Moodle.  


Is this even possible or would there be drawbacks to displaying this in the theme? 

In reply to Chris Kenniburg

Re: Course Grade Display

by Richard Oelmann -
Picture of Core developers Picture of Plugin developers Picture of Testers

Sorry Chris, I was writing that as I was leaving for a meeting.

I have taken blocks previously and built them into a theme layout for a client. But it does depend on the block!

Possible - yes, depending on the block: drawbacks - well, that depends on the block and what it does and how well it can be built into something else. In this instance I can't see any significant performance effects because if you put the block on your page you'd end up with those database calls anyway. Adding complexity to the programming of the theme is one potential issue.

Cna you tell me which block you were looking at and I'll take a look and see what I can do - no promises and it may take me over the weekend at least, but I will take a look smile

Already have 3 developments for flexibase on the go ready for a Flexibase2.0 (+ a Masters dissertation to write and none of this fits with my day job any more so can't use work as an excuse to 'play' smile )

BUT - I do enjoy a challenge and learning about this kind of thing for myself as well as sharing that back to the community when I do make it work, so will definitely take a look smile

Rich

In reply to Richard Oelmann

Re: Course Grade Display

by Chris Kenniburg -
Picture of Particularly helpful Moodlers Picture of Plugin developers

Thanks Rich,

The block is this one:  https://moodle.org/plugins/view/block_my_grades   

But what I'd really like is just the grade for the course that they are viewing.   The block shows all grades which was not the intended behavior.  

What we really want is just the grade of the course in which a user is viewing.  It just might be too complicated.

In reply to Chris Kenniburg

Re: Course Grade Display

by Richard Oelmann -
Picture of Core developers Picture of Plugin developers Picture of Testers

Chris

Very dirty hack - but it works: very quick hack that takes the user grade report for the course, puts the whole report into the header and then uses css to hide the bits of it that we don't want to see.

Include the attached coursegrade.php file into the layout file your courses use, where you want the grade to appear and then add the css below to your styles

.courseheadergradepercentage {display:none;}
.pagelayout-course .courseheadergradepercentage {display:block;}
.courseheadergradepercentage {background-color:#fff; opacity:0.8; border-radius:6px; float:right; margin-top:15px; margin-right:125px;}
.courseheadergradepercentage table.generaltable {margin:0;}

.courseheadergradepercentage table tbody tr,
.courseheadergradepercentage table thead {display:none;}
.courseheadergradepercentage table tbody tr:last-of-type th,
.courseheadergradepercentage table tbody tr:last-of-type td {border-top:none;}

.courseheadergradepercentage table tbody tr:last-of-type {display:block;border-radius:6px;}

.courseheadergradepercentage table tbody tr:last-of-type .column-itemname {font-weight:900;font-size:150%;text-align:right;width:120px;}
.courseheadergradepercentage table tbody tr:last-of-type .column-weight {display:none;}
.courseheadergradepercentage table tbody tr:last-of-type .column-grade {display:none;}
.courseheadergradepercentage table tbody tr:last-of-type .column-range {display:none;}
.courseheadergradepercentage table tbody tr:last-of-type .column-percentage {font-weight:900;font-size:150%;width:100px;}
.courseheadergradepercentage table tbody tr:last-of-type .column-feedback {display:none;}
.courseheadergradepercentage table tbody tr:last-of-type .column-contributiontocoursetotal {display:none;}

It's pretty horrible in terms of programming - printing the whole report onto the header and hiding it with css is massively inefficient, but right now I just don't have the capacity to investigate the respective functions that actually calculate the course total properly, I'm sorry - as you said previously, it gets complicated smile

I hope to do it at some point, but for right now, maybe this will give you something to use if you want it.


Richard

Average of ratings: Useful (1)
In reply to Richard Oelmann

Re: Course Grade Display

by Chris Kenniburg -
Picture of Particularly helpful Moodlers Picture of Plugin developers
Richard,

So does this display all grades for the course?  Maybe I could use a slider that slides down like a drawer and displays them all.  That might be just as useful.  

Thank you so much. I will take aa look at this tomorrow.  

In reply to Chris Kenniburg

Re: Course Grade Display

by Richard Oelmann -
Picture of Core developers Picture of Plugin developers Picture of Testers

At the moment it displays the course total percentage. But because the entire table from the user grade report is actually produced, it is possible to decide exactly what elements are shown, just by changing the css that hides the rows - for example, get rid of all the display:none statements and you have the whole report table back. Then its a case of using firebug to get rid of the ones you dont want shown.

e.g.

.courseheadergradepercentage {display:none;}
.pagelayout-course .courseheadergradepercentage {display:block;}
.courseheadergradepercentage {background-color:#fff; opacity:0.8; border-radius:6px; float:right; margin-top:15px; margin-right:125px;}
.courseheadergradepercentage table.generaltable {margin:0;}

.courseheadergradepercentage table tbody tr,
.courseheadergradepercentage table thead {display:none;}

.courseheadergradepercentage table tbody tr:last-of-type th,
.courseheadergradepercentage table tbody tr:last-of-type td {border-top:none;}


.courseheadergradepercentage table tbody tr:last-of-type {display:block;border-radius:6px;}

.courseheadergradepercentage table tbody tr:last-of-type .column-itemname {font-weight:900;font-size:150%;text-align:right;width:120px;}
.courseheadergradepercentage table tbody tr:last-of-type .column-weight {display:none;}
.courseheadergradepercentage table tbody tr:last-of-type .column-grade {display:none;}
.courseheadergradepercentage table tbody tr:last-of-type .column-range {display:none;}
.courseheadergradepercentage table tbody tr:last-of-type .column-percentage {font-weight:900;font-size:150%;width:100px;}
.courseheadergradepercentage table tbody tr:last-of-type .column-feedback {display:none;}
.courseheadergradepercentage table tbody tr:last-of-type .column-contributiontocoursetotal {display:none;}
Should display all the assignments and their percentages (as well as the course total), but not the other columns from the original table.

The other thing you may want to do is wrap that (in the coursegrade.php file) in a link back to the main user grade report - which you could do from displaying just the course total as that would take them to the full detail breakdown of each assignment anyway, without cluttering up the header too much.

R

In reply to Richard Oelmann

Re: Course Grade Display

by Chris Kenniburg -
Picture of Particularly helpful Moodlers Picture of Plugin developers

Hey Richard,

Thank you so much for the code to embed the grade totals.  I did some tinkering this morning and it works great!  

Talking with a teacher, It got me thinking that maybe displaying the course total isn't always the best option as the grade may be much lower at the start of the course until more assignments are complete.  

With that in mind I removed the CSS to hide the grade table and put a bootstrap collapse button to show and hide the course grades and grade items.

Here is a video of what I am thinking.  Wondering what the community thinks would be ideal.


Average of ratings: Useful (1)
In reply to Chris Kenniburg

Re: Course Grade Display

by Richard Oelmann -
Picture of Core developers Picture of Plugin developers Picture of Testers

'the grade may be much lower at the start of the course until more assignments are complete'

I don't think that's the case Chris - I think the assignments are only taken into account in the weighted average (which I believe is how the Course Total is calculated - by default anyway) when they are graded, so having assignments that have not been submitted yet, or even submitted and not graded, wouldn't actually alter the course total until such time as they are graded and the score becomes part of the course total calculation. But that would also be because I am showing the percentage rather than the total score as in the simple added sum of the grades achieved, so that's the total achieved out of the total possible, and the total possible is only calculated from the graded assignments. I think what you say would be the case if the course grade showing was the straight total of grades.

I do like the collapse button you've used, but I also like the idea of having the total there and turning it into a clickable link to go direct to the full user grade report anyway. I guess you could even do both and treat the total I had put as the clickable button to make the full report appear on the course page.

One thing I've noted - the css I put in needs to be added to for the options for other columns which are hidden by default in the gradebook setup settings. I only looked at the ones that were already there by default, but the others need to be hidden too.

What I'd really like to do is get to the bottom of the calculation so I can pass a variable rather than the whole report and then use a graphical representation of it, rather than just the number. To put that alongside a similar graphical representation (in the header) of the progress bar to track how far through the course the students are - Progress & Grade - would, I think, be quite a powerful tool smile

Something else to add to my to-do list smile)

R


Attached a txt file - has the required php to be included in a layout file (the coursegrade is now a 'button' to link to the full user grade report), as well as the css definitions (I think I've turned everything on so I can hide it in the css, but if anyone knows different please feel free to post here). Copy and paste the required bits to the relevant files (or create new files for them and add them to your theme appropriately.)

Average of ratings: Useful (1)
In reply to Richard Oelmann

Re: Course Grade Display

by Chris Kenniburg -
Picture of Particularly helpful Moodlers Picture of Plugin developers

Your idea of the graphical display of Grade and Course Completion was exactly my longterm goal and ultimately where I'd like to end up with the Pioneer theme.  That was the reason for implementing the larger Header Image.  It created room for a visual display of the course grade and completion.  

I think I am going to hold off on implementing it in the header until such a solution exists that is cleaner.  Or what I may do is put the total grade in the header and the link you suggested will activate the bootstrap toggle collapse like you saw in the video I posted. 

In reply to Richard Oelmann

Re: Course Grade Display

by Chris Kenniburg -
Picture of Particularly helpful Moodlers Picture of Plugin developers

I put my latest code up on github.

https://github.com/kennibc/moodle-theme_pioneer

It has the course grades display.  However, you need to activate it on the general settings page in the theme options.  I don't know what kind of performance hit this would have on Moodle installs so I made the default to unchecked.  It's a simple checkbox for on and off.  

Average of ratings: Useful (1)
In reply to Chris Kenniburg

Re: Course Grade Display

by Chris Kenniburg -
Picture of Particularly helpful Moodlers Picture of Plugin developers

I just discovered when I went to my Moodle 2.8 dev site my Course Grades Collapse feature is broken.  

Apparently I need to include the BootstrapJS file to make it work.  This wasn't the case in Moodle 2.9. 

I am guessing Moodle 2.8 didn't include any JS from Bootstrap?  
What version of the  bootstrapJS should I grab and include so that the course grade toggle works in Moodle 2.8?

In reply to Chris Kenniburg

Re: Course Grade Display

by Richard Oelmann -
Picture of Core developers Picture of Plugin developers Picture of Testers

I believe 2.8 still had the yui port of 'most' of bootstrap, while 2.9 brought jquery in and so has the whole of bootstrap javascript

You probably don't need the whole of boostrapjs, you can download sections of it from the bootstrap website so you could just include the bit that is needed for the collapse action on your theme for 2.8.

In reply to Richard Oelmann

Re: Course Grade Display

by Chris Kenniburg -
Picture of Particularly helpful Moodlers Picture of Plugin developers

Does it matter what version of the bootstrap JavaScript I download?  Can I just use the latest version or should I grab a 2.0 version?  I guess I am looking for what version of bootstrap that was implemented for Moodle 2.8. 

I was able to just grab the collapse JavaScript and include it and it works, but I just want to make sure I am doing it correctly.

In reply to Chris Kenniburg

Re: Course Grade Display

by Mary Evans -
Picture of Core developers Picture of Documentation writers Picture of Peer reviewers Picture of Plugin developers Picture of Testers

Technically you shouldn't need bootstrap.js but if you do then that can be added using a document required call in a JS file. Gareth knows more about this stuff, but as an example look in the form post for the discussion about the Carousel slider on Front Page which I have marked SOLVED. 

https://moodle.org/mod/forum/discuss.php?d=315791#p1294068

Cheers

Mary

In reply to Chris Kenniburg

Re: Course Grade Display

by Chris Kenniburg -
Picture of Particularly helpful Moodlers Picture of Plugin developers

Here is the video of the actual implementation of the course grades drop down.  Thank you so much Richard.  This is really awesome.  I think we are onto something here.  



This is up on github and waiting on Moodle.org to get approval.  I am going to get the m2.8 version into the repository too now that I got a fix.  

Although moving forward I am mainly focused on 2.9 plus.

Average of ratings: Useful (1)
In reply to Richard Oelmann

Re: Course Grade Display

by Chris Kenniburg -
Picture of Particularly helpful Moodlers Picture of Plugin developers

Richard,

Just a follow up, but did you come up with a better solution to process the grades and just display the course percentage total without the CSS hide trick?


PS.  With the course grades slider we have gotten some positive feedback from teachers.  Thank you very much.  I appreciate you helping out with the coding to make this possible.  

In reply to Chris Kenniburg

Re: Course Grade Display

by Richard Oelmann -
Picture of Core developers Picture of Plugin developers Picture of Testers

Not yet Chris, but to be honest after getting it working I put it on the back-burner with so much else going on and haven't really looked at improving it yet.

Right now the earliest I can see me looking at it is over Christmas (As a break from my dissertation smile )

Average of ratings: Useful (1)