Делаю страницы с тестами.

[rty]

Всем привет. Не нашел ветку для вопросов от чайников, спрошу здесь.
Я не программист js , но мне нужно сверстать веб страницы с тестами.
Нашел как это сделать, всё работает, но хочу чтобы неправильные ответы были красные а правильные зеленые.

<ul id="exerciseanswers">
<li id='0lianswer'><strong>1. He’s ___ walked out of the office.</strong><br />
<span class='answer' id='0answerspan'></span><div class='mcanswers'><input type="hidden" name="0canswer" id="0canswer" />
<label><input onclick="document.getElementById('0canswer').value = this.value;" type="radio" name="0radio" id="00radio" value="just or only" />just or only</label><br />

<label><input onclick="document.getElementById('0canswer').value = this.value;" type="radio" name="0radio" id="01radio" value="just" />just</label><br />

<label><input onclick="document.getElementById('0canswer').value = this.value;" type="radio" name="0radio" id="02radio" value="only" />only</label><br /><br /></li>
................
другие  вопросы 
................
</ul>
<input name="Check_Answers" type="button" onclick="checkanswers();" value="Check Answers" />

<script type="text/javascript">
function checkanswers(){

if(document.getElementById('0canswer').value.toLowerCase().replace(/'/, '&#39;') == 'just'){document.getElementById('0answerspan').innerHTML = 'Correct!';
document.getElementById('0lianswer').className = 'correct';}
else{document.getElementById('0answerspan').innerHTML = 'Wrong!';
document.getElementById('0lianswer').className = 'wrong';}

В общем надо чтобы 'Correct!' был зеленый , 'Wrong!' - красный.

[Nexus]

в css

.correct{color:green;}
.wrong{color:red;}

Или на станицу:

<style>
.correct{color:green;}
.wrong{color:red;}
</style>

[rty]

Да, но это делает зеленым/красным не только ответ , но и весь пункт (с вопросом и инпутами). А мне нужно чтобы только ответ был красный или зеленый.

[laimas]

rty,
а зачем дублировать выбор кнопки в поле, что не достаточно того, что отображает выбранная кнопка?

[Nexus]

<ul id="exerciseanswers">
	<li id='0lianswer'>
		<div><strong>1. He’s ___ walked out of the office.</strong></div>
		<div><span class='answer' id='0answerspan'></span></div>
		<div class='mcanswers'>
			<label><input type="radio" name="0canswer" id="00radio" value="just or only"/>just or only</label>
			<label><input type="radio" name="0canswer" id="01radio" value="just"/>just</label>
			<label><input type="radio" name="0canswer" id="02radio" value="only"/>only</label>
		</div>
	</li>
</ul>
<input name="Check_Answers" type="button" onclick="checkanswers();" value="Check Answers"/>

<style>
	#exerciseanswers li{
		margin-bottom:15px;
	}
	#exerciseanswers label{
		display:block;
	}
	.correct{
		color:green;
	}
	.wrong{
		color:red;
	}
</style>

<script>
	(function(){
		var result=document.getElementById('0answerspan');
		document.getElementById('0lianswer').onchange=function(e){
			result.textContent=(
				result.className=e.target.value.toLowerCase().replace(/'/,'&#39;')=='just'?'correct':'wrong'
			)+'!';
		};
	})();
</script>