add survey
This commit is contained in:
朱潮
parent
aba0cd46c9
commit
7437005d2f
@ -13,130 +13,56 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
body {
|
body {
|
||||||
background: linear-gradient(135deg, #ff7e5f 0%, #feb47b 100%);
|
background-color: #f5f7fa;
|
||||||
color: #333;
|
color: #333;
|
||||||
margin: 0;
|
padding: 20px;
|
||||||
padding: 0;
|
|
||||||
line-height: 1.6;
|
line-height: 1.6;
|
||||||
min-height: 100vh;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.container {
|
.container {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
background: transparent;
|
max-width: 1200px;
|
||||||
|
margin: 0 auto;
|
||||||
|
background: white;
|
||||||
|
border-radius: 12px;
|
||||||
|
box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
min-height: 100vh;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.header {
|
.header {
|
||||||
background: linear-gradient(135deg, #ff7e5f 0%, #feb47b 100%);
|
background: linear-gradient(135deg, #ff7e5f 0%, #feb47b 50%, #ff7e5f 100%);
|
||||||
color: white;
|
color: white;
|
||||||
padding: 80px 40px 60px;
|
padding: 30px;
|
||||||
position: relative;
|
position: relative;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
|
box-shadow: 0 4px 20px rgba(255, 126, 95, 0.3);
|
||||||
text-align: center;
|
text-align: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
.header::before {
|
|
||||||
content: '';
|
|
||||||
position: absolute;
|
|
||||||
top: 0;
|
|
||||||
left: 0;
|
|
||||||
right: 0;
|
|
||||||
bottom: 0;
|
|
||||||
background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.05'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E") repeat;
|
|
||||||
}
|
|
||||||
|
|
||||||
.header-content {
|
|
||||||
position: relative;
|
|
||||||
z-index: 2;
|
|
||||||
max-width: 600px;
|
|
||||||
margin: 0 auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
.header h1 {
|
.header h1 {
|
||||||
font-size: 42px;
|
font-size: 32px;
|
||||||
font-weight: 700;
|
margin-bottom: 10px;
|
||||||
margin-bottom: 16px;
|
position: relative;
|
||||||
letter-spacing: -0.5px;
|
z-index: 2;
|
||||||
background: linear-gradient(135deg, #ffffff 0%, #f0f0f0 100%);
|
|
||||||
-webkit-background-clip: text;
|
|
||||||
-webkit-text-fill-color: transparent;
|
|
||||||
background-clip: text;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.header p {
|
.header p {
|
||||||
font-size: 18px;
|
position: relative;
|
||||||
|
z-index: 2;
|
||||||
opacity: 0.9;
|
opacity: 0.9;
|
||||||
line-height: 1.6;
|
|
||||||
margin-bottom: 0;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.config-section {
|
.config-section {
|
||||||
padding: 0;
|
padding: 30px;
|
||||||
background: #ffffff;
|
background: #ffffff;
|
||||||
margin-top: -60px;
|
|
||||||
position: relative;
|
|
||||||
z-index: 10;
|
|
||||||
}
|
|
||||||
|
|
||||||
.unified-config {
|
|
||||||
width: 100%;
|
|
||||||
max-width: 1000px;
|
|
||||||
margin: 0 auto;
|
|
||||||
background: white;
|
|
||||||
border-radius: 24px 24px 0 0;
|
|
||||||
box-shadow: 0 -10px 40px rgba(255, 126, 95, 0.15);
|
|
||||||
overflow: hidden;
|
|
||||||
animation: slideUp 0.8s ease-out;
|
|
||||||
}
|
|
||||||
|
|
||||||
@keyframes slideUp {
|
|
||||||
from {
|
|
||||||
opacity: 0;
|
|
||||||
transform: translateY(40px);
|
|
||||||
}
|
|
||||||
to {
|
|
||||||
opacity: 1;
|
|
||||||
transform: translateY(0);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.config-intro {
|
|
||||||
background: linear-gradient(135deg, rgba(255, 126, 95, 0.1) 0%, rgba(254, 180, 123, 0.1) 100%);
|
|
||||||
padding: 40px;
|
|
||||||
text-align: center;
|
|
||||||
border-bottom: 1px solid rgba(255, 126, 95, 0.1);
|
|
||||||
}
|
|
||||||
|
|
||||||
.intro-icon {
|
|
||||||
font-size: 48px;
|
|
||||||
margin-bottom: 16px;
|
|
||||||
display: block;
|
|
||||||
}
|
|
||||||
|
|
||||||
.config-intro h2 {
|
|
||||||
font-size: 28px;
|
|
||||||
font-weight: 600;
|
|
||||||
color: #2d3748;
|
|
||||||
margin-bottom: 12px;
|
|
||||||
letter-spacing: -0.5px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.config-intro p {
|
|
||||||
font-size: 16px;
|
|
||||||
color: #718096;
|
|
||||||
line-height: 1.6;
|
|
||||||
max-width: 600px;
|
|
||||||
margin: 0 auto;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.form-container {
|
.form-container {
|
||||||
padding: 40px;
|
padding: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.form-section {
|
.form-section {
|
||||||
margin-bottom: 40px;
|
margin-bottom: 30px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.form-section:last-child {
|
.form-section:last-child {
|
||||||
@ -401,9 +327,11 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.config-summary {
|
.config-summary {
|
||||||
background: linear-gradient(135deg, #f7fafc 0%, #edf2f7 100%);
|
background: #f9f9f9;
|
||||||
padding: 40px;
|
padding: 20px;
|
||||||
border-top: 1px solid #e2e8f0;
|
border-radius: 10px;
|
||||||
|
border-top: 2px solid #ff7e5f;
|
||||||
|
margin-top: 20px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.summary-content {
|
.summary-content {
|
||||||
@ -411,10 +339,9 @@
|
|||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
background: white;
|
background: white;
|
||||||
padding: 30px;
|
padding: 20px;
|
||||||
border-radius: 16px;
|
border-radius: 8px;
|
||||||
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
|
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
|
||||||
border: 1px solid #e2e8f0;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.summary-stats {
|
.summary-stats {
|
||||||
@ -428,14 +355,11 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.stat-value {
|
.stat-value {
|
||||||
font-size: 36px;
|
font-size: 28px;
|
||||||
font-weight: 700;
|
font-weight: 700;
|
||||||
line-height: 1;
|
line-height: 1;
|
||||||
margin-bottom: 8px;
|
margin-bottom: 8px;
|
||||||
background: linear-gradient(135deg, #ff7e5f 0%, #feb47b 100%);
|
color: #ff7e5f;
|
||||||
-webkit-background-clip: text;
|
|
||||||
-webkit-text-fill-color: transparent;
|
|
||||||
background-clip: text;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.stat-label {
|
.stat-label {
|
||||||
@ -445,69 +369,47 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.stat-divider {
|
.stat-divider {
|
||||||
width: 2px;
|
width: 1px;
|
||||||
height: 50px;
|
height: 40px;
|
||||||
background: linear-gradient(180deg, #e2e8f0, transparent);
|
background: #e0e0e0;
|
||||||
border-radius: 1px;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.start-button {
|
.start-button {
|
||||||
background: linear-gradient(135deg, #ff7e5f 0%, #feb47b 100%);
|
background: linear-gradient(135deg, #ff7e5f, #feb47b);
|
||||||
color: white;
|
color: white;
|
||||||
border: none;
|
border: none;
|
||||||
padding: 18px 36px;
|
padding: 12px 24px;
|
||||||
border-radius: 16px;
|
border-radius: 8px;
|
||||||
font-size: 16px;
|
font-size: 16px;
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
transition: all 0.3s ease;
|
transition: all 0.3s ease;
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
gap: 10px;
|
gap: 8px;
|
||||||
box-shadow: 0 4px 15px rgba(255, 126, 95, 0.3);
|
box-shadow: 0 4px 15px rgba(255, 126, 95, 0.3);
|
||||||
position: relative;
|
|
||||||
overflow: hidden;
|
|
||||||
}
|
|
||||||
|
|
||||||
.start-button::before {
|
|
||||||
content: '';
|
|
||||||
position: absolute;
|
|
||||||
top: 0;
|
|
||||||
left: -100%;
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
|
|
||||||
transition: left 0.6s ease;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.start-button:hover:not(:disabled) {
|
.start-button:hover:not(:disabled) {
|
||||||
transform: translateY(-3px);
|
background: linear-gradient(135deg, #ff6b52, #fe9b5b);
|
||||||
box-shadow: 0 8px 25px rgba(255, 126, 95, 0.4);
|
transform: translateY(-2px);
|
||||||
}
|
box-shadow: 0 6px 20px rgba(255, 126, 95, 0.4);
|
||||||
|
|
||||||
.start-button:hover:not(:disabled)::before {
|
|
||||||
left: 100%;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.start-button:disabled {
|
.start-button:disabled {
|
||||||
background: #e2e8f0;
|
background: #ccc;
|
||||||
color: #a0aec0;
|
color: #666;
|
||||||
cursor: not-allowed;
|
cursor: not-allowed;
|
||||||
transform: none;
|
transform: none;
|
||||||
box-shadow: none;
|
box-shadow: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
.start-button:disabled::before {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.button-arrow {
|
.button-arrow {
|
||||||
transition: transform 0.3s ease;
|
transition: transform 0.3s ease;
|
||||||
font-size: 18px;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.start-button:hover:not(:disabled) .button-arrow {
|
.start-button:hover:not(:disabled) .button-arrow {
|
||||||
transform: translateX(6px);
|
transform: translateX(4px);
|
||||||
}
|
}
|
||||||
|
|
||||||
.rule-item {
|
.rule-item {
|
||||||
@ -1142,58 +1044,39 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
@media (max-width: 768px) {
|
@media (max-width: 768px) {
|
||||||
|
body {
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.container {
|
||||||
|
margin: 0;
|
||||||
|
border-radius: 0;
|
||||||
|
}
|
||||||
|
|
||||||
.header {
|
.header {
|
||||||
padding: 40px 20px 30px;
|
padding: 20px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.header h1 {
|
.header h1 {
|
||||||
font-size: 32px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.header p {
|
|
||||||
font-size: 16px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.config-section {
|
|
||||||
margin-top: -40px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.unified-config {
|
|
||||||
border-radius: 20px 20px 0 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.config-intro {
|
|
||||||
padding: 30px 20px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.intro-icon {
|
|
||||||
font-size: 40px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.config-intro h2 {
|
|
||||||
font-size: 24px;
|
font-size: 24px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.config-intro p {
|
.config-section {
|
||||||
font-size: 14px;
|
padding: 15px;
|
||||||
}
|
|
||||||
|
|
||||||
.form-container {
|
|
||||||
padding: 30px 20px;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.form-section {
|
.form-section {
|
||||||
margin-bottom: 30px;
|
margin-bottom: 25px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.section-header {
|
.section-header {
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
align-items: flex-start;
|
align-items: flex-start;
|
||||||
margin-bottom: 20px;
|
margin-bottom: 16px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.section-icon {
|
.section-icon {
|
||||||
margin-bottom: 12px;
|
margin-bottom: 8px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.section-divider {
|
.section-divider {
|
||||||
@ -1202,16 +1085,16 @@
|
|||||||
|
|
||||||
.form-row {
|
.form-row {
|
||||||
grid-template-columns: 1fr;
|
grid-template-columns: 1fr;
|
||||||
gap: 16px;
|
gap: 12px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.rules-grid {
|
.rules-grid {
|
||||||
grid-template-columns: 1fr;
|
grid-template-columns: 1fr;
|
||||||
gap: 16px;
|
gap: 12px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.rule-card {
|
.rule-card {
|
||||||
padding: 20px;
|
padding: 16px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.rule-number-input {
|
.rule-number-input {
|
||||||
@ -1219,13 +1102,13 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.config-summary {
|
.config-summary {
|
||||||
padding: 30px 20px;
|
padding: 15px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.summary-content {
|
.summary-content {
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
gap: 24px;
|
gap: 20px;
|
||||||
padding: 24px;
|
padding: 15px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.summary-stats {
|
.summary-stats {
|
||||||
@ -1233,7 +1116,7 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.stat-value {
|
.stat-value {
|
||||||
font-size: 28px;
|
font-size: 24px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.start-button {
|
.start-button {
|
||||||
@ -1242,60 +1125,6 @@
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@media (max-width: 480px) {
|
|
||||||
.header {
|
|
||||||
padding: 30px 15px 20px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.header h1 {
|
|
||||||
font-size: 28px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.header p {
|
|
||||||
font-size: 14px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.config-section {
|
|
||||||
margin-top: -30px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.unified-config {
|
|
||||||
border-radius: 16px 16px 0 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.config-intro {
|
|
||||||
padding: 25px 15px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.intro-icon {
|
|
||||||
font-size: 36px;
|
|
||||||
margin-bottom: 12px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.config-intro h2 {
|
|
||||||
font-size: 22px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.form-container {
|
|
||||||
padding: 25px 15px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.rule-card {
|
|
||||||
padding: 16px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.config-summary {
|
|
||||||
padding: 25px 15px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.summary-content {
|
|
||||||
padding: 20px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.stat-value {
|
|
||||||
font-size: 24px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (max-width: 768px) {
|
@media (max-width: 768px) {
|
||||||
.container {
|
.container {
|
||||||
@ -1364,160 +1193,147 @@
|
|||||||
<body>
|
<body>
|
||||||
<div class="container">
|
<div class="container">
|
||||||
<div class="header">
|
<div class="header">
|
||||||
<div class="header-content">
|
<h1>🎯 学科能力测评问卷</h1>
|
||||||
<h1>🎯 学科能力测评问卷</h1>
|
<p>基于科学的题目分类和标签筛选系统，精准评估您的学科能力</p>
|
||||||
<p>基于科学的题目分类和标签筛选系统，精准评估您的学科能力</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="config-section" id="configSection">
|
<div class="config-section" id="configSection">
|
||||||
<div class="unified-config">
|
<!-- 学员信息区域 -->
|
||||||
<div class="config-intro">
|
<div class="form-section">
|
||||||
<div class="intro-icon">📝</div>
|
<div class="section-header">
|
||||||
<h2>开始测评</h2>
|
<div class="section-icon">👤</div>
|
||||||
<p>填写基本信息，配置答题规则，即可开始您的学科能力测评之旅</p>
|
<h3>学员信息</h3>
|
||||||
|
<div class="section-divider"></div>
|
||||||
</div>
|
</div>
|
||||||
|
<div class="form-row">
|
||||||
<div class="form-container">
|
<div class="form-field">
|
||||||
<!-- 学员信息区域 -->
|
<label for="studentName" class="field-label">
|
||||||
<div class="form-section">
|
<span class="label-text">姓名</span>
|
||||||
<div class="section-header">
|
<span class="required">*</span>
|
||||||
<div class="section-icon">👤</div>
|
</label>
|
||||||
<h3>学员信息</h3>
|
<input type="text" id="studentName" class="modern-input" placeholder="请输入您的姓名" required>
|
||||||
<div class="section-divider"></div>
|
|
||||||
</div>
|
|
||||||
<div class="form-row">
|
|
||||||
<div class="form-field">
|
|
||||||
<label for="studentName" class="field-label">
|
|
||||||
<span class="label-text">姓名</span>
|
|
||||||
<span class="required">*</span>
|
|
||||||
</label>
|
|
||||||
<input type="text" id="studentName" class="modern-input" placeholder="请输入您的姓名" required>
|
|
||||||
</div>
|
|
||||||
<div class="form-field">
|
|
||||||
<label for="studentSchool" class="field-label">
|
|
||||||
<span class="label-text">学校</span>
|
|
||||||
<span class="required">*</span>
|
|
||||||
</label>
|
|
||||||
<input type="text" id="studentSchool" class="modern-input" placeholder="请输入您的学校" required>
|
|
||||||
</div>
|
|
||||||
<div class="form-field">
|
|
||||||
<label for="studentGrade" class="field-label">
|
|
||||||
<span class="label-text">年级</span>
|
|
||||||
<span class="required">*</span>
|
|
||||||
</label>
|
|
||||||
<input type="text" id="studentGrade" class="modern-input" placeholder="请输入您的年级" required>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
|
<div class="form-field">
|
||||||
<!-- 题目筛选区域 -->
|
<label for="studentSchool" class="field-label">
|
||||||
<div class="form-section">
|
<span class="label-text">学校</span>
|
||||||
<div class="section-header">
|
<span class="required">*</span>
|
||||||
<div class="section-icon">🏷️</div>
|
</label>
|
||||||
<h3>题目筛选</h3>
|
<input type="text" id="studentSchool" class="modern-input" placeholder="请输入您的学校" required>
|
||||||
<div class="section-divider"></div>
|
|
||||||
</div>
|
|
||||||
<div class="form-row">
|
|
||||||
<div class="form-field full-width">
|
|
||||||
<label for="gradeFilter" class="field-label">
|
|
||||||
<span class="label-text">选择题目标签</span>
|
|
||||||
<span class="optional">可选</span>
|
|
||||||
</label>
|
|
||||||
<div class="select-wrapper">
|
|
||||||
<select id="gradeFilter" class="modern-select">
|
|
||||||
<option value="">选择年级/册次标签...</option>
|
|
||||||
</select>
|
|
||||||
<div class="select-arrow">▼</div>
|
|
||||||
</div>
|
|
||||||
<div class="field-hint">
|
|
||||||
<span id="selectedTagsList">未选择标签，将使用全部题目</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
|
<div class="form-field">
|
||||||
<!-- 抽题规则区域 -->
|
<label for="studentGrade" class="field-label">
|
||||||
<div class="form-section">
|
<span class="label-text">年级</span>
|
||||||
<div class="section-header">
|
<span class="required">*</span>
|
||||||
<div class="section-icon">📋</div>
|
</label>
|
||||||
<h3>抽题规则</h3>
|
<input type="text" id="studentGrade" class="modern-input" placeholder="请输入您的年级" required>
|
||||||
<div class="section-divider"></div>
|
|
||||||
</div>
|
|
||||||
<div class="rules-grid">
|
|
||||||
<div class="rule-card">
|
|
||||||
<div class="rule-header">
|
|
||||||
<div class="rule-type basic">基础题</div>
|
|
||||||
<div class="rule-points">5分/题</div>
|
|
||||||
</div>
|
|
||||||
<div class="rule-input-area">
|
|
||||||
<input type="number" id="basicQuestions" class="rule-number-input" min="0" max="50" value="10" placeholder="0">
|
|
||||||
<div class="rule-calculation">
|
|
||||||
共 <span id="basicScore">50</span> 分
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="rule-status" id="basicStatus">
|
|
||||||
<span class="status-text">可用题目加载中...</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="rule-card">
|
|
||||||
<div class="rule-header">
|
|
||||||
<div class="rule-type advanced">进阶题</div>
|
|
||||||
<div class="rule-points">10分/题</div>
|
|
||||||
</div>
|
|
||||||
<div class="rule-input-area">
|
|
||||||
<input type="number" id="advancedQuestions" class="rule-number-input" min="0" max="20" value="2" placeholder="0">
|
|
||||||
<div class="rule-calculation">
|
|
||||||
共 <span id="advancedScore">20</span> 分
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="rule-status" id="advancedStatus">
|
|
||||||
<span class="status-text">可用题目加载中...</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="rule-card">
|
|
||||||
<div class="rule-header">
|
|
||||||
<div class="rule-type competition">竞赛题</div>
|
|
||||||
<div class="rule-points">15分/题</div>
|
|
||||||
</div>
|
|
||||||
<div class="rule-input-area">
|
|
||||||
<input type="number" id="competitionQuestions" class="rule-number-input" min="0" max="15" value="2" placeholder="0">
|
|
||||||
<div class="rule-calculation">
|
|
||||||
共 <span id="competitionScore">30</span> 分
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="rule-status" id="competitionStatus">
|
|
||||||
<span class="status-text">可用题目加载中...</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- 配置总结 -->
|
|
||||||
<div class="config-summary">
|
|
||||||
<div class="summary-content">
|
|
||||||
<div class="summary-stats">
|
|
||||||
<div class="stat-item">
|
|
||||||
<div class="stat-value" id="summaryTotalQuestions">14</div>
|
|
||||||
<div class="stat-label">总题数</div>
|
|
||||||
</div>
|
|
||||||
<div class="stat-divider"></div>
|
|
||||||
<div class="stat-item">
|
|
||||||
<div class="stat-value" id="summaryTotalScore">100</div>
|
|
||||||
<div class="stat-label">总分数</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<button class="start-button" id="startSurvey">
|
|
||||||
<span class="button-text">开始答题</span>
|
|
||||||
<span class="button-arrow">→</span>
|
|
||||||
</button>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
|
||||||
|
<!-- 题目筛选区域 -->
|
||||||
|
<div class="form-section">
|
||||||
|
<div class="section-header">
|
||||||
|
<div class="section-icon">🏷️</div>
|
||||||
|
<h3>题目筛选</h3>
|
||||||
|
<div class="section-divider"></div>
|
||||||
|
</div>
|
||||||
|
<div class="form-row">
|
||||||
|
<div class="form-field full-width">
|
||||||
|
<label for="gradeFilter" class="field-label">
|
||||||
|
<span class="label-text">选择题目标签</span>
|
||||||
|
<span class="optional">可选</span>
|
||||||
|
</label>
|
||||||
|
<div class="select-wrapper">
|
||||||
|
<select id="gradeFilter" class="modern-select">
|
||||||
|
<option value="">选择年级/册次标签...</option>
|
||||||
|
</select>
|
||||||
|
<div class="select-arrow">▼</div>
|
||||||
|
</div>
|
||||||
|
<div class="field-hint">
|
||||||
|
<span id="selectedTagsList">未选择标签，将使用全部题目</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 抽题规则区域 -->
|
||||||
|
<div class="form-section">
|
||||||
|
<div class="section-header">
|
||||||
|
<div class="section-icon">📋</div>
|
||||||
|
<h3>抽题规则</h3>
|
||||||
|
<div class="section-divider"></div>
|
||||||
|
</div>
|
||||||
|
<div class="rules-grid">
|
||||||
|
<div class="rule-card">
|
||||||
|
<div class="rule-header">
|
||||||
|
<div class="rule-type basic">基础题</div>
|
||||||
|
<div class="rule-points">5分/题</div>
|
||||||
|
</div>
|
||||||
|
<div class="rule-input-area">
|
||||||
|
<input type="number" id="basicQuestions" class="rule-number-input" min="0" max="50" value="10" placeholder="0">
|
||||||
|
<div class="rule-calculation">
|
||||||
|
共 <span id="basicScore">50</span> 分
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="rule-status" id="basicStatus">
|
||||||
|
<span class="status-text">可用题目加载中...</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="rule-card">
|
||||||
|
<div class="rule-header">
|
||||||
|
<div class="rule-type advanced">进阶题</div>
|
||||||
|
<div class="rule-points">10分/题</div>
|
||||||
|
</div>
|
||||||
|
<div class="rule-input-area">
|
||||||
|
<input type="number" id="advancedQuestions" class="rule-number-input" min="0" max="20" value="2" placeholder="0">
|
||||||
|
<div class="rule-calculation">
|
||||||
|
共 <span id="advancedScore">20</span> 分
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="rule-status" id="advancedStatus">
|
||||||
|
<span class="status-text">可用题目加载中...</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="rule-card">
|
||||||
|
<div class="rule-header">
|
||||||
|
<div class="rule-type competition">竞赛题</div>
|
||||||
|
<div class="rule-points">15分/题</div>
|
||||||
|
</div>
|
||||||
|
<div class="rule-input-area">
|
||||||
|
<input type="number" id="competitionQuestions" class="rule-number-input" min="0" max="15" value="2" placeholder="0">
|
||||||
|
<div class="rule-calculation">
|
||||||
|
共 <span id="competitionScore">30</span> 分
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="rule-status" id="competitionStatus">
|
||||||
|
<span class="status-text">可用题目加载中...</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 配置总结 -->
|
||||||
|
<div class="config-summary">
|
||||||
|
<div class="summary-content">
|
||||||
|
<div class="summary-stats">
|
||||||
|
<div class="stat-item">
|
||||||
|
<div class="stat-value" id="summaryTotalQuestions">14</div>
|
||||||
|
<div class="stat-label">总题数</div>
|
||||||
|
</div>
|
||||||
|
<div class="stat-divider"></div>
|
||||||
|
<div class="stat-item">
|
||||||
|
<div class="stat-value" id="summaryTotalScore">100</div>
|
||||||
|
<div class="stat-label">总分数</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<button class="start-button" id="startSurvey">
|
||||||
|
<span class="button-text">开始答题</span>
|
||||||
|
<span class="button-arrow">→</span>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
<div class="survey-content" id="surveyContent">
|
<div class="survey-content" id="surveyContent">
|
||||||
<div class="progress-bar">
|
<div class="progress-bar">
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user