我正在尝试编写测验程序,但是根本无法选中单选按钮。我已经尝试过在Google Chrome和Safari上运行它,但丝毫没有暗示它可以正常工作。当我尝试在Google Chrome和Safari上运行它时,我没有在HTML和CSS的代码上看到任何错误,对此我真的感到困惑。
这里是代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Quiz About A.I and Psychology</title>
<link rel="stylesheet" href="css/main.css">
</head>
<body>
<div id="header">
<div class="container">
<h3>It Starts Here!</h3>
<p>Take a minute or more to answer these educational quiz that can fill your freetime! </p>
</div>
</div>
<div id="quizSection">
<div class="container">
<h4>Starts Here!</h4>
<div id="selection1" class="sizpos">
<h5 class="numberQuiz">1</h5>
<p class="question">Bagaimana A.I Bekerja?</p>
<form action="#">
<p>
<input type="radio" id="Select1A" name="radio-group" value="1a" checked>
<label for="test1">Dengan cara mengobrak abrik data sampai akhirnya benar</label>
</p>
<p>
<input type="radio" id="Select1B" name="radio-group" value="1b">
<label for="test2">Tanpa apapun bekerja</label>
</p>
<p>
<input type="radio" id="Select1C" name="radio-group" value="1c">
<label for="test3">Asal tembak</label>
</p>
<p>
<input type="radio" id="Select1D" name="radio-group" value="1d">
<label for="test4">A.I bekerja dengan cara menggabungkan data dan memprosesnya layaknya otak manusia</label>
</p>
</form>
</div>
<div id="selection2" class="sizpos">
<h5 class="numberQuiz">2</h5>
<p class="question">Apakah A.I Akan Menggantikan Manusia?</p>
<form action="#">
<p>
<input type="radio" id="Select2A" name="radio-group" value="2a" checked>
<label for="test1">Tidak, A.I ada untuk membantu manusia</label>
</p>
<p>
<input type="radio" id="Select2B" name="radio-group" value="2b">
<label for="test2">Manusia akan dibunuh oleh A.I</label>
</p>
<p>
<input type="radio" id="Select2C" name="radio-group" value="2c">
<label for="test3">Bumi akan hanya ditempati oleh A.I</label>
</p>
<p>
<input type="radio" id="Select2D" name="radio-group" value="2d">
<label for="test4">A.I akan dihilangkan</label>
</p>
</form>
<div id="checkmark2">
<!--marking the answer-->
</div>
</div>
<div id="selection3" class="sizpos">
<h5 class="numberQuiz">3</h5>
<p class="question">Dalam Dunia Psikologi, A.I di Implementasi Dengan Cara?</p>
<form action="#">
<p>
<input type="radio" id="Select3A" name="radio-group" value="3a" checked>
<label for="test1">Langsung memberikan jawaban tanpa menganalisa</label>
</p>
<p>
<input type="radio" id="Select3B" name="radio-group" value="3b">
<label for="test2">Menganalisa Muka Manusia untuk Mengetahui Masalahnya</label>
</p>
<p>
<input type="radio" id="Select3C" name="radio-group" value="3c">
<label for="test3">Menganalisa Muka Manusia dan memberikan jawaban asal</label>
</p>
<p>
<input type="radio" id="Select3D" name="radio-group" value="3d">
<label for="test4">Memberikan Jawaban benar tanpa menganalisa sedikitpun</label>
</p>
</form>
<div id="checkmark3">
<!--marking the answer-->
</div>
</div>
<div id="selection4" class="sizpos">
<h5 class="numberQuiz">4</h5>
<p class="question">Apakah A.I Sudah Sangat Sempurna?</p>
<form action="#">
<p>
<input type="radio" id="Select4A" name="radio-group" value="4a" checked>
<label for="test1">Tidak Perlu Dikembangkan, sudah gagal</label>
</p>
<p>
<input type="radio" id="Select4B" name="radio-group" value="4b">
<label for="test2">Sangat Sempurna karena sudah 2020</label>
</p>
<p>
<input type="radio" id="Select4C" name="radio-group" value="4c">
<label for="test3">Tidak, masih harus dikembangkan</label>
</p>
<p>
<input type="radio" id="Select4D" name="radio-group" value="4d">
<label for="test4">Jika dikembangkan akan sia2</label>
</p>
</form>
<div id="checkmark4">
<!--marking the answer-->
</div>
</div>
<div id="selection5" class="sizpos">
<h5 class="numberQuiz">5</h5>
<p class="question">Bisakah A.I Mendeteksi Emosi Manusia Melalui Suara?</p>
<form action="#">
<p>
<input type="radio" id="Select5A" name="radio-group" value="5a" checked>
<label for="test1">Tidak, A.I tidak canggih</label>
</p>
<p>
<input type="radio" id="Select5B" name="radio-group" value="5b">
<label for="test2">Ya, A.I akan mendengar dan menganalisa dengan data yang ada</label>
</p>
<p>
<input type="radio" id="Select5C" name="radio-group" value="5c">
<label for="test3">A.I akan menganalisa tetapi akan memberikan jawaban yang salah</label>
</p>
<p>
<input type="radio" id="Select5D" name="radio-group" value="5">
<label for="test4">A.I akan asal menjawab</label>
</p>
</form>
<div id="checkmark5">
<!--marking the answer-->
</div>
</div>
</div>
<div id="checkResult">
<button id="checkBros">
<h3>Check Answer!</h3>
</button>
</div>
</div>
</body>
</html>
在这种情况下,我如何理解不同的问题,您应该为每个单选按钮组编写不同的“名称”属性:
<div id="quizSection">
<div class="container">
<h4>Starts Here!</h4>
<div id="selection1" class="sizpos">
<h5 class="numberQuiz">1</h5>
<p class="question">Bagaimana A.I Bekerja?</p>
<form action="#">
<p>
<input type="radio" id="Select1A" name="selection1" value="1a" checked>
<label for="test1">Dengan cara mengobrak abrik data sampai akhirnya benar</label>
</p>
<p>
<input type="radio" id="Select1B" name="radio-group" value="1b">
<label for="test2">Tanpa apapun bekerja</label>
</p>
<p>
<input type="radio" id="Select1C" name="selection1" value="1c">
<label for="test3">Asal tembak</label>
</p>
<p>
<input type="radio" id="Select1D" name="selection1" value="1d">
<label for="test4">A.I bekerja dengan cara menggabungkan data dan memprosesnya layaknya otak manusia</label>
</p>
</form>
</div>
<div id="selection2" class="sizpos">
<h5 class="numberQuiz">2</h5>
<p class="question">Apakah A.I Akan Menggantikan Manusia?</p>
<form action="#">
<p>
<input type="radio" id="Select2A" name="selection2" value="2a" checked>
<label for="test1">Tidak, A.I ada untuk membantu manusia</label>
</p>
<p>
<input type="radio" id="Select2B" name="selection2" value="2b">
<label for="test2">Manusia akan dibunuh oleh A.I</label>
</p>
<p>
<input type="radio" id="Select2C" name="selection2" value="2c">
<label for="test3">Bumi akan hanya ditempati oleh A.I</label>
</p>
<p>
<input type="radio" id="Select2D" name="radio-group" value="2d">
<label for="test4">A.I akan dihilangkan</label>
</p>
</form>
<div id="checkmark2">
<!--marking the answer-->
</div>
</div>
<div id="selection3" class="sizpos">
<h5 class="numberQuiz">3</h5>
<p class="question">Dalam Dunia Psikologi, A.I di Implementasi Dengan Cara?</p>
<form action="#">
<p>
<input type="radio" id="Select3A" name="selection3" value="3a" checked>
<label for="test1">Langsung memberikan jawaban tanpa menganalisa</label>
</p>
<p>
<input type="radio" id="Select3B" name="selection3" value="3b">
<label for="test2">Menganalisa Muka Manusia untuk Mengetahui Masalahnya</label>
</p>
<p>
<input type="radio" id="Select3C" name="selection3" value="3c">
<label for="test3">Menganalisa Muka Manusia dan memberikan jawaban asal</label>
</p>
<p>
<input type="radio" id="Select3D" name="selection3" value="3d">
<label for="test4">Memberikan Jawaban benar tanpa menganalisa sedikitpun</label>
</p>
</form>
<div id="checkmark3">
<!--marking the answer-->
</div>
</div>
<div id="selection4" class="sizpos">
<h5 class="numberQuiz">4</h5>
<p class="question">Apakah A.I Sudah Sangat Sempurna?</p>
<form action="#">
<p>
<input type="radio" id="Select4A" name="radio-group" value="4a" checked>
<label for="test1">Tidak Perlu Dikembangkan, sudah gagal</label>
</p>
<p>
<input type="radio" id="Select4B" name="radio-group" value="4b">
<label for="test2">Sangat Sempurna karena sudah 2020</label>
</p>
<p>
<input type="radio" id="Select4C" name="radio-group" value="4c">
<label for="test3">Tidak, masih harus dikembangkan</label>
</p>
<p>
<input type="radio" id="Select4D" name="radio-group" value="4d">
<label for="test4">Jika dikembangkan akan sia2</label>
</p>
</form>
<div id="checkmark4">
<!--marking the answer-->
</div>
</div>
<div id="selection5" class="sizpos">
<h5 class="numberQuiz">5</h5>
<p class="question">Bisakah A.I Mendeteksi Emosi Manusia Melalui Suara?</p>
<form action="#">
<p>
<input type="radio" id="Select5A" name="radio-group" value="5a" checked>
<label for="test1">Tidak, A.I tidak canggih</label>
</p>
<p>
<input type="radio" id="Select5B" name="radio-group" value="5b">
<label for="test2">Ya, A.I akan mendengar dan menganalisa dengan data yang ada</label>
</p>
<p>
<input type="radio" id="Select5C" name="radio-group" value="5c">
<label for="test3">A.I akan menganalisa tetapi akan memberikan jawaban yang salah</label>
</p>
<p>
<input type="radio" id="Select5D" name="radio-group" value="5">
<label for="test4">A.I akan asal menjawab</label>
</p>
</form>
<div id="checkmark5">
<!--marking the answer-->
</div>
</div>
</div>
<div id="checkResult">
<button id="checkBros">
<h3>Check Answer!</h3>
</button>
</div>
</div>