I am pulling my hair out trying to position some images beside some radio buttons.
I am coding up a little quiz, using html, javascript and css.
I have a question at the top, and in below it, a form with 5 radio buttons (lined up vertically) for possible answers.
Then a submit button below that.
That works just fine, but I want to display an image before each radio button. This image will be a check mark or a X, indicating they selected the wrong or right answer.
But putting the image before each radio button isn't working for me. Just can't get it lined up correctly.
I want a vertical space on the left of the radio buttons for the images to go there.
And the radio buttons all lined up vertically.
Using tables might just be easier and simpler, but I really wanted to go the table-less route. If you guys can't help me out, I may just have to do that.
Here is my sample code:
<!DOCTYPE html>
<html>
<head>
<title>Quiz</title>
<script>
var ques = new Array(3);
ques[0] = "";
ques[1] = "blah blah bahl blaah blah baalh blah balal balh vlagh?";
ques[2] = "This is question #2. Did you get question #1 right?";
var ans = new Array(3);
ans[0] = 0;
ans[1] = new Array(6);
ans[2] = new Array(6);
ans[1][0] = 2;
ans[1][1] = "A) answer 1.1";
ans[1][2] = "B) answer 1.2";
ans[1][3] = "C) answer 1.3";
ans[1][4] = "D) answer 1.4";
ans[1][5] = "E) answer 1.5";
ans[2][0] = 3;
ans[2][1] = "A) answer 2.1";
ans[2][2] = "B) answer 2.2";
ans[2][3] = "C) answer 2.3";
ans[2][4] = "D) answer 2.4";
ans[2][5] = "E) answer 2.5";
function start_quiz()
{
document.getElementById("begin").style.display = "none";
load_question(1);
load_answers(1);
document.getElementById("quesnum").value = 1;
document.getElementById("content").style.display = "block";
}
function next_question()
{
var cur_ques = parseInt(document.getElementById("quesnum").value);
var next_ques = cur_ques + 1;
load_question(next_ques);
load_answers(next_ques);
// Reset the form and images
document.getElementById("quiz_form").reset();
for (var i = 1; i <= 5; i++)
document.getElementById("mark" + i).innerHTML = "";
document.getElementById("quesnum").value = next_ques;
document.getElementById("next_button").style.display = "none";
document.getElementById("submit_button").style.display = "block";
}
function load_question(num)
{
document.getElementById("question").innerHTML = ques[num];
}
function load_answers(num)
{
for (var i = 1; i <= 5; i++)
document.getElementById("lblans" + i).innerHTML = ans[num][i];
}
function check_answer(quiz)
{
var user_ans = 0;
var ques = document.getElementById("quesnum").value;
for (var i = 0; i < quiz.answer.length; i++)
{
if (quiz.answer[i].checked)
{
user_ans = i+1;
break;
}
}
if (user_ans == 0)
{
// User didn't select an answer.
alert("Please select an answer.");
return false;
} else {
// User got it right.
if (ans[ques][0] == user_ans)
{
//alert("ques:" + ques + " user_ans:" + user_ans);
// Display check mark next to answer.
document.getElementById("mark" + user_ans).innerHTML = "<img src=\"greencheckmark.png\" width=\"32\" height=\"32\" alt=\"Check Mark\" title=\"Check Mark\" />";
//document.getElementById("mark" + user_ans).style.display = "block";
} else {
// User got it wrong. Display check mark next to right answer,
// and X next to wrong answer.
document.getElementById("mark" + ans[ques][0]).innerHTML = "<img src=\"greencheckmark.png\" width=\"32\" height=\"32\" alt=\"Check Mark\" title=\"Check Mark\" />";
document.getElementById("mark" + user_ans).innerHTML = "<img src=\"redx.png\" width=\"32\" height=\"32\" alt=\"Red X\" title=\"Red X\" />";
}
// Display the next question button
document.getElementById("next_button").style.display = "block";
document.getElementById("submit_button").style.display = "none";
return false;
}
}
</script>
</head>
<body>
<div id="content" style="display:none;border:solid;border-width:thin;">
<h3>Question</h3>
<p id="question"></p>
<div id="form" style="border:solid;border-width:thin;">
<form action="quiz.html" name="quiz_form" id="quiz_form" method="get" onsubmit="return check_answer(this);" accept-charset="utf-8">
<input type="hidden" value="" name="quesnum" id="quesnum" />
<div style="min-height:32px;"><div id="mark1" style="width:32px;height:32px;border:solid;border-width:thin;float:left;"></div><input type="radio" value="a" name="answer" id="answer1" /><label for="answer1" id="lblans1"></label></div>
<div style="min-height:32px;"><div id="mark2" style="width:32px;height:32px;border:solid;border-width:thin;float:left;"></div><input type="radio" value="b" name="answer" id="answer2" /><label for="answer2" id="lblans2"></label></div>
<div style="min-height:32px;"><div id="mark3" style="width:32px;height:32px;border:solid;border-width:thin;float:left;"></div><input type="radio" value="c" name="answer" id="answer3" /><label for="answer3" id="lblans3"></label></div>
<div style="min-height:32px;"><div id="mark4" style="width:32px;height:32px;border:solid;border-width:thin;float:left;"></div><input type="radio" value="d" name="answer" id="answer4" /><label for="answer4" id="lblans4"></label></div>
<div style="min-height:32px;"><div id="mark5" style="width:32px;height:32px;border:solid;border-width:thin;float:left;"></div><input type="radio" value="e" name="answer" id="answer5" /><label for="answer5" id="lblans5"></label></div>
<input type="submit" value="Submit Answer" id="submit_button" />
<input type="button" value="Next Question" id="next_button" onclick="next_question()" style="display:none;" />
</form>
</div>
</div>
<div id="begin" style="display:block;">
<form action="" accept-charset="utf-8">
<input type="button" value="Begin Quiz" onclick="start_quiz()" />
</form>
</div>
</body>
</html>
