lightning-radio-group in LWC

Question

I am trying to build the quiz app in LWC. this is the array in the controller file. User should get the question and select one answer via radio button.

quizList = [
        {
            id: "Question1",
            question : "Which one of the following is not a template loop?",
            answers: {
                a:"for loop",
                b:"iterator",
                c: "Map Loop"
            },
            correctAnswer: "c"
        },
        {
            id: "Question2",
            question : "Which of the file is invalid in LWC component folder?",
            answers: {
                a:".svg",
                b:".apex",
                c: ".js"
            },
            correctAnswer: "b"
        },
        {
            id: "Question3",
            question : "Which one of the following is not a directives?",
            answers: {
                a:"for:each",
                b:"if:true",
                c: "@track"
                
            },
            correctAnswer: "c"
        }
    ]

I am not able to understand how can I map option and value for the radio button in the html file.

I am able to map the question but answers are not coming in the radio button.

<lightning-radio-group name="quizquestion"
                          label={quiz.question}
                          options={quiz.question.answers}
                          value={quiz.question.answers}
                          type="radio"></lightning-radio-group>

current output

score 0 · Answer 1 · answered May 08 '22 at 12:20

try printing questions with template iterator.
> <template for:each={quizList} for:item="currItem">
> > <p key={currItem.id}> {currItem.question}</p> //this is for question
> >  <lightning-radio-group 
         key={q.id} 
         options={q.answers} 
         value={q.answers} 
         onchange={handleChange} 
         type="radio"></lightning-radio-group>


  </template>

for more details https://github.com/Ronak-Toshniwal/QuizApp-in-LWC-With-Validation

lightning-radio-group in LWC

1 Answers1