Question

I have set up my imagemap with the jquery-plugin mapster

the code shows me, which countries are clicked (‘1’ for Egypt, ‘2’ for Libyia ..)

    $(document).ready(function() {

    function geklickt (e){
    //alert(typeof e.key);     return string
    $('.showme').append(e.key+ ' ');
    }


    $('img').mapster({
    mapKey: 'ALT',
    stroke: true,
    strokeWidth: 2,
    strokeColor: 'ff0000' ,
    onConfigured: function(){
    //    howto set up loop for asking user here???
    } ,
    onClick: geklickt
    });
    });

My problem:
I want to ask the user in a loop for different countries like this:
” Click on Egypt”

    if (e.key == '1')
    {
    // message "Ok"
    // add one point
    }
    else
    {
    // message "NOT Ok"
    }

“Click on Tunisia” …

I dont know how to code this loop , so that the user is asked for the first country and then the program waits until the user has clicked a country
and then the user is asked the second country ….

thanks

Kurt

Answer 1

You don’t need a loop. JavaScript lends itself to event-driven actions, not “waiting on user input.”

Keep an array (or object) of the country names using their pre-defined keys and use a structure like this to prompt the user:

<div>Click on <span id="countryname"></span></div>

Then use javascript to dynamically change the name displayed based on the current key.

Example JS (not complete, but has necessary information):

var countryArray, currentKey;
countryArray = [];
/*
 * populate countryArray using keys like this
 * countryArray[key] = "Name";
 */
function setCountry(key){
    $("#countryname").text(countryArray[key]);
}

currentKey = 0; //can be set randomly or however you'd like
setCountry(currentKey);

function geklickt (e){
    if(currentKey == e.key){
        //success
        //add one point
        currentKey = newKey; //however you want to set it
        setCountry(currentKey);
    } else {
        //failure
        //message: "NOT OK"
    }
}