How do you spin around something?

Question

Using html, css, javascript and jQuery, I would like to introduce a paragraph to the user with instructions: "Read the story, then circle all the nouns."

Q: How would I draw a circle around a word when a user clicks on it? This is normal if each word should be in its own span tag.

Answer 1

For the following HTML:

<p id="circleNouns">Now is the time for all good men to come to the aid of their country.</p> 

First, leave each word of text in the <span> tags using jQuery:

 var $cn = $('#circleNouns'), cnText = $cn.text(); cnText = cnText.replace(/\s/g, '</span> <span>'); $cn.html('<span>' + cnText + '</span>'); 

Then, if we draw a class to draw a circle as a border:

 .selected { border:1px solid red; border-radius:30px; -webkit-border-radius:30px; -moz-border-radius:30px; } 

We can simply add the following click event:

 $cn.find('span').click(function(e) { $(this).toggleClass('selected'); }); 

Then, however, the page is submitted, you can check $cn.find('.selected') each .html() for its list of nouns to make sure the answers are correct.

Here a working example →

Answer 2

You can use transparent PNGs of different sizes, small, medium, large to crop different words.

So, when the user clicks on the span / div, use javascript to overlay this PNG onto the word and resize it dynamically to the optimal size.

But I still suggest, why not use a simple HTML border to mark it? It could be a rounded border with a little css to make it more fantastic.