As some people has suggested you should change the way this is designed.
HTML/Javascript is client side and a simple right-click -> show source can tell any user which is the correct answer. So what is the correct way to do it? well there are some, let me explain one of them:
Your HTML part is fine, but the onclick
part should be changed to a new function called check_answer(id)
for example, you pass the answer id
to that function, then it will be submited to a PHP that will check it display a text telling the user if the answer was correct or not.
One way to do this would be AJAX, but let's try one more simple:
<form id="answer_send" name="answer_send" action="check_answer.php" method="POST">
<input type="hidden" id="answer_id" />
</form>
This HTML can be inserted in any part of the body, it won't be displayed anyway. Then we need the new javascript function 'check_answer(id)':
function check_answer(id){
document.getElementById('answer_id').value=id;
document.forms["answer_send"].submit();
}
Then in the check_answer.php
:
$id=$_POST['answer_id'];
if($id > 0){
//do something to compare the answer
if(answer_ok(id)){
echo "Correct Answer!";
}else{
echo "Incorrect Answer!";
}
}
What's the problem here? the user would get redirected to another page, so if you want to display multiple questions/answers and check them without sending the user to another URL you should use AJAX. The only difference when doing this process with AJAX would be that there's no need for a form, and the check_answer(id)
function would have to do the AJAX call and display a message to the user depending on the return value of the AJAX call.