This commit is contained in:
2025-08-28 15:19:28 +08:00
3 changed files with 153 additions and 114 deletions

View File

@@ -501,4 +501,11 @@ select {
100% { 100% {
opacity: 1; opacity: 1;
} }
}
/* 在physics_quiz.css中添加多选题提示样式 */
.multiple-choice {
color: #2196f3;
font-size: 0.9em;
font-weight: normal;
} }

View File

@@ -102,7 +102,7 @@
</div> </div>
<div> <div>
有权限问题的话,请点击<a href="https://dsideal.obs.cn-north-1.myhuaweicloud.com/HuangHai/11%E3%80%81%E5%AD%A6%E4%BC%B4Chrome%E5%BD%95%E9%9F%B3%E9%85%8D%E7%BD%AE%E4%BF%AE%E6%94%B9.pdf">这里</a> <a href="https://dsideal.obs.cn-north-1.myhuaweicloud.com/HuangHai/11%E3%80%81%E5%AD%A6%E4%BC%B4Chrome%E5%BD%95%E9%9F%B3%E9%85%8D%E7%BD%AE%E4%BF%AE%E6%94%B9.pdf">有权限问题?</a>
</div> </div>
<!-- 引入看板娘相关脚本 --> <!-- 引入看板娘相关脚本 -->

View File

@@ -314,143 +314,170 @@ document.addEventListener('DOMContentLoaded', function() {
} }
// 提交当前难度的答案 // 提交当前难度的答案
// 修改提交按钮的事件处理逻辑
submitBtn.addEventListener('click', function() { submitBtn.addEventListener('click', function() {
const currentAnswers = correctAnswers[quizState.currentDifficulty]; const currentAnswers = correctAnswers[quizState.currentDifficulty];
const totalQuestions = Object.keys(currentAnswers).length; const totalQuestions = Object.keys(currentAnswers).length;
let score = 0; let score = 0;
let correct = 0; let correct = 0;
let incorrect = 0; let incorrect = 0;
// 检查所有问题的答案
for (const [questionName, correctOptions] of Object.entries(currentAnswers)) {
// 获取用户选择的所有选项
const selectedOptions = Array.from(document.querySelectorAll(`input[name="${questionName}"]:checked`))
.map(checkbox => checkbox.value);
const questionNumber = questionName.substring(2); // 从mq1提取1
const explanationElement = document.querySelector(`[data-difficulty="${quizState.currentDifficulty}"][data-question="${questionNumber}"] .question-explanation`);
// 显示解析
explanationElement.style.display = 'block';
if (selectedOptions.length > 0) {
// 标记用户选择的选项
let allCorrect = true;
// 标记用户选择的每个选项
document.querySelectorAll(`input[name="${questionName}"]:checked`).forEach(checkbox => {
const userAnswer = checkbox.value;
if (correctOptions.includes(userAnswer)) {
checkbox.closest('.option').style.backgroundColor = '#e8f5e9';
checkbox.closest('.option').style.borderColor = '#4caf50';
} else {
checkbox.closest('.option').style.backgroundColor = '#ffebee';
checkbox.closest('.option').style.borderColor = '#c62828';
allCorrect = false;
}
});
// 标记用户未选择但正确的选项
document.querySelectorAll(`input[name="${questionName}"]`).forEach(checkbox => {
if (correctOptions.includes(checkbox.value) && !checkbox.checked) {
checkbox.closest('.option').style.backgroundColor = '#e3f2fd';
checkbox.closest('.option').style.borderColor = '#2196f3';
allCorrect = false;
}
});
// 判断是否全对
if (allCorrect && selectedOptions.length === correctOptions.length) {
score += 20; // 每题20分
correct++;
} else {
incorrect++;
}
} else {
// 未答题
incorrect++;
const questionElement = document.querySelector(`[data-difficulty="${quizState.currentDifficulty}"][data-question="${questionNumber}"]`);
questionElement.style.border = '2px solid #ff9800';
// 显示所有正确答案
document.querySelectorAll(`input[name="${questionName}"]`).forEach(checkbox => {
if (correctOptions.includes(checkbox.value)) {
checkbox.closest('.option').style.backgroundColor = '#e3f2fd';
checkbox.closest('.option').style.borderColor = '#2196f3';
}
});
}
}
// 保存当前难度得分
quizState.scores[quizState.currentDifficulty] = {
score: score,
correct: correct,
incorrect: incorrect
};
quizState.completedDifficulties.push(quizState.currentDifficulty);
// 检查所有问题的答案 // 显示当前难度结果
for (const [questionName, correctAnswer] of Object.entries(currentAnswers)) { scoreValue.textContent = score;
const selectedOption = document.querySelector(`input[name="${questionName}"]:checked`); correctCount.textContent = correct;
const questionNumber = questionName.substring(2); // 从mq1提取1 incorrectCount.textContent = incorrect;
const explanationElement = document.querySelector(`[data-difficulty="${quizState.currentDifficulty}"][data-question="${questionNumber}"] .question-explanation`); result.style.display = 'block';
// 显示解析 // 隐藏提交按钮
explanationElement.style.display = 'block'; submitBtn.style.display = 'none';
if (selectedOption) { // 根据当前难度和得分决定下一步
const userAnswer = selectedOption.value; if (quizState.currentDifficulty === 'medium') {
if (correct < 3) {
// 标记正确或错误 // 中等难度答对少于3题推荐简单难度
if (userAnswer === correctAnswer) { showNavigation('您在中等难度题目中表现不佳,建议先完成简单难度题目来巩固基础。', 'easy');
score += 20; // 每题20分 } else {
correct++; // 中等难度答对3题及以上推荐高级难度
selectedOption.closest('.option').style.backgroundColor = '#e8f5e9'; showNavigation('恭喜您完成中等难度题目!接下来挑战高级难度题目吧。', 'hard');
selectedOption.closest('.option').style.borderColor = '#4caf50'; }
} else { } else {
incorrect++; // 简单或高级难度完成后,显示最终结果
selectedOption.closest('.option').style.backgroundColor = '#ffebee'; showFinalResult();
selectedOption.closest('.option').style.borderColor = '#c62828'; }
// 标记正确答案
const correctOption = document.querySelector(`input[name="${questionName}"][value="${correctAnswer}"]`);
correctOption.closest('.option').style.backgroundColor = '#e8f5e9';
correctOption.closest('.option').style.borderColor = '#4caf50';
}
} else {
// 未答题
incorrect++;
const questionElement = document.querySelector(`[data-difficulty="${quizState.currentDifficulty}"][data-question="${questionNumber}"]`);
questionElement.style.border = '2px solid #ff9800';
}
}
// 保存当前难度得分
quizState.scores[quizState.currentDifficulty] = {
score: score,
correct: correct,
incorrect: incorrect
};
quizState.completedDifficulties.push(quizState.currentDifficulty);
// 显示当前难度结果
scoreValue.textContent = score;
correctCount.textContent = correct;
incorrectCount.textContent = incorrect;
result.style.display = 'block';
// 隐藏提交按钮
submitBtn.style.display = 'none';
// 根据当前难度和得分决定下一步
if (quizState.currentDifficulty === 'medium') {
if (correct < 3) {
// 中等难度答对少于3题推荐简单难度
showNavigation('您在中等难度题目中表现不佳,建议先完成简单难度题目来巩固基础。', 'easy');
} else {
// 中等难度答对3题及以上推荐高级难度
showNavigation('恭喜您完成中等难度题目!接下来挑战高级难度题目吧。', 'hard');
}
} else {
// 简单或高级难度完成后,显示最终结果
showFinalResult();
}
}); });
// 显示导航信息 // 显示导航信息
function showNavigation(message, nextDifficulty) { function showNavigation(message, nextDifficulty) {
navigationMessage.textContent = message; navigationMessage.textContent = message;
navigationSection.dataset.nextDifficulty = nextDifficulty; navigationSection.dataset.nextDifficulty = nextDifficulty;
navigationSection.style.display = 'block'; navigationSection.style.display = 'block';
} }
// 开始下一组题目 // 开始下一组题目
nextBtn.addEventListener('click', function() { nextBtn.addEventListener('click', function() {
const nextDifficulty = navigationSection.dataset.nextDifficulty; const nextDifficulty = navigationSection.dataset.nextDifficulty;
if (!nextDifficulty) return; if (!nextDifficulty) return;
// 更新当前难度 // 更新当前难度
quizState.currentDifficulty = nextDifficulty; quizState.currentDifficulty = nextDifficulty;
// 隐藏导航和结果 // 隐藏导航和结果
navigationSection.style.display = 'none'; navigationSection.style.display = 'none';
result.style.display = 'none'; result.style.display = 'none';
// 显示提交按钮 // 显示提交按钮
submitBtn.style.display = 'inline-block'; submitBtn.style.display = 'inline-block';
// 更新难度指示器 // 更新难度指示器
difficultyIndicator.textContent = `当前难度:${getDifficultyName(nextDifficulty)}`; difficultyIndicator.textContent = `当前难度:${getDifficultyName(nextDifficulty)}`;
difficultyIndicator.className = `difficulty-indicator difficulty-${nextDifficulty}`; difficultyIndicator.className = `difficulty-indicator difficulty-${nextDifficulty}`;
// 隐藏所有题目 // 隐藏所有题目
document.querySelectorAll('.question').forEach(question => { document.querySelectorAll('.question').forEach(question => {
question.classList.add('hidden'); question.classList.add('hidden');
}); });
// 显示下一组题目 // 显示下一组题目
document.querySelectorAll(`[data-difficulty="${nextDifficulty}"]`).forEach(question => { document.querySelectorAll(`[data-difficulty="${nextDifficulty}"]`).forEach(question => {
question.classList.remove('hidden'); question.classList.remove('hidden');
}); });
// 滚动到页面顶部 // 滚动到页面顶部
window.scrollTo(0, 0); window.scrollTo(0, 0);
}); });
// 显示最终结果 // 显示最终结果
function showFinalResult() { function showFinalResult() {
// 计算总分 // 计算总分
let totalScore = 0; let totalScore = 0;
let totalCorrect = 0; let totalCorrect = 0;
let totalIncorrect = 0; let totalIncorrect = 0;
for (const difficulty of quizState.completedDifficulties) { for (const difficulty of quizState.completedDifficulties) {
totalScore += quizState.scores[difficulty].score; totalScore += quizState.scores[difficulty].score;
totalCorrect += quizState.scores[difficulty].correct; totalCorrect += quizState.scores[difficulty].correct;
totalIncorrect += quizState.scores[difficulty].incorrect; totalIncorrect += quizState.scores[difficulty].incorrect;
} }
// 更新结果显示 // 更新结果显示
scoreValue.textContent = totalScore; scoreValue.textContent = totalScore;
correctCount.textContent = totalCorrect; correctCount.textContent = totalCorrect;
incorrectCount.textContent = totalIncorrect; incorrectCount.textContent = totalIncorrect;
result.style.display = 'block'; result.style.display = 'block';
// 显示完成信息 // 显示完成信息
navigationMessage.textContent = '恭喜您完成所有推荐题目!'; navigationMessage.textContent = '恭喜您完成所有推荐题目!';
navigationSection.style.display = 'block'; navigationSection.style.display = 'block';
document.getElementById('next-btn').style.display = 'none'; document.getElementById('next-btn').style.display = 'none';
} }
}); });
@@ -487,15 +514,20 @@ function renderQuestions() {
question.options.forEach(option => { question.options.forEach(option => {
optionsHTML += ` optionsHTML += `
<div class="option"> <div class="option">
<input type="radio" id="${option.id}" name="${question.id}" value="${option.label}"> <input type="checkbox" id="${option.id}" name="${question.id}" value="${option.label}">
<label for="${option.id}">${option.label}. ${option.text}</label> <label for="${option.id}">${option.label}. ${option.text}</label>
</div> </div>
`; `;
}); });
// 检查是否为多选题
const isMultipleChoice = correctAnswers[question.difficulty] &&
correctAnswers[question.difficulty][question.id] &&
correctAnswers[question.difficulty][question.id].length > 1;
questionElement.innerHTML = ` questionElement.innerHTML = `
<div class="question-header"> <div class="question-header">
<h3>第${question.number}题 (${question.points}分)</h3> <h3>第${question.number}题 (${question.points}分)${isMultipleChoice ? ' <span class="multiple-choice">(多选题)</span>' : ''}</h3>
</div> </div>
<div class="question-content"> <div class="question-content">
<p>${question.text}</p> <p>${question.text}</p>