AI bugbash

frontend/js/fizika.js

@@ -14,6 +14,22 @@ function aspect() {
 }
 
 async function ajaxLoad(type) {
+  let topicQuestionCount = 15;
+  if (type != 1 && type != 2) {
+    const countInput = document.getElementById("numberof");
+    // Keep the empty-field default, but reject incomplete numeric input.
+    topicQuestionCount =
+      countInput.value === "" && !countInput.validity.badInput
+        ? 15
+        : countInput.valueAsNumber;
+    if (!isValidQuestionCount(topicQuestionCount)) {
+      countInput.setCustomValidity(QUESTION_COUNT_ERROR);
+      countInput.reportValidity();
+      return;
+    }
+    countInput.setCustomValidity("");
+  }
+
   reviewMode = 0;
   totalPoints = 0;
   loadedQuestions = [];
@@ -61,7 +77,6 @@ async function ajaxLoad(type) {
         15,
       );
     } else {
-      var NOQ = $("#numberof").val() ? $("#numberof").val() : 15;
       categories = [
         $("#mk").prop("checked") ? "mk" : "",
         $("#md").prop("checked") ? "md" : "",
@@ -79,7 +94,12 @@ async function ajaxLoad(type) {
         $("#cs").prop("checked") ? "cs" : "",
         $("#v").prop("checked") ? "v" : "",
       ];
-      result = await loadQuestions(false, categories, undefined, NOQ);
+      result = await loadQuestions(
+        false,
+        categories,
+        undefined,
+        topicQuestionCount,
+      );
     }
 
     $("#loadingGif").hide();
@@ -121,7 +141,7 @@ async function ajaxLoad(type) {
 // its correct answer, and report whether they got it right.
 function gradeQuestion(question) {
   var div = "#feladat" + question.id;
-  var selected = "#form" + question.id + " #rad" + question.correct;
+  var selected = `#question-${question.id}-answer-${question.correct}`;
   var isCorrect = $(selected).is(":checked");
   $(div).animate({ backgroundColor: isCorrect ? "#C6FF8C" : "#FF808C" }, 1100);
   return isCorrect;
@@ -163,7 +183,7 @@ function showCorrect() {
   reviewMode = 1;
   var percentage = scoreLoadedQuestions();
   loadedQuestions.forEach(function (question) {
-    $("#label" + question.id + ".rad" + question.correct).css(
+    $(`label[for="question-${question.id}-answer-${question.correct}"]`).css(
       "background-color",
       "#C6FF8C",
     );
@@ -315,6 +335,7 @@ $(document).ready(function () {
     initializeMonthDropdown($("#evszam").val());
     $("#honap").val("all");
   });
+  $("#honap").change(initializeQuestionDropdown);
 
   $("#mec").change(function () {
     var isChecked = this.checked;
@@ -338,6 +359,9 @@ $(document).ready(function () {
   $("#berettsegi").click(function (event) {
     ajaxLoad(2);
   });
+  $("#numberof").on("input", function () {
+    this.setCustomValidity("");
+  });
   $("#load").click(function (event) {
     ajaxLoad(isSearch ? 1 : 3);
   });

frontend/js/load.js

@@ -100,29 +100,25 @@ const loadQuestions = async (
     ({ id, source, description, a, b, c, d, image }, i) => {
       const qid = Number(id);
       const safeImage = image ? encodeURIComponent(image) : "";
+      const answersHtml = [a, b, c, ...(d ? [d] : [])]
+        .map((answer, answerIndex) => {
+          const answerNumber = answerIndex + 1;
+          const answerId = `question-${qid}-answer-${answerNumber}`;
+          return `
+          <input type="radio" id="${answerId}" name="question-${qid}" value="${answerNumber}">
+          <label for="${answerId}">${sanitizeQuestionHtml(answer)}</label>
+          <br>`;
+        })
+        .join("");
       resultHtml += `
       <div class="feladat card" id="feladat${qid}">
         <h2 style="float: left;">${i + 1}.</h2><h2>${sanitizeQuestionHtml(source)}</h2>
-        <pre>${sanitizeQuestionHtml(description)}</pre>
-        ${image ? `<img src="${API_BASE}/api/pics/${safeImage}" crossorigin="anonymous" onerror="this.onerror=null; this.src='pics/${safeImage}'"><br>` : ""}
         <form id="form${qid}">
-          <input type="radio" id="rad1" name="group">
-          <label id="label${qid}" class="rad1">${sanitizeQuestionHtml(a)}</label>
-          <br>
-          <input type="radio" id="rad2" name="group">
-          <label id="label${qid}" class="rad2">${sanitizeQuestionHtml(b)}</label>
-          <br>
-          <input type="radio" id="rad3" name="group">
-          <label id="label${qid}" class="rad3">${sanitizeQuestionHtml(c)}</label>
-          <br>
-          ${
-            d
-              ? `
-          <input type="radio" id="rad4" name="group">
-          <label id="label${qid}" class="rad4">${sanitizeQuestionHtml(d)}</label>
-          <br>`
-              : ""
-          }
+          <fieldset>
+            <legend>${sanitizeQuestionHtml(description)}</legend>
+            ${image ? `<img src="${API_BASE}/api/pics/${safeImage}" crossorigin="anonymous" onerror="this.onerror=null; this.src='pics/${safeImage}'"><br>` : ""}
+            <div class="answers">${answersHtml}</div>
+          </fieldset>
         </form>
       </div>
       `;
@@ -281,6 +277,45 @@ const initializeMonthDropdown = (selectedYear) => {
   }
 
   monthDropdown.innerHTML = monthOptions;
+  initializeQuestionDropdown();
+};
+
+// Offer only imported question numbers matching the selected year and paper.
+// With an "all" filter, use the union across the matching papers.
+const initializeQuestionDropdown = () => {
+  if (!questions) return;
+
+  const questionDropdown = document.getElementById("feladat");
+  if (!questionDropdown) return;
+
+  const selectedYear = document.getElementById("evszam").value;
+  const selectedPaper = document.getElementById("honap").value;
+  const previousQuestion = questionDropdown.value;
+  const questionNumbers = new Set();
+
+  questions.forEach(({ source }) => {
+    const match = source.match(/^(\d{4})\/([^/\s]+)\/([1-9]\d*)$/);
+    if (
+      match &&
+      (selectedYear === "all/" || selectedYear === `${match[1]}/`) &&
+      (selectedPaper === "all" || selectedPaper === match[2]) &&
+      Number.isSafeInteger(Number(match[3]))
+    ) {
+      questionNumbers.add(Number(match[3]));
+    }
+  });
+
+  const numberOptions = [...questionNumbers]
+    .sort((a, b) => a - b)
+    .map((number) => `<option value="/${number}">${number}. feladat</option>`)
+    .join("");
+  questionDropdown.innerHTML =
+    '<option value="/all">Összes feladat</option>' + numberOptions;
+
+  // Retain a still-valid selection; clear it when the new paper lacks it.
+  if (questionNumbers.has(Number(previousQuestion.slice(1)))) {
+    questionDropdown.value = previousQuestion;
+  }
 };
 
 // Helper function to get readable month labels
@@ -288,6 +323,7 @@ const getMonthLabel = (monthValue) => {
   // Handle known patterns
   const knownLabels = {
     1: "Május-Június",
+    "1ma": "Május-Június (magyar, mint idegen nyelv)",
     2: "Október-November",
     3: "Harmadik időszak",
     m1: "1. Mintafeladatsor",