AI bugbash
This commit is contained in:
parent
a97ca3852e
commit
ea84a911f4
5 changed files with 384 additions and 61 deletions
|
|
@ -18,7 +18,18 @@ h2 {
|
|||
text-align: center;
|
||||
color: #0a0f14;
|
||||
}
|
||||
pre {
|
||||
.card fieldset {
|
||||
border: 0;
|
||||
padding: 0;
|
||||
margin: 1.5em 0 0;
|
||||
min-width: 0;
|
||||
}
|
||||
.card legend {
|
||||
padding: 0;
|
||||
margin-bottom: 1em;
|
||||
}
|
||||
pre,
|
||||
.card legend {
|
||||
text-align: justify;
|
||||
font-family: "Open sans", sans-serif;
|
||||
font-weight: 300;
|
||||
|
|
@ -45,7 +56,8 @@ img {
|
|||
h2 {
|
||||
font-size: 1.25rem;
|
||||
}
|
||||
pre {
|
||||
pre,
|
||||
.card legend {
|
||||
font-size: 1rem;
|
||||
line-height: 1.6;
|
||||
text-align: left;
|
||||
|
|
|
|||
|
|
@ -12,6 +12,7 @@ input[type="radio"] {
|
|||
opacity: 0;
|
||||
}
|
||||
input[type="radio"] + label {
|
||||
cursor: pointer;
|
||||
display: inline;
|
||||
font-family: "Open Sans", sans-serif;
|
||||
font-weight: 300;
|
||||
|
|
@ -29,12 +30,12 @@ input[type="radio"]:checked + label {
|
|||
}
|
||||
|
||||
@media only screen and (max-width: 1000px) {
|
||||
.card form {
|
||||
.card .answers {
|
||||
display: grid;
|
||||
grid-template-columns: 28px minmax(0, 1fr);
|
||||
gap: 0.75em 0.5em;
|
||||
}
|
||||
.card form br {
|
||||
.card .answers br {
|
||||
display: none;
|
||||
}
|
||||
input[type="radio"] {
|
||||
|
|
|
|||
|
|
@ -135,94 +135,98 @@
|
|||
<div class="fele" id="bal">
|
||||
<div class="negyzet main">
|
||||
<input type="checkbox" id="mec" />
|
||||
<label class="mbcheck">Mechanika</label>
|
||||
<label for="mec" class="mbcheck">Mechanika</label>
|
||||
</div>
|
||||
<br />
|
||||
<div class="negyzet">
|
||||
<input type="checkbox" id="mk" />
|
||||
<label class="mbcheck">Kinematika</label>
|
||||
<label for="mk" class="mbcheck">Kinematika</label>
|
||||
</div>
|
||||
<br />
|
||||
<div class="negyzet">
|
||||
<input type="checkbox" id="md" />
|
||||
<label class="mbcheck">Dinamika</label>
|
||||
<label for="md" class="mbcheck">Dinamika</label>
|
||||
</div>
|
||||
<br />
|
||||
<div class="negyzet">
|
||||
<input type="checkbox" id="me" />
|
||||
<label class="mbcheck">Munka és energia</label>
|
||||
<label for="me" class="mbcheck">Munka és energia</label>
|
||||
</div>
|
||||
<br />
|
||||
<div class="negyzet">
|
||||
<input type="checkbox" id="mf" />
|
||||
<label class="mbcheck">Folyadékok és gázok mechanikája</label>
|
||||
<label for="mf" class="mbcheck"
|
||||
>Folyadékok és gázok mechanikája</label
|
||||
>
|
||||
</div>
|
||||
<br />
|
||||
<div class="negyzet">
|
||||
<input type="checkbox" id="mr" />
|
||||
<label class="mbcheck">Rezgések és hullámok</label>
|
||||
<label for="mr" class="mbcheck">Rezgések és hullámok</label>
|
||||
</div>
|
||||
<br />
|
||||
<div class="negyzet main">
|
||||
<input type="checkbox" id="h" />
|
||||
<label class="mbcheck">Hőtan</label>
|
||||
<label for="h" class="mbcheck">Hőtan</label>
|
||||
</div>
|
||||
<br />
|
||||
<div class="negyzet main">
|
||||
<input type="checkbox" id="ele" />
|
||||
<label class="mbcheck">Elektromosság</label>
|
||||
<label for="ele" class="mbcheck">Elektromosság</label>
|
||||
</div>
|
||||
<br />
|
||||
<div class="negyzet">
|
||||
<input type="checkbox" id="es" />
|
||||
<label class="mbcheck">Elektrosztatika</label>
|
||||
<label for="es" class="mbcheck">Elektrosztatika</label>
|
||||
</div>
|
||||
<br />
|
||||
<div class="negyzet">
|
||||
<input type="checkbox" id="ee" />
|
||||
<label class="mbcheck">Egyenáram</label>
|
||||
<label for="ee" class="mbcheck">Egyenáram</label>
|
||||
</div>
|
||||
<br />
|
||||
<div class="negyzet">
|
||||
<input type="checkbox" id="ev" />
|
||||
<label class="mbcheck">Váltakozó áram</label>
|
||||
<label for="ev" class="mbcheck">Váltakozó áram</label>
|
||||
</div>
|
||||
<br />
|
||||
</div>
|
||||
<div class="fele" id="jobb">
|
||||
<div class="negyzet main">
|
||||
<input type="checkbox" id="m" />
|
||||
<label class="mbcheck">Mágnesesség</label>
|
||||
<label for="m" class="mbcheck">Mágnesesség</label>
|
||||
</div>
|
||||
<br />
|
||||
<div class="negyzet main">
|
||||
<input type="checkbox" id="o" />
|
||||
<label class="mbcheck">Fénytan</label>
|
||||
<label for="o" class="mbcheck">Fénytan</label>
|
||||
</div>
|
||||
<br />
|
||||
<div class="negyzet main">
|
||||
<input type="checkbox" id="atm" />
|
||||
<label class="mbcheck">Atomfizika</label>
|
||||
<label for="atm" class="mbcheck">Atomfizika</label>
|
||||
</div>
|
||||
<br />
|
||||
<div class="negyzet">
|
||||
<input type="checkbox" id="ah" />
|
||||
<label class="mbcheck">Atomhéj</label>
|
||||
<label for="ah" class="mbcheck">Atomhéj</label>
|
||||
</div>
|
||||
<br />
|
||||
<div class="negyzet">
|
||||
<input type="checkbox" id="am" />
|
||||
<label class="mbcheck">Atommag</label>
|
||||
<label for="am" class="mbcheck">Atommag</label>
|
||||
</div>
|
||||
<br />
|
||||
<div class="negyzet main">
|
||||
<input type="checkbox" id="cs" />
|
||||
<label class="mbcheck">Égi mechanika, csillagászat</label>
|
||||
<label for="cs" class="mbcheck"
|
||||
>Égi mechanika, csillagászat</label
|
||||
>
|
||||
</div>
|
||||
<br />
|
||||
<div class="negyzet main">
|
||||
<input type="checkbox" id="v" />
|
||||
<label class="mbcheck">Vegyes</label>
|
||||
<label for="v" class="mbcheck">Vegyes</label>
|
||||
</div>
|
||||
<br />
|
||||
<div class="negyzet">
|
||||
|
|
@ -260,21 +264,7 @@
|
|||
</select>
|
||||
<select id="feladat">
|
||||
<option value="/all">Összes feladat</option>
|
||||
<option value="/1">1. feladat</option>
|
||||
<option value="/2">2. feladat</option>
|
||||
<option value="/3">3. feladat</option>
|
||||
<option value="/4">4. feladat</option>
|
||||
<option value="/5">5. feladat</option>
|
||||
<option value="/6">6. feladat</option>
|
||||
<option value="/7">7. feladat</option>
|
||||
<option value="/8">8. feladat</option>
|
||||
<option value="/9">9. feladat</option>
|
||||
<option value="/10">10. feladat</option>
|
||||
<option value="/11">11. feladat</option>
|
||||
<option value="/12">12. feladat</option>
|
||||
<option value="/13">13. feladat</option>
|
||||
<option value="/14">14. feladat</option>
|
||||
<option value="/15">15. feladat</option>
|
||||
<!-- Question numbers will be populated for the selected paper -->
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
});
|
||||
|
|
|
|||
|
|
@ -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",
|
||||
|
|
|
|||
Loading…
Reference in a new issue