优化填空题答案显示:直接在横线位置显示答案
改进内容: - 答案直接替换横线位置,不使用上方标签形式 - 答案文字显示为绿色加粗,带下划线突出显示 - 填空题不再显示底部答案区域,避免重复 - 视觉效果更简洁直观 样式调整: - 答案颜色:#52c41a(绿色) - 字体加粗:font-weight 600 - 底部边框:2px实线绿色下划线 - 最小宽度60px,文字居中对齐 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
parent
f2b5e623b0
commit
201ddf5857
@ -74,13 +74,16 @@
|
||||
color: #262626;
|
||||
}
|
||||
|
||||
.blank {
|
||||
.blankAnswer {
|
||||
display: inline-block;
|
||||
border-bottom: 2px solid #1677ff;
|
||||
min-width: 60px;
|
||||
font-size: 15px;
|
||||
font-weight: 600;
|
||||
color: #52c41a;
|
||||
border-bottom: 2px solid #52c41a;
|
||||
padding: 0 4px 2px 4px;
|
||||
margin: 0 4px;
|
||||
color: transparent;
|
||||
user-select: none;
|
||||
min-width: 60px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.options {
|
||||
|
||||
@ -87,9 +87,9 @@ const QuestionList: React.FC = () => {
|
||||
setFilteredQuestions(filtered)
|
||||
}, [selectedType, searchKeyword, questions])
|
||||
|
||||
// 渲染填空题内容,将****替换为下划线
|
||||
const renderFillInBlankContent = (content: string): React.ReactNode => {
|
||||
// 将 **** 替换为下划线样式
|
||||
// 渲染填空题内容,将****替换为答案(带下划线样式)
|
||||
const renderFillInBlankContent = (content: string, answers: string[]): React.ReactNode => {
|
||||
// 将 **** 替换为答案
|
||||
const parts = content.split('****')
|
||||
return (
|
||||
<>
|
||||
@ -97,7 +97,7 @@ const QuestionList: React.FC = () => {
|
||||
<React.Fragment key={index}>
|
||||
{part}
|
||||
{index < parts.length - 1 && (
|
||||
<span className={styles.blank}>______</span>
|
||||
<span className={styles.blankAnswer}>{answers[index] || '______'}</span>
|
||||
)}
|
||||
</React.Fragment>
|
||||
))}
|
||||
@ -250,7 +250,10 @@ const QuestionList: React.FC = () => {
|
||||
<div className={styles.questionContent}>
|
||||
<Paragraph className={styles.contentText}>
|
||||
{question.type === 'fill-in-blank'
|
||||
? renderFillInBlankContent(question.content)
|
||||
? renderFillInBlankContent(
|
||||
question.content,
|
||||
Array.isArray(question.answer) ? question.answer : []
|
||||
)
|
||||
: question.content
|
||||
}
|
||||
</Paragraph>
|
||||
@ -259,16 +262,18 @@ const QuestionList: React.FC = () => {
|
||||
{/* 选项 */}
|
||||
{renderOptions(question)}
|
||||
|
||||
{/* 答案 */}
|
||||
<div className={styles.answerSection}>
|
||||
<Space size="small">
|
||||
<CheckCircleOutlined style={{ color: '#52c41a' }} />
|
||||
<Text strong>正确答案:</Text>
|
||||
</Space>
|
||||
<Paragraph className={styles.answerText}>
|
||||
{formatAnswer(question)}
|
||||
</Paragraph>
|
||||
</div>
|
||||
{/* 答案 - 填空题不显示答案区域,因为答案已经在横线上方 */}
|
||||
{question.type !== 'fill-in-blank' && (
|
||||
<div className={styles.answerSection}>
|
||||
<Space size="small">
|
||||
<CheckCircleOutlined style={{ color: '#52c41a' }} />
|
||||
<Text strong>正确答案:</Text>
|
||||
</Space>
|
||||
<Paragraph className={styles.answerText}>
|
||||
{formatAnswer(question)}
|
||||
</Paragraph>
|
||||
</div>
|
||||
)}
|
||||
</Card>
|
||||
)
|
||||
}}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user