Different icons for all the different h5p content types in Moodle

Submitted by BjoernLefers on Tue, 02/21/2017 - 14:58
Forums: 
Feature requests

How about having different icons for all the different h5p content types in Moodle? At the moment users only see that it's h5p, but not if it's a video, a quiz, etc. Would that be possible within Moodle? We might have a budget for that, but no developers... 

Summary: 
Content Type icons in Moodle
Issue Status: 
Open
0
0
Supporter votes Members of the Supporter Network can vote for feature requests. When the supporter network has generated sufficient funding for the top voted feature request it will normally be implemented and released. More about the H5P Supporter Network
falcon's picture

falcon

Wed, 02/22/2017 - 09:43

Is if for the drop down where you choose content type? The H5P Core Team is already working on that. Next release :) If not, at the moment the company I work for is the only one listed as providing H5P development services. You may reach out to us on [email protected].

BjoernLefers

Mon, 02/27/2017 - 12:49

Thanks! I meant the icons that you see for h5p content in the navigation block and on the course overview (screenshots attached). 

Do you know if these will be changes as well?

Attachments: 
Image icon Bildschirmfoto 2017-02-27 um 12.46.28.png
Image icon Bildschirmfoto 2017-02-27 um 12.45.05.png
tim's picture

tim

Mon, 02/27/2017 - 15:52

Hi Bjoern, those won't be changed in the upcoming release but maybe a bit further down the line :)

BjoernLefers

Mon, 02/27/2017 - 16:14

Alright, thanks! Is there any place I can add/ track the feature request? E. g. something like https://www.uservoice.com/ ?

tomaj's picture

tomaj

Tue, 02/28/2017 - 07:27

Hi,

If you add a post on the feature request forum, that would be your safest choice. It is monitored closely by both commuity developers, and the core team.

- Tom

BjoernLefers

Tue, 02/28/2017 - 12:08

Thanks! Well, since this is the feature forum it's already taken care off! ;-)

Since falcon said up above: "Is if for the drop down where you choose content type? The H5P Core Team is already working on that." I thought that could maybe added to a Jira ticket and I would have added my vote. 

But then I also don't want to annoy you with tiny things like this when you have so many awesome features like the hub on your plate! ;-)

tomaj's picture

tomaj

Wed, 03/01/2017 - 09:36

Sorry, my bad :)

papi Jo's picture

papi Jo

Wed, 03/01/2017 - 11:51

Not sure that would be a good idea, it might be confusing to users.

icc's picture

icc

Thu, 03/02/2017 - 09:32

I think it would be difficult to achieve technically as well.

BjoernLefers

Thu, 03/02/2017 - 16:15

Thanks for your input! I think at least in Moodle it's more confusing to users now, because they can't tell what type of content is there. I made a little sketch to show what I mean (screenshot attached). The difficult thing would be to create icons that both show the user:

  • that it's h5p content 
  • AND the h5p content type (e. g. interactive video, audio file, etc.).

We might have resources to create the icons and maybe even for the technical development. But for that it would be good to know if it's technically doable at all... 

 

Attachments: 
Image icon Bildschirmfoto 2017-03-02 um 16.08.02.png
papi Jo's picture

papi Jo

Thu, 03/02/2017 - 19:11

You write "The difficult thing would be to create icons that both show the user:

  • that it's h5p content 
  • AND the h5p content type (e. g. interactive video, audio file, etc.)."

Exactly! That seems almost impossible to achieve all together in one icon.

You can always use the activity Title to explicit what type of activity it is, see attached.

icc's picture

icc

Fri, 03/03/2017 - 10:23

This is a good solution for the time being.

However, I may have spoken a little too soon, as I've had another look at this and it is, in fact, possible to customize the listings depending on the data inside. So this will be doable. If we do this perhaps we should add an option to override this and use the H5P icon for all activities for those who want that. What do you guys think?

A small proof of concept is simply appending the following to mod/hvp/lib.php: 

function hvp_get_coursemodule_info($coursemodule) {

  $info = new cached_cm_info();

  $info->iconurl = new moodle_url('https://h5p.org/sites/default/files/styles/medium-logo/public/logos/course_presentation_icon-colors_0.png?itok=kZfdgESp');
  $info->name = 'We are all presentations!';

  return $info;
}

BjoernLefers

Fri, 03/03/2017 - 11:53

@papi Jo: Thank you! Yes, that's true and we've done it this way with Text Pages in Moodle so far (screenshot attached), but are switching over to H5P now. The thing is that it makes the the names of the activities/ resources longer and I don't think users will get what the content type is as quickly as with different icons.

 

@icc: Awesome, thanks for checking again - that sounds great! An override option would be good for people who don't want to use different icons. Is there anything we can do? I see 2 options:

1. ICON SHOWS H5P AND CONTENT TYPE

To me the most complicated thing still is to come up with an icon that "both shows the user:

  • that it's h5p content 
  • AND the h5p content type (e. g. interactive video, audio file, etc.)."

2. ICON SHOWS H5P OR CONTENT TYPE

One could also have the option of the user deciding to:

  • EITHER use one h5p icon for all content types (similar to the override feature you mentioned)
  • OR have different icons for content types - e. g. by picking open source icons here: http://fontawesome.io/icons/

With option 2 your brand would be less visible in the course overview, but the content types on the activity/resource level would of course still be branded. With open source icons ( http://fontawesome.io/icons/ ) in the future you wouldn't have to create a new icon for every new content type (which would be the case with option 1). I think having different icons for different content types might also help with the h5p hub, because users can tell the type of content without having to click on it.  We are by the way looking very much forward to the hub and I'm trying to push people at different german universities to release their content on the hub! I believe the hub will break down the technical barriers that make sharing between different learning management systems really hard! Sorry, I got a little excited there... ;-) Back to the icons: In the end I think that's a strategic decision that you'll have to make. We're happy to help with whatever way you'll go - e. g.: 

  • I could have someone sketch down ideas for an icon that shows both h5p AND the content type
  • We could make suggestions what icon to use for which content type
  • You can let us know what the approximate costs are for this feature and I can check our budget if we can finance the development (if that's something you do)

 

@all: We're developing a blended learning degree program ( bachelor-business-blended.de ) at the Berlin School of Economics and Law and as part of that are improving the design and usability of Moodle as well. H5P is a huge help and we love it! We've also developed a new navigation tracking plugin with Synergy Learning (screenshot attached) that we'll release under an open source license soon. Together with Synergy Learning we're also working on a social comments block for Moodle (subscribing to comments, email digest, comments newsfeed, pinning feature for comments, activities, resources similar to pinterest, etc.) Please let me know if that's interesting to anyone here and I'll make sure we'll share it with you when we're ready!

Attachments: 
Image icon Bildschirmfoto 2017-03-03 um 10.51.44.png

vishnulearning

Tue, 07/25/2017 - 11:32

Thanks. I made the following changes and it works very well:

Added attached image code to mod/hvp/lib.php

I then added iconurl field to mdl_hvp_libraries table and updated it with iconurls for respective content.

And then it just works great. May be we can have an h5p configuration in Moodle that helps that customization.

 

Attachments: 
Image icon codechange.jpeg

BjoernLefers

Tue, 07/25/2017 - 14:06

Thanks! Sorry, but I'm not a techie... What do those changes look like for the user?

vishnulearning

Sat, 08/26/2017 - 05:22

Attached is an image showing differnt icons for different H5P modules.

Attachments: 
Image icon Capture.jpeg

BjoernLefers

Sun, 08/27/2017 - 10:52

Cool, thanks for sharing! 

@icc & falcon: How likely is it that this will become part of the standard plugin? 

karlgoddard

Tue, 01/16/2018 - 19:06

Hi

I amended the lib.php file with the code on your screen shot but I get a 500 error message

Any ideas where I may have wrong??

Thanks :)

Karl

kulmann

Fri, 04/05/2019 - 14:03

Hi guys,

this solution is actually working and would be an improvement of the UX for students.

The official ticket (https://h5ptechnology.atlassian.net/browse/HFP-811) shows no progress, although this solution would be fairly easy to implement. I would like to know if there are any plans to include it in the official plugin? I could make a PR on github to include it. I would not implement it with a new db column but would hardcode the icon urls and do a switch on the library type. Would love to see this feature in the official plugin.

Cheers
Benedikt

BV52's picture

BV52

Mon, 04/08/2019 - 05:02

Hi Benedikt,

I'm afraid there are no updates yet for this ticket.

-BV52

ebannister

Fri, 03/19/2021 - 14:58

@vishnulearning Thanks so much! I set up the iconurl column in hvp_libraries, then added your code to lib.php, and (after purging caches) it works beautifully. Copying your code below as text for anyone else who needs it:

function hvp_get_coursemodule_info($hvp) {
    global $DB;
    $defaulturl = null;
    $info = new cached_cm_info();

    $modtype = $DB->get_field_sql('SELECT main_library_id FROM {hvp} where id = ?', array($hvp->instance));
    $info->iconurl = $DB->get_field_sql('SELECT iconurl FROM {hvp_libraries} WHERE id = ?', array($modtype));

    if($info->iconurl === null) {
        $info->iconurl = $defaulturl;
    }

    $info->name = $hvp->name;

    return $info;
}

 

this.gavagai

Wed, 01/16/2019 - 10:36

This doesn't seem to work for me, though it does for others. Has the API changed perhaps? I'm quite new to moodle, but very excited about h5p.

arwelle

Thu, 05/09/2019 - 23:05

I found that iconurl is no longer in the hvp_libraries table. What I was able to do instead, is to check for an entry with the same machine_name field that also has the has_icon field set to true, and then use the machine_name, major_version and minor_version fields to create a URL for the icon. The URL will look like https://example.com/pluginfile.php/1/mod_hvp/libraries/H5P.MultiChoice-1...

 

https://docs.moodle.org/dev/File_API

bakou9

Wed, 05/15/2019 - 03:22

Hi arwelle thx for your comment. It's really more than an aethestic choice and this kind of feature would be indeed a great addition in the core. H5p is such a good software but It's really confusing for trainers/trainees I meet every day. Anyway could you kindly share your code if you had success making it worked? Thanks again! 

arwelle

Wed, 05/15/2019 - 16:35

I started looking at the function shown in https://h5p.org/comment/14240#comment-14240 by vishnulearning but had to look up additional information in database. If it can't find a stored icon for any library matching the machine_name field it will default to the original H5P icon. I have attached a screen shot of that code.

 

Its not ideal, as the icons I am specifying do not look very good on the course page when shrunk to 24x24. This have a lot of whitespace surrounding the actual icon whcih needs to be cropped out.

 

Is there a better icon for each activity type already stored on the moodle server?

The icon shown in https://h5p.org/comment/10564#comment-10564 looks great but sometimes I need to have the icons accessible without internet access. 

Attachments: 
Image icon Capture.PNG

arwelle

Wed, 05/22/2019 - 19:26

@icc Are icons like that example stored on the moodle server somewhere? Or, is it possible to get a list of all the available icons hosted on your site so that we could easily pull them down and insert them into our hvp module or theme?

icc's picture

icc

Fri, 03/03/2017 - 15:15

Sorry, I forgot to mention that I created an issue for getting this done in the H5P JIRA: HFP-811
I don't have any strong feelings about how it should be, but I think that we should improve the H5P icon used today to make it a little more similar to the other activity icons(adding a border or something). Also, it might be possible to have the different content type icons follow a scheme that makes it easy to identify which activities are H5Ps.

@BjoernLefers That's interesting to hear and cool that you're using H5P. Looking forward to seeing more from you guys.

Have a nice weekend guys!

BjoernLefers

Fri, 03/03/2017 - 15:20

@icc: Great, thank you! I added my vote. Please let us know if/ how we can help. Great weekend to you, too!

falcon's picture

falcon

Fri, 03/03/2017 - 15:32

@BjoernLefers glad you're looking forward to the Hub and spreading the word about it and the attitudes needed for it to succeed.

The icons seem to be 16 x 16 px at the smallest. I don't think we'll be aiming for content type icons that look good when they are so small? Maybe we could make a feature for users to replace the icons themselves? I do think that we should replace the current icon with a "friendlier" version. Lighter and not square.

BjoernLefers

Fri, 03/03/2017 - 16:17

@falcon: Thanks to all of you for the awesome work! We're super happy with whatever feature you'll implement to achieve the goal of having different icons for different content types.  And whatever road you choose we're happy to help! Just let us know if you need anything - feedback resources, etc. Enjoy the weekend! :-)

falcon's picture

falcon

Mon, 03/06/2017 - 10:06

@BjoernLefers: Ok, will keep in mind that we can call for your help when we get to this. Hope you had a nice weekend!