How do you draw a circle around something?

Question

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

Q: How would I draw a circle around a word when the user clicks on it? It's ok if every word has to 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, let's wrap each word of the text in <span> tags with jQuery:

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

Then if we style a class to draw a circle like 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() against your list of nouns to see if the answers are correct.

Here's a working example →