fizika/frontend/js/load.js
2025-08-31 13:32:58 +01:00

124 lines
3.8 KiB
JavaScript

let questions = null;
// Auto-detect API base URL
const getApiBase = () => {
const protocol = window.location.protocol;
const hostname = window.location.hostname;
// If running on localhost, assume backend is on port 3001
if (hostname === 'localhost' || hostname === '127.0.0.1') {
return `${protocol}//${hostname}:3001`;
}
// For production, assume backend is on same origin
return "https://fizika-backend.schmelczer.dev"
};
const API_BASE = getApiBase();
const loadQuestions = async (
isSearch,
categories,
sourceScheme,
questionCount
) => {
if (questions === null) {
try {
const response = await fetch(`${API_BASE}/api/fizika`);
if (!response.ok) {
throw new Error(`HTTP ${response.status}: ${response.statusText}`);
}
questions = await response.json();
console.log('Questions loaded from backend API');
} catch (error) {
console.warn('Failed to load questions from API, falling back to local file:', error);
try {
const fallbackResponse = await fetch("fizika.json");
if (!fallbackResponse.ok) {
throw new Error(`Local file not available: ${fallbackResponse.status}`);
}
questions = await fallbackResponse.json();
console.log('Questions loaded from local fallback file');
} catch (fallbackError) {
console.error('Both API and local file failed:', fallbackError);
throw new Error('Unable to load quiz data from either backend API or local file');
}
}
}
let currentQuestions = questions.slice();
if (isSearch) {
currentQuestions = currentQuestions.filter((q) =>
q.source.match(sourceScheme)
);
} else {
shuffleArray(currentQuestions);
currentQuestions = currentQuestions.filter((q) =>
categories.includes(q.type)
);
}
resultHtml = "";
currentQuestions = currentQuestions.slice(0, questionCount);
currentQuestions.forEach(
({ id, source, description, a, b, c, d, correct, image }, i) => {
resultHtml += `
<div class="feladat card" id="feladat${id}">
<h2 style="float: left;">${i + 1}.</h2><h2>${source}</h2>
<pre>${description}</pre>
${image ? `<img src="${API_BASE}/api/pics/${image}" onerror="this.src='pics/${image}'"><br>` : ""}
<form id="form${id}"">
<input type="radio" id="rad1" name="group">
<label id="label${id}" class="rad1">${a}</label>
<br>
<input type="radio" id="rad2" name="group">
<label id="label${id}" class="rad2">${b}</label>
<br>
<input type="radio" id="rad3" name="group">
<label id="label${id}" class="rad3">${c}</label>
<br>
${d
? `
<input type="radio" id="rad4" name="group">
<label id="label${id}" class="rad4">${d}</label>
<br>`
: ""
}
</form>
<script type="text/javascript">
$(document).ready(function(){
totalPoints++;
$("#ans").click(function(event){
event.preventDefault();
teszt(${id}, ${correct});
});
$("#cAns").click(function(event){
event.preventDefault();
showCorrect(${id}, ${correct});
});
});
</script>
</div>
`;
}
);
resultHtml +=
currentQuestions.length === 0
? '<div class="buttonwrapper"><b style="font-size: 2rem;">Nem található a keresésnek megfelelő feladat!</b></div>'
: `<script type="text/javascript">
startTimer = 1;
timer = 0;
</script>`;
return resultHtml;
};
function shuffleArray(array) {
for (let i = array.length - 1; i > 0; i--) {
const j = Math.floor(Math.random() * (i + 1));
[array[i], array[j]] = [array[j], array[i]];
}
}