Could someone please correct my JS code and tell me what was done in order to do so? I was wondering what did I do wrongly that leads my quiz questions and its alternatives to be not displayable inside the central div.

Contextualising my code: it is a two-questions form and the results of it should be displayed at the top of the page in the afterwards of a click in the Evaluate button, however my focus for now is to understand how one can make the quiz visible in the HTML/CSS page.

Link to CodePen: My code snippet

const quizQuestions = {
    questions = {
      question: "What is the of the state of Pará?",
      alternatives: {
        0: "São Paulo",
        1: "Guarulhos",
        2: "Campinas",
        3: "São Bernardo do Campo",
        4: "São José dos Campos",
        5: "Santo André",
        6: "Ribeirão Preto",
        7: "Belém",
        answer: "7"
      },

      {
        question: "What is the capital of the state of Amapá?",
        alternatives: {
          0: "Osasco",
          1: "Sorocaba",
          2: "Mauá",
          3: "Macapá",
          4 "São José do Rio Preto",
          5: "Mogi das Cruzes",
          6: "Santos",
          answer: "3"
        };

        document.getElementByClassName('.quiz-container ').addEventListener('click', function() {

          let container =
            document.querySelector('.quiz-container');
          container.innerHTML = '<div class="quiz-container"></div>';
          for (const [key, value] of Object.entries(quizQuestion.alternatives)) {
            container.innerHTML += `<input type="radio" name="choice" value="${key}"> ${value}`;
          }
          container.innerHTML += '<div><button type="submit" id="submit-button">Evaluate</button></div>';



          document.getElementById('submit2').addEventListener('click', function(event) {
            console.log('asdf');
            event.preventDefault();
            var selected = document.querySelector('input[type="radio"]:checked');
            if (selected && selected.value == quizQuestion.answer) {
              alert('It is super, super correct :D!');
            } else {
              alert('Unfortunately, it is incorrect :(!');
            }
          });
        });
body {
  background: rgb(209, 29, 83);
  margin: 0;
}

h1 {
  background: rgb(255, 184, 201);
  height: 60px;
  margin: 0;
  padding-left: 20px;
  padding-top: 20px;
  font-size: 45px;
  text-shadow: 3px 3px 9px;
  color: rgb(43, 29, 14);
}

.quiz-container {
  text-align: left;
  font-size: 25px;
  background: rgb(255, 209, 220);
  width: 700px;
  height: 4000px;
  margin: auto;
  margin-top: 100px;
  box-shadow: 9px 9px 10px;
  margin-bottom: 60px;
}

button {
  margin-left: 900px;
  padding-top: 0;
  margin-bottom: 60px;
}

.questions {
  color: #000000;
  text-align: center;
  font-size: 15px;
}
<head>
  <h1>QUIZ centred in Brazil</h1>
</head>

<body>
  <div class="quiz-container"></div>

  <div>
    <button type="submit" id="submit-button">Evaluate</button>
  </div>

  <script src="js/main.js"></script>
</body>