How to link colored text with info

How to link colored text with info

by Benjamin Voermann -
Number of replies: 5

Hello there!

I had a certain idea what I wanted to do in Moodle, I just can't get it to work.

What I want is: The students get a text and (preferably with a click of a button) the same text where some words are colored so that they can change between the two. The students should now be able to click on the colored words and get a little pop-up of an info box.

Is there anything close to this in Moodle and if yes, what do I have to do?

Thanks in advance!

Average of ratings: -
In reply to Benjamin Voermann

Re: How to link colored text with info

by Ravi Murugesan -
Picture of Particularly helpful Moodlers Picture of Testers
Hi Benjamin,

One approach might be to use the Image Hotspots content type in H5P (which is part of Moodle core since version 3.9, otherwise you can install the H5P plugin). I suppose you'll have to create a screenshot of the text so that it's an image, and make hotspots within that image. I'm not sure how well it will work though - as the name indicates, Image Hotspots is geared towards explaining parts of images.

Another way to achieve what you have in mind (and more precisely than the Image Hotspots method) is to use JavaScript, but this will involve some coding. If you'd like to explore this method, let me know and I can share a script I have used.

Cheers,
Ravi
Average of ratings: Useful (1)
In reply to Ravi Murugesan

Re: How to link colored text with info

by Benjamin Voermann -
Thank you very much for the fast answer!

I just now discovered certain HTML attributes that make it possible to color certain words and give them a little tooltip box, when you hover over them.
Word
This would work in principle but doesn't give me an answer to the "two texts that you can switch between" part of my question.


Image Hotspots seems to be a little much for my idea but if I want to use this material a lot then I could try it.

Is there a way to code javascript in a text-editor in moodle? If yes, then that opens up a whole new world of possibilites.
Average of ratings: -
In reply to Benjamin Voermann

Re: How to link colored text with info

by Ravi Murugesan -
Picture of Particularly helpful Moodlers Picture of Testers
Hi Benjamin,

Yes, you can use JavaScript in Atto (the Moodle text editor). Switch to HTML view first and then you can add scripts. But one thing to be aware of is JavaScript isn't supported in the Moodle Mobile app.

Cheers,
Ravi
Average of ratings: Useful (1)
In reply to Benjamin Voermann

Re: How to link colored text with info

by Mary Cooch -
Picture of Documentation writers Picture of Moodle HQ Picture of Particularly helpful Moodlers Picture of Testers Picture of Translators
Hello Benjamin. Apart from the colour aspect, if you are just looking for a way to have a Word display a pop up when you click on it then you can add the words to a Glossary activity with Glossary auto-linking. If you don't want the glossary visible on your page you could use Stealth activities to have it hidden but available.
Is there a particular reason you want the text coloured?
Average of ratings: Useful (2)
In reply to Mary Cooch

Re: How to link colored text with info

by Benjamin Voermann -
I wanted to highlight certain words so that the students know which words are clickable. I also found this little tool:
span onclick="alert('hello world')" click me span
which would give no other hint that it is in fact clickable but if you click it, it pops up a wonderful box with the text. I could also make the words bold or underline them, I guess so color is not a necessity.
Average of ratings: Useful (1)