forked from technolyceum/ai6-m2
Simplified codes
This commit is contained in:
159
static/script.js
159
static/script.js
@@ -1,104 +1,149 @@
|
||||
// TODO: Inna - Implement frontend game functionality
|
||||
// script.js
|
||||
let currentQuestion = null;
|
||||
|
||||
let gameState = {
|
||||
currentQuestion: null,
|
||||
optionsDisabled: false
|
||||
};
|
||||
// Utility function for making API requests
|
||||
function apiRequest(url, options = {}) {
|
||||
return fetch(url, options)
|
||||
.then(response => response.json())
|
||||
.catch(error => {
|
||||
console.error('Error:', error);
|
||||
throw error;
|
||||
});
|
||||
}
|
||||
|
||||
// Utility function for updating element text content
|
||||
function updateElementText(id, text) {
|
||||
const element = document.getElementById(id);
|
||||
if (element) {
|
||||
element.textContent = text;
|
||||
}
|
||||
}
|
||||
|
||||
// Utility function for showing/hiding elements
|
||||
function toggleElementVisibility(id, show = true) {
|
||||
const element = document.getElementById(id);
|
||||
if (element) {
|
||||
element.style.display = show ? 'block' : 'none';
|
||||
}
|
||||
}
|
||||
|
||||
function loadQuestion() {
|
||||
fetch('/get_question')
|
||||
.then(response => response.json())
|
||||
apiRequest('/get_question')
|
||||
.then(data => {
|
||||
if (data.error) {
|
||||
console.error(data.error);
|
||||
return;
|
||||
}
|
||||
if (data.game_over) {
|
||||
endGame(data.final_score);
|
||||
return;
|
||||
}
|
||||
gameState.currentQuestion = data;
|
||||
|
||||
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;
|
||||
function displayQuestion(data) {
|
||||
updateElementText('q-number', data.question_number);
|
||||
updateElementText('question-text', data.question);
|
||||
updateElementText('prize', data.current_prize);
|
||||
|
||||
const optionsContainer = document.getElementById('options-container');
|
||||
const optionsContainer = document.getElementById('options');
|
||||
optionsContainer.innerHTML = '';
|
||||
|
||||
const optionLetters = ['A', 'B', 'C', 'D'];
|
||||
questionData.options.forEach((option, index) => {
|
||||
data.options.forEach((option, index) => {
|
||||
const optionElement = document.createElement('div');
|
||||
optionElement.className = 'option';
|
||||
optionElement.textContent = `${optionLetters[index]}. ${option}`;
|
||||
optionElement.textContent = option;
|
||||
optionElement.onclick = () => selectAnswer(option);
|
||||
optionsContainer.appendChild(optionElement);
|
||||
});
|
||||
|
||||
document.getElementById('feedback').style.display = 'none';
|
||||
gameState.optionsDisabled = false;
|
||||
// Reset result display
|
||||
toggleElementVisibility('result', false);
|
||||
const result = document.getElementById('result');
|
||||
if (result) {
|
||||
result.className = 'result';
|
||||
}
|
||||
}
|
||||
|
||||
function selectAnswer(selectedAnswer) {
|
||||
if (gameState.optionsDisabled) return;
|
||||
gameState.optionsDisabled = true;
|
||||
|
||||
fetch('/answer', {
|
||||
function selectAnswer(answer) {
|
||||
apiRequest('/answer', {
|
||||
method: 'POST',
|
||||
headers: {'Content-Type': 'application/json'},
|
||||
body: JSON.stringify({ answer: selectedAnswer })
|
||||
body: JSON.stringify({ answer: answer })
|
||||
})
|
||||
.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);
|
||||
const result = document.getElementById('result');
|
||||
if (result) {
|
||||
result.style.display = 'block';
|
||||
|
||||
if (data.correct) {
|
||||
result.textContent = 'Correct!';
|
||||
result.className = 'result correct';
|
||||
|
||||
setTimeout(() => {
|
||||
if (data.game_over) {
|
||||
endGame(data.final_score);
|
||||
} else {
|
||||
loadQuestion();
|
||||
}
|
||||
}, 1500);
|
||||
} else {
|
||||
result.textContent = `Wrong! Correct answer: ${data.correct_answer}`;
|
||||
result.className = 'result incorrect';
|
||||
|
||||
setTimeout(() => {
|
||||
endGame(data.final_score);
|
||||
}, 2000);
|
||||
}
|
||||
}
|
||||
})
|
||||
.catch(error => console.error('Error:', error));
|
||||
}
|
||||
|
||||
function useLifeline(lifelineName) {
|
||||
fetch(`/lifeline/${lifelineName}`)
|
||||
.then(response => response.json())
|
||||
function useFiftyFifty() {
|
||||
const lifelineBtn = document.querySelector('.lifeline');
|
||||
if (lifelineBtn) {
|
||||
lifelineBtn.disabled = true;
|
||||
}
|
||||
|
||||
apiRequest('/lifeline/fifty_fifty')
|
||||
.then(data => {
|
||||
if (data.error) {
|
||||
alert(data.error);
|
||||
if (lifelineBtn) {
|
||||
lifelineBtn.disabled = false;
|
||||
}
|
||||
return;
|
||||
}
|
||||
document.getElementById('lifeline-result').textContent =
|
||||
data.hint || data.friend_says || 'Lifeline used!';
|
||||
|
||||
// Hide two wrong options
|
||||
const options = document.querySelectorAll('.option');
|
||||
data.remove_indices.forEach(index => {
|
||||
if (options[index]) {
|
||||
options[index].style.display = 'none';
|
||||
}
|
||||
});
|
||||
})
|
||||
.catch(error => console.error('Error:', error));
|
||||
.catch(error => {
|
||||
console.error('Error:', error);
|
||||
if (lifelineBtn) {
|
||||
lifelineBtn.disabled = false;
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
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 endGame(score) {
|
||||
updateElementText('final-prize', score);
|
||||
toggleElementVisibility('game-over', true);
|
||||
toggleElementVisibility('question-box', false);
|
||||
toggleElementVisibility('lifeline', false);
|
||||
}
|
||||
|
||||
function restartGame() {
|
||||
window.location.href = '/start';
|
||||
}
|
||||
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
if (window.location.pathname === '/start') {
|
||||
loadQuestion();
|
||||
}
|
||||
});
|
||||
// Start the game when page loads
|
||||
if (window.location.pathname === '/start') {
|
||||
loadQuestion();
|
||||
}
|
||||
136
static/style.css
136
static/style.css
@@ -1,105 +1,109 @@
|
||||
/* TODO: Artyom - Enhance this CSS with Russian-themed design */
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
font-family: Arial, sans-serif;
|
||||
}
|
||||
|
||||
/* style.css */
|
||||
body {
|
||||
background: #1a2a6c;
|
||||
color: white;
|
||||
min-height: 100vh;
|
||||
font-family: Arial, sans-serif;
|
||||
max-width: 600px;
|
||||
margin: 0 auto;
|
||||
padding: 20px;
|
||||
background: #f0f0f0;
|
||||
}
|
||||
|
||||
.container {
|
||||
max-width: 800px;
|
||||
margin: 0 auto;
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
border-radius: 10px;
|
||||
background: white;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
header {
|
||||
text-align: center;
|
||||
margin-bottom: 20px;
|
||||
padding: 15px;
|
||||
background: #b21f1f;
|
||||
border-radius: 8px;
|
||||
border-radius: 10px;
|
||||
box-shadow: 0 2px 5px rgba(0,0,0,0.1);
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 2.5rem;
|
||||
color: #1a237e;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.score {
|
||||
text-align: center;
|
||||
font-size: 1.2em;
|
||||
margin: 10px 0;
|
||||
color: #d32f2f;
|
||||
}
|
||||
|
||||
.question-box {
|
||||
background: #e3f2fd;
|
||||
padding: 15px;
|
||||
border-radius: 8px;
|
||||
margin: 15px 0;
|
||||
}
|
||||
|
||||
.question-number {
|
||||
font-weight: bold;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.question-container {
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
padding: 20px;
|
||||
border-radius: 8px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.question {
|
||||
font-size: 1.3rem;
|
||||
margin-bottom: 20px;
|
||||
text-align: center;
|
||||
font-size: 1.1em;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
.options-container {
|
||||
.options {
|
||||
display: grid;
|
||||
gap: 10px;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.option {
|
||||
background: #fdbb2d;
|
||||
color: #1a2a6c;
|
||||
padding: 15px;
|
||||
background: #2196f3;
|
||||
color: white;
|
||||
padding: 10px;
|
||||
border-radius: 5px;
|
||||
cursor: pointer;
|
||||
text-align: center;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.option:hover {
|
||||
background: #e6a923;
|
||||
background: #1976d2;
|
||||
}
|
||||
|
||||
.lifelines {
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
padding: 15px;
|
||||
border-radius: 8px;
|
||||
.option.correct {
|
||||
background: #4caf50;
|
||||
}
|
||||
|
||||
.lifeline-buttons {
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
justify-content: center;
|
||||
.option.wrong {
|
||||
background: #f44336;
|
||||
}
|
||||
|
||||
.lifeline-btn {
|
||||
background: #1a2a6c;
|
||||
.result {
|
||||
margin-top: 10px;
|
||||
padding: 10px;
|
||||
border-radius: 5px;
|
||||
text-align: center;
|
||||
display: none;
|
||||
}
|
||||
|
||||
.result.correct {
|
||||
background: #c8e6c9;
|
||||
color: #2e7d32;
|
||||
}
|
||||
|
||||
.result.incorrect {
|
||||
background: #ffcdd2;
|
||||
color: #c62828;
|
||||
}
|
||||
|
||||
.start-btn, .lifeline {
|
||||
background: #ff9800;
|
||||
color: white;
|
||||
border: none;
|
||||
padding: 10px 15px;
|
||||
padding: 10px 20px;
|
||||
border-radius: 5px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.start-btn {
|
||||
background: #fdbb2d;
|
||||
color: #1a2a6c;
|
||||
border: none;
|
||||
padding: 15px 30px;
|
||||
border-radius: 25px;
|
||||
font-size: 1.2rem;
|
||||
cursor: pointer;
|
||||
display: block;
|
||||
margin: 20px auto;
|
||||
margin: 10px auto;
|
||||
}
|
||||
|
||||
.game-over-screen {
|
||||
text-align: center;
|
||||
padding: 30px;
|
||||
.lifeline:disabled {
|
||||
background: #ccc;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.game-over {
|
||||
text-align: center;
|
||||
padding: 20px;
|
||||
}
|
||||
Reference in New Issue
Block a user