Now I know how to do all the back-end, in fact that's the easy bit. I was hoping jQuery would have a function that would recognise when a word inside a <p> tag was clicked, or a plugin at least that would do it for me, but I couldn't find anything. I then thought the only way I could do it was by wrapping each word in a span tag, now I don't really want to do this, because in some cases, I am told there will be thousands of words to be corrected (a very tedious exercise for children I know!) which means wrapping each word in a span tag will dramatically slow things down, as there's a hell of a lot of other stuff going on too.
But since this is the only solution I can find, I will have to go with it. The script as it is at the moment, does not take into account punctuation and HTML tags, which is extremely important, as pupils will sometimes be required to change just the punctuation. Let me show you the code which I have.
I have a little extract from the children's book "The Gruffalo":
<p class="text"> A mouse took a stroll through the deep dark wood.<br /> A fox saw the mouse and the mouse looked good.<br /> <i>"Where are you going to, little brown mouse?<br /> Come and have lunch in my underground house."</i><br /> "It's terribly kind of you, Fox, but no -<br /> I'm going to have lunch with a gruffalo."<br /> </p>
And then I need to wrap each word and piece of punctuation in a span tag:
Whilst debugging, just an alert comes up with the word that has been clicked. So if the user clicks the first instance of the word "mouse", this is what appears in the alert box:
As you'd expect
However if they click the first instance of the word "wood", this is what appears in the alert box:
Now I know why this happens, I just don't know how to fix it, any help will be greatly appreciated. Thank You in advance!