Use #CSS nth-child to Customise #Moodle and other CMS systems #edtech

I love Moodle and WordPress, but with WordPress particularly it is so easy to run the updates, and essential for security, that it makes tweaking the source code problematic.  With Moodle the update problem can be less of an issue, but finding the code that creates that annoying bit of html can be much, much harder.

One of our tutors who systematically uses quizzes wanted to remove student access to the full list of questions and answers when they had finished the test.  Being able to see that let the students cheat his ‘system’ by learning the answers off by heart to succeed, rather than learning the content properly.  He asked me to get rid of the link.  I had a look into the php code, but after a short while gave up as it wasn’t a priority for me. Then as part of something else I came across and remembered CSS nth child which I could use to target a specific element without an ID.  So this is the CSS I came up with to achieve the desired effect.

#mod_quiz_navblock .othernav a:nth-child(1){display: none;}

The same technique can be used for many CMS systems where you can easily update the css on the theme, but probably don’t want to mess with the php if you can help it.

This entry was posted in Code, edtech, Moodle. Bookmark the permalink.

Leave a Reply

Your email address will not be published. Required fields are marked *

*

Please type the characters of this captcha image in the input box

Please type the characters of this captcha image in the input box

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>