Moodle 4 - New activity icons

Re: Moodle 4 - New activity icons

by Dominique Bauer -
Number of replies: 4

Hello everyone,

I use different types of quizzes in my course. Using simple CSS, I defined different colors for the icons:

  • The quizzes that serve as examples to illustrate the material are blue.
  • The problem solving quizzes that are used as exercises are green.
  • The exam quizzes are red.
  • Homework assignments and related quizzes are yellow.

I use the same color code for the labels pertaining to these types of quizzes. For example:

MoodleForum_20211125_1759.png

Average of ratings: -
In reply to Dominique Bauer

Re: Moodle 4 - New activity icons

by Séverin Terrier -
Hi Dominique,

If you could share your simple CSS, it would be for sure useful for some people wink

Séverin
Average of ratings: Useful (1)
In reply to Séverin Terrier

Re: Moodle 4 - New activity icons

by Dominique Bauer -

Bonjour Séverin,

The code is available at https://moodleformulas.org/course/view.php?id=77&section=12 ↗. I also give it below for the record.

It's just a matter of locating the icon image, replacing its source URL with that of your image, and then adjusting the image size if necessary.


  1. Place the images in the Description field of the quiz parameters. Do not check "Display description on course page". For example, for the "Easy quiz" above, the Description field contains: 

    <img src="https://moodleformulas.org/draftfile.php/5/user/draft/963255924/Felix_quiz0_.png" width="80" class="img-fluid">

  1. Place the following jQuery code for example in a label, using the editor of your choice, where the :eq() number refers to the nth activity with an icon on the page, counting from 0: (recommended method) 

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
    $(document).ready(function() {
        $(".activity.quiz.modtype_quiz:eq(0)").find("img").attr("src", "https://moodleformulas.org/draftfile.php/5/user/draft/391244284/Felix_quiz0_.png");
        $(".activity.quiz.modtype_quiz:eq(0)").find("img").css("width", "40px");
        $(".activity.quiz.modtype_quiz:eq(0)").find("img").css("height", "42px");

        $(".activity.quiz.modtype_quiz:eq(1)").find("img").attr("src", "https://moodleformulas.org/draftfile.php/5/user/draft/391244284/Felix_quiz1_.png");
        $(".activity.quiz.modtype_quiz:eq(1)").find("img").css("width", "48px");
        $(".activity.quiz.modtype_quiz:eq(1)").find("img").css("height", "42px");

        $(".activity.quiz.modtype_quiz:eq(2)").find("img").attr("src", "https://moodleformulas.org/draftfile.php/5/user/draft/391244284/Felix_quiz2_.png");
        $(".activity.quiz.modtype_quiz:eq(2)").find("img").css("width", "51px");
        $(".activity.quiz.modtype_quiz:eq(2)").find("img").css("height", "70px");
        $(".activity.quiz.modtype_quiz:eq(2)").find("img").css("vertical-align", "-8px");

        $(".activity.quiz.modtype_quiz:eq(3)").find("img").attr("src", "https://moodleformulas.org/draftfile.php/5/user/draft/391244284/Felix_quiz1.gif");
        $(".activity.quiz.modtype_quiz:eq(3)").find("img").css("width", "48px");
        $(".activity.quiz.modtype_quiz:eq(3)").find("img").css("height", "42px");
    });
</script>

  1. Alternatively, place the following CSS code for example in a label, using the "Plaint text area" editor because the "Atto HTML editor" deletes the style tag, where the nth-child() number refers to the nth activity on the page, counting from 1: (Remove the space between https: and //)

    <style>
.activity.quiz.modtype_quiz:nth-child(4) img {
content:url("https: //moodleformulas.org/draftfile.php/5/user/draft/128956181/Felix_quiz0_.png");
    width:40px;
    height:42px;
}
.activity.quiz.modtype_quiz:nth-child(5) img {
content:url("https: //moodleformulas.org/draftfile.php/5/user/draft/128956181/Felix_quiz1_.png");
    width:48px;
    height:42px;
}
.activity.quiz.modtype_quiz:nth-child(6) img {
content:url("https: //moodleformulas.org/draftfile.php/5/user/draft/128956181/Felix_quiz2_.png");
    width:51px;
    height:70px;
    vertical-align: -8px;
}
.activity.quiz.modtype_quiz:nth-child(8) img {
content:url("https: //moodleformulas.org/draftfile.php/5/user/draft/128956181/Felix_quiz1.gif");
    width:48px;
    height:42px;
}
</style>

Reference: Wikipedia - Felix the Cat. All images are in the public domain.

Average of ratings: Useful (2)
In reply to Dominique Bauer

Re: Moodle 4 - New activity icons

by Dominique Bauer -

MoodleForum_20211126_1723.png

jQuery: (Remove the space between https: and //) 

    $(".activity.quiz.modtype_quiz:eq(4)").find("img").attr("src", "https: //moodleformulas.org/draftfile.php/5/user/draft/66169347/Turtle.png");
    $(".activity.quiz.modtype_quiz:eq(4)").find("img").css("width", "200px");
    $(".activity.quiz.modtype_quiz:eq(4)").find("img").css("height", "203px");
    $(".activity.quiz.modtype_quiz:eq(4)").find("span.instancename").css("display", "none");

CSS: (Remove the space between https: and //) 

.activity.quiz.modtype_quiz:nth-child(10) img {
content:url("https: //moodleformulas.org/draftfile.php/5/user/draft/66169347/Turtle.png");
    width:200px;
    height:203px;
}
.activity.quiz.modtype_quiz:nth-child(10) span.instancename {
    display:none;
}
Average of ratings: -