Ok before i make spaghetti of this code i thought id ask around here. ive made a quiz for an online site.

The answers are stored in an array, and ive a function that checks the answers array to what youve clicked.then it counts them and gives you your score.

but i want to change the clor of the right answer wen the user clicks the score button. so the correct answersare highlighted. something like this https://www.shutterpoint.com/Home-Quiz.cfm (just hit submit at thebottom, no need to do the quiz).

the little answer icon at the side looks flashy but id rather just have the text change color. heres how myquestions are formatted

Film speed refers to:

OVERTONE698 7 18

4 Answers

{// change the color.}

javascript html colors radio

edited Apr 30 '10 at 13:56 asked Apr 30 '10 at 13:24

92% accept rate

You are not allowed to have two or more elements with the same id . RoToRa Apr 30 '10 at 13:50damn. wasnt aware of that. any suggestions? OVERTONE Apr 30 '10 at 13:54

feedback

QUICK RESPONCE:USE

How long it takes to develop film.

THEN

if(value == correctAnswers[]){YOUR_ELEMENT.parentNode.style.color = 'green';}

IMPROVEMENTDEMO: http://jsbin.com/aceze/26hi Overtone!

first of all you need to restyle a litte your HTML schema!

you have multiple id="Wrong" instead of class="Wrong"

then here how your code should look:

var answers = { 1:'a' , 2:'f' , 3:'h' };

function checkQuestions() { var form_elements = document.question_form.elements.length;

for ( var i = 0; i < form_elements; i++ ) { var type = question_form.elements[i].type; if ( type == "radio" ){ var quest = question_form.elements[i]; //if ( quest.checked ) { var question_index = parseInt(quest.name.split('_')[1]); //} if ( quest.value == answers[question_index] ) { quest.parentNode.style.border = '1px solid green'; quest.parentNode.style.color = 'green'; } else { //quest.parentNode.style.border = '1px solid red'; quest.parentNode.style.color = 'red'; } }

Stack Overow works best with JavaScript enabled

html - how to change color of text following functi... http://stackoverow.com/questions/2744768/how-...

2 of 4 21.09.2012 10:39

aSeptik13k 2 20 35

Matt25.1k 6 24 47

}

USE a FORM and one time SUBMIT BUTTON instead of adding onclick to each RADIO like this

QUESTIONS TIME 1 How long it takes to develop film. How fast film moves through film-transport system. How sensitive the film is to light. None of these makes sense.

... ...

None of these makes sense.

Mark3,430 1 18 31

Aaron165 10

Although your other HTML isn't semantically correct. You need to give each radio a unique ID.

edited Apr 30 '10 at 16:15 answered Apr 30 '10 at 16:07

feedback

Obligatory jquery solution:

var highlightCorrect = function(){ $(".Answer").css("color", "#00FF00");}

This is all assuming that you fix your HTML to use classes rather than IDs for "Wrong" and "Answer".

answered Apr 30 '10 at 15:54

feedback

Not the answer you're looking for? Browse other questions tagged javascript htmlcolors radio or ask your own question.

question feed

Stack Overow works best with JavaScript enabled

html - how to change color of text following functi... http://stackoverow.com/questions/2744768/how-...

4 of 4 21.09.2012 10:39