Runxi Yu’s Personal Forge
Login

melonsurvey

Web survey software for melons
Commit info
ID
74813d3fd85a1b678841d8a25b1689c46c020ecc
Author
Runxi Yu <me@runxiyu.org>
Author date
Fri, 11 Apr 2025 23:28:35 +0800
Committer
Runxi Yu <me@runxiyu.org>
Committer date
Fri, 11 Apr 2025 23:28:35 +0800
Actions
Viewport
<!-- This is crap please just don't look at this okay thanks -->
<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1" />
	<title>方言背景对音乐感知与音乐学习能力的影响:实验问卷</title>
	<style>
/*
:root {
	--color-bg-body: #f8f8f8;
	--color-text-main: #333;
	--color-heading: hsl(86, 27%, 24%);
	--color-bg-form: #fff;
	--color-shadow: hsla(0, 0%, 0%, 0.1);
	--color-button-bg: hsl(92, 69%, 53%);
	--color-button-hover: hsl(92, 65%, 45%);
	--color-border: #ddd;
	--color-select-bg: hsla(86, 67%, 27%, 0.07);
	--color-show-all-bg: hsl(92, 69%, 53%);
	--color-show-all-text: #fff;
	--color-label-bg: hsl(120, 8%, 94%);
	--color-label-text: hsl(86, 27%, 24%);
	--color-footer-text: #4f5c5d;
}
*/

:root {
	--color-bg-body: #f8f8f8;
	--color-text-main: #333;
	--color-heading: #2c3e50;
	--color-bg-form: #fff;
	--color-shadow: rgba(0, 0, 0, 0.1);
	--color-button-bg: #3498db;
	--color-button-hover: #2980b9;
	--color-border: #ddd;
	--color-select-bg: #55007711;
	--color-show-all-bg: #3498db;
	--color-show-all-text: #fff;
	--color-label-bg: #ecf0f1;
	--color-label-text: #2c3e50;
	--color-footer-text: #4f5c5d;
}

/*
@media (prefers-color-scheme: dark) {
	:root {
		--color-bg-body: #121212;
		--color-text-main: #e0e0e0;
		--color-heading: hsl(86, 27%, 75%);
		--color-bg-form: #1e1e1e;
		--color-shadow: hsla(0, 0%, 100%, 0.05);
		--color-button-bg: hsl(92, 69%, 40%);
		--color-button-hover: hsl(92, 65%, 35%);
		--color-border: #444;
		--color-select-bg: hsla(86, 67%, 60%, 0.08);
		--color-show-all-bg: hsl(92, 69%, 40%);
		--color-show-all-text: #fff;
		--color-label-bg: hsl(120, 5%, 20%);
		--color-label-text: hsl(86, 27%, 75%);
		--color-footer-text: #a0b0a2;
	}
	img {
		filter: invert(1) brightness(1.15) contrast(0.765);
	}
}
*/

@media (prefers-color-scheme: dark) {
	:root {
		--color-bg-body: #121212;
		--color-text-main: #e0e0e0;
		--color-heading: #a9cde6;
		--color-bg-form: #1e1e1e;
		--color-shadow: rgba(255, 255, 255, 0.05);
		--color-button-bg: #3498db;
		--color-button-hover: #2980b9;
		--color-border: #444;
		--color-select-bg: rgba(85, 0, 119, 0.1);
		--color-show-all-bg: #3498db;
		--color-show-all-text: #fff;
		--color-label-bg: #2c3e50;
		--color-label-text: #ecf0f1;
		--color-footer-text: #a0b0b5;
	}

	img {
		filter: invert(1) brightness(1.15) contrast(0.765);
	}
}

body {
	font-family: Arial, sans-serif;
	background-color: var(--color-bg-body);
	color: var(--color-text-main);
	line-height: 1.6;
	margin: 0;
	padding: 0 15px;
}
h1, h2 {
	color: var(--color-heading);
}
form {
	background-color: var(--color-bg-form);
	padding: 20px;
	margin: 20px auto;
	max-width: 900px;
	box-shadow: 0 0 10px var(--color-shadow);
	border-radius: 5px;
}
p {
	margin-bottom: 10px;
}
label {
	display: inline-block;
	margin: 5px 0;
}
input[type="text"] {
	margin-left: 5px;
	padding: 5px;
	width: 150px;
}
audio {
	display: inline-block;
	border-radius: 0;
	vertical-align: middle;
	padding: 0px;
	border: 0;
	background-color: var(--color-bg-form);
	color: black;
}
ol {
	padding-left: 20px;
}
ol li {
	margin-bottom: 20px;
}
button[type="submit"] {
	background-color: var(--color-button-bg);
	color: var(--color-show-all-text);
	border: none;
	padding: 10px 20px;
	font-size: 16px;
	border-radius: 4px;
	cursor: pointer;
	margin-top: 20px;
}
button[type="submit"]:hover {
	background-color: var(--color-button-hover);
}
br {
	line-height: 1.5;
}
table {
	border-collapse: collapse;
	margin: 20px 0;
	font-size: 16px;
	background-color: var(--color-bg-form);
}
table th,
table td {
	border: 1px solid var(--color-border);
	padding: 0px 0.75rem;
	vertical-align: middle;
}
table td audio {
	margin: 0;
}
table td:has(audio:only-child),
table td:has(input:only-child) {
	padding: 0;
}
table td input[type="text"]:only-child {
	margin: 0;
	border: 0;
	height: 100%;
}
table td label:only-child {
	margin: 0rem 0.5rem;
}
table td select:only-child {
}
input[name="section"],
input[name="show-all-pages"] {
	display: none;
}
table td select:only-child {
	padding: 0 0.75rem;
	margin: 0;
	border: none;
	outline: none;
	width: 100%;
	height: 100%;
	background: var(--color-select-bg);
	font: inherit;
	color: inherit;
	appearance: none;
	-webkit-appearance: none;
	-moz-appearance: none;
	box-sizing: border-box;
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	margin: 0;
	cursor: pointer;
}
table td:has(select:only-child) {
	padding: 0;
	position: relative;
}
.page {
	display: none;
}
#page0:checked ~ .form-wrapper form .page0,
#page1:checked ~ .form-wrapper form .page1,
#page2:checked ~ .form-wrapper form .page2,
#page3:checked ~ .form-wrapper form .page3 {
	display: block;
}
#show-all-pages:checked ~ .form-wrapper form .page {
	display: block !important;
}
#show-all-pages:checked ~ .form-wrapper form .pagination-buttons {
	display: none !important;
}
#show-all-pages:checked ~ .form-wrapper .show-all-pages-label {
	background-color: var(--color-show-all-bg);
	color: var(--color-show-all-text);
	padding: 3px 6px;
	border-radius: 4px;
	cursor: pointer;
}
.show-all-pages-label {
	background-color: var(--color-label-bg);
	color: var(--color-label-text);
	padding: 3px 6px;
	border-radius: 4px;
	cursor: pointer;
}
.pagination-buttons > label {
	background-color: var(--color-show-all-bg);
	color: var(--color-show-all-text);
	padding: 3px 6px;
	border-radius: 4px;
	cursor: pointer;
}
footer {
	max-width: 900px;
	margin: 20px auto;
	font-size: 10px;
	color: var(--color-footer-text);
	line-height: 1.2;
}
footer a,
footer a:link,
footer a:visited {
	color: var(--color-footer-text);
}
.dialect-option .opyf {
	display: none;
}
#r_wuyu:checked ~ .opyf {
	display: inline-block;
}
#r_guanhua:checked ~ .opyf {
	display: inline-block;
}
#r_other:checked ~ .opyf {
	display: inline-block;
}
.needed {
	color: red;
}
	</style>
	<script>
		/*
		 * Yes yes I know you can bypass this by not running JS and it
		 * should be also patently clear that this entire page was
		 * designed with non-JS users in mind (otherwise who would use
		 * CSS state machines for pagination). I mean you could also
		 * just right click on the audio and copy the URL and visit
		 * it directly and no script could stop you from playing it...
		 * these aren't really in our threat model :)
		 */
		document.addEventListener('DOMContentLoaded', () => {
			document.querySelectorAll('audio.once').forEach(audio => {
				audio.addEventListener('play', function handler() {
					audio.removeEventListener('play', handler);
					audio.onplay = e => {
						e.preventDefault();
						audio.pause();
						audio.currentTime = 0;
		
						const warning = document.createElement('div');
						warning.textContent = '不能重复播放';
		
						audio.replaceWith(warning);
					};
				});
			});
			document.querySelectorAll('.pagination-buttons > label').forEach(label => {
				label.addEventListener('click', () => {
					document.getElementById('scroll-target').scrollIntoView({
						block: 'start'
					});
				});
			});
		});
	</script>
</head>
<body>
	<input type="checkbox" name="show-all-pages" id="show-all-pages">
	<input type="radio" name="section" id="page0" checked>
	<input type="radio" name="section" id="page1">
	<input type="radio" name="section" id="page2">
	<input type="radio" name="section" id="page3">
	<div class="form-wrapper">
	<form method="post" action="submit">
	<input type="hidden" name="form_version" value="2">
	<h1>方言背景对音乐感知与音乐学习能力的影响:实验问卷</h1>
	<p>您好!非常感谢您抽出宝贵时间参加本实验。</p>
	<p>填写此份问卷即说明您同意将以下个人信息和测试得分作为实验数据供后续分析。我们将不会泄露您的个人信息。</p>
	<p>为了音频能顺利播放,请使用电脑浏览器打开问卷链接。</p>
	<p>如您在测试过程中感到不适可随时退出,您的数据将不会被记录。</p>
	<p>感谢您的配合!</p>
	<label for="show-all-pages" class="show-all-pages-label">显示所有页面</label>
	<span id="scroll-target"></span>
	<div class="page page0">

		<p>您的年龄段?<span class="needed">*</span></p>
		<label><input type="radio" name="age" value="18岁以下" required> 18 岁以下</label>
		<label><input type="radio" name="age" value="18~25" required> 18&ndash;25</label>
		<label><input type="radio" name="age" value="26~30" required> 26&ndash;30</label>
		<label><input type="radio" name="age" value="31~40" required> 31&ndash;40</label>
		<label><input type="radio" name="age" value="41~50" required> 41&ndash;50</label>
		<label><input type="radio" name="age" value="51~60" required> 51&ndash;60</label>
		<label><input type="radio" name="age" value="60以上" required> 60 以上</label>

		<p>您的性别?</p>
		<label><input type="radio" name="gender" value="男"> 男</label>
		<label><input type="radio" name="gender" value="女"> 女</label>
		<label><input type="radio" name="gender" value="其他"> 其他</label>

		<p>您的母语方言是?只要您家中使用除标准普通话以外的方言,就填写相应的方言。如果完全不使用方言,填写“普通话”。<span class="needed">*</span></p>
		<div class="dialect-option">
			<input type="radio" name="dialect" id="r_wuyu" value="吴语" required>
			<label for="r_wuyu">吴语(江南地区,以上海话、苏州话、杭州话为代表)</label>
			<input class="opyf" type="text" name="wuyu_details">
		</div>
		<div class="dialect-option">
			<input type="radio" name="dialect" id="r_yueyu" value="粤语" required>
			<label for="r_yueyu">粤语(广东、广西皆有分布,以广府粤语为代表)</label>
		</div>
		<div class="dialect-option">
			<input type="radio" name="dialect" id="r_guanhua" value="官话" required>
			<label for="r_guanhua">官话(普通话/江淮/西南/中原/东北...)</label>
			<input class="opyf" type="text" name="guanhua_details">
		</div>
		<div class="dialect-option">
			<input type="radio" name="dialect" id="r_other" value="其他" required>
			<label for="r_other">其他(如闽/湘/赣/客家)</label>
			<input class="opyf" type="text" name="other_details">
		</div>
		<p>您使用方言的频率是?<span class="needed">*</span></p>
		<label><input type="radio" name="usage_frequency" value="每天使用" required> 每天使用</label><br>
		<label><input type="radio" name="usage_frequency" value="每周使用1-5次" required> 每周使用 1&ndash;5 次</label><br>
		<label><input type="radio" name="usage_frequency" value="每月使用1-5次" required> 每月使用 1&ndash;5 次</label><br>
		<label><input type="radio" name="usage_frequency" value="几乎不使用" required> 几乎不使用</label>

		<p>您认为自己的方言流利程度是?<span class="needed">*</span></p>
		<label><input type="radio" name="fluency" value="1" required> 1 听得懂但不会说</label>
		<label><input type="radio" name="fluency" value="2" required> 2</label>
		<label><input type="radio" name="fluency" value="3" required> 3</label>
		<label><input type="radio" name="fluency" value="4" required> 4</label>
		<label><input type="radio" name="fluency" value="5" required> 5 所有交流都可用方言完成</label>

		<p>您是否学习过外国语言(如英语、日语等,不包含中文或汉语方言)?如有,学过多少门?<span class="needed">*</span></p>
		<label><input type="radio" name="foreign_language" value="无" required> 无</label>
		<label><input type="radio" name="foreign_language" value="1" required> 1</label>
		<label><input type="radio" name="foreign_language" value="2" required> 2</label>
		<label><input type="radio" name="foreign_language" value="3" required> 3</label>
		<label><input type="radio" name="foreign_language" value="3门以上" required> 3 门以上</label>

		<p>您是否接受过系统的音乐训练(学习乐器/作曲等)?如有,接受训练的时间是?<span class="needed">*</span></p>
		<label><input type="radio" name="music_training" value="无" required> 无</label>
		<label><input type="radio" name="music_training" value="1年以下" required> 1 年以下</label>
		<label><input type="radio" name="music_training" value="1-3年" required> 1&ndash;3 年</label>
		<label><input type="radio" name="music_training" value="3-5年" required> 3&ndash;5 年</label>
		<label><input type="radio" name="music_training" value="5-10年" required> 5&ndash;10 年</label>
		<label><input type="radio" name="music_training" value="10年以上" required> 10 年以上</label>

		<p>您是否有绝对音感?<span class="needed">*</span></p>
		<label><input type="radio" name="absolute_pitch" value="是" required> 是</label>
		<label><input type="radio" name="absolute_pitch" value="否" required> 否</label>

		<p>您平常听音乐的频率是?<span class="needed">*</span></p>
		<label><input type="radio" name="music_freq" value="每天" required> 每天</label>
		<label><input type="radio" name="music_freq" value="每周3-4次" required> 每周 3&ndash;4 次</label>
		<label><input type="radio" name="music_freq" value="每周1-2次" required> 每周 1&ndash;2 次</label>
		<label><input type="radio" name="music_freq" value="每月1-2次" required> 每月 1&ndash;2 次</label>
		<label><input type="radio" name="music_freq" value="几乎不听" required> 几乎不听</label>

		<div class="pagination-buttons">
			<label for="page1">下一页</label>
		</div>
	</div>
	<div class="page page1">
		<div class="pagination-buttons">
			<label for="page0">上一页</label>
		</div>

		<h2>任务 1: 请判断下列音频中的两条旋律/节奏是否相同。</h2>
		<p>音频加载可能需要一些时间。</p>
		<p>请注意,每一个音频只能听一遍。请先调试音量,至少让您能清晰地听见下面的测试音频。</p>
		<table>
			<td>测试音频</td>
			<td><audio controls src="audio/task_2_cadence/learning/Tonic_C.wav"></audio></td>
		</table>
		<h3>旋律辨认测试</h3>
		<table>
			<thead>
				<tr>
					<th>序号</th>
					<th>音频</th>
					<th colspan="2">选项 <span class="needed">*</span></th>
				</tr>
			</thead>
			<tbody>
				<tr>
					<td>旋律 1</td>
					<td><audio class="once" controls src="audio/task_1a_pitch_contour/01.wav"></audio></td>
					<td><label><input type="radio" name="q1" value="相同" required> 相同</label></td>
					<td><label><input type="radio" name="q1" value="不同" required> 不同</label></td>
				</tr>
				<tr>
					<td>旋律 2</td>
					<td><audio class="once" controls src="audio/task_1a_pitch_contour/02.wav"></audio></td>
					<td><label><input type="radio" name="q2" value="相同" required> 相同</label></td>
					<td><label><input type="radio" name="q2" value="不同" required> 不同</label></td>
				</tr>
				<tr>
					<td>旋律 3</td>
					<td><audio class="once" controls src="audio/task_1a_pitch_contour/03.wav"></audio></td>
					<td><label><input type="radio" name="q3" value="相同" required> 相同</label></td>
					<td><label><input type="radio" name="q3" value="不同" required> 不同</label></td>
				</tr>
				<tr>
					<td>旋律 4</td>
					<td><audio class="once" controls src="audio/task_1a_pitch_contour/04.wav"></audio></td>
					<td><label><input type="radio" name="q4" value="相同" required> 相同</label></td>
					<td><label><input type="radio" name="q4" value="不同" required> 不同</label></td>
				</tr>
				<tr>
					<td>旋律 5</td>
					<td><audio class="once" controls src="audio/task_1a_pitch_contour/05.wav"></audio></td>
					<td><label><input type="radio" name="q5" value="相同" required> 相同</label></td>
					<td><label><input type="radio" name="q5" value="不同" required> 不同</label></td>
				</tr>
				<tr>
					<td>旋律 6</td>
					<td><audio class="once" controls src="audio/task_1a_pitch_contour/06.wav"></audio></td>
					<td><label><input type="radio" name="q6" value="相同" required> 相同</label></td>
					<td><label><input type="radio" name="q6" value="不同" required> 不同</label></td>
				</tr>
				<tr>
					<td>旋律 7</td>
					<td><audio class="once" controls src="audio/task_1a_pitch_contour/07.wav"></audio></td>
					<td><label><input type="radio" name="q7" value="相同" required> 相同</label></td>
					<td><label><input type="radio" name="q7" value="不同" required> 不同</label></td>
				</tr>
				<tr>
					<td>旋律 8</td>
					<td><audio class="once" controls src="audio/task_1a_pitch_contour/08.wav"></audio></td>
					<td><label><input type="radio" name="q8" value="相同" required> 相同</label></td>
					<td><label><input type="radio" name="q8" value="不同" required> 不同</label></td>
				</tr>
				<tr>
					<td>旋律 9</td>
					<td><audio class="once" controls src="audio/task_1a_pitch_contour/09.wav"></audio></td>
					<td><label><input type="radio" name="q9" value="相同" required> 相同</label></td>
					<td><label><input type="radio" name="q9" value="不同" required> 不同</label></td>
				</tr>
				<tr>
					<td>旋律 10</td>
					<td><audio class="once" controls src="audio/task_1a_pitch_contour/10.wav"></audio></td>
					<td><label><input type="radio" name="q10" value="相同" required> 相同</label></td>
					<td><label><input type="radio" name="q10" value="不同" required> 不同</label></td>
				</tr>
			</tbody>
		</table>
		<h3>节奏辨认测试</h3>
		<table>
			<thead>
				<tr>
					<th>序号</th>
					<th>音频</th>
					<th colspan="2">选项 <span class="needed">*</span></th>
				</tr>
			</thead>
			<tbody>
				<tr>
					<td>节奏 1</td>
					<td><audio class="once" controls src="audio/task_1b_rhythm/01.wav"></audio></td>
					<td><label><input type="radio" name="q11" value="相同" required> 相同</label></td>
					<td><label><input type="radio" name="q11" value="不同" required> 不同</label></td>
				</tr>
				<tr>
					<td>节奏 2</td>
					<td><audio class="once" controls src="audio/task_1b_rhythm/02.wav"></audio></td>
					<td><label><input type="radio" name="q12" value="相同" required> 相同</label></td>
					<td><label><input type="radio" name="q12" value="不同" required> 不同</label></td>
				</tr>
				<tr>
					<td>节奏 3</td>
					<td><audio class="once" controls src="audio/task_1b_rhythm/03.wav"></audio></td>
					<td><label><input type="radio" name="q13" value="相同" required> 相同</label></td>
					<td><label><input type="radio" name="q13" value="不同" required> 不同</label></td>
				</tr>
				<tr>
					<td>节奏 4</td>
					<td><audio class="once" controls src="audio/task_1b_rhythm/04.wav"></audio></td>
					<td><label><input type="radio" name="q14" value="相同" required> 相同</label></td>
					<td><label><input type="radio" name="q14" value="不同" required> 不同</label></td>
				</tr>
				<tr>
					<td>节奏 5</td>
					<td><audio class="once" controls src="audio/task_1b_rhythm/05.wav"></audio></td>
					<td><label><input type="radio" name="q15" value="相同" required> 相同</label></td>
					<td><label><input type="radio" name="q15" value="不同" required> 不同</label></td>
				</tr>
				<tr>
					<td>节奏 6</td>
					<td><audio class="once" controls src="audio/task_1b_rhythm/06.wav"></audio></td>
					<td><label><input type="radio" name="q16" value="相同" required> 相同</label></td>
					<td><label><input type="radio" name="q16" value="不同" required> 不同</label></td>
				</tr>
				<tr>
					<td>节奏 7</td>
					<td><audio class="once" controls src="audio/task_1b_rhythm/07.wav"></audio></td>
					<td><label><input type="radio" name="q17" value="相同" required> 相同</label></td>
					<td><label><input type="radio" name="q17" value="不同" required> 不同</label></td>
				</tr>
				<tr>
					<td>节奏 8</td>
					<td><audio class="once" controls src="audio/task_1b_rhythm/08.wav"></audio></td>
					<td><label><input type="radio" name="q18" value="相同" required> 相同</label></td>
					<td><label><input type="radio" name="q18" value="不同" required> 不同</label></td>
				</tr>
				<tr>
					<td>节奏 9</td>
					<td><audio class="once" controls src="audio/task_1b_rhythm/09.wav"></audio></td>
					<td><label><input type="radio" name="q19" value="相同" required> 相同</label></td>
					<td><label><input type="radio" name="q19" value="不同" required> 不同</label></td>
				</tr>
				<tr>
					<td>节奏 10</td>
					<td><audio class="once" controls src="audio/task_1b_rhythm/10.wav"></audio></td>
					<td><label><input type="radio" name="q20" value="相同" required> 相同</label></td>
					<td><label><input type="radio" name="q20" value="不同" required> 不同</label></td>
				</tr>
			</tbody>
		</table>

		<div class="pagination-buttons">
			<label for="page2">下一页</label>
		</div>
	</div>
	<div class="page page2">
		<div class="pagination-buttons">
			<label for="page1">上一页</label>
		</div>
		<h2>任务 2: 终止式配对</h2>
		<p>请先听 C 大调主和弦并学习 4 种终止式的名称和音响效果。</p>
		<img src="c.png" style="width: 25rem;" />
		<table>
			<thead>
				<tr>
					<th scope="col">终止式</th>
					<th scope="col">音频</th>
				</tr>
			</thead>
			<tbody>
				<tr>
					<td>C 大调主和弦</td>
					<td><audio controls src="audio/task_2_cadence/learning/Tonic_C.wav"></audio></td>
				</tr>
				<tr>
					<td>完全终止</td>
					<td><audio controls src="audio/task_2_cadence/learning/V-I.wav"></audio></td>
				</tr>
				<tr>
					<td>变格终止</td>
					<td><audio controls src="audio/task_2_cadence/learning/IV-I.wav"></audio></td>
				</tr>
				<tr>
					<td>导音终止</td>
					<td><audio controls src="audio/task_2_cadence/learning/vii-I.wav"></audio></td>
				</tr>
				<tr>
					<td>阻碍终止</td>
					<td><audio controls src="audio/task_2_cadence/learning/V-vi.wav"></audio></td>
				</tr>
			</tbody>
		</table>
		<p>然后,将在 F♯ 大调上演奏的这 4 种终止式和其名称进行配对。</p>
		<img src="f.png" style="width: 25rem;" />
		<table>
			<thead>
				<tr>
					<th scope="col">终止式 <span class="needed">*</span></th>
					<th scope="col">音频</th>
				</tr>
			</thead>
			<tbody>
				<tr>
					<td>F♯ 大调主和弦</td>
					<td><audio controls src="audio/task_2_cadence/testing/Tonic_F_sharp.wav"></audio></td>
				</tr>
				<tr>
					<td>
						<select name="cadence_sample_1" required>
							<option value="">请选择</option>
							<option value="完全终止">完全终止</option>
							<option value="变格终止">变格终止</option>
							<option value="导音终止">导音终止</option>
							<option value="阻碍终止">阻碍终止</option>
						</select>
					</td>
					<td><audio controls src="audio/task_2_cadence/testing/01.wav"></audio></td>
				</tr>
				<tr>
					<td>
						<select name="cadence_sample_2" required>
							<option value="">请选择</option>
							<option value="完全终止">完全终止</option>
							<option value="变格终止">变格终止</option>
							<option value="导音终止">导音终止</option>
							<option value="阻碍终止">阻碍终止</option>
						</select>
					</td>
					<td><audio controls src="audio/task_2_cadence/testing/02.wav"></audio></td>
				</tr>
				<tr>
					<td>
						<select name="cadence_sample_3" required>
							<option value="">请选择</option>
							<option value="完全终止">完全终止</option>
							<option value="变格终止">变格终止</option>
							<option value="导音终止">导音终止</option>
							<option value="阻碍终止">阻碍终止</option>
						</select>
					</td>
					<td><audio controls src="audio/task_2_cadence/testing/03.wav"></audio></td>
				</tr>
				<tr>
					<td>
						<select name="cadence_sample_4" required>
							<option value="">请选择</option>
							<option value="完全终止">完全终止</option>
							<option value="变格终止">变格终止</option>
							<option value="导音终止">导音终止</option>
							<option value="阻碍终止">阻碍终止</option>
						</select>
					</td>
					<td><audio controls src="audio/task_2_cadence/testing/04.wav"></audio></td>
				</tr>
			</tbody>
		</table>
		<div class="pagination-buttons">
			<label for="page3">下一页</label>
		</div>
	</div>
	<div class="page page3">
		<div class="pagination-buttons">
			<label for="page2">上一页</label>
		</div>
		<h2>任务 3: 音乐风格识别</h2>
		<p>请聆听并学习 5 种音乐风格的鼓组节奏型和音色特点。</p>
		<table>
			<thead>
				<tr>
				<th scope="col">风格</th>
				<th scope="col">音频样本</th>
				</tr>
			</thead>
			<tbody>
				<tr>
					<td>Trap 陷阱</td>
					<td><audio controls src="audio/task_3_drum_pattern/learning/trap.wav"></audio></td>
				</tr>
				<tr>
					<td>Drill 钻头</td>
					<td><audio controls src="audio/task_3_drum_pattern/learning/drill.wav"></audio></td>
				</tr>
				<tr>
					<td>Drum &amp; Bass 鼓与贝斯</td>
					<td><audio controls src="audio/task_3_drum_pattern/learning/drum_and_bass.wav"></audio></td>
				</tr>
				<tr>
					<td>Reggaetton 雷击顿</td>
					<td><audio controls src="audio/task_3_drum_pattern/learning/reggaeton.wav"></audio></td>
				</tr>
				<tr>
					<td>R&amp;B 节奏蓝调</td>
					<td><audio controls src="audio/task_3_drum_pattern/learning/r_and_b.wav"></audio></td>
				</tr>
			</tbody>
		</table>

		<p>请将以下真实音乐片段与其风格配对:</p>
		<table>
			<colgroup>
				<col style="width: 12em;" />
				<col />
			</colgroup>
			<thead>
				<tr>
					<th scope="col">风格 <span class="needed">*</span></th>
					<th scope="col">真实片段音频</th>
				</tr>
			</thead>
			<tbody>
				<tr>
					<td>
						<select name="style_sample_1" required>
							<option value="">请选择</option>
							<option value="Trap">Trap 陷阱</option>
							<option value="Drill">Drill 钻头</option>
							<option value="Drum & Bass">Drum &amp; Bass 鼓与贝斯</option>
							<option value="Reggaetton">Reggaetton 雷击顿</option>
							<option value="R&B">R&amp;B 节奏蓝调</option>
						</select>
					</td>
					<td><audio controls src="audio/task_3_drum_pattern/testing/01.wav"></audio></td>
				</tr>
				<tr>
					<td>
						<select name="style_sample_2" required>
							<option value="">请选择</option>
							<option value="Trap">Trap 陷阱</option>
							<option value="Drill">Drill 钻头</option>
							<option value="Drum & Bass">Drum &amp; Bass 鼓与贝斯</option>
							<option value="Reggaetton">Reggaetton 雷击顿</option>
							<option value="R&B">R&amp;B 节奏蓝调</option>
						</select>
					</td>
					<td><audio controls src="audio/task_3_drum_pattern/testing/02.wav"></audio></td>
				</tr>
				<tr>
					<td>
						<select name="style_sample_3" required>
							<option value="">请选择</option>
							<option value="Trap">Trap 陷阱</option>
							<option value="Drill">Drill 钻头</option>
							<option value="Drum & Bass">Drum &amp; Bass 鼓与贝斯</option>
							<option value="Reggaetton">Reggaetton 雷击顿</option>
							<option value="R&B">R&amp;B 节奏蓝调</option>
						</select>
					</td>
					<td><audio controls src="audio/task_3_drum_pattern/testing/03.wav"></audio></td>
				</tr>
				<tr>
					<td>
						<select name="style_sample_4" required>
							<option value="">请选择</option>
							<option value="Trap">Trap 陷阱</option>
							<option value="Drill">Drill 钻头</option>
							<option value="Drum & Bass">Drum &amp; Bass 鼓与贝斯</option>
							<option value="Reggaetton">Reggaetton 雷击顿</option>
							<option value="R&B">R&amp;B 节奏蓝调</option>
						</select>
					</td>
					<td><audio controls src="audio/task_3_drum_pattern/testing/04.wav"></audio></td>
				</tr>
				<tr>
					<td>
						<select name="style_sample_5" required>
							<option value="">请选择</option>
							<option value="Trap">Trap 陷阱</option>
							<option value="Drill">Drill 钻头</option>
							<option value="Drum & Bass">Drum &amp; Bass 鼓与贝斯</option>
							<option value="Reggaetton">Reggaetton 雷击顿</option>
							<option value="R&B">R&amp;B 节奏蓝调</option>
						</select>
					</td>
					<td><audio controls src="audio/task_3_drum_pattern/testing/05.wav"></audio></td>
				</tr>
			</tbody>
		</table>


	<button type="submit">提交</button>

	<p>
	如果您无法提交,可能是因为有些问题没有完成。在这种情况下,请 <label for="show-all-pages" class="show-all-pages-label">显示所有页面</label>,然后再点提交的时候,浏览器就能告诉你问题出在哪里了。
	</p>

</div>
	</div>
	</form>
	</div>
	<footer>
		<p>
		Content copyright (c) 2025 Tiffany Guo<br />
		Web service copyright (c) 2025 <a href="https://runxiyu.org">Runxi Yu</a><br />
		The web service components are licensed under <a href="https://www.gnu.org/licenses/agpl-3.0.en.html">GNU AGPL version 3</a>.<br />
		The page is served by <a href="https://forge.runxiyu.org/stuff/-/repos/melonsurvey/">Melon Survey</a>.
		</p>
		<details>
			<summary>
				Sources and copyright for audio files
			</summary>
			<p>
			Style samples:
				<a href="https://youtu.be/Hp4Lm60cEqQ">Drill</a>,
				<a href="https://youtu.be/2nn_VWbFzKE">Drum &amp; Bass</a>,
				<a href="https://youtu.be/gxOeTKuYZhs">R&amp;B</a>,
				<a href="https://youtu.be/QfcEbTs1Omg">Reggaeton</a>,
				<a href="https://youtube.com/shorts/NI-02MbaseQ?si=tYLN2Ago3VTONKcr">Trap</a>.<br />
			Extract samples:
				<a href="https://youtu.be/MNvbp5DtLAY">Drill</a>,
				<a href="https://youtu.be/clW3Ci0gqjk">Drum &amp; Bass</a>,
				<a href="https://youtu.be/fi1o4Z9CDMo">R&amp;B</a>,
				<a href="https://youtu.be/hy5iBMDW21s">Reggaeton</a>,
				<a href="https://youtu.be/vIE_JxM8zE0">Trap</a>.
			</p>
			<p>
			We believe that the use of the above in this survey constitutes fair use under <a href="https://www.law.cornell.edu/uscode/text/17/107">17 U.S.C. § 107</a> section (1), and additionally (3) and (4) for the extra samples. See also <i>Campbell</i> v. <i>Acuff-Rose Music, Inc.</i>, 510 U.S. 569 (1994) and <i>Bill Graham Archives</i> v. <i>Dorling Kindersley Ltd.</i>, 448 F.3d 605 (2006). Please resolve any copyright disputes by emailing <a href="mailto:dmca@runxiyu.org">dmca@runxiyu.org</a>.
			</p>
			<p>
			我们认为本问卷中对上述音频内容的使用,属于《中华人民共和国著作权法》(1990年9月7日第七届全国人大常委会第十五次会议通过,2001年10月27日、2010年2月26日、2020年11月11日经全国人大常委会修正)第二十四条规定的合理使用情形。我们使用音频内容为非商业、研究目的,未对原作品造成实质影响,亦未以此营利,且已尽合理方式注明来源链接,符合著作权合理使用原则。如有权利人认为本项目中使用了其享有版权的内容并构成侵权,请联系 <a href="mailto:dmca@runxiyu.org">dmca@runxiyu.org</a>。 </p>
			</p>
		</details>
	</footer>
</body>
</html>