目前，我正在为我的信息通信技术学士和教育学士做毕业设计。因此，我正在做一个"测验"，根据这个测验，学生们可以评估他们在21世纪技能的新能力方面的进展。
我在SitePoint (https://www.sitepoint.com/simple-javascript-quiz/)上读过一篇来自Yaphi Berhanu的很棒的文章，它使在屏幕上打印问题并存储正确答案的数量成为可能。
对于这个项目，我需要添加变量"类别"来存储正确答案的特定类别的金额。
直到今天，我调整了一个测验的代码，它将结果存储在6个不同的隐藏输入值中，但它仍然没有将结果存储在正确的类别中。
"未捕获的引用错误：未定义类别"
如何/在何处定义"category"变量？
代码片段如下所示：

(function() {
  const myQuestions = [{
      question: "",
      category: "1",
      answers: {
        a: "Superman",
        b: "The Terminator",
        c: "Waluigi, obviously"
      },
      correctAnswer: "c"
    },
    {
      question: "",
      category: "2",
      answers: {
        a: "SitePoint",
        b: "Simple Steps Code",
        c: "Trick question; they're both the best"
      },
      correctAnswer: "c"
    },
    {
      question: "",
      category: "3",
      answers: {
        a: "Antarctica",
        b: "Exploring the Pacific Ocean",
        c: "Sitting in a tree",
        d: "Minding his own business, so stop asking"
      },
      correctAnswer: "c"
    },
    {
      question: "",
      category: "4",
      answers: {
        a: "Antarctica",
        b: "Exploring the Pacific Ocean",
        c: "Sitting in a tree",
        d: "Minding his own business, so stop asking"
      },
      correctAnswer: "c"
    },
    {
      question: "",
      category: "5",
      answers: {
        a: "Antarctica",
        b: "Exploring the Pacific Ocean",
        c: "Sitting in a tree",
        d: "Minding his own business, so stop asking"
      },
      correctAnswer: "c"
    },
    {
      question: "",
      category: "6",
      answers: {
        a: "Antarctica",
        b: "Exploring the Pacific Ocean",
        c: "Sitting in a tree",
        d: "Minding his own business, so stop asking"
      },
      correctAnswer: "c"
    }
  ];

  function buildQuiz() {
    // we'll need a place to store the HTML output
    const output = [];

    // for each question...
    myQuestions.forEach((currentQuestion, questionNumber) => {
      // we'll want to store the list of answer choices
      const answers = [];

      // here we store the questioncategory
      const category = [];

      // and for each available answer...
      for (letter in currentQuestion.answers) {
        // ...add an HTML radio button
        answers.push(
          `<label>
             <input type="radio" name="question${questionNumber}" value="${letter}">
              ${letter} :
              ${currentQuestion.answers[letter]}
           </label>`
        );
      }

      // add this question and its answers to the output
      output.push(
        `<div class="slide">
           <div class="question"> ${currentQuestion.question} </div>
           <div class="answers"> ${answers.join("")} </div>
         </div>`
      );
    });

    // finally combine our output list into one string of HTML and put it on the page
    quizContainer.innerHTML = output.join("");
  }

  function showResults() {
    // gather answer containers from our quiz
    const answerContainers = quizContainer.querySelectorAll(".answers");

    // keep track of user's answers
    let numCorrect1 = 0;
    let numCorrect2 = 0;
    let numCorrect3 = 0;
    let numCorrect4 = 0;
    let numCorrect5 = 0;
    let numCorrect6 = 0;

    // for each question...
    myQuestions.forEach((currentQuestion, questionNumber) => {
      // find selected answer
      const answerContainer = answerContainers[questionNumber];
      const selector = `input[name=question${questionNumber}]:checked`;
      const userAnswer = (answerContainer.querySelector(selector) || {}).value;

      // if answer is correct
      if (userAnswer === currentQuestion.correctAnswer) {
        // add to the number of correct answers
        if (category === 1) {
          numCorrect1++;
        }
        if (category === 2) {
          numCorrect2++;
        }
        if (category === 3) {
          numCorrect3++;
        }
        if (category === 4) {
          numCorrect4++;
        }
        if (category === 5) {
          numCorrect5++;
        }
        if (category === 6) {
          numCorrect6++;
        }

        // color the answers green
        answerContainers[questionNumber].style.color = "lightgreen";
      } else {
        // if answer is wrong or blank
        // color the answers red
        answerContainers[questionNumber].style.color = "red";
      }
    });

    // show number of correct answers out of total
    resultsContainer1.value = `${numCorrect1}`;
    resultsContainer2.value = `${numCorrect2}`;
    resultsContainer3.value = `${numCorrect3}`;
    resultsContainer4.value = `${numCorrect4}`;
    resultsContainer5.value = `${numCorrect5}`;
    resultsContainer6.value = `${numCorrect6}`;
  }

  function showSlide(n) {
    slides[currentSlide].classList.remove("active-slide");
    slides[n].classList.add("active-slide");
    currentSlide = n;

    if (currentSlide === 0) {
      previousButton.style.display = "none";
    } else {
      previousButton.style.display = "inline-block";
    }

    if (currentSlide === slides.length - 1) {
      nextButton.style.display = "none";
      previousButton.style.display = "none";
      submitButton.style.display = "inline-block";
    } else {
      nextButton.style.display = "inline-block";
      submitButton.style.display = "none";
    }
  }

  function showNextSlide() {
    showSlide(currentSlide + 1);
  }

  function showPreviousSlide() {
    showSlide(currentSlide - 1);
  }

  const quizContainer = document.getElementById("quiz");
  const resultsContainer1 = document.getElementById("results1");
  const resultsContainer2 = document.getElementById("results2");
  const resultsContainer3 = document.getElementById("results3");
  const resultsContainer4 = document.getElementById("results4");
  const resultsContainer5 = document.getElementById("results5");
  const resultsContainer6 = document.getElementById("results6");
  const submitButton = document.getElementById("submit");

  // display quiz right away
  buildQuiz();

  const previousButton = document.getElementById("previous");
  const nextButton = document.getElementById("next");
  const slides = document.querySelectorAll(".slide");
  let currentSlide = 0;

  showSlide(0);

  // on submit, show results
  submitButton.addEventListener("click", showResults);
  previousButton.addEventListener("click", showPreviousSlide);
  nextButton.addEventListener("click", showNextSlide);
})();

.question {
  font-size: 0px;
  margin-bottom: 0px;
}

.answers {
  margin-bottom: 0px;
  text-align: left;
  display: inline-block;
}

.answers label {
  display: block;
  margin-bottom: 0px;
}

.slide {
  position: absolute;
  left: 0px;
  top: 0px;
  width: 100%;
  z-index: 1;
  opacity: 0;
  transition: opacity 0.5s;
}

.active-slide {
  opacity: 1;
  z-index: 2;
}

.quiz-container {
  position: relative;
  height: 100px;
  margin-top: 0px;
}

<div class="quiz-container">
  <div id="quiz"></div>
</div>
<button class="w3-button w3-block w3-blue w3-section w3-padding w3-half" type="button" id="previous"><i class="fa fa-angle-left"></i> Vorige</button>
<button class="w3-button w3-block w3-blue w3-section w3-padding w3-half" type="button" id="next">Volgende <i class="fa fa-angle-right"></i></button>
<button class="w3-button w3-block w3-blue w3-section w3-padding" type="button" id="submit" name="submit">Verzenden</button>
<input id="results1" type="hidden" name="1" value="">
<input id="results2" type="hidden" name="2" value="">
<input id="results3" type="hidden" name="3" value="">
<input id="results4" type="hidden" name="4" value="">
<input id="results5" type="hidden" name="5" value="">
<input id="results6" type="hidden" name="6" value="">
<input type="hidden" name="usrname" value="">