forked from technolyceum/ai6-m2
105 lines
3.4 KiB
JavaScript
105 lines
3.4 KiB
JavaScript
// TODO: Inna - Implement frontend game functionality
|
|
|
|
let gameState = {
|
|
currentQuestion: null,
|
|
optionsDisabled: false
|
|
};
|
|
|
|
function loadQuestion() {
|
|
fetch('/get_question')
|
|
.then(response => response.json())
|
|
.then(data => {
|
|
if (data.error) {
|
|
console.error(data.error);
|
|
return;
|
|
}
|
|
if (data.game_over) {
|
|
endGame(data.final_score);
|
|
return;
|
|
}
|
|
gameState.currentQuestion = data;
|
|
displayQuestion(data);
|
|
})
|
|
.catch(error => console.error('Error:', error));
|
|
}
|
|
|
|
function displayQuestion(questionData) {
|
|
document.getElementById('question-num').textContent = questionData.question_number;
|
|
document.getElementById('question-text').textContent = questionData.question;
|
|
|
|
const optionsContainer = document.getElementById('options-container');
|
|
optionsContainer.innerHTML = '';
|
|
|
|
const optionLetters = ['A', 'B', 'C', 'D'];
|
|
questionData.options.forEach((option, index) => {
|
|
const optionElement = document.createElement('div');
|
|
optionElement.className = 'option';
|
|
optionElement.textContent = `${optionLetters[index]}. ${option}`;
|
|
optionElement.onclick = () => selectAnswer(option);
|
|
optionsContainer.appendChild(optionElement);
|
|
});
|
|
|
|
document.getElementById('feedback').style.display = 'none';
|
|
gameState.optionsDisabled = false;
|
|
}
|
|
|
|
function selectAnswer(selectedAnswer) {
|
|
if (gameState.optionsDisabled) return;
|
|
gameState.optionsDisabled = true;
|
|
|
|
fetch('/answer', {
|
|
method: 'POST',
|
|
headers: {'Content-Type': 'application/json'},
|
|
body: JSON.stringify({ answer: selectedAnswer })
|
|
})
|
|
.then(response => response.json())
|
|
.then(data => {
|
|
const feedback = document.getElementById('feedback');
|
|
feedback.style.display = 'block';
|
|
|
|
if (data.correct) {
|
|
feedback.textContent = 'Correct! 🎉';
|
|
feedback.className = 'feedback correct';
|
|
setTimeout(() => {
|
|
if (data.next_question) loadQuestion();
|
|
else endGame(data.final_score, true);
|
|
}, 1500);
|
|
} else {
|
|
feedback.textContent = `Incorrect! Correct answer: ${data.correct_answer}`;
|
|
feedback.className = 'feedback incorrect';
|
|
setTimeout(() => endGame(data.final_score), 2000);
|
|
}
|
|
})
|
|
.catch(error => console.error('Error:', error));
|
|
}
|
|
|
|
function useLifeline(lifelineName) {
|
|
fetch(`/lifeline/${lifelineName}`)
|
|
.then(response => response.json())
|
|
.then(data => {
|
|
if (data.error) {
|
|
alert(data.error);
|
|
return;
|
|
}
|
|
document.getElementById('lifeline-result').textContent =
|
|
data.hint || data.friend_says || 'Lifeline used!';
|
|
})
|
|
.catch(error => console.error('Error:', error));
|
|
}
|
|
|
|
function endGame(finalScore, isWin = false) {
|
|
document.getElementById('final-prize').textContent = finalScore;
|
|
document.getElementById('game-over-screen').style.display = 'block';
|
|
document.querySelector('.game-area').style.display = 'none';
|
|
}
|
|
|
|
function restartGame() {
|
|
window.location.href = '/start';
|
|
}
|
|
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
if (window.location.pathname === '/start') {
|
|
loadQuestion();
|
|
}
|
|
});
|