how to change color of text following function in javascript
- by OVERTONE
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
