How to align checkboxes in a circle in blogger post in 5 minutes

Back>

Example

copy past the following code into blogger post's HTML tab. Change the mouse over text and matching the checkboxes' value to your answer.

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<style>
.container .row {
  margin:60px;
  text-align:center;
}

.container .row input {margin:0 60px;}
</style>

<script>
$(document).ready(function(){
    $("#ConcurrentHashMap").mouseover(function(){
        $("#info").text('ConcurrentHashMap');
    });
    $("#ConcurrentSkipListMap").mouseover(function(){
        $("#info").text('ConcurrentSkipListMap');
    });

    $("#HashMap").mouseover(function(){
        $("#info").text('HashMap');
    });
    $("#Hashtable").mouseover(function(){
        $("#info").text('Hashtable');
    });
    $("#SortedMap").mouseover(function(){
        $("#info").text('SortedMap');
    });

    $("#LinkedHashMap").mouseover(function(){
        $("#info").text('LinkedHashMap');
    });
    $("#TreeMap").mouseover(function(){
        $("#info").text('TreeMap');
    });
});


function checkAnswer() {
  var checkboxValues = [];
  $('input[name=gender]:checked').map(function() {
            checkboxValues.push($(this).val());
  });
  alert(checkboxValues.sort());
}


</script>

<br />
<div id="info">
info here</div>
<br />
<div class="container">
<div class="row">
<input id="ConcurrentHashMap" name="gender" type="checkbox" value="ConcurrentHashMap" />
        <input id="ConcurrentSkipListMap" name="gender" type="checkbox" value="ConcurrentSkipListMap" />
    </div>
<div class="row">
<input id="HashMap" name="gender" type="checkbox" value="HashMap" />
        <input id="Hashtable" name="gender" type="checkbox" value="Hashtable" />
        <input id="SortedMap" name="gender" type="checkbox" value="SortedMap" />
    </div>
<div class="row">
<input id="LinkedHashMap" name="gender" type="checkbox" value="LinkedHashMap" />
        <input id="TreeMap" name="gender" type="checkbox" value="TreeMap" />
    </div>
</div>
​
<button onclick="checkAnswer()" type="button">Check Answer</button>
<br />