Displaying links and images conditionally on course page without using labels

Displaying links and images conditionally on course page without using labels

by James Addoms -
Number of replies: 4


We’ve been experimenting with different ways of presenting courses in Moodle 2.8. We’re using labels within sections to conditionally display links to assets as learners progress through the course. In this example, the learner will initially only see the green, “click here to begin this course” under each course heading:

 


The following buttons will be displayed conditionally as users complete the SCORM package and the quiz.

 

 

 

We’re about to roll out 120+ courses and we’re looking for a better way to use the real estate the learners will be navigating through.

We’d rather list courses in an icon format (the dotted lines – not visible to the user – represent an html table within a single section):

 

Like the example above using labels, users will eventually be presented with expanded options like taking a quiz, accessing a job aid and completing a course survey:

 

 

In this configuration, the icons are all images within the dotted lines with associated links to the SCORM packages. We’ve previously used labels to encompass icons, so it was easy to tell a label to be conditionally displayed based on progress throughout the course. What we need to do is conditionally display images within sections (or within labels) based on progress throughout the course.

 

Labels won’t work for this style because labels cannot be layered horizontally. Ideally, we’d like to swap out an icon that invites learners to take a module with an icon that indicates that the module has been taken. We’d also like to only show the quiz, job aid and survey buttons based on whether the SCORM has been completed.

 

As it is, we’re showing all the available links, and conditionally hiding the assets, so a user who clicks on complete course survey in course 8, for example, will get an error message saying that that resource is not available. This isn’t an ideal way of presenting this information.

 

Does anyone have a suggestion on how to turn this:

Into something like this (note the icon change from a “take course” icon to a “course complete” icon – and a conditional display of additional steps / course resources) - within anindividual section/label?

 

Any help would be appreciated. Thank you!

Average of ratings: -
In reply to James Addoms

Re: Displaying links and images conditionally on course page without using labels

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

Ok, initial thoughts:

  1. Don't use tables, they are not responsive, use divs with the Bootstrap grid to get widths and nesting.
  2. I believe this information is better presented on the 'course-renderer' which controls the list of courses that the user sees they are enrolled in.  This can be overridden by the theme.
  3. You may have to hard code the links in the renderer.

Umm, you are implying that in your set-up that each section of a big course is a 'course', true?

Average of ratings: Useful (1)
In reply to Gareth J Barnard

Re: Displaying links and images conditionally on course page without using labels

by James Addoms -

Thanks for responding, Gareth.

1) - Fair enough - I'm not attached to any particular way to do this, either way, div or table, it's all html within a section or label, and I think the question still stands - how do we conditionally display images within a div or cell of a table.

2) I don't know anything about a "course renderer" - if this is a better option, I'd be eager to hear more about it. Ideally we'd like a single moodle "course" with collapsible sections set up - and within these sections, as shown in my post, we'd have a grid of available "courses" - We're adding users via LDAP on a conditional basis (We have about 1000 users) and for reasons I won't go into here, we'd like a single "course" with, say, a dozen sections and 15-20 course links in each section.

3) - Again, I don't know what the course renderer is - or I don't recognize that terminology.


What I really need to know how to do is to conditionally show or hide an image within a label or section. This must be possible - I just need to know how to do it. Thanks

In reply to James Addoms

Re: Displaying links and images conditionally on course page without using labels

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

Thanks James, so a few more questions to understand a bit more please:

  1. Do you already have the beginnings of custom code for this or are what you've stated 'design sketches'?
  2. If you already have code, could you make it public such that would be able to potentially see places to make improvements.
  3. What is the deadline for the project?
  4. Are you in a position to contract out for work / reports on solutions?

Kind regards,

Gareth

In reply to James Addoms

Re: Displaying links and images conditionally on course page without using labels

by Animal the muppet -

Just reading your thread James - this looks really interesting. I'd love to implement something like this myself. How far did you get with this?