How can I track quiz answers width GTM?

Question

I have a simple javascript quiz. The html is pretty simple :

 <div class="quiz-container">
      <div id="question-container">
        <h3 id="question">Question</h3>
        <div id="answer-buttons"></div>
      </div>
      <button id="next-btn" class="btn hide">Next</button>
      <div id="result" class="hide"></div>
      <button id="restart-btn" class="btn hide">restart</button>
    </div>

When clicking on the Next button, there is no page reload, the content is simply replaced via JavaScript;

So we pass the different screens, and the different answers are injected into the div#asnwer-button. The IDs of the radio buttons are incremented, and are always the same regardless of the screen. So for each question, I have #answer1, #answer2 etc..

So I always have the same IDs for each screen (question) and the same ids for each radio button.

I'm asked if I can track the user journey, i.e., up to what question it was, what were the answers ticked off... I have the impression that this is impossible in the first place, because there is no differentiating element.

Maybe I'm wrong. Anyone know if this is possible?

Here is the working code.

Is it possible as it stands, without changing anything in the code, to track how far the user has been, how many times screens 2, 3,4 have been reached and how many correct answers people have obtained?

I followed this tutorial. But as he says, when you switch from one screen to another, there's no data persistence, and he's not talking about whether or not you can track radio buttons as part of a JavaScript quiz.

For me there is no differentiating element here to track on GTM.

Any help is appreciated !

const questionContainer = document.getElementById("question-container");
const questionElement = document.getElementById("question");
const answerButtons = document.getElementById("answer-buttons");
const nextButton = document.getElementById("next-btn");
const restartButton = document.getElementById("restart-btn");
const resultDiv = document.getElementById("result");

let shuffledQuestions, currentQuestionIndex, score;

const questions = [
  {
    question: "What is 2 + 2 equal?",
    answers: [
      { text: "4", correct: true },
      { text: "22", correct: false },
      { text: "222", correct: false },
      { text: "2222", correct: false },
    ],
  },
  {
    question: "What does HTML mean?",
    answers: [
      { text: "HyperText Markup Language", correct: true },
      { text: "HighText Machine Language", correct: false },
      { text: "HyperText Machine Language", correct: false },
      { text: "HighText Markup Language", correct: false },
    ],
  },
  {
    question: "What property is used to change the background color?",
    answers: [
      { text: "color", correct: false },
      { text: "bgColor", correct: false },
      { text: "background-color", correct: true },
      { text: "background", correct: false },
    ],
  },
  {
    question: "What HTML element do we put JavaScript in?",
    answers: [
      { text: "<js>", correct: false },
      { text: "<javascript>", correct: false },
      { text: "<script>", correct: true },
      { text: "<scripting>", correct: false },
    ],
  },
];

startQuiz();

function startQuiz() {
  score = 0;
  questionContainer.style.display = "flex";
  shuffledQuestions = questions.sort(() => Math.random() - 0.5);
  currentQuestionIndex = 0;
  nextButton.classList.remove("hide");
  restartButton.classList.add("hide");
  resultDiv.classList.add("hide");
  setNextQuestion();
}

function setNextQuestion() {
  resetState();
  showQuestion(shuffledQuestions[currentQuestionIndex]);
}

function showQuestion(question) {
  questionElement.innerText = question.question;
  question.answers.forEach((answer, index) => {
    const inputGroup = document.createElement("div");
    inputGroup.classList.add("input-group");

    const radio = document.createElement("input");
    radio.type = "radio";
    radio.id = "answer" + index;
    radio.name = "answer";
    radio.value = index;

    const label = document.createElement("label");
    label.htmlFor = "answer" + index;
    label.innerText = answer.text;

    inputGroup.appendChild(radio);
    inputGroup.appendChild(label);
    answerButtons.appendChild(inputGroup);
  });
}

function resetState() {
  while (answerButtons.firstChild) {
    answerButtons.removeChild(answerButtons.firstChild);
  }
}

nextButton.addEventListener("click", () => {
  const answerIndex = Array.from(
    answerButtons.querySelectorAll("input")
  ).findIndex((radio) => radio.checked);
  if (answerIndex !== -1) {
    if (shuffledQuestions[currentQuestionIndex].answers[answerIndex].correct) {
      score++;
    }
    currentQuestionIndex++;
    if (shuffledQuestions.length > currentQuestionIndex) {
      setNextQuestion();
    } else {
      endQuiz();
    }
  } else {
    alert("select an aswer");
  }
});

restartButton.addEventListener("click", startQuiz);

function endQuiz() {
  questionContainer.style.display = "none";
  nextButton.classList.add("hide");
  restartButton.classList.remove("hide");
  resultDiv.classList.remove("hide");
  resultDiv.innerText = `score : ${score} / ${shuffledQuestions.length}`;
}

   <div class="quiz-container">
      <div id="question-container">
        <h3 id="question">Question</h3>
        <div id="answer-buttons"></div>
      </div>
      <button id="next-btn" class="btn hide">Next</button>
      <div id="result" class="hide"></div>
      <button id="restart-btn" class="btn hide">Restart</button>
    </div>

Answer 1

Yes, it is indeed possible to track the user's journey and their selected answers even without differentiating IDs for each question or radio button.

Use JavaScript to Manage Quiz State: Instead of relying solely on static HTML elements with fixed IDs, use JavaScript to dynamically generate the quiz questions and their corresponding answer options. You can store the questions and answers in arrays or objects.

Store User Responses: As the user progresses through the quiz and selects answers, store their responses in an array or object. You can use the question index or some other identifier to track which question each response corresponds to. And update the UI dynamically based on the user's progress and responses.

Utilize Browser Storage: You can use browser storage mechanism like localStorage to store the users progress and it will persist the data across page refresh or across different pages/questions.