apuc/dr_mp_quiz
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

some fix

Browse Source
This commit is contained in:
kavalar
2026-05-08 15:23:29 +03:00
parent 951f4c5c60
commit f828068dd7
5 changed files with 1229 additions and 127 deletions
Download Patch File Download Diff File Expand all files Collapse all files
templates/index.html
+106 -87
View File
@@ -101,12 +101,41 @@
color: #666;
}
/* Вопрос с возможностью подсветки */
.question-wrapper {
margin: 20px 30px;
padding: 20px;
border-radius: 15px;
transition: all 0.3s ease;
position: relative;
}
.question-wrapper.correct-highlight {
background: linear-gradient(135deg, #d4edda 0%, #c3e6cb 100%);
border: 2px solid #28a745;
box-shadow: 0 0 15px rgba(40, 167, 69, 0.3);
}
.question-wrapper.wrong-highlight {
background: linear-gradient(135deg, #f8d7da 0%, #f5c6cb 100%);
border: 2px solid #dc3545;
box-shadow: 0 0 15px rgba(220, 53, 69, 0.3);
}
.question-text {
padding: 30px 30px 20px;
font-size: 24px;
font-weight: 600;
color: #333;
line-height: 1.4;
margin-bottom: 10px;
}
.question-wrapper.correct-highlight .question-text {
color: #155724;
}
.question-wrapper.wrong-highlight .question-text {
color: #721c24;
}
.options {
@@ -152,7 +181,7 @@
opacity: 0.7;
}
.next-btn, .restart-btn {
.next-btn {
margin: 10px 30px 30px;
padding: 15px;
font-size: 18px;
@@ -162,9 +191,6 @@
cursor: pointer;
transition: all 0.3s ease;
width: calc(100% - 60px);
}
.next-btn {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: white;
}
@@ -215,9 +241,6 @@
}
.result-buttons {
display: flex;
flex-direction: column;
gap: 15px;
margin: 20px 0 30px;
}
@@ -230,56 +253,52 @@
cursor: pointer;
transition: all 0.3s ease;
width: 100%;
}
.btn-primary {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: white;
}
.btn-secondary {
background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
color: white;
}
.btn-qr {
background: linear-gradient(135deg, #4CAF50 0%, #45a049 100%);
color: white;
}
.btn:hover {
.result-buttons .btn:hover {
transform: translateY(-2px);
box-shadow: 0 5px 15px rgba(0,0,0,0.2);
box-shadow: 0 5px 15px rgba(102, 126, 234, 0.4);
}
.qr-container {
margin: 20px 0;
display: none;
margin: 30px 0;
padding: 20px;
background: #f8f9fa;
border-radius: 15px;
text-align: center;
}
.qr-container.show {
display: block;
}
.qr-code {
display: inline-block;
padding: 20px;
padding: 15px;
background: white;
border-radius: 15px;
box-shadow: 0 5px 15px rgba(0,0,0,0.1);
margin-bottom: 15px;
}
.qr-code img {
max-width: 200px;
max-width: 180px;
height: auto;
display: block;
}
.qr-link {
margin-top: 10px;
font-size: 12px;
color: #666;
word-break: break-all;
margin-top: 10px;
}
.qr-link a {
color: #667eea;
text-decoration: none;
}
.qr-link a:hover {
text-decoration: underline;
}
.questions-review {
@@ -371,7 +390,6 @@
@media (max-width: 600px) {
.question-text {
font-size: 18px;
padding: 20px;
}
.option-btn {
@@ -395,6 +413,15 @@
.result-grade {
font-size: 24px;
}
.qr-code img {
max-width: 150px;
}
.question-wrapper {
margin: 15px 15px;
padding: 15px;
}
}
</style>
</head>
@@ -419,8 +446,10 @@
<div class="timer-text" id="timerText">⏱️ 10 секунд</div>
</div>
<div class="question-text" id="questionText">
Загрузка вопроса...
<div class="question-wrapper" id="questionWrapper">
<div class="question-text" id="questionText">
Загрузка вопроса...
</div>
</div>
<div class="options" id="optionsContainer">
@@ -444,19 +473,15 @@
<div class="result-grade" id="resultGrade"></div>
<div class="result-message" id="resultMessage"></div>
<!-- КНОПКИ ПЕРЕД РАСШИФРОВКОЙ -->
<div class="result-buttons">
<button class="btn btn-primary" id="restartBtn">🔄 Пройти викторину заново</button>
<button class="btn btn-qr" id="showQrBtn">📱 Показать QR-код с результатом</button>
<button class="btn" id="restartBtn">🔄 Пройти викторину заново</button>
</div>
<!-- КОНТЕЙНЕР ДЛЯ QR-КОДА -->
<div class="qr-container" id="qrContainer">
<div class="qr-code" id="qrCode">
<div class="qr-code">
<img id="qrImage" alt="QR-код с результатом">
</div>
<div class="qr-link" id="qrLink"></div>
<button class="btn btn-secondary" id="hideQrBtn" style="margin-top: 10px; padding: 8px 20px; width: auto;">Скрыть QR-код</button>
</div>
<div id="questionsReview" class="questions-review hidden"></div>
@@ -480,6 +505,7 @@
const timerProgress = document.getElementById('timerProgress');
const timerText = document.getElementById('timerText');
const questionText = document.getElementById('questionText');
const questionWrapper = document.getElementById('questionWrapper');
const optionsContainer = document.getElementById('optionsContainer');
const feedback = document.getElementById('feedback');
const nextBtn = document.getElementById('nextBtn');
@@ -490,10 +516,8 @@
const qrImage = document.getElementById('qrImage');
const qrLink = document.getElementById('qrLink');
// Опции кнопок
const optionBtns = document.querySelectorAll('.option-btn');
// Начать новую игру
async function startNewGame() {
try {
const response = await fetch('/api/new_game', {
@@ -513,9 +537,10 @@
questionArea.classList.remove('hidden');
resultArea.classList.add('hidden');
questionsReview.classList.add('hidden');
qrContainer.classList.remove('show');
isAnswered = false;
removeQuestionHighlight();
startTimer(10);
} catch (error) {
console.error('Ошибка:', error);
@@ -523,7 +548,20 @@
}
}
// Отображение вопроса
function highlightQuestion(isCorrect) {
removeQuestionHighlight();
if (isCorrect) {
questionWrapper.classList.add('correct-highlight');
} else {
questionWrapper.classList.add('wrong-highlight');
}
}
function removeQuestionHighlight() {
questionWrapper.classList.remove('correct-highlight');
questionWrapper.classList.remove('wrong-highlight');
}
function displayQuestion(question, qNumber) {
if (!question) return;
@@ -531,7 +569,6 @@
questionCounter.textContent = `Вопрос ${qNumber}/${totalQuestions}`;
questionText.textContent = question.text;
// Обновляем варианты ответов
question.options.forEach((option, index) => {
if (optionBtns[index]) {
optionBtns[index].textContent = `${String.fromCharCode(65+index)}. ${option}`;
@@ -540,13 +577,12 @@
}
});
// Скрываем фидбек и кнопку далее
feedback.classList.add('hidden');
nextBtn.classList.add('hidden');
isAnswered = false;
removeQuestionHighlight();
}
// Таймер
function startTimer(seconds) {
if (timerInterval) clearInterval(timerInterval);
@@ -580,17 +616,16 @@
}
}
// Обработка timeout
async function handleTimeout() {
if (isAnswered) return;
isAnswered = true;
clearInterval(timerInterval);
// Отключаем кнопки
highlightQuestion(false);
optionBtns.forEach(btn => btn.disabled = true);
// Отправляем пустой ответ (время вышло)
try {
const response = await fetch('/api/check_answer', {
method: 'POST',
@@ -618,30 +653,37 @@
}
}
// Обработка ответа пользователя
async function handleAnswer(answerIndex) {
if (isAnswered) return;
isAnswered = true;
clearInterval(timerInterval);
// Визуальная обратная связь
const selectedBtn = optionBtns[answerIndex];
// ВАЖНО: проверяем правильность ответа
// currentQuestion.correct приходит от сервера с индексом правильного ответа
const isCorrect = (answerIndex === currentQuestion.correct);
console.log('Answer index:', answerIndex);
console.log('Correct index:', currentQuestion.correct);
console.log('Is correct:', isCorrect);
// Подсвечиваем вопрос
highlightQuestion(isCorrect);
if (isCorrect) {
selectedBtn.classList.add('correct');
currentScore++;
updateScoreDisplay();
} else {
selectedBtn.classList.add('wrong');
// Показываем правильный ответ
const correctBtn = optionBtns[currentQuestion.correct];
if (correctBtn) correctBtn.classList.add('correct');
}
// Отключаем все кнопки
optionBtns.forEach(btn => btn.disabled = true);
// Отправляем ответ на сервер
try {
const response = await fetch('/api/check_answer', {
method: 'POST',
@@ -665,7 +707,6 @@
}
}
// Показать фидбек после ответа
function showFeedback(result) {
const feedbackTitle = document.getElementById('feedbackTitle');
const feedbackText = document.getElementById('feedbackText');
@@ -673,8 +714,6 @@
if (result.is_correct) {
feedbackTitle.textContent = '✅ Правильно!';
feedbackTitle.style.color = '#28a745';
currentScore = result.score;
updateScoreDisplay();
feedbackText.textContent = result.explanation || 'Отличный результат!';
} else {
feedbackTitle.textContent = '❌ Неправильно!';
@@ -685,7 +724,6 @@
feedback.classList.remove('hidden');
}
// Загрузить следующий вопрос
function loadNextQuestion(data) {
if (data.next_question) {
displayQuestion(data.next_question, data.question_number);
@@ -693,7 +731,6 @@
}
}
// Показать все вопросы с ответами
function displayAllQuestions(questionsSummary) {
questionsReview.innerHTML = '<h3>📋 Детальный разбор всех вопросов</h3>';
questionsReview.classList.remove('hidden');
@@ -728,30 +765,26 @@
});
}
// Показать QR-код
async function showQRCode(resultId) {
async function displayQRCode(resultId) {
try {
const response = await fetch(`/api/qrcode/${resultId}`);
if (response.ok) {
const blob = await response.blob();
const url = URL.createObjectURL(blob);
qrImage.src = url;
// Показываем ссылку
// Ссылка на изображение с результатами
const fullUrl = window.location.origin + `/api/result/${resultId}`;
qrLink.innerHTML = `<a href="${fullUrl}" target="_blank">${fullUrl}</a>`;
qrContainer.classList.add('show');
qrLink.innerHTML = `📎 Ссылка на результат: <a href="${fullUrl}" target="_blank">${fullUrl}</a>`;
} else {
alert('Не удалось сгенерировать QR-код');
qrContainer.innerHTML = '<p style="color: red;">❌ Не удалось сгенерировать QR-код</p>';
}
} catch (error) {
console.error('Ошибка:', error);
alert('Ошибка при генерации QR-кода');
qrContainer.innerHTML = '<p style="color: red;">❌ Ошибка при генерации QR-кода</p>';
}
}
// Показать результат
function showResult(result) {
clearInterval(timerInterval);
questionArea.classList.add('hidden');
@@ -766,18 +799,17 @@
resultMessage.textContent = result.message;
currentResultId = result.result_id;
// Показываем разбор вопросов (после кнопок)
displayQRCode(currentResultId);
if (result.questions_summary) {
displayAllQuestions(result.questions_summary);
}
}
// Обновить отображение счёта
function updateScoreDisplay() {
scoreDisplay.textContent = `Счёт: ${currentScore}`;
}
// Обработчики событий
optionBtns.forEach(btn => {
btn.addEventListener('click', () => {
const index = parseInt(btn.dataset.index);
@@ -789,19 +821,6 @@
startNewGame();
});
document.getElementById('showQrBtn').addEventListener('click', () => {
if (currentResultId) {
showQRCode(currentResultId);
} else {
alert('Результаты ещё не готовы');
}
});
document.getElementById('hideQrBtn').addEventListener('click', () => {
qrContainer.classList.remove('show');
});
// Запуск игры
startNewGame();
</script>
</body>