How to draw a circle to denote selection in html

Question

Env: jQuery, html

John had a big lunch, so he might want / might not want to eat this evening.

Assuming you pose this question to a student, he will have to either circle (might want or might not want) to answer it in paper-pen test.

How do you mimic drawing a circle around the text when he clicks on those words and toggle the selection if he selects on the other option. Can someone provide some basic sample on how to achieve this?

Is there a better way to mark the student selection?

Answer 1

THIS might be useful.

HERE you can see some examples of the library.

Answer 2

Ideally, you'd use the HTML radio button <input> elements as these have the behaviour you are looking for. You could pile some unobtrusive JS and CSS on this to hide the actual radio button and use its <label> to get the desired look.

Take for example this HTML:

<label><input type="radio" name="question-one" value="yes"> Yes</label>
<label><input type="radio" name="question-one" value="no"> No</label>

Using the following unobtrusive jQuery, you hide the radio button and effectively transfer its actions to the <label> around it:

$('input[type=radio]').each(function(){
    $(this).parent().click(function(){
        $(this).children('input').click();
        $('label').removeClass('checked');
        $('label:has(input[type=radio]:checked)').addClass('checked');
    });
}).hide();

Add to this some nifty CSS to style all <label>s, specifically the ones that are .checked, and you have what you want.

Answer 3

Consider something like this:

CSS

<style type="text/css">
span.answer{
    text-decoration: underline;
    border: none;
    padding: 2px;
    cursor: pointer;
}

span.answer_selected{
    border: 1px solid red;
    -webkit-border-top-right-radius: 10px; -webkit-border-top-left-radius: 10px; 
    -moz-border-radius-topright: 10px; -moz-border-radius-topleft: 10px;
    -webkit-border-bottom-right-radius: 10px; -webkit-border-bottom-left-radius: 10px; 
    -moz-border-radius-bottomright: 10px; -moz-border-radius-bottomleft: 10px;
}
</style>

Javascript

<script type="text/javascript">
$(document).ready(function(){
    $("div.question > span.answer").click(function() { 
            $(this).siblings(".answer").removeClass("answer_selected");
            $(this).addClass("answer_selected"); 
        }
    );
});
</script>

HTML

    <div class="question" id="q_1">question 1<br/>
        <span class="answer" id="a_1">answer one</span> /
        <span class="answer" id="a_2">answer two</span>
    </div>

    <div class="question" id="q_2">question 2<br/>
        <span class="answer" id="a_1">answer one</span> /
        <span class="answer" id="a_2">answer two</span>
    </div>

This idea should be pretty easy to adapt to a jQuery plugin. You can change the HTML tags to reflect a form or whatever else you had in mind.

You can let the answers be 'uncircled' of course, if you want:

<script type="text/javascript">
$(document).ready(function(){
    $("div.question > span.answer").click( function() { 
        if ($(this).hasClass("answer_selected")){
            $(this).removeClass("answer_selected");         
        } else {
            $(this).siblings(".answer").removeClass("answer_selected");
            $(this).addClass("answer_selected"); 
        }
    });
});
</script>

• caveat: css3 is not final and neither internet explorer nor opera will render your pretty rounded borders. The answered will be... erm, "squared."

Answer 4

Here is a great idea to drawing circle on web try this - http://motyar.blogspot.com/2010/02/draw-circle-with-jquery.html