Hi there, I found a thread that I think will be helpful to you:
https://community.qualtrics.com/XMcommunity/discussion/5123/can-hot-spot-regions-be-mutually-exclusive
In that, JenCX provides a solution that comes pretty close to what you are describing by adding Validation so that only 1 Region can be selected in order to proceed.
Alternatively, you can use the Heat Map question type, define your Regions, set the number of Clicks to 1, and add Validation so that the respondent can only proceed if any of the Regions are clicked into.

Thank you, will try

I have a similar problem of @polyama. I have already implemented the question with a validation of 
only 1 answer (only one heat map region) allowed. However, I would like to disactivate the multiple click option. 

Do you know any solution that force respondent to click and select only one region and disactivate the selection on the other one ? 

Unfortunately all the answers provided did not solve my problem.
Find attached a screenshot of what I aim to achieve. 

Thank you for your help
Giulio 

Hi @giuliopalma , I think what you're describing is sort of in between a Hot Spot and Heat Map. With Hot Spot, regions can be visible to the respondent but the click count can't be limited. With Heat Map, regions are not visible to the respondent but the click count can be limited.

A workaround that I think might come close to what you're looking for is to use the click count limiting of the Heat Map question but change the Heat Map Circle (click indicator) to resemble the Regions of the Heat Map.

To give it a try, create a Heat Map question, add your picture, define the regions, and set the number of clicks to 1. Next, add the below CSS to the Style section of the Look & Feel to change how the Heat Map circle looks. In the below, I changed the circle to be square, gray, black bordered, and larger/smaller based on screen width. Edit the height and width values as needed. You might also want to do this as a single select Multiple Choice question.

.heatmap-circle {
    background: #d3d3d3 !important;
    border-radius: 0px !important;
    border: 2px solid #000 !important;
    opacity: 0.6 !important;
}

@media all and (max-width:479px){

.heatmap-circle.open {
    width: 60px !important;
    height: 60px !important;
}

}

@media all and (min-width:480px){

.heatmap-circle.open {
    width: 125px !important;
    height: 125px !important;
}

}

Amazing @Tom_1842 . It works pretty well. Really appreciate your help