195 lines
7.2 KiB
JavaScript
195 lines
7.2 KiB
JavaScript
// 存储各难度题目的正确答案
|
||
const correctAnswers = {
|
||
medium: {
|
||
mq1: 'B',
|
||
mq2: 'D',
|
||
mq3: 'B',
|
||
mq4: 'A',
|
||
mq5: 'C'
|
||
},
|
||
easy: {
|
||
eq1: 'B',
|
||
eq2: 'A',
|
||
eq3: 'C',
|
||
eq4: 'B',
|
||
eq5: 'A'
|
||
},
|
||
hard: {
|
||
hq1: 'C',
|
||
hq2: 'A',
|
||
hq3: 'C',
|
||
hq4: 'A',
|
||
hq5: 'B'
|
||
}
|
||
};
|
||
|
||
// 跟踪测验状态
|
||
const quizState = {
|
||
currentDifficulty: 'medium', // 初始难度
|
||
completedDifficulties: [],
|
||
scores: {}
|
||
};
|
||
|
||
// DOM元素
|
||
const submitBtn = document.getElementById('submit-btn');
|
||
const nextBtn = document.getElementById('next-btn');
|
||
const navigationSection = document.getElementById('navigation');
|
||
const navigationMessage = document.getElementById('navigation-message');
|
||
const result = document.getElementById('result');
|
||
const scoreValue = document.getElementById('score-value');
|
||
const correctCount = document.getElementById('correct-count');
|
||
const incorrectCount = document.getElementById('incorrect-count');
|
||
const difficultyIndicator = document.querySelector('.difficulty-indicator');
|
||
|
||
// 等待DOM加载完成
|
||
document.addEventListener('DOMContentLoaded', function() {
|
||
// 提交当前难度的答案
|
||
submitBtn.addEventListener('click', function() {
|
||
const currentAnswers = correctAnswers[quizState.currentDifficulty];
|
||
const totalQuestions = Object.keys(currentAnswers).length;
|
||
let score = 0;
|
||
let correct = 0;
|
||
let incorrect = 0;
|
||
|
||
// 检查所有问题的答案
|
||
for (const [questionName, correctAnswer] of Object.entries(currentAnswers)) {
|
||
const selectedOption = document.querySelector(`input[name="${questionName}"]:checked`);
|
||
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 (selectedOption) {
|
||
const userAnswer = selectedOption.value;
|
||
|
||
// 标记正确或错误
|
||
if (userAnswer === correctAnswer) {
|
||
score += 20; // 每题20分
|
||
correct++;
|
||
selectedOption.closest('.option').style.backgroundColor = '#e8f5e9';
|
||
selectedOption.closest('.option').style.borderColor = '#4caf50';
|
||
} else {
|
||
incorrect++;
|
||
selectedOption.closest('.option').style.backgroundColor = '#ffebee';
|
||
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) {
|
||
navigationMessage.textContent = message;
|
||
navigationSection.dataset.nextDifficulty = nextDifficulty;
|
||
navigationSection.style.display = 'block';
|
||
}
|
||
|
||
// 开始下一组题目
|
||
nextBtn.addEventListener('click', function() {
|
||
const nextDifficulty = navigationSection.dataset.nextDifficulty;
|
||
if (!nextDifficulty) return;
|
||
|
||
// 更新当前难度
|
||
quizState.currentDifficulty = nextDifficulty;
|
||
|
||
// 隐藏导航和结果
|
||
navigationSection.style.display = 'none';
|
||
result.style.display = 'none';
|
||
|
||
// 显示提交按钮
|
||
submitBtn.style.display = 'inline-block';
|
||
|
||
// 更新难度指示器
|
||
difficultyIndicator.textContent = `当前难度:${getDifficultyName(nextDifficulty)}`;
|
||
difficultyIndicator.className = `difficulty-indicator difficulty-${nextDifficulty}`;
|
||
|
||
// 隐藏所有题目
|
||
document.querySelectorAll('.question').forEach(question => {
|
||
question.classList.add('hidden');
|
||
});
|
||
|
||
// 显示下一组题目
|
||
document.querySelectorAll(`[data-difficulty="${nextDifficulty}"]`).forEach(question => {
|
||
question.classList.remove('hidden');
|
||
});
|
||
|
||
// 滚动到页面顶部
|
||
window.scrollTo(0, 0);
|
||
});
|
||
|
||
// 获取难度名称
|
||
function getDifficultyName(difficulty) {
|
||
const names = {
|
||
easy: '简单',
|
||
medium: '中等',
|
||
hard: '高级'
|
||
};
|
||
return names[difficulty] || difficulty;
|
||
}
|
||
|
||
// 显示最终结果
|
||
function showFinalResult() {
|
||
// 计算总分
|
||
let totalScore = 0;
|
||
let totalCorrect = 0;
|
||
let totalIncorrect = 0;
|
||
|
||
for (const difficulty of quizState.completedDifficulties) {
|
||
totalScore += quizState.scores[difficulty].score;
|
||
totalCorrect += quizState.scores[difficulty].correct;
|
||
totalIncorrect += quizState.scores[difficulty].incorrect;
|
||
}
|
||
|
||
// 更新结果显示
|
||
scoreValue.textContent = totalScore;
|
||
correctCount.textContent = totalCorrect;
|
||
incorrectCount.textContent = totalIncorrect;
|
||
result.style.display = 'block';
|
||
|
||
// 显示完成信息
|
||
navigationMessage.textContent = '恭喜您完成所有推荐题目!';
|
||
navigationSection.style.display = 'block';
|
||
document.getElementById('next-btn').style.display = 'none';
|
||
}
|
||
}); |