How to draw a circle to indicate selection in html

Question

Env: jQuery, html

John had a great dinner, so he may / may not want to eat tonight.

Assuming that you ask this question to a student, he will either have to get around (perhaps they will or will not want to) answer him in a test with a paper pen.

How do you simulate drawing a circle around the text when he clicks on these words and switches the selection if he chooses another option. Can someone provide a basic sample on how to achieve this?

Is there a better way to mark student choices?

Answer 1

THIS may be helpful.

.

Answer 2

<input> HTML, , . JS CSS , <label>, .

, , HTML-:

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

jQuery, <label> :

$('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();

CSS- <label> s, , .checked, , .

Answer 3

:

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>

jQuery. HTML, - , .

" ", , :

<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 rounded borders. The answer will be ... erm, "square".