diff --git a/dsLightRag/static/YunXiao/physics_quiz.html b/dsLightRag/static/YunXiao/physics_quiz.html index 62f8525a..7bde6225 100644 --- a/dsLightRag/static/YunXiao/physics_quiz.html +++ b/dsLightRag/static/YunXiao/physics_quiz.html @@ -13,32 +13,37 @@ } body { - background-color: #f5f7fa; + background-color: #f0f2f5; color: #333; line-height: 1.6; - padding: 20px; } .container { - max-width: 1000px; + max-width: 1200px; margin: 0 auto; - background-color: white; - border-radius: 12px; - box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08); - padding: 30px; + padding: 20px; } header { text-align: center; margin-bottom: 30px; - padding-bottom: 20px; - border-bottom: 1px solid #eee; + padding: 20px 0; + background-color: #1a5276; + color: white; + border-radius: 10px; + box-shadow: 0 4px 12px rgba(0,0,0,0.1); } h1 { - color: #2c3e50; + font-size: 2.2rem; margin-bottom: 10px; - font-size: 28px; + font-weight: 700; + } + + .quiz-info { + font-size: 1.1rem; + margin-bottom: 20px; + color: #ecf0f1; } .difficulty-indicator { @@ -64,30 +69,24 @@ color: #c62828; } - .quiz-info { - color: #666; - font-size: 16px; - margin-bottom: 20px; - } - .question-section { + background-color: white; + border-radius: 12px; + padding: 30px; + box-shadow: 0 4px 20px rgba(0,0,0,0.08); margin-bottom: 30px; } .question { - background-color: #f9f9f9; - border-radius: 8px; - padding: 20px; - margin-bottom: 20px; - transition: all 0.3s ease; + margin-bottom: 30px; + padding-bottom: 20px; + border-bottom: 1px solid #eee; } - .question.hidden { - display: none; - } - - .question:hover { - box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05); + .question:last-child { + border-bottom: none; + margin-bottom: 0; + padding-bottom: 0; } .question-header { @@ -99,29 +98,28 @@ .question-number { font-weight: bold; - color: #2980b9; - font-size: 18px; + font-size: 1.1rem; + color: #1a5276; } .question-points { - background-color: #e3f2fd; - color: #2980b9; - padding: 3px 10px; + background-color: #3498db; + color: white; + padding: 4px 10px; border-radius: 12px; - font-size: 14px; + font-size: 0.9rem; } .question-text { - margin-bottom: 15px; - font-size: 16px; + margin-bottom: 20px; + font-size: 1.1rem; line-height: 1.7; } .options { display: grid; grid-template-columns: 1fr 1fr; - gap: 12px; - margin-bottom: 15px; + gap: 15px; } @media (max-width: 768px) { @@ -131,39 +129,104 @@ } .option { - background-color: white; + background-color: #f8f9fa; border: 1px solid #ddd; - border-radius: 6px; - padding: 12px 15px; + border-radius: 8px; + padding: 15px; cursor: pointer; - transition: all 0.2s ease; - display: flex; - align-items: center; + transition: all 0.3s ease; } .option:hover { - border-color: #2980b9; - background-color: #f0f7ff; + background-color: #e3f2fd; + border-color: #90caf9; } .option input { margin-right: 10px; } - .option label { - cursor: pointer; - flex: 1; + .btn-section { + text-align: center; + margin-top: 40px; } - .question-explanation { + .submit-btn { + background-color: #27ae60; + color: white; + border: none; + padding: 12px 30px; + border-radius: 8px; + font-size: 1rem; + cursor: pointer; + transition: background-color 0.3s ease; + } + + .submit-btn:hover { + background-color: #219653; + } + + .result-section { + background-color: white; + border-radius: 12px; + padding: 30px; + box-shadow: 0 4px 20px rgba(0,0,0,0.08); + margin-top: 30px; + display: none; + } + + .result-header { + text-align: center; + margin-bottom: 20px; + color: #1a5276; + } + + .result-stats { + display: flex; + justify-content: space-around; + margin-bottom: 30px; + flex-wrap: wrap; + } + + .stat-item { + text-align: center; + padding: 15px; + } + + .stat-value { + font-size: 2rem; + font-weight: bold; + color: #2c3e50; + } + + .stat-label { + color: #7f8c8d; + font-size: 0.9rem; + } + + .explanation { margin-top: 15px; padding: 15px; - background-color: #e8f5e9; - border-left: 4px solid #4caf50; + background-color: #f8f9fa; + border-left: 4px solid #3498db; border-radius: 4px; display: none; } + .explanation.show { + display: block; + } + + .correct { + background-color: #e8f5e9; + border-color: #81c784; + } + + .incorrect { + background-color: #ffebee; + border-color: #e57373; + } + .navigation-section { text-align: center; margin: 20px 0; @@ -173,62 +236,29 @@ display: none; } - .submit-section { - text-align: center; - margin-top: 40px; - } - - #submit-btn { - background-color: #2980b9; + .next-btn { + background-color: #3498db; color: white; border: none; - padding: 12px 30px; - border-radius: 6px; - cursor: pointer; - font-size: 16px; - transition: all 0.2s ease; - } - - #submit-btn:hover { - background-color: #1e6fa5; - transform: translateY(-2px); - } - - #result { - margin-top: 30px; - padding: 20px; + padding: 10px 25px; border-radius: 8px; - display: none; + font-size: 0.9rem; + cursor: pointer; + transition: background-color 0.3s ease; + margin-top: 15px; } - .result-header { - font-size: 22px; - font-weight: bold; - margin-bottom: 15px; - color: #2c3e50; + .next-btn:hover { + background-color: #2980b9; } - - .score { - font-size: 18px; - margin-bottom: 20px; - color: #333; - } - - .correct-answers { - background-color: #e8f5e9; - color: #2e7d32; - padding: 10px 15px; - border-radius: 6px; - margin-bottom: 10px; - } - - .incorrect-answers { - background-color: #ffebee; - color: #c62828; - padding: 10px 15px; - border-radius: 6px; - } - + /* 在现有样式中添加 */ + .ask-xueban-btn.hidden { + display: none; + } + .explanation.show + .ask-xueban-btn { + margin-top: 15px; + } +