Course formats: Grid Format

format_grid
Maintained by Gareth J Barnard Gareth J Barnard
A modular and visual course format. Hides all topics and creates a grid of icons (one for each topic) with short titles. Clicking on an icon brings up the content from the corresponding topic.
4601 sites
2k downloads
89 fans

A modular and visual course format. Hides all topics and creates a grid of icons (one for each topic) with short titles. Clicking on an icon brings up the content from the corresponding topic in a "lightbox" style display.

REPORTING ISSUES: When reporting issues you MUST clearly state the full version and release of both Moodle and the Grid format as contained within their 'version.php' files - if not it takes me longer to figure out, often resulting in me asking for the details anyway and slowing the process of solving your problem down.  It really helps to upload and describe in detail the issue you are having on the 'Course formats' forum.

Screen cast:


More to follow as new icons have been added....

Screenshots

Screenshot #0
Screenshot #1
Screenshot #2
Screenshot #3

Contributors

Gareth J Barnard
Gareth J Barnard (Lead maintainer): Maintainer
Please login to view contributors details and/or to contact them

Comments RSS

Show comments
  • Me
    Sun, 19 Nov 2017, 5:46 PM
    Hi Gareth, regarding the issue of stopping youtube videos when switching sections or closing the grid view, i wrote a fix for it if you're interested (its not the best approach but its the best solution i could come up with since "stopVideo()" does not did not work for me.
    I added this code as a new function in the "module.js" file, and called it in the "grid_toggle" and "change_selected_section" functions.

    var iframes = document.getElementsByClassName("yt_frame"); // Should be added to all youtube iframes on the site.
    for (var i = iframes.length - 1; i >= 0; i--) {
    var currentSrc = iframes[i].src;
    currentSrc = currentSrc.replace('&autoplay=1','&autoplay=0'); // So the videos wouldn't start playing again.
    iframes[i].src = currentSrc; // "Stopping" the videos.
    }

    Hope this is useful for you.
  • Gareth J Barnard
    Mon, 20 Nov 2017, 12:17 AM
    Thanks Ben,

    Interesting solution. Ok....

    Should it work on page load instead to prevent iterating every time a section is navigated to. As clearly even after it has done it's job for the whole page then the 'replace' will be called on every yt_frame class per click of the grid_toggle / navigation.

    Can:

    var currentSrc = iframes[i].src;
    currentSrc = currentSrc.replace('&autoplay=1','&autoplay=0'); // So the videos wouldn't start playing again.
    iframes[i].src = currentSrc; // "Stopping" the videos.

    be simplified to:

    iframes[i].src.replace('&autoplay=1','&autoplay=0'); // So the videos wouldn't start playing again.

    ?

    Why did stopVideo() not work for you? What was the error message please?

    Gareth
  • Me
    Tue, 21 Nov 2017, 4:46 PM
    Hi gareth
    The code can indeed be simplified to:
    iframes[i].src = iframes[i].src.replace('&autoplay=1','&autoplay=0');

    as for the error message i got it was:
    "TypeError: iframes[i].stopVideo is not a function"
    And i get it even if i add the "enablejsapi=1" parameter to the src
  • Picture of Irakli Kurdiani
    Thu, 21 Dec 2017, 7:23 PM
    We are using Moodle 3.3.1 with the Lambda theme and use grid format . We have run into an issue like - Clicking on an icon brings up the content from the corresponding topic in a "lightbox" style display and it works till 7 topic, but if we add more topics/sections, while clicking it shows empty light box and the content is available only at the bottom of a course page.
  • Gareth J Barnard
    Sat, 23 Dec 2017, 10:16 PM
    Hi Irakli,

    The Lambda theme is a commercial one therefore I cannot test to confirm any issue. If the issue happens in the Clean or one of my themes I'll look and if its a bug will attempt a fix.

    Gareth
  • Me
    Sun, 24 Dec 2017, 4:59 PM
    As i understand the latest update added a feature that will hide hidden section from the grid view. I installed the latest version on my Moodle (3.2.1) and i made sure i check 'yes' in the 'defaultgreyouthidden' but:
    1. The positioning got messed up a bit (pushed to the right)
    2. Hidden section still appears
    i provided an image
    https://prnt.sc/hro20t
  • Gareth J Barnard
    Sun, 24 Dec 2017, 9:29 PM
    This is a semi-automated reply. I'm sorry but I'm currently out of the office at the moment, but will return sometime in the future. In the case of an emergency, please don't panic but keep calm and carry on. At no point try and fix the issue with the CSS: html { display:none !important; }.
  • Gareth J Barnard
    Tue, 2 Jan 2018, 9:18 PM
    Hi Ben,

    With 1 - check the course settings as there is a setting for grid box alignment.
    With 2 - are you viewing the course as an editing teacher etc? Test as a student.

    G
  • Picture of Robert DeLonge
    Wed, 24 Jan 2018, 3:41 AM
    Gareth-

    We have done some testing with different screenreaders (NVDA and JAWS) and are unable to have the screenreader work with the Grid format. Are there any plans to make the Grid format ADA friendly with an update in the future?

    Thanks, Rob
  • Gareth J Barnard
    Wed, 24 Jan 2018, 4:23 AM
    Dear Rob,

    Please forgive the rant I am about to type. Ok, firstly what version of the Grid format are you using? Secondly I'm only maintaining for M3.2+. Thirdly, what is ADA please?

    Fourthly I have spent literally days and days over many years attempting to make the Grid format accessible. And every now and then somebody asks the very question you've just asked but provides no evidence of any specific problem that is actually occurring. Only once has someone actually bothered to point out a specific issue and work with me to resolve it, hence the current M3.2+ versions. I cannot get a copy of JAWS because its commercial and there is no 'developer' version. I'm fed up, really fed up with this same comment happening over and over and over again and yet no supplied evidence of any failure, so if you have it with steps on how to replicate then please do share it with me and I'll stop fumbling around in a dark shed attempting to solve a problem I'm told that exists but cannot see.

    So 'plans' = yes in fact the 'plan' has been running for years. I have added keyboard control and spent many hours reading the ARIA specifications and undertaking best judgement in terms of code changes.

    So please do explain to me in detail the interpretation of the words 'unable to have the screenreader work'. In what way does it not work? Everyone says it does not 'work' but does not say what. I may as well think that the format does not work because it does not turn on the central heating when its cold for all that I'm aware of its 'faults' in this regard.

    I'm so fed up with this now that I may just quit maintaining this format all together.

    Regards,

    Gareth
  • Picture of Robert DeLonge
    Wed, 24 Jan 2018, 5:34 AM
    Gareth-

    I understand your frustration. We are using Grid format 3.3.0.2 on Moodle 3.2. ADA stands for "Americans with Disabilities Act."

    When we try to use a screen reader with the grid format, the screen reader stays on the Moodle course homepage and does not read or recognize the content that is displayed on the "lightbox" style display. It seems like the screen reader does know that the lightbox page exists. We typically test with NVDA because it is a free downloadable tool.

    Thanks for your time.

    Rob
  • Picture of Paul Martin
    Wed, 24 Jan 2018, 11:52 PM
    Gareth,

    A slight correction to what Rob said (we work together and I'm the Moodle server admin here): we're actually using Moodle 3.3.3+ in our production environment, as well as Moodle 3.4+ in our staging environment, and on the master branch for Grid. The issue persists in both environments.

    I do a fair bit of coding as well, so I understand your frustration with a "it doesn't work" type comment with no information and zero steps to reproduce. So if there's anything we can do to assist with this, just ask. We'll do what we can.

    -Paul
  • Gareth J Barnard
    Thu, 25 Jan 2018, 5:40 AM
    Hi Rob and Paul,

    Thank you for your reply and information. I have been thinking about this and understand where you are coming from in respect to the shade box. What I don't understand is the fact that there is keyboard control and therefore pressing Esc (apparently standard key for assisted technologies) brings up the shade box. Also the tab and left / right cursor keys navigate the grid boxes which all have ARIA descriptions that instruct the user and I always thought the screen reader software. So what happens when the user clicks on 'Esc' and the box is shown? Have your tests included a real user whom is familiar with the NVDA software?

    The more information the better please, along with real world workthrough examples and screen casts of use would help me to understand the issue. Please feel free to raise an issue on the GitHub account (https://github.com/gjb2048/moodle-format_grid/issues) and post information there. I cannot promise I will solve the problem right away but I will read what you put and think about it.

    Kind regards,

    Gareth
  • Picture of Mariusz Bołoz
    Thu, 15 Feb 2018, 4:39 PM
    Hi,

    Thanks for the great plugin! Is there any way to make resized images smaller? For example original image is 80KB size and resized image is 325KB size

    mariusz
  • Gareth J Barnard
    Sat, 17 Feb 2018, 4:51 AM
    Hi Mariusz,

    If the input images are that small then they are too small for the grid box size which is why they are being increased. Therefore this would mean pixelation. So either use bigger source images or reduce the size of the grid boxes via the settings.

    G
Please login to post comments