javascript我怎么解决这个问题，请帮帮我

Question

So im making a quiz app, im fetching data from a quiz api, the object of every quiz api looks like this:

{
   "correctAnswer": "Cycling",
   "incorrectAnswers": [
     "American Football",
     "Cricket",
     "Tennis"
   ],
   "question": "What sport would you associate with The Tour de France?",
}

As you can see, its an object that has a correct answer and an array with the incorrect answers. I have made two constants, one with the value of the correct answer and the other one is an array with the incorrect answers. I then sorted the two arrays (so they are mixed and the correct answer isn't always in the same place) and then i put the questions into the innerhtml of a container like this:

const correctQuestions = data[num].correctAnswer;
const incorrectQuestions = data[num].incorrectAnswers;
const combinedQuestions = [correctQuestions, ...incorrectQuestions].sort()
console.log([correctQuestions, ...incorrectQuestions])


      answerContainer.innerHTML = combinedQuestions.map((item,index) => 
` 
    <li><input type="radio" value = /*TRUE OR FALSE!!!, HOW DO I INCLUDE IT HERE?*/id=${index} name=${index}/> <label for=${index}>${item}</label></li>

    `

      ).join('')

But i have a very big problem, i already solved one, which is to sort the array so the correct answer is mixed with the incorrect ones. But the other problem is, each input doesn't include their corresponding values, if the answer is true then its value should be true, but i have no idea how to include the value into the input, always maintaining the array mixed.

So in summary the question is: How can i put the value of true or false in each input? Or is there any other way of displaying the answers but with the true or false value?

Answer 1

Test whether item == correctQuestions and put the appropriate value there.

answerContainer.innerHTML = combinedQuestions.map((item,index) => 
` 
    <li><input type="radio" value="${item == correctQuestions ? "true" : "false"}" id="${index}" name="answers" /> <label for="${index}">${item}</label></li>

    `
      ).join('')

Also you should not use name=${index} . A radio button group is identified by them having the same name.