lightning:radioGroup - not able to select the options

Question

My requirement is I want to show questions and its options on lightning component and they are populating as expected. However since each question may have 2/4 options, I have used lightning:radioGroup to pick the correct answer. But I am not able to see the radio button to select the ans.

Also I tried to use Lightning:input of type "radio"tag, by doing so I can select option but the problem is I am able to select only one radio button on whole lightning component but if I have more than one question on a component, it won't allow me to choose answers for all ques.

Lightning cmp

   <aura:attribute name="Questions" type="Questions__c[]"/> 
   <div style="width:600px; height:400px;position: absolute; top: 2rem; left: 2rem; margin:0 auto;">

    <aura:iteration items="{!v.Questions}" var="ques" aura:id="accID"  indexVar="index">
       <div>
           <li type="dice"> {!ques.Question_Context__c}</li>
             <div style="absolute;left: 8rem; margin:0 auto;">
              <ul>
              <aura:iteration items="{!ques.Answers__r}" var="ans" indexVar="index">
             <li>
                 <!-- 2nd Approach -->  
                <lightning:input type="radio" label="{!ans.Options__c}" name="options" />
               <!-- 1st Approach -->                 
             <lightning:radioGroup name="radioGroupRequired"
                          label="{! ans.Options__c}"
                          options="{! ans.Options__c}"
                          value="{! v.radioGrpValue}"
                          type="radio"
                          required="true"/>
           </li>
        </aura:iteration>
      </ul>
    </div>  
     <hr/>
       </div>
  </aura:iteration>

   <div class="slds-align_absolute-center" >
    <lightning:button label="Submit" onclick="{! c.handleClick }"/>
   </div>

Apex class:

public class OnlineSFDCExam {
   public class QuesAndAnsWrapper {
     @AuraEnabled public Integer total {get;set;}
     @AuraEnabled public List<Questions__c> questions{get;set;}
    }
 @AuraEnabled
public static QuesAndAnsWrapper fetchQuestions(Decimal pageNumber) {

    QuesAndAnsWrapper obj =  new QuesAndAnsWrapper();
    obj.total = [SELECT count() FROM Questions__c];
    obj.questions = [SELECT id, Name, Question_Context__c,
                   (SELECT Id,Options__c FROM Answers__r)
                   FROM Questions__c ];
   return obj;
}

}

Where Questions__c is master object and Answers__c is child object. Please help!

Answer 1

I have done same poc with your use case and Here is the way to solve this using lightning:radioGroup.

Basically, you need to create unique name for that lightning:radioGroup and here I am using question text as name.

cmp

<aura:component controller="QuestionAnswerClass" access="global" >
    <aura:attribute name="Questions" type="List"/>
    <aura:attribute name="radioGrpValue" type="List"/> 

    <aura:handler name="init" value="{!this}" action="{!c.doInit}"/>

    <aura:iteration items="{!v.Questions}" var="ques">
        <lightning:radioGroup name="{!ques.QuestionText__c}"
                      label="{! ques.QuestionText__c}" 
                      options="{!ques.Answers__r}"
                      value="{! v.radioGrpValue}"
                      type="radio"
                      required="true"/>
    </aura:iteration> 
</aura:component>

Controller

({
    doInit : function(component, event, helper) {
        helper.doInit(component, event,helper);       
    }
})

Helper

({
    doInit : function(component, event, helper) {

        var action = component.get("c.getQuestionAnswers");

        action.setCallback(this, function(response) {
            var state = response.getState();
            if (state === "SUCCESS") {
                var returnVal = response.getReturnValue();
                var finalList = [];
                for(var i=0; i<returnVal.length; i++)
                {
                    var answers = returnVal[i].Answers__r;
                    //append label and value into the list.
                    for(var j=0; j<answers.length; j++)
                    {
                        answers[j].label = answers[j].Option__c;
                        answers[j].value = answers[j].Option__c;
                    }
                    finalList.push(returnVal[i]);         
                }

                component.set("v.Questions", finalList);
            }
            else {
                console.log("Failed with state: " + state);
            }
        });
        // Send action off to be executed
        $A.enqueueAction(action);
    }
})

Apex Controller

public class QuestionAnswerClass
{
    @AuraEnabled
    public static List<Question__c> getQuestionAnswers()
    {
        List<Question__c> lstQues = [SELECT Name, QuestionText__c, 
                                    (SELECT Name, Option__c, Correct_Answer__c FROM Answers__r)
                                    FROM Question__c];
        return lstQues;

    }   
}

Final Outcome

Answer 2

You need to make Name attribute unique for all questions. So you can add dynamic suffix/prefix on that. You can use indexVar to make them dynamic.

<aura:iteration items="{!v.Questions}" var="ques" aura:id="accID"  indexVar="outindex">
       <div>
           <li type="dice"> {!ques.Question_Context__c}</li>
             <div style="absolute;left: 8rem; margin:0 auto;">
              <ul>
              <aura:iteration items="{!ques.Answers__r}" var="ans" indexVar="inindex">
             <li>
                 <!-- 2nd Approach -->  
                <lightning:input type="radio" label="{!ans.Options__c}" name="{!'option'+outindex}" />