How to have timeout start on click event in loop rather than continuous

I am testing the user to see if they click an element with same id as a randomly selected element. Obviously I want to set a delay between each question - hence the setTimeout. This works fine and every five seconds the user is asked a new question. However, I am trying to change it so that the timeout is fired after the click so that the user has as much time as they want and next question is fired when they click an answer. I tried moving the timeout inside the loop and this caused me problems. I also tried following the logic here, but can't really get it. Any help or advice appreciated.

 function pickRandCounty(){
        if(clickName==askRemoveCounty){
            score++;
        }
        var shuffleCounties = theCountyNames.sort(function(){ return (Math.round(Math.random())-0.5); });
        if (shuffleCounties.length != 0){

        var randCounty = shuffleCounties[Math.floor(Math.random() * regions.length)];
        askRemoveCounty = shuffleCounties.splice(randCounty, 1);
        var showName= document.getElementById('nameDiv');
        showName.innerHTML = "Where's " + askRemoveCounty + "?";
        wasItClicked();
        setTimeout(pickRandCounty, 5000); //WORKING
        }

 function wasItClicked(){
        clickName = null;
        for (var r = 0; r < regions.length; r++) {
            regions[r].click(function(e){
            this.attr({opacity: 0.3});
            clickName = this.data('id');
            this.animate({opacity: 1.0},2000);
            giveFeedback();
        });
        }
        }