0

I'm making a little quiz. My problem is when ever the first question is generated the text and checkbox isn't aligned properly. All the other questions are fine. If I refresh the page it is fine as well. At first I thought maybe I could find a way to automatically refresh the page one time, but I was wondering if there is something simpler.However, if that's the only way, I'm all ears.

var pos = 0,
  test, test_status, question, choice, choices, chA, chB, chC, correct = 0;
var questions = [
  ["Question 1?", "Answer A", "Answer B", "Answer C", "B"],
  ["Question 2?", "Answer A", "Answer B", "Answer C", "C"],
  ["Question 3?", "Answer A", "Answer B", "Answer C", "A"],
  ["Question 4?", "Answer A", "Answer B", "Answer C", "A"],
  ["Question 5?", "Answer A", "Answer B", "Answer C", "C"]
];

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

function renderQuestion() {
  test = _("test");
  if (pos >= questions.length) {
    test.innerHTML = "<h2>You got " + correct + " 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 style='float:left;' type='checkbox'  name='choices' value='A'><div style='margin-left: 25px;'>" + chA + "</div>";
  test.innerHTML += "<input style='float:left;' type='checkbox'  name='choices' value='B'><div style='margin-left: 25px;'>" + chB + "</div>";
  test.innerHTML += "<input style='float:left;' type='checkbox'  name='choices' value='C'><div style='margin-left: 25px;'>" + chC + "</div>";
  test.innerHTML += "<button onclick='checkAnswer()'>Submit Answer</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++;
  }
  pos++;
  renderQuestion();
}
renderQuestion();
<div id="test"></div>
<div id="test_status"></div>
j08691
  • 204,283
  • 31
  • 260
  • 272
a_large_farva
  • 29
  • 5
  • Use a table for granular alignment needs like this. – Brant Dec 03 '15 at 18:11
  • You might want to add some CSS in order to highlight the alignment issues. Currently everything seems aligned. – shennan Dec 03 '15 at 18:27
  • @Brant **Do not use a table!** Your demo doesn't have any alignment issue for me, Chrome 46.0.2490.86 (64-bit) – André Dion Dec 03 '15 at 18:28
  • Can one script possibly affect another? Because I also have some other scripts and .js files. Maybe that's the root of my problem? – a_large_farva Dec 03 '15 at 18:41
  • Please describe how they're not aligned and how you would like them aligned. – j08691 Dec 03 '15 at 18:44
  • This looks okay so you don't actually need to do anything, but what I sometimes do is making the checkbox width/height slightly bigger, so you could elaborate with that a little to see what that does for you. – Asons Dec 03 '15 at 18:55
  • Here's what I'm dealing with. http://i.imgur.com/S6qfwfr.png – a_large_farva Dec 03 '15 at 18:55
  • @LGSon I tried the solutions from that question, even tweaked them a bit. But now It's aligned on the first set of questions but the labels don't appear in the subsequent questions. – a_large_farva Dec 03 '15 at 22:54
  • @j08691 http://i.imgur.com/S6qfwfr.png -with out labels. http://i.imgur.com/VhdPCZu.png with labels. I Just want uniformity, with or without the label is fine. – a_large_farva Dec 03 '15 at 22:55
  • @a_large_farva Have you set `white-space: nowrap` in the `label`'s CSS rule? ... And if you don't have the `input` inside the `label`, you can add a `div` wrapper to them and set `white-space: nowrap` on the wrapper. – Asons Dec 04 '15 at 09:06
  • @LGSon I tried this: [ test.innerHTML += "
    "+chA+"
    "; ] while the css is:input { width: 17px; height: 17px; padding: 0; margin:0; vertical-align: bottom; position:absolute; top: -1px; } Is my CSS offsetting the nowrap?     – a_large_farva Dec 04 '15 at 17:23
  • @a_large_farva As you are using `position: absolute` on your `input` it is taken out of flow and the nowrap has no effect on it. Please check this post on how to make this work: http://stackoverflow.com/a/306593/2827823 – Asons Dec 04 '15 at 17:42
  • @LGSon Yeah, I tried it with relative, right, left and some others as well to no avail. – a_large_farva Dec 04 '15 at 17:52

0 Answers0