Как изменить цвет текста следующей функции в JavaScript - PullRequest
Новая
       17

Как изменить цвет текста следующей функции в JavaScript

0 голосов
/ 30 апреля 2010

Хорошо, прежде чем я сделаю спагетти из этого кода, я подумал, что можно спросить здесь. я сделал тест для интернет-сайта.

Ответы хранятся в массиве, и есть функция, которая проверяет массив ответов на то, что вы щелкнули. Затем он считает их и дает вам ваш счет.

но я хочу изменить цвет правильного ответа, когда пользователь нажимает кнопку оценки. поэтому правильные ответы выделены. что-то вроде этого https://www.shutterpoint.com/Home-Quiz.cfm (просто нажмите «Отправить» внизу, тест не нужно).

маленький значок ответа сбоку выглядит кричащим, но у id скорее всего текст поменяется на цвет. вот как мои вопросы отформатированы 

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

и это две функции, которые вызываются повсюду. запись ответа вызывается каждый раз, когда пользователь нажимает кнопку 

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

это последняя кнопка, которая вычисляет счет 

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!");
-->
}

Лучше, я думаю, еще одна функция. Я уже пытался сделать это и знаю, что я должен установить цвет, используя 

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

Проблема в том, что «Ответ» не регистрируется. кто-нибудь пролил свет?

хорошо, поэтому у меня не может быть двух или более одинаковых идентификаторов.

а как же 

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

Ответы [ 4 ]

0 голосов
/ 30 апреля 2010

Вместо использования <p> я бы рассмотрел использование <label for='question1_answerA'>How long it takes to develop film.</label>. Вы все еще можете использовать селектор jQuery, чтобы найти его, и он кажется более семантически правильным. Затем вы также сможете выбрать опцию, щелкнув текст.

Хотя ваш другой HTML не является семантически правильным. Вам необходимо дать каждому радио уникальный идентификатор.

0 голосов
/ 30 апреля 2010

БЫСТРЫЙ ОТВЕТ:

ИСПОЛЬЗОВАНИЕ <P>

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

ТО 

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

УЛУЧШЕНИЕ

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

привет, обертон!

Прежде всего, вам нужно изменить стиль вашей HTML-схемы!

у вас есть несколько id="Wrong" вместо class="Wrong"

тогда вот как должен выглядеть ваш код: 

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

ИСПОЛЬЗОВАТЬ ФОРМУ и один раз ОТПРАВИТЬ КНОПКУ вместо добавления onclick к каждому РАДИО , как это 

 <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: демо-пример обновлен со стилем ... ради!

0 голосов
/ 30 апреля 2010

Обязательное решение вопроса: 

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

Все это предполагает, что вы исправили свой HTML для использования классов, а не идентификаторов для «Неправильно» и «Ответ».

0 голосов
/ 30 апреля 2010

Вы должны отформатировать ваши id более удобным способом .. Я бы предложил что-то похожее на questionNUMBER_answerVALUE.

Тогда было бы просто ... 

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

Просто проверьте, правильно ли вы указали нулевую / ненулевую индексацию в отношении номеров вопросов / ответов.

...