无法选中单选按钮和按钮

问题描述 投票:0回答:1

我正在尝试编写测验程序,但是根本无法选中单选按钮。我已经尝试过在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>
html css button radio-button click
1个回答
0
投票

在这种情况下,我如何理解不同的问题,您应该为每个单选按钮组编写不同的“名称”属性:

 <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>
© www.soinside.com 2019 - 2024. All rights reserved.