So far I've successfully figured out a system which allows a given word within a body of text to both have a tooltip popup box, as well as a panel pop up for it when clicked.
My intent is to create a series of webpages that contain assignment information for students, such as how to complete a project. The hope is that I can code this page in such a way that all the 'difficult' words contain a tooltip with a basic definition, and then have a panel that will pop up when they are clicked with a much more indepth definition, including a pronunciation guide and wave file that when an Icon is clicked the student can listen to the definition (for those with disabilities / language issues).
Here are the problems I forsee and would like help with avoiding:
Firstly, through my testing I have discovered that only the first instance of a particular id within a page will launch my tooltip or the panel. This is problematic because though most students will 'get it' that the first instance is the only clickable one, I would like all of them to function the same. I do not feel like coding a whole bunch of ID's and entries for those ID's to make that work... who would?
Ive seen some stuff related to groupIDs but at my current level of understanding I really cant make sense of it. Can someone explicate this a bit further for me. I'm not dumb... I just dont have the rudiments down.
Secondly, I've done some limited testing to attempt to make it so that the in-depth glossary entries are not in-line to the page, but rather that they are external held in .html files in a sub-directory called /glossary/. This would be an ideal setup because it would allow me to link to pages in the glossary directory for the content of my panels so that I would only need to change those .html files in order to change content over multiple assignment pages.
The problem I'm facing with this is that my limited CSS / HTML knowledge doesnt seem to be cutting it. I attempted using a frame within the panel to show the content, but it doesnt even show the content of the referenced html file.