Why is the quiz not showing HTML

[Codeman]

I want to make a quiz but it does not display the HTML code written into JS for the answers for example like.

JAVASCRIPT

     question: "What makes text",
      a: "<p></p>",
      b: "<text></text>",
      c: "<h1></h1>",
      answer: "A"
    },

but when I change the thing to

     question: "What makes text",
      a: "p tag",
      b: "text tag",
      c: "h1 tag",
      answer: "A"
    },

it works here is my code

JS

// pos is position of where the user in the test or which question they're up to
var pos = 0, test, test_status, question, choice, choices, chA, chB, chC, correct = 0;
// this is a multidimensional array with 4 inner array elements with 5 elements inside them
var questions = [
  {
      question: "What does HTML stand For?",
      a: "Heat Tacos Markup Language",
      b: "Hypertext Markup Language",
      c: "Hot Toolbox Makup Language",
      answer: "B"
    },
  {
      question: "What makes text",
      a: "<p></p>",
      b: "<text></text>",
      c: "<h1></h1>",
      answer: "A"
    },
  {
      question: "What makes links?",
      a: "<link href="tacos.com"></link>",
      b: "<a href="tacos.com">tacos</a>",
      c: "<a>tacos.com</a>",
      answer: "B"
    },
  {
      question: "What is 8 x 12?",
      a: "88",
      b: "112",
      c: "96",
      answer: "C"
    }
  ];
// this get function is short for the getElementById function  
function get(x){
  return document.getElementById(x);
}
// this function renders a question for display on the page
function renderQuestion(){
  test = get("test");
  if(pos >= questions.length){
    test.innerHTML = "<h2>You got "+correct+" of "+questions.length+" questions correct</h2>";
    get("test_status").innerHTML = "Test completed";
    // resets the variable to allow users to restart the test
    pos = 0;
    correct = 0;
    // stops rest of renderQuestion function running when test is completed
    return false;
  }
  get("test_status").innerHTML = "Question "+(pos+1)+" of "+questions.length;
  
  question = questions[pos].question;
  chA = questions[pos].a;
  chB = questions[pos].b;
  chC = questions[pos].c;
  // display the question
  test.innerHTML = "<h3>"+question+"</h3>";
  // display the answer options
  // the += appends to the data we started on the line above
  test.innerHTML += "<label> <input type='radio' name='choices' value='A'> "+chA+"</label><br>";
  test.innerHTML += "<label> <input type='radio' name='choices' value='B'> "+chB+"</label><br>";
  test.innerHTML += "<label> <input type='radio' name='choices' value='C'> "+chC+"</label><br><br>";
  test.innerHTML += "<button onclick='checkAnswer()'>Submit Answer</button>";
}
function checkAnswer(){
  // use getElementsByName because we have an array which it will loop through
  choices = document.getElementsByName("choices");
  for(var i=0; i<choices.length; i++){
    if(choices[i].checked){
      choice = choices[i].value;
    }
  }
  // checks if answer matches the correct choice
  if(choice == questions[pos].answer){
    //each time there is a correct answer this value increases
    correct++;
  }
  // changes position of which character user is on
  pos++;
  // then the renderQuestion function runs again to go to next question
  renderQuestion();
}
// Add event listener to call renderQuestion on page load event
window.addEventListener("load", renderQuestion);

HTML

  <h2 id="test_status"></h2>
    <div id="test"></div>

CSS

    div#test  {
            border:#5AB029 3px solid;
            padding:10px 40px 40px 40px;
            background-color:#E5FCE3;
            width:50%;
        color: black;
            }

all it shows is this

But when I change it so it does not have HTML as the selections It actually shows the content

What have I done wrong?

[m_hutley]

Your JSON for questions isn’t happy.

Two things:

1. Many parsers want an object’s keys in quotes.
2. You can’t put quotes inside quotes without escaping them. Take another look at Question 3 in your post, and note the colorations…