Hi All,

I have two custom objects Questions and Answers. Answers has a lookup to questions.

I am displaying the Questions and the related answers in datatable.

Here I am displaying some empty circles. The number of empty circles will be same as the number of circles.

Whenever the user selects an answer, the empty circle will go and the highlited circle will be in that place.

Following is the code I am using

<apex:page controller="SuitabilitySurveycontroller" action="{!loadsurveyquestions}" showHeader="true" sidebar="false">
<style>
        .redChar{
            background-color:#659EC7;
            color:#FFFFFF;
            font-size: 18px;
            padding:5px;
            
        }
        .bluechar{
            background-color:#E0FFFF;
            font-size: 11px;
            
        }
        .bluechar1{
            background-color:#E0FFFF;
            font-size: 24px;
            
        }
        
        .container{
            background-color: #7A5DC7;
            color: #FFFFFF;
            font-size: 20px;
            
            text-align: center;
        }
    </style>
  <apex:form >
  <apex:outputpanel id="theimage">
      <apex:repeat value="{!circl}" var="noq">
          <apex:image value="{!$Resource.EmptyCircle}" width="50" height="50"/>

      </apex:repeat>
      <apex:repeat value="{!circl2}" var="noq">

          <apex:image value="{!$Resource.FilledCircle}" width="50" height="50"/>
      </apex:repeat>
</apex:outputpanel>
          <apex:dataTable value="{!surveyListPage}" var="surveyqns" cellpadding="10" width="1000px" captionClass="bluechar1">
              <apex:facet name="caption">{!stepno}</apex:facet>&nbsp;&nbsp;&nbsp;&nbsp;
              <apex:outputPanel id="theImage1">
              <apex:image id="theImage" value="{!$Resource.EmptyCircle}" width="50" height="50" rendered="{!im}"/>
              </apex:outputPanel>
              <apex:column rendered="{!ISNULL(surveyqns.question.Question_Name__c)}" styleClass="redChar">
                   <apex:outputText value="{!surveyqns.question.Question_Number__c}"/>
                   &nbsp;&nbsp;&nbsp;&nbsp;
                  <apex:outputText value="{!surveyqns.question.Name}"/>
              </apex:column>
              <apex:column rendered="{!NOT(ISNULL(surveyqns.question.Question_Name__c))}" styleClass="redChar">
                  <apex:outputText value="{!surveyqns.question.Question_Number__c}"/>
                   &nbsp;&nbsp;&nbsp;&nbsp;
                  <apex:outputText value="{!surveyqns.question.Question_Name__c}"/>
              </apex:column>    
              <apex:column breakBefore="true" rendered="{!surveyqns.question.Type__c == 'Radio'}" styleClass="bluechar">
                  <apex:selectRadio value="{!surveyqns.response.Response_Text__c}"
                  rendered="{!surveyqns.question.Type__c == 'Radio'}" layout="pageDirection">
                            <apex:selectOptions value="{!surveyqns.ansop}"/>
                            <apex:actionsupport event="onclick" rerender="theimage" action="{!incrementCounter}"/> 
                        </apex:selectRadio>
              </apex:column>
              <apex:column styleClass="bluechar">
                  <apex:inputField value="{!surveyqns.response.Response_Number__c}" rendered="{!surveyqns.question.Type__c == 'Number'}">
                  <apex:actionsupport event="onchange" rerender="theimage" action="{!incrementCounter}"/>
                  </apex:inputField>
              </apex:column>
              <apex:column styleClass="bluechar" rendered="{!surveyqns.question.Type__c == 'Currency'}" breakBefore="true">
                  <b><apex:outputLabel >{!$ObjectType.Response__c.fields.Application_Name__c.label}</apex:outputLabel></b>&nbsp;&nbsp;
                  <apex:inputField value="{!surveyqns.response.Application_Name__c}"/><br/><br/>
                  <b><apex:outputLabel >{!$ObjectType.Response__c.fields.Data_Center_Infrastructure__c.label}</apex:outputLabel></b>&nbsp;&nbsp;
                  <apex:inputField value="{!surveyqns.response.Data_Center_Infrastructure__c}"/><br/><br/>
                  <b><apex:outputLabel >{!$ObjectType.Response__c.fields.Hardware_Infrastructure__c.label}</apex:outputLabel></b>&nbsp;&nbsp;
                  <apex:inputField value="{!surveyqns.response.Hardware_Infrastructure__c}"/><br/><br/>
                  <!--<b><apex:outputLabel>{!$ObjectType.Response__c.fields.Software_License_and_Maintenance_fees__c.label}</apex:outputLabel></b>&nbsp;&nbsp;
                  <apex:inputField value="{!surveyqns.response.Software_License_and_Maintenance_fees__c }"/><br/><br/>-->
                  <b><apex:outputLabel >{!$ObjectType.Response__c.fields.Application_Development__c.label}</apex:outputLabel></b>&nbsp;&nbsp;
                  <apex:inputField value="{!surveyqns.response.Application_Development__c}"/><br/><br/>
                  <b><apex:outputLabel >{!$ObjectType.Response__c.fields.Application_Maintenance__c.label}</apex:outputLabel></b>&nbsp;&nbsp;
                  <apex:inputField value="{!surveyqns.response.Application_Maintenance__c}"/><br/><br/>
                  <b><apex:outputLabel >{!$ObjectType.Response__c.fields.Infrastructure_Administration__c.label}</apex:outputLabel></b>&nbsp;&nbsp;
                  <apex:inputField value="{!surveyqns.response.Infrastructure_Administration__c}"/><br/><br/>
                  <b><apex:outputLabel >{!$ObjectType.Response__c.fields.Software_License_and_Maintenance_fees__c.label}</apex:outputLabel></b>&nbsp;&nbsp;
                  <apex:inputField value="{!surveyqns.response.Software_License_and_Maintenance_fees__c}"/><br/><br/>
                  
              </apex:column>
          </apex:dataTable>
          <center><apex:commandButton value="Next" action="{!captureresponse}"/></center>
      
  </apex:form>
  <script type="text/javascript">
  function call(){
  alert('alert');
  }
  </script>
</apex:page>

public class SuitabilitySurveycontroller {

boolean selec=false;
List<String> tests=new List<String>();
integer dispCount;
integer dispCount2;
 public void incrementCounter() {
     system.debug('tests------'+tests.size());
     system.debug('dispCount2------'+dispCount2);
     system.debug('inside method');
     if(noofquestions>dispCount2){ //&& dispCount2==tests.size()){
         system.debug('tests------'+tests.size());
        //for(SurveyItem ss:surveyListPage)
        //tests.add(ss.response.Response_Text__c);
        dispCount--;
        dispCount2++;
        
        }
        
    }


public List<string> getcircl(){
    String[] x=new String[dispCount];
    for(integer i=0;i<x.size();i++)
        x[i]='ex';
        
    return x;
}
public List<string> getcircl2(){
    String[] x=new String[dispCount2];
    for(integer i=0;i<x.size();i++)
        x[i]='ex';
        
    return x;
}

List<Question__c> questionlist = new List<Question__c>();
List<Answer__c> anslist = new List<Answer__c>();
public Integer noofquestions{get;set;}
String stepnumber;
Set<Id> Questionsid = new Set<Id>();
Map<Id,List<Answer__c>> ansmap = new Map<Id,List<Answer__c>>();
public List<SurveyItem> surveyListPage{get; set;}
List<Response__c> responselist = new List<Response__c>();
String stepno;
public Map<Id,Response__c> responseMap = new Map<Id, Response__c>();

Boolean selet=false;
    public Boolean getim(){
        selet=true;
        return selet;
    }

    public SuitabilitySurveycontroller(){
        stepnumber = system.currentpagereference().getparameters().get('step');
        System.debug('step-------'+stepnumber);
        noofquestions = [select count() from Question__c where Step__c=:stepnumber];
        dispCount=noofquestions;
        dispCount2=0;
        system.debug('count----'+noofquestions);
        questionlist = [select id,name,Question_Number__c,Type__c,Question_Name__c from Question__c where Step__c=:stepnumber order by Question_Number__c];
        system.debug('questionlist------'+questionlist);
        for(Question__c qnid:questionlist)
            Questionsid.add(qnid.id);
        anslist = [select Question__c,name from Answer__c where Question__c in :Questionsid order by name desc];
        system.debug('anslist------'+anslist);
        for(Answer__c ans:anslist){
            List<Answer__c> theList=ansmap.get(ans.Question__c);
            if (null==theList){
                theList=new List<Answer__c>();
                ansmap.put(ans.Question__c,theList);
              }
              theList.add(ans);
        }
        system.debug('ansmap--------'+ansmap);
    }
    public void loadsurveyquestions(){
        surveyListPage = new List<SurveyItem>();
        for(Question__c qn:questionlist){
        Response__c re = responseMap.get(qn.id);
        if ( re == null ) {
            re = new Response__c(question__c = qn.id);  
            responseMap.put(qn.id, re);
        }
            surveyListPage.add(new SurveyItem(qn,ansmap.get(qn.id),re));
            
        }
    }
    
    public class SurveyItem{
        public Question__c question { set; get;}
        List<Selectoption> ansop = new List<Selectoption>();
        public List<Selectoption> getansop(){
        return ansop;
        }
        //public String questionumber{get;set;}
        
        public Response__c response  { set; get;}
        public SurveyItem(Question__c q,List<Answer__c> answ,Response__c resp){
            system.debug('inside wrapper class-----------'+q+'----'+answ);
            question=q;
            if(answ!=null){
            for(Integer i=0;i<answ.size();i++){
                ansop.add(new selectoption(answ[i].name,answ[i].name));
        }
        }
        response = resp;
        //questionumber =q.Question_Number__c + ' of '+ noofquestions;
    }
    }
    
    public String getstepno(){
        stepno = 'Step '+stepnumber;
        return stepno;
    }
    public pagereference captureresponse(){
        for(SurveyItem responsecapture:surveyListPage){
            
            responselist.add(responsecapture.response);
        }
        insert responselist;
        if(stepnumber!='9'){
            system.debug('stepnumber in save--------'+Integer.valueof(stepnumber));
            Integer stepno = Integer.valueof(stepnumber)+1;
            system.debug('secondstep number--------'+stepno);
            pagereference p = new pagereference('/apex/SuitabilitySurveywizard?step='+stepno);
            p.setredirect(true);
            return p;
        }
        else{
            pagereference p = new pagereference('http://www.google.com');
            p.setredirect(true);
            return p;
        }
        
    }
}

But the issue I am facing is, after selecting an answer if the user changes the answer of the same question, the

second empty circle is getting vanished and a new filled circle is getting in place there.

So after answering a single question, two highlited circles are being displayed.

How many times the answer is clicked, that many highlited circles are being displayed.

I am not able to understand how to solve this issue.

Any suggestions will be helpful

Thanks

Arvind