利用前端知识写一个考试界面要求如下：分为左右两个区域左侧：1有一个大标题显示考试标题同时在一侧有正在答题中的绿色标识。2有五道单选题可以上下滚动查看每道题有四个答案每个答案前有一个按钮同时下方也有四个选项点击答案或下方选项都能选中答案。答案对应的单选按钮变蓝色。3每道选择题右下角有标记按钮点击标记后变成取消标记四个字显示。右侧：1界面上方显示考试倒计时初始时剩余两个小时可以暂停暂停将无法答题选项无
以下是一个简单的考试界面示例：
<!DOCTYPE html>
<html>
<head>
<title>考试界面</title>
<style>
body {
margin: 0;
padding: 0;
font-family: Arial, sans-serif;
}
.container {
display: flex;
flex-direction: row;
height: 100vh;
}
.left {
flex: 1;
padding: 20px;
background-color: #f0f0f0;
overflow-y: scroll;
}
.right {
flex: 1;
padding: 20px;
background-color: #fff;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
h1 {
font-size: 36px;
margin: 0 0 20px 0;
display: flex;
align-items: center;
}
.green-dot {
width: 16px;
height: 16px;
background-color: #00ff00;
border-radius: 50%;
margin-right: 10px;
}
.question {
margin: 20px 0;
padding: 20px;
background-color: #fff;
border: 1px solid #ccc;
border-radius: 5px;
}
.question h2 {
margin: 0 0 10px 0;
}
.answers {
display: flex;
flex-direction: column;
}
.answer {
display: flex;
align-items: center;
margin: 10px 0;
cursor: pointer;
}
.answer input[type="radio"] {
margin-right: 10px;
}
.answer label {
cursor: pointer;
}
.answer input[type="radio"]:checked+label {
color: #fff;
background-color: #007bff;
padding: 5px;
border-radius: 5px;
}
.question button {
margin-top: 10px;
padding: 5px 10px;
background-color: #007bff;
color: #fff;
border: none;
border-radius: 5px;
cursor: pointer;
}
.question button.marked {
background-color: #f00;
}
.question button:focus {
outline: none;
}
.timer {
font-size: 24px;
margin-bottom: 20px;
}
.status {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
margin-bottom: 20px;
}
.status-item {
width: 30px;
height: 30px;
border: 1px solid #ccc;
border-radius: 5px;
margin: 5px;
text-align: center;
font-size: 16px;
font-weight: bold;
cursor: pointer;
}
.status-item.answered {
background-color: #0f0;
color: #fff;
border-color: #0f0;
}
.status-item.marked {
background-color: #f00;
color: #fff;
border-color: #f00;
}
.submit {
margin-top: 20px;
padding: 10px 20px;
background-color: #007bff;
color: #fff;
border: none;
border-radius: 5px;
cursor: pointer;
}
.submit:focus {
outline: none;
}
</style>
</head>
<body>
<div class="container">
<div class="left">
<h1><span class="green-dot"></span>考试标题</h1>
<div class="question">
<h2>单选题1</h2>
<div class="answers">
<div class="answer">
<input type="radio" name="q1" id="q1a" value="a">
<label for="q1a">选项A</label>
</div>
<div class="answer">
<input type="radio" name="q1" id="q1b" value="b">
<label for="q1b">选项B</label>
</div>
<div class="answer">
<input type="radio" name="q1" id="q1c" value="c">
<label for="q1c">选项C</label>
</div>
<div class="answer">
<input type="radio" name="q1" id="q1d" value="d">
<label for="q1d">选项D</label>
</div>
</div>
<button>标记</button>
</div>
<div class="question">
<h2>单选题2</h2>
<div class="answers">
<div class="answer">
<input type="radio" name="q2" id="q2a" value="a">
<label for="q2a">选项A</label>
</div>
<div class="answer">
<input type="radio" name="q2" id="q2b" value="b">
<label for="q2b">选项B</label>
</div>
<div class="answer">
<input type="radio" name="q2" id="q2c" value="c">
<label for="q2c">选项C</label>
</div>
<div class="answer">
<input type="radio" name="q2" id="q2d" value="d">
<label for="q2d">选项D</label>
</div>
</div>
<button>标记</button>
</div>
<div class="question">
<h2>单选题3</h2>
<div class="answers">
<div class="answer">
<input type="radio" name="q3" id="q3a" value="a">
<label for="q3a">选项A</label>
</div>
<div class="answer">
<input type="radio" name="q3" id="q3b" value="b">
<label for="q3b">选项B</label>
</div>
<div class="answer">
<input type="radio" name="q3" id="q3c" value="c">
<label for="q3c">选项C</label>
</div>
<div class="answer">
<input type="radio" name="q3" id="q3d" value="d">
<label for="q3d">选项D</label>
</div>
</div>
<button>标记</button>
</div>
<div class="question">
<h2>单选题4</h2>
<div class="answers">
<div class="answer">
<input type="radio" name="q4" id="q4a" value="a">
<label for="q4a">选项A</label>
</div>
<div class="answer">
<input type="radio" name="q4" id="q4b" value="b">
<label for="q4b">选项B</label>
</div>
<div class="answer">
<input type="radio" name="q4" id="q4c" value="c">
<label for="q4c">选项C</label>
</div>
<div class="answer">
<input type="radio" name="q4" id="q4d" value="d">
<label for="q4d">选项D</label>
</div>
</div>
<button>标记</button>
</div>
<div class="question">
<h2>单选题5</h2>
<div class="answers">
<div class="answer">
<input type="radio" name="q5" id="q5a" value="a">
<label for="q5a">选项A</label>
</div>
<div class="answer">
<input type="radio" name="q5" id="q5b" value="b">
<label for="q5b">选项B</label>
</div>
<div class="answer">
<input type="radio" name="q5" id="q5c" value="c">
<label for="q5c">选项C</label>
</div>
<div class="answer">
<input type="radio" name="q5" id="q5d" value="d">
<label for="q5d">选项D</label>
</div>
</div>
<button>标记</button>
</div>
</div>
<div class="right">
<div class="timer">剩余时间：2小时00分钟</div>
<div class="status">
<div class="status-item answered">1</div>
<div class="status-item marked">2</div>
<div class="status-item">3</div>
<div class="status-item">4</div>
<div class="status-item">5</div>
</div>
<button class="submit">马上交卷</button>
</div>
</div>
</body>
</html>
注意：这只是一个简单的示例，还有很多细节需要考虑和完善，例如题目和答案的随机排列、答题卡的保存和恢复、倒计时的实现等等
原文地址: https://www.cveoy.top/t/topic/d53F 著作权归作者所有。请勿转载和采集!