Restriction information on mouseover

Restriction information on mouseover

by Simon Schäfer -
Number of replies: 1

Hi all,

I wondered if there is a setting or plugin (or maybe some possibility with custom JS oder CSS) that collapses the restriction information list and shows it only if a student

  1. moves his mouse pointer over it or
  2. klicks the Restricted field.

We'ld like to grant access to the same activity to all our groups but not at the same time. We don't want to hide the activity because this will hide it in the gradebook as well. But with many groups the information becomes pretty long.

For the administrator this may be handy to get a quick overview:

Restriction view admin

But also for him it might be better to only see these information when needed. Otherwise he has to scroll far down.

But the student don't needs this information. It's enough for him when he sees that it's not greyed out anymore and the task block tells him he has to do the quizz now. The information for the student - on top - seems confusing because he only gets a selection of the requirements which totally hide the system behind the restriction:

Restrioction information student view

Maybe with a additional button like this:

Info button

Or - as stated before - just with mouseover or click on the grey Restricted field. (In this case we have to inform out students about this new functionality).

Best regards, Simon

Average of ratings: -
In reply to Simon Schäfer

Re: Restriction information on mouseover

by Simon Schäfer -

Hi all again,

with the power of Google (which substituted PHP and CSS skills) I came up with a first solution. First I tried to solve it only with custom CSS because it could be implemented in a site easier than hacking some of the php files.

I was able to get get a field that will be truncated if there are more than 3 rows and turn into a scrollable field. I used code from Handling Short And Long Content In CSS - Ahmad Shadeed (ishadeed.com). But then the list items started to overlap and a scrollbar is less pretty than a spoiler (or even mouse over).

But I realy like the <details> tag. I thought it will be much easier than hacking a CSS spoiler class. So I tackled the availability_info.mustace and added a <details> block there. Of course this first got attached to any restriction message. To apply it only when there (possibly many) restrictions I altered the renderer.php as well to check for a list element in the info text.

This is the result:

Closed detail block

Opened details block

What files I edited:

  1. lib\templates\availability_info.mustache
  2. course\renderer.php

What did not work:

  • adding a <details> block with ::before CSS because only plain text can be added
  • checking if an class contains a list element (<ul>) because the :has() statement from CSS4 is not implemented in browsers yet
  • creating and editing the availability_info.mustache in the boost theme folder
  • editing the course\format\renderer.php

Untried ideas:

  • writing a CSS spoiler class and counting the rows of the box and toggle the visibility state of the element depending on its length (this way I we might don't have to touch the renderer.php)
  • creating a child theme from boost and hopefully use a local availability_info.mustache

Possible improvements deeper in the system:

  • having a checkbox in the activity "Restrict access" area to toggle the usage of the <details> block manually instead of using it on all lists (no matter how long)
  • Making the "Click for details." text responsive to other language settings.

This solution has not be checked if it will work in the mobile app as well.

Best regards, Simon

Average of ratings: Useful (1)