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 />
<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 />