html - onclick map

Question

We want to select a neighborhood on a map.
Here is a code that works partially but with several possible answers,
we want only 1  answer. Can you help us ?

Free format question - variable type Checkbox

<style type="text/css">
.page{background: url(/graphics/carte/carte.png) no-repeat;padding-right: 250px;}

#Q1_Batignolles_1_graphical{position:relative; top:92px;left: 32px;}
#Q1_Pigalle_1_graphical{position:relative; top:75px;left: 92px;}
#Q1_Montmartre_1_graphical{position:relative; top:-29px;left: 182px;}
#Q1_Barbes_1_graphical{position:relative; top:-31px;left: 263px;}
#Q1_LaVillette_1_graphical{position:relative; top:-129px;left: 360px;}
#Q1_Belleville_1_graphical{position:relative; top:-90px;left: 398px;}
#Q1_CanalStMartin_1_graphical{position:relative; top:-116px;left: 305px;}
#Q1_Opera_1_graphical{position:relative; top:-168px;left: 125px;}
#Q1_Madeleine_1_graphical{position:relative; top:-203px;left: 42px;}
#Q1_ChampsElysees_1_graphical{position:relative; top:-260px;right: 50px;}
#Q1_Louvre_1_graphical{position:relative; top:-240px;left: 107px;}
#Q1_Marais_1_graphical{position:relative; bottom:250px;left: 153px;}
#Q1_Chatelet_1_graphical{position:relative; bottom:345px;left: 198px;}
#Q1_IledelaCite_1_graphical{position:relative; bottom:328px;left: 203px;}
#Q1_Republique_1_graphical{position:relative; bottom:436px;left: 308px;}
#Q1_Bastille_1_graphical{position:relative; bottom:423px;left: 290px;}
#Q1_Gambetta_1_graphical{position:relative; bottom:530px;left: 412px;}
#Q1_Nation_1_graphical{position:relative; bottom:452px;left: 418px;}
#Q1_Bercy_1_graphical{position:relative; bottom:445px;left: 372px;}
#Q1_Odeon_1_graphical{position:relative; bottom:587px;left: 140px;}
#Q1_Invalides_1_graphical{position:relative; bottom:713px;left: 10px;}
#Q1_Auteuil_1_graphical{position:relative; bottom:755px;right: 146px;}
#Q1_Trocadero_1_graphical{position:relative; bottom:781px;right: 70px;}
#Q1_Convention_1_graphical{position:relative; bottom:762px;right: 80px;}
#Q1_Javel_1_graphical{position:relative; bottom:755px;right: 130px;}
#Q1_Montparnasse_1_graphical{position:relative; bottom:817px;left: 40px;}
#Q1_Plaisance_1_graphical{position:relative; bottom:798px;left: 44px;}
#Q1_StMichel_1_graphical{position:relative; bottom:902px;left: 151px;}
#Q1_PlaceItalie_1_graphical{position:relative; bottom:900px;left: 228px;}
#Q1_QuartierChinois_1_graphical{position:relative; bottom:900px;left: 278px;}
</style>

<div class="input_cell clickable">
      [%CheckSelect(Q1_Batignolles, 1)%]
      
</div>
<div class="input_cell clickable">
      [%CheckSelect(Q1_Pigalle, 1)%]
</div>
<div class="input_cell clickable">
      [%CheckSelect(Q1_Montmartre, 1)%]
</div>
<div class="input_cell clickable">
      [%CheckSelect(Q1_Barbes, 1)%]
</div>
<div class="input_cell clickable">
      [%CheckSelect(Q1_LaVillette, 1)%]
</div>
<div class="input_cell clickable">
      [%CheckSelect(Q1_Belleville, 1)%]
</div>
<div class="input_cell clickable">
      [%CheckSelect(Q1_CanalStMartin, 1)%]
</div>
<div class="input_cell clickable">
      [%CheckSelect(Q1_Opera, 1)%]
</div>
<div class="input_cell clickable">
      [%CheckSelect(Q1_Madeleine, 1)%]
</div>
<div class="input_cell clickable">
      [%CheckSelect(Q1_ChampsElysees, 1)%]
</div>
<div class="input_cell clickable">
      [%CheckSelect(Q1_Louvre, 1)%]
</div>
<div class="input_cell clickable">
      [%CheckSelect(Q1_Marais, 1)%]
</div>
<div class="input_cell clickable">
      [%CheckSelect(Q1_Chatelet, 1)%]
</div>
<div class="input_cell clickable">
      [%CheckSelect(Q1_IledelaCite, 1)%]
</div>
<div class="input_cell clickable">
      [%CheckSelect(Q1_Republique, 1)%]
</div>
<div class="input_cell clickable">
      [%CheckSelect(Q1_Bastille, 1)%]
</div>
<div class="input_cell clickable">
      [%CheckSelect(Q1_Gambetta, 1)%]
</div>
<div class="input_cell clickable">
      [%CheckSelect(Q1_Nation, 1)%]
</div>
<div class="input_cell clickable">
      [%CheckSelect(Q1_Bercy, 1)%]
</div>
<div class="input_cell clickable">
      [%CheckSelect(Q1_Odeon, 1)%]
</div>
<div class="input_cell clickable">
      [%CheckSelect(Q1_Invalides, 1)%]
</div>
<div class="input_cell clickable">
      [%CheckSelect(Q1_Auteuil, 1)%]
</div>
<div class="input_cell clickable">
      [%CheckSelect(Q1_Trocadero, 1)%]
</div>
<div class="input_cell clickable">
      [%CheckSelect(Q1_Convention, 1)%]
</div>
<div class="input_cell clickable">
      [%CheckSelect(Q1_Javel, 1)%]
</div>
<div class="input_cell clickable">
      [%CheckSelect(Q1_Montparnasse, 1)%]
</div>
<div class="input_cell clickable">
      [%CheckSelect(Q1_Plaisance, 1)%]
</div>
<div class="input_cell clickable">
      [%CheckSelect(Q1_StMichel, 1)%]
</div>
<div class="input_cell clickable">
      [%CheckSelect(Q1_PlaceItalie, 1)%]
</div>
<div class="input_cell clickable">
      [%CheckSelect(Q1_QuartierChinois, 1)%]
</div>

Best,

Answer 1

I think what you want to do is give the free format question a single radio variable in place of your multiple checkbox variables.  The HTML will probably look something like this:

<div class="input_cell clickable">
    [%RadioSelect(Q1_Location, 1)%]
</div>
<div class="input_cell clickable">
    [%RadioSelect(Q1_Location, 2)%]
</div>
...

Then your CSS would start with this:

#Q1_Location_1_graphical {position:relative; top:92px;left: 32px;}
#Q1_Location_2_graphical {position:relative; top:75px;left: 92px;}
...

"Location" should be replaced with the name of the radio variable in both codes.