how to change color of text following function in javascript

Question

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>Film speed refers to:</p>
<p id = "question1">
<input type="radio" name="question1" id="Wrong" value = "a" onClick = "recordAnswer(1,this.value)"/>How long it takes to develop film. <br/>
<input type="radio" name="question1" id="Wrong" value = "b" onClick = "recordAnswer(1,this.value)"/>How fast film moves through film-transport system.  <br/>
<input type="radio" name="question1" id="Answer" value = "c" onClick = "recordAnswer(1,this.value)"/>   How sensitive the film is to light.  <br/>
<input type="radio" name="question1" id="Wrong" value = "d" onClick = "recordAnswer(1,this.value)"/>    None of these makes sense. <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 attempts at it and know i have to set the color using

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

onyl problem is 'Answer' doesnt seem to be registering. anyone shed some light?

---

ok so i cant have two or more of the same ids.

what about

if(value == correctAnswers[])
{
// change the color.
}

Answer 1

You should format your ids in a more usable way.. I'd suggest something similar to questionNUMBER_answerVALUE.

Then it'd be a simple matter of...

for (var i=0; i<correctAnswers;i++) {
  document.getElementById("question" + (i+1) + "_answer" + correctAnswers[i].toUpperCase()).style.color = "#0000FF";
};

Just check I've got your zero/non-zero indexing correct with regard to question/ answer numbers.

Answer 2

QUICK RESPONCE:

USE <P>

    <p>
    <input type="radio" name="question_1" class="wrong" value="a" />
    How long it takes to develop film. 
  </p>

THEN

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

IMPROVEMENT

DEMO: http://jsbin.com/aceze/26

hi 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';
          }
      }
    }
  }

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

 <form name="question_form" id="question_form" method="POST" action='#'>
      <div id="question_1"> <H4>QUESTIONS TIME 1</H4>
      </div>
      <p>
        <input type="radio" name="question_1" class="wrong" value="a" />
        How long it takes to develop film.
      </p>
      <p>
        <input type="radio" name="question_1" class="wrong" value="b" />
        How fast film moves through film-transport system.
      </p>
      <p>
        <input type="radio" name="question_1" class="answer" value="c" />
        How sensitive the film is to light.
      </p>
      <p>
        <input type="radio" name="question_1" class="wrong" value="d" />
        None of these makes sense. 
      </p>

       ...
       ...

        <input type="radio" name="question_2" class="wrong" value="h" />
        <span>None of these makes sense. 
        </span>
      </p>

      <input type="submit" name="submit" onclick="checkQuestions();return false;" value="submit"/>
    </form> 

PS: demo example updated with style... for sake!

Answer 3

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".

Answer 4

Instead of using a <p> I would consider using a <label for='question1_answerA'>How long it takes to develop film.</label>. You can still use a jQuery selector to find it and it feels more semantically correct. You will then also be able to select the option by clicking the text.

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