如果您想要為您的網站添加在線考試試卷答題填寫表單功能，那么使用jQuery是一個非常好的選擇。在本文中，我們將演示如何使用jQuery來制作一個通用的在線考試試卷答題填寫表單頁面，并添加左側懸浮答題欄和特效。

界面布局

我們需要創建一個基本的HTML界面，在其中包含所有的問題和選項。以下是一個例子：

<!DOCTYPE html>
<html>
<head>
	<title>在線考試試卷</title>
</head>
<body>
	<div id="wrapper">
		<h1>在線考試試卷</h1>
		<div id="questions">
			<div class="question">
				<h2>問題 1：</h2>
				<p>這是第一個問題的描述。</p>
				<ul>
					<li><input type="radio" name="q1" value="a"> 選項 A</li>
					<li><input type="radio" name="q1" value="b"> 選項 B</li>
					<li><input type="radio" name="q1" value="c"> 選項 C</li>
				</ul>
			</div>
			<div class="question">
				<h2>問題 2：</h2>
				<p>這是第二個問題的描述。</p>
				<ul>
					<li><input type="radio" name="q2" value="a"> 選項 A</li>
					<li><input type="radio" name="q2" value="b"> 選項 B</li>
					<li><input type="radio" name="q2" value="c"> 選項 C</li>
				</ul>
			</div>
		</div>
		<div id="sidebar">
			<ul>
				<li><a href="#q1">問題 1</a></li>
				<li><a href="#q2">問題 2</a></li>
			</ul>
		</div>
	</div>
</body>
</html>

在這個例子中，我們創建了一個包含兩個問題的試卷。每個問題都有一個問題描述和三個選項（A、B、C）。我們還創建了一個側邊欄，其中列出了每個問題的標題，并使用錨點鏈接到相應的問題。

jQuery腳本

我們將添加一些jQuery代碼來使頁面具備交互性。以下是代碼：

$(document).ready(function() {
	// 隱藏所有問題除了第一個
	$('.question').not(':first').hide();

	// 當用戶點擊側邊欄中的鏈接時，滾動到相應的問題
	$('#sidebar a').click(function(event) {
		event.preventDefault();
		var target = $($(this).attr('href'));
		if (target.length) {
			var top = target.offset().top;
			$('html, body').animate({scrollTop: top}, 'slow');
		}
	});

	// 當用戶選擇答案時，更新側邊欄中的答題情況
	$('input[type="radio"]').click(function() {
		var question = $(this).closest('.question');
		var index = $('.question').index(question) + 1;
		var value = $(this).val();
		$('#sidebar a[href="#q' + index + '"]').addClass('answered');
	});
});

這些代碼實現了以下功能：

  • 隱藏所有問題除了第一個。
  • 當用戶點擊側邊欄中的鏈接時，滾動到相應的問題。
  • 當用戶選擇答案時，更新側邊欄中的答題情況。

CSS樣式

我們需要添加一些CSS樣式來修飾頁面。以下是代碼：

#wrapper {
	width: 800px;
	margin: 0 auto;
}

#questions {
	float: left;
	width: 600px;
	margin-right: 50px;
}

.question {
	margin-bottom: 20px;
}

.question h2 {
	font-size: 18px;
}

.question ul {
	list-style-type:none;
	margin: 0;
	padding: 0;
}

.question ul li {
	font-size: 14px;
	margin-bottom: 5px;
}

#sidebar {
	float: left;
	width: 150px;
	background-color: #eee;
	padding: 10px;
}

#sidebar ul {
	list-style-type: none;
	margin: 0;
	padding: 0;
}

#sidebar ul li {
	margin-bottom: 5px;
}

#sidebar a {
	display: block;
	padding: 5px;
	color: #333;
	text-decoration: none;
}

#sidebar a:hover,
#sidebar a.answered {
	background-color: #333;
	color: #fff;
}

這些樣式將頁面布局為兩列，左側是問題和選項，右側是側邊欄。側邊欄中的鏈接使用了一些基本的樣式，當用戶選擇答案時，會添加一個額外的類“answered”，以表示該問題已被回答。

在本文中，我們演示了如何使用jQuery來制作一個通用的在線考試試卷答題填寫表單頁面。我們還添加了一個左側懸浮答題欄和一些特效。這個頁面可以方便地擴展到任意數量的問題和選項，并且易于維護和使用。