how to change color of text following function in javascript

Posted by OVERTONE on Stack Overflow See other posts from Stack Overflow or by OVERTONE
Published on 2010-04-30T13:24:42Z Indexed on 2010/04/30 13:37 UTC
Read the original article Hit count: 207

Filed under:
|
|
|

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 answers are highlighted. something like this https://www.shutterpoint.com/Home-Quiz.cfm (just hit submit at the bottom, 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 my questions are formatted

<p>Depth of field is controlled by :?</p>
<p id = "question2"><input type="radio" name="question2" id="Answer1" value = "a" onClick ="recordAnswer(2,this.value)"/>       The focal length of the lens. <br/>
<input type="radio" name="question2" id="Answer2" value = "b" onClick = "recordAnswer(2,this.value)"/>  The size of the   aperture opening. <br/>
<input type="radio" name="question2" id="Answer3" value = "c" onClick = "recordAnswer(2,this.value)"/>      The distance between the camera and lens. <br/>
<input type="radio" name="question2" id="Answer4" value = "d" onClick = "recordAnswer(2,this.value)"/>  All of these.     <br/></p>

and these are the two functions that are called throughout. record answer is called every time the user clicks a button

 function recordAnswer(question,answer)
{
answers[question-1] = answer;
}

this is the final button which calculates the score

function scoreQuiz()
{
var totalCorrect = 0;
for(var count = 0; count<correctAnswers.length;count++)
{
    if(answers[count]== correctAnswers[count])

    totalCorrect++;

}
<!--
alert("You scored " + totalCorrect + " out of 12 correct!");
-->
}

another function is best i think. ive already made attemots at it and know i have to set the color using

document.getElementById('question2').style.color = '#0000ff';

question2 being the p id

i think if i take in the value part of (input type....) ill be able to compare it to the answers array.

but im not quite sure how to do this. any helpers?


maybe something like this

document.getElementById("Answer1").style.color = '#0000ff';

using the id part of the (input type line)


i think i got it actually. ill post my answer in a sec

© Stack Overflow or respective owner

Related posts about JavaScript

Related posts about html