I'm doing a geography quiz with maps and image maps. The website shows country names and users have to choose the right location on the map.
When users click on an area a message appears telling them if the answer is right or not. I managed to do that, but I don't know how to highlight the answer, I mean, if the text is france, to highlight France (that area) when clicking on the "show me" button, or in any area.
Any thoughts?
I know how to highlight the clicked area, but nothing more.
This is the code:
$(document).ready(function(){
$('.item').hide();
$('.current').show();
$('.sorry').hide();
$('.continuar').attr("disabled", true);
$('.mapping').click(function() {
if ($(this).attr('id') == $('.current').attr('id')){
alert("Muy bien");
$('.continuar').attr("disabled", false);
} else {
$('.sorry').show();
alert("sorry!");
} // telling the users if they got the correct answer
});
$('img[usemap]').maphilight(); // hilighting areas when mouseover
$('li').draggable({containment: 'document', revert: true,
start: function () {
contents = $(this).text();
}
});
$('#list').droppable({ hoverClass:'border', accept: '.item',
drop: function(){
$('#list').append(contents + '<br/ >');
}
}); // trying to drag text on an area, not working so far, I don't even know if that's possible
$(".continuar").click(function(){
$('.current').removeClass('current').hide()
.next().show().addClass('current');
$('.continuar').attr("disabled", true);
});
$(".muestrame").click(function(){
$('.current').attr('id') = $('.current').attr('id').data('maphilight') || {};
data.alwaysOn = !data.alwaysOn;
$('.current').attr('id').data('maphilight', data).trigger('alwaysOn.maphilight');
});
$('.mapping').click(function(e) {
e.preventDefault();
var data = $(this).mouseout().data('maphilight') || {};
data.alwaysOn = !data.alwaysOn;
$(this).data('maphilight', data).trigger('alwaysOn.maphilight');
}); // hilighting the clicked area
});
SVG Solution
I would use SVG basically because I'm not familiar with canvas. The cool thing about SVG is that it works like regular HTML so CSS (and often even jQuery) works beautifully on it.
Basic Usage
For example, to style paths that are hovered over:
Or, using jQuery you can highlight elements by id (in your case, the one that is the correct answer):
Which would be the same as using CSS but with jQuery you could highlight the element after an event (such as submitting an answer).
A Caveat and a Solution
You can also highlight based on CSS selectors using jQuery and dynamically add/remove classes (or anything CSS selectors can target). The only problem is that
addClassand its associated functions won't work.If found a simple map of Australia and applied the above principles to it.
Try out the snippet to see it all in action.