2

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.

enter image description here

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.

enter image description here

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!

5
  • You will need to use individual radio's. A group can only have one option selected
    – Eric
    Jul 5 '18 at 4:49
  • Do you want to use radio group kind of UI to select multiple options is that your question?
    – RedDevil
    Jul 5 '18 at 4:54
  • Hi @Eric, if you can see my component I have used <lightning:input type="radio" label="{!ans.Options__c}" name="options" /> but it is allowing me to select only one radio out all radio buttons of all question(2nd screenshot)
    – Developer
    Jul 5 '18 at 4:58
  • 1
    @Sagar - The name attribute needs to be unique. All radio's with the same name are considered a group. Standard HTML stuff not unique to SF
    – Eric
    Jul 5 '18 at 4:59
  • Hi @RedDevil, each ques will have only one ans so I want to choose only one ans hence i have used radiogroup but somehow it is not working. I dont want to select multiple options.
    – Developer
    Jul 5 '18 at 5:00
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

Quiz

1

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}" />

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.