javascripthtmlcssforms

How to make an input + text clickable through the same line/appear as a list

I have a Quiz form and i am using the input tag to make the choices But i want it to be clickable if i clicked anywhere on the same line here is my code:

var pos = 0,
  test, test_status, question, choice, choices, chA, chB, chC, correct = 0;
var questions = [
  ["1. The opposite of find:", "start", "lose", "save", "B"],
  ["2. The opposite of depart:", "hate", "sell", "arrive", "c"],
  ["3. The opposite of finish: ", "start", "end", "buy", "A"],
  ["4. The opposite of buy:", "love", "bought", "sell", "c"],
  ["5. The opposite of catch:", "hate", "hold", "drop", "c"],
  ["6. The opposite of remember:", "forget", "hold", "leave", "A"],
  ["7.The opposite of spend:", "save", "leave", "arrive", "A"],
  ["8. The opposite of dark: ", "dull", "bright", "dim", "B"],
  ["9. The opposite of break:", "broke", "mend", "love", "B"],
  ["10. The opposite of love:", "hate", "dark", "bright", "A"]
];

function _(x) {
  return document.getElementById(x);
}

function renderQuestion() {
  test = _("test")
  if (pos >= questions.length) {
    test.innerHTML = "<h2> you got " + correct + "  out of  " + questions.length + " questions correct</h2>";
    _("test_status").innerHTML = "Test Completed";
    pos = 0;
    correct = 0;
    return false;
  }

  _("test_status").innerHTML = "Question " + (pos + 1) + " of " + questions.length;
  question = questions[pos][0];
  chA = questions[pos][1];
  chB = questions[pos][2];
  chC = questions[pos][3];
  test.innerHTML = "<h3>" + question + "</h3>";
  test.innerHTML += "<input type='radio' name='choices' value='A'>" + chA + "<br>";
  test.innerHTML += "<input type='radio' name='choices' value='B'>" + chB + "<br>";
  test.innerHTML += "<input type='radio' name='choices' value='c'>" + chC + "<br><br>";
  test.innerHTML += "<button class='btn btn-dark' onclick='checkAnswer()'>Done</button>";

}

function checkAnswer() {
  choices = document.getElementsByName("choices");
  for (var i = 0; i < choices.length; i++) {
    if (choices[i].checked) {
      choice = choices[i].value;
    }
  }
  if (choice == questions[pos][4]) {
    correct++;
  }
  show.innerHTML = "You got " + correct + " correct answers"
  pos++;
  renderQuestion();
}
window.addEventListener("load", renderQuestion, false);
html,
body {
  background-repeat: no-repeat;
  background-attachment: fixed;
  /* height: 140vh; */
  background-size: cover;
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
  min-height: 100%;
  min-width: 100%;
}

@media (max-width: 700px) {
  h3 {
    font-size: 20px;
  }
}

#test,
#text,
#show,
#test_status {
  color: transparent;
  -webkit-text-stroke: 1px #ffea00;
  background: url(../CheckPoint/Images/back.png);
  background-clip: text;
  -webkit-background-clip: text;
  background-position: 0 0;
  animation: back 20s linear infinite;
}

div#test {
  border: #000 30px double;
  padding: 10px 40px 40px 40px;
  border-radius: 80px;
}
index.html

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Easy-Learning</title>
  <script src="/cdn-cgi/apps/head/7MFhwiAWv7ZVSNw1QEVHMkUawb0.js"></script>
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>

</head>

<body style="background-image: url(karsten-wurth-7BjhtdogU3A-unsplash.jpg);">
  <a href="home.html" class="btn btn-primary">
    Choose Another Exam</a>
  <h2 id="test_status" style="text-align: center; font-size: 25px;"></h2>
  <p style="font-size: 30px;text-align: center;" id="text">Match the opposite</p>
  <div id="test" style="font-size: 25px;"></div>
  <div id="show" style="text-align: center; font-size: 25px;"> </div>
</body>

</html>

So.....the choose button is small and will bother user experience and as a website owner I should try improving these errors although I am still a beginner

Solution

  • Simply use a <label> to put thex next to a radio button instead of a simple text. <label> are still part of the radio button and such are also clickable.

    <input type="radio" name="settings" id="start">
<label for="start">Start</label>
<br>
<input type="radio" name="settings" id="lose">
<label for="lose">Lose</label>
<br>
<input type="radio" name="settings" id="save">
<label for="save">Save</label>

    Since your Inputs are created by JS, let the JS also create an ID to the input and a label as this example:

    your code:

    test.innerHTML += "<input type='radio' name='choices' value='A'>" + chA + "<br>";
test.innerHTML += "<input type='radio' name='choices' value='B'>" + chB + "<br>";
test.innerHTML += "<input type='radio' name='choices' value='c'>" + chC + "<br><br>";

    updated code:

    test.innerHTML += "<input type='radio' name='choices' value='A' id='choiceA'><label for='choiceA'>" + chA + "</label><br>";
test.innerHTML += "<input type='radio' name='choices' value='B' id='choiceB'><label for='choiceB'>" + chB + "</label><br>";
test.innerHTML += "<input type='radio' name='choices' value='c' id='choiceC'><label for='choiceC'>" + chC + "</label><br><br>";


    var pos = 0,
  test, test_status, question, choice, choices, chA, chB, chC, correct = 0;
var questions = [
  ["1. The opposite of find:", "start", "lose", "save", "B"],
  ["2. The opposite of depart:", "hate", "sell", "arrive", "c"],
  ["3. The opposite of finish: ", "start", "end", "buy", "A"],
  ["4. The opposite of buy:", "love", "bought", "sell", "c"],
  ["5. The opposite of catch:", "hate", "hold", "drop", "c"],
  ["6. The opposite of remember:", "forget", "hold", "leave", "A"],
  ["7.The opposite of spend:", "save", "leave", "arrive", "A"],
  ["8. The opposite of dark: ", "dull", "bright", "dim", "B"],
  ["9. The opposite of break:", "broke", "mend", "love", "B"],
  ["10. The opposite of love:", "hate", "dark", "bright", "A"]
];

function _(x) {
  return document.getElementById(x);
}

function renderQuestion() {
  test = _("test")
  if (pos >= questions.length) {
    test.innerHTML = "<h2> you got " + correct + "  out of  " + questions.length + " questions correct</h2>";
    _("test_status").innerHTML = "Test Completed";
    pos = 0;
    correct = 0;
    return false;
  }

  _("test_status").innerHTML = "Question " + (pos + 1) + " of " + questions.length;
  question = questions[pos][0];
  chA = questions[pos][1];
  chB = questions[pos][2];
  chC = questions[pos][3];
  test.innerHTML = "<h3>" + question + "</h3>";
  test.innerHTML += "<input type='radio' name='choices' value='A' id='choiceA'><label for='choiceA'>" + chA + "</label><br>";
  test.innerHTML += "<input type='radio' name='choices' value='B' id='choiceB'><label for='choiceB'>" + chB + "</label><br>";
  test.innerHTML += "<input type='radio' name='choices' value='c' id='choiceC'><label for='choiceC'>" + chC + "</label><br><br>";
  test.innerHTML += "<button class='btn btn-dark' onclick='checkAnswer()'>Done</button>";

}

function checkAnswer() {
  choices = document.getElementsByName("choices");
  for (var i = 0; i < choices.length; i++) {
    if (choices[i].checked) {
      choice = choices[i].value;
    }
  }
  if (choice == questions[pos][4]) {
    correct++;
  }
  show.innerHTML = "You got " + correct + " correct answers"
  pos++;
  renderQuestion();
}
window.addEventListener("load", renderQuestion, false);
    html,
body {
  background-repeat: no-repeat;
  background-attachment: fixed;
  /* height: 140vh; */
  background-size: cover;
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
  min-height: 100%;
  min-width: 100%;
}

@media (max-width: 700px) {
  h3 {
    font-size: 20px;
  }
}

#test,
#text,
#show,
#test_status {
  color: transparent;
  -webkit-text-stroke: 1px #ffea00;
  background: url(../CheckPoint/Images/back.png);
  background-clip: text;
  -webkit-background-clip: text;
  background-position: 0 0;
  animation: back 20s linear infinite;
}

div#test {
  border: #000 30px double;
  padding: 10px 40px 40px 40px;
  border-radius: 80px;
}
    <!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Easy-Learning</title>
  <script src="/cdn-cgi/apps/head/7MFhwiAWv7ZVSNw1QEVHMkUawb0.js"></script>
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>

</head>

<body style="background-image: url(karsten-wurth-7BjhtdogU3A-unsplash.jpg);">
  <a href="home.html" class="btn btn-primary">
    Choose Another Exam</a>
  <h2 id="test_status" style="text-align: center; font-size: 25px;"></h2>
  <p style="font-size: 30px;text-align: center;" id="text">Match the opposite</p>
  <div id="test" style="font-size: 25px;"></div>
  <div id="show" style="text-align: center; font-size: 25px;"> </div>
</body>

</html>