Изменение цвета правильного/неправильного ответа JS

@D@nger · Регистрация: 17.03.2014

Студворк — интернет-сервис помощи студентам

Всем привет. Имеется страничка с тестом на JavaScript. Так как я не очень хорошо знаю это язык, нужна помощь.
Сделать так, что бы при завершении теста (нажатии кнопки "Показать результат") неправильные варианты ответов изменяли свой цвет на красный, а правильные на зеленый.

Код

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
var res="1111111111" 
function check_me()
{
    var count=0
    with(document.test)
{
if (!Q1[0].checked&&!Q1[1].checked&&!Q1[2].checked&&!Q1[3].checked&&!Q1[4].checked)  
{count+=1};  
if (!Q2[0].checked&&!Q2[1].checked&&!Q2[2].checked&&!Q2[3].checked&&!Q2[4].checked)  
{count+=1};  
if (!Q3[0].checked&&!Q3[1].checked&&!Q3[2].checked&&!Q3[3].checked&&!Q3[4].checked)  
{count+=1};  
if (!Q4[0].checked&&!Q4[1].checked&&!Q4[2].checked&&!Q4[3].checked&&!Q4[4].checked)  
{count+=1};  
if (!Q5[0].checked&&!Q5[1].checked&&!Q5[2].checked&&!Q5[3].checked&&!Q5[4].checked)  
{count+=1};  
if (!Q6[0].checked&&!Q6[1].checked&&!Q6[2].checked&&!Q6[3].checked&&!Q6[4].checked)  
{count+=1};  
if (!Q7[0].checked&&!Q7[1].checked&&!Q7[2].checked&&!Q7[3].checked&&!Q7[4].checked)  
{count+=1};  
if (!Q8[0].checked&&!Q8[1].checked&&!Q8[2].checked&&!Q8[3].checked&&!Q8[4].checked)  
{count+=1};  
if (!Q9[0].checked&&!Q9[1].checked&&!Q9[2].checked&&!Q9[3].checked&&!Q9[4].checked)  
{count+=1};  
if (!Q10[0].checked&&!Q10[1].checked&&!Q10[2].checked&&!Q10[3].checked&&!Q10[4].checked)  
{count+=1};  
if (count>0) 
    {alert("Вы выполнили не все задания. Проверьте себя!")  } 
        else answer()
    }
} 
 
function control(k, f1,f2,f3,f4,f5,f6,f7,f8,f9,f10) {
if (k==1&&f1.checked) return true;
if (k==2&&f2.checked) return true;
if (k==3&&f3.checked) return true;
if (k==4&&f4.checked) return true;
if (k==5&&f5.checked) return true;
if (k==6&&f6.checked) return true;
if (k==7&&f7.checked) return true;
if (k==8&&f8.checked) return true;
if (k==9&&f9.checked) return true;
if (k==10&&f10.checked) return true;
return false;
}
 
function answer()
{
answ="";
     with(document)
    {
    answ+=control(res.charAt(0) ,test.Q1[0],test.Q1[1],test.Q1[2],test.Q1[3],test.Q1[4])?"1":"0"
answ+=control(res.charAt(1) ,test.Q2[0],test.Q2[1],test.Q2[2],test.Q2[3],test.Q2[4])?"1":"0"
answ+=control(res.charAt(2) ,test.Q3[0],test.Q3[1],test.Q3[2],test.Q3[3],test.Q3[4])?"1":"0"
answ+=control(res.charAt(3) ,test.Q4[0],test.Q4[1],test.Q4[2],test.Q4[3],test.Q4[4])?"1":"0"
answ+=control(res.charAt(4) ,test.Q5[0],test.Q5[1],test.Q5[2],test.Q5[3],test.Q5[4])?"1":"0"
answ+=control(res.charAt(5) ,test.Q6[0],test.Q6[1],test.Q6[2],test.Q6[3],test.Q6[4])?"1":"0"
answ+=control(res.charAt(6) ,test.Q7[0],test.Q7[1],test.Q7[2],test.Q7[3],test.Q7[4])?"1":"0"
answ+=control(res.charAt(7) ,test.Q8[0],test.Q8[1],test.Q8[2],test.Q8[3],test.Q8[4])?"1":"0"
answ+=control(res.charAt(8) ,test.Q9[0],test.Q9[1],test.Q9[2],test.Q9[3],test.Q9[4])?"1":"0"
answ+=control(res.charAt(9) ,test.Q10[0],test.Q10[1],test.Q10[2],test.Q10[3],test.Q10[4])?"1":"0"
 
showResult();
    }
}
 
function showResult()
{
    var nok=0;
    var i,s;
 
for (i=0; i<answ.length;i++) {nok+=answ.charAt(i)=="1"?1:0;}
if(nok==10) s="ОТЛИЧНО";
if(nok<10) s="ХОРОШО";
if(nok<7.5) s="УДОВЛЕТВОРИТЕЛЬНО";
if (nok<5) s="НЕУДОВЛЕТВОРИТЕЛЬНО";
    document.test.s1.
    value="Количество правильных ответов "+nok+". Ваша оценка  "+s+". Посмотрите на окно рядом с номером вопроса. Если ответ правильный, там (+). Если ответ ошибочен, там (-).";
 
with(document.test)
    {
    if (answ.charAt(0)=="1") {T1.value=" + "} else {T1.value=" - "};
   if (answ.charAt(1)=="1") {T2.value=" + "} else {T2.value=" - "};
   if (answ.charAt(2)=="1") {T3.value=" + "} else {T3.value=" - "};
   if (answ.charAt(3)=="1") {T4.value=" + "} else {T4.value=" - "};
   if (answ.charAt(4)=="1") {T5.value=" + "} else {T5.value=" - "};
   if (answ.charAt(5)=="1") {T6.value=" + "} else {T6.value=" - "};
   if (answ.charAt(6)=="1") {T7.value=" + "} else {T7.value=" - "};
   if (answ.charAt(7)=="1") {T8.value=" + "} else {T8.value=" - "};
   if (answ.charAt(8)=="1") {T9.value=" + "} else {T9.value=" - "};
   if (answ.charAt(9)=="1") {T10.value=" + "} else {T10.value=" - "};
     }
}
function showhide(obj){
    if(obj == 'none') return 'inline';
    else return 'none';
}

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
<form name="test"><ol>
<li><INPUT type="text" size="1" name="T1"/><b> В1</b><br/>
<input type="radio" name="Q1"/> 1<br />
<input type="radio" name="Q1"/> 2<br />
<input type="radio" name="Q1"/> 3<br />
<input type="radio" name="Q1"/> 4<br />
<input type="radio" name="Q1"/> 5<br />
<br/></li><li><INPUT type="text" size="1" name="T2"/><b> в2</b><br/>
<input type="radio" name="Q2"/> 1<br />
<input type="radio" name="Q2"/> 2<br />
<input type="radio" name="Q2"/> 3<br />
<input type="radio" name="Q2"/> 4<br />
<input type="radio" name="Q2"/> 5<br />
<br/></li><li><INPUT type="text" size="1" name="T3"/><b> в3</b><br/>
<input type="radio" name="Q3"/> 1<br />
<input type="radio" name="Q3"/> 2<br />
<input type="radio" name="Q3"/> 3<br />
<input type="radio" name="Q3"/> 4<br />
<input type="radio" name="Q3"/> 5<br />
<br/></li><li><INPUT type="text" size="1" name="T4"/><b> в4</b><br/>
<input type="radio" name="Q4"/> 1<br />
<input type="radio" name="Q4"/> 2<br />
<input type="radio" name="Q4"/> 3<br />
<input type="radio" name="Q4"/> 4<br />
<input type="radio" name="Q4"/> 5<br />
<br/></li><li><INPUT type="text" size="1" name="T5"/><b> в5</b><br/>
<input type="radio" name="Q5"/> 1<br />
<input type="radio" name="Q5"/> 2<br />
<input type="radio" name="Q5"/> 3<br />
<input type="radio" name="Q5"/> 4<br />
<input type="radio" name="Q5"/> 5<br />
<br/></li><li><INPUT type="text" size="1" name="T6"/><b> в6</b><br/>
<input type="radio" name="Q6"/> 1<br />
<input type="radio" name="Q6"/> 2<br />
<input type="radio" name="Q6"/> 3<br />
<input type="radio" name="Q6"/> 4<br />
<input type="radio" name="Q6"/> 5<br />
<br/></li><li><INPUT type="text" size="1" name="T7"/><b> в7</b><br/>
<input type="radio" name="Q7"/> 1<br />
<input type="radio" name="Q7"/> 2<br />
<input type="radio" name="Q7"/> 3<br />
<input type="radio" name="Q7"/> 4<br />
<input type="radio" name="Q7"/> 5<br />
<br/></li><li><INPUT type="text" size="1" name="T8"/><b> в8</b><br/>
<input type="radio" name="Q8"/> 1<br />
<input type="radio" name="Q8"/> 2<br />
<input type="radio" name="Q8"/> 3<br />
<input type="radio" name="Q8"/> 4<br />
<input type="radio" name="Q8"/> 5<br />
<br/></li><li><INPUT type="text" size="1" name="T9"/><b> в9</b><br/>
<input type="radio" name="Q9"/> 1<br />
<input type="radio" name="Q9"/> 2<br />
<input type="radio" name="Q9"/> 3<br />
<input type="radio" name="Q9"/> 4<br />
<input type="radio" name="Q9"/> 5<br />
<br/></li><li><INPUT type="text" size="1" name="T10"/><b> в10</b><br/>
<input type="radio" name="Q10"/> 1<br />
<input type="radio" name="Q10"/> 2<br />
<input type="radio" name="Q10"/> 3<br />
<input type="radio" name="Q10"/> 4<br />
<input type="radio" name="Q10"/> 5<br />
<br/></li></ol>     
<CENTER>
<P><TEXTAREA name="s1" rows="4" cols="70" readonly> </TEXTAREA> </P>
<INPUT onclick="check_me()" type="button" value="Показать результат"/>&nbsp;&nbsp;&nbsp;&nbsp; 
<INPUT type="reset" value="Сбросить ответы"/> 
</CENTER>        
</form>

@Hikari · 20.01.2016, 13:14

Массивами нужно делать...
Список вопросов то у тебя есть?

@D@nger · 20.01.2016, 13:45 **[ТС]**

Hikari, Да. Тест уже готов, он полностью работает.

@Hikari · 20.01.2016, 14:58

Хм... Ладно. Попробую пояснить свою точку зрения примером с коленки:

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
<!DOCTYPE html>
 <html xmlns="http://www.w3.org/1999/xhtml">
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <style>
   .yes {background-color: #00FF00 }
   .no {background-color: #FF0000 }
  </style>
  <script type="text/javascript">
  //Наш список вопросов-ответов
   var test=[
     {q:"Вопрос 1",ans:['Ответ 1','Ответ 2'], right:0}
    ,{q:"Вопрос 2",ans:['Ответ 1','Ответ 2','Ответ 3'], right:2}
   ];
   var TQuest;
   //Активируем вопросы по порядку
   function start(n){
    if(n<=1){
     if(!TQuest) TQuest=document.getElementById("TQuest");
       var row=TQuest.insertRow(0)
       var s='<tr><th>'+test[n].q+'</th>';
       for(i in test[n].ans){s+='<td '
           +((test[n].right==i)?"isok=yes":"isok=no")
           +'><input type=radio  onclick="start('+(n+1)+')" />'
           +test[n].ans[i]+'</td>';
       }
       row.innerHTML=s+'</tr>';
    } else {
     end();
    }
   }
   
   //Подсвечиваем верные и не очень
   function end(){
    var a=document.getElementsByTagName('td');
    var cls='';
    for(i=0;i<a.length;i++){
      cls=a[i].getAttribute('isok');
      a[i].setAttribute('class',cls);
    }
   }
  </script>
  <!--js-->
</head>
 
<body onload="start(0)">
 <table id="TQuest">
  
 </table> 
</body>
</html>

Вуаля!
Так понятно, что я предлагаю?

@D@nger · 20.01.2016, 16:21 **[ТС]**

Hikari, А мой код нельзя никак переделать? Нужно обязательно новый писать?

@Hikari · 20.01.2016, 16:29

Сообщение от D@nger

мой код нельзя никак переделать?

Признаюсь честно - твой код для меня непонятен. Я потому и задала вопрос о источнике тестов.

@D@nger · 20.01.2016, 18:40 **[ТС]**

Hikari, Тест я взял на этом форуме в одной из теме и маленько изменил.

@Hikari · 20.01.2016, 19:11

Сообщение от D@nger

Тест я взял на этом форуме в одной из теме и маленько изменил.

Да я не против... Просто для меня твой вариант слишком сложный.

@D@nger · 20.01.2016, 19:25 **[ТС]**

Hikari, Хорошо. Всё равно спасибо за вашу вариант

@newJS · 21.01.2016, 08:01

Сообщение от D@nger

А мой код нельзя никак переделать?

Это чудо программирования давно на форуме валяется. А если это твой код, то где проблема свой код изменить?
И почему все находят эту жуть?!

Сообщение от D@nger

Нужно обязательно новый писать?

Нужно.

Сообщение от Hikari

Просто для меня твой вариант слишком сложный.

Могу сказать, что не для, Хитрая блондиночка $) тоже.

Сообщение от D@nger

неправильные варианты ответов изменяли свой цвет на красный, а правильные на зеленый.

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

@D@nger · 22.01.2016, 21:21 **[ТС]**

Сообщение от newJS

Это чудо программирования давно на форуме валяется. А если это твой код, то где проблема свой код изменить?
И почему все находят эту жуть?!

Я взял этот код, потому что для меня он показался из всех имеющихся самым понятным и работающим так как мне нужно. Если по вашему мнению это жуть, предложите пожалуйста ваш вариант (самостоятельно написать код я не смогу, т.к. не владею JS).

Сообщение от newJS

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

Буду вам очень благодарен, если сможете мне помочь.

@newJS · 23.01.2016, 06:13

Сообщение от D@nger

Буду вам очень благодарен, если сможете мне помочь.

Только что выложил на сайт обновлённую версию генератора, добавил возможность подсветки ответов.
D@nger, конкретно можно сказать, зачем подсказывать ответы, мне только тесты для детей в голову пришли.

@D@nger · 24.01.2016, 17:53 **[ТС]**

newJS, Спасибо.

Новые блоги и статьи Все статьи Все блоги /
WordPad для Windows 11 Jel 10.01.2026 WordPad для Windows 11 — это приложение, которое восстанавливает классический текстовый редактор WordPad в операционной системе Windows 11. После того как Microsoft исключила WordPad из. . .	Classic Notepad for Windows 11 Jel 10.01.2026 Old Classic Notepad for Windows 11 Приложение для Windows 11, позволяющее пользователям вернуть классическую версию текстового редактора «Блокнот» из Windows 10. Программа предоставляет более. . .	Почему дизайн решает? Neotwalker 09.01.2026 В современном мире, где конкуренция за внимание потребителя достигла пика, дизайн становится мощным инструментом для успеха бренда. Это не просто красивый внешний вид продукта или сайта — это. . .	Модель микоризы: классовый агентный подход 3 anaschu 06.01.2026 aa0a7f55b50dd51c5ec569d2d10c54f6/ O1rJuneU_ls https:/ / vkvideo. ru/ video-115721503_456239114
Owen Logic: О недопустимости использования связки «аналоговый ПИД» + RegKZR ФедосеевПавел 06.01.2026 Owen Logic: О недопустимости использования связки «аналоговый ПИД» + RegKZR ВВЕДЕНИЕ Введу сокращения: аналоговый ПИД — ПИД регулятор с управляющим выходом в виде числа в диапазоне от 0% до. . .	Модель микоризы: классовый агентный подход 2 anaschu 06.01.2026 репозиторий https:/ / github. com/ shumilovas/ fungi ветка по-частям. коммит Create переделка под биомассу. txt вход sc, но sm считается внутри мицелия. кстати, обьем тоже должен там считаться. . . .	Расчёт токов в цепи постоянного тока igorrr37 05.01.2026 / * Дана цепь постоянного тока с сопротивлениями и напряжениями. Надо найти токи в ветвях. Программа составляет систему уравнений по 1 и 2 законам Кирхгофа и решает её. Последовательность действий:. . .	Новый CodeBlocs. Версия 25.03 palva 04.01.2026 Оказывается, недавно вышла новая версия CodeBlocks за номером 25. 03. Когда-то давно я возился с только что вышедшей тогда версией 20. 03. С тех пор я давно снёс всё с компьютера и забыл. Теперь. . .

@Hikari Хитрая блондиночка $) 1472 / 988 / 399 Регистрация: 21.12.2015 Сообщений: 3,785
	20.01.2016, 13:14
	Массивами нужно делать... Список вопросов то у тебя есть? 0

@D@nger 1 / 1 / 1 Регистрация: 17.03.2014 Сообщений: 80
	20.01.2016, 13:45 [ТС]
	Hikari, Да. Тест уже готов, он полностью работает. 0

@D@nger 1 / 1 / 1 Регистрация: 17.03.2014 Сообщений: 80
	20.01.2016, 16:21 [ТС]
	Hikari, А мой код нельзя никак переделать? Нужно обязательно новый писать? 0

@D@nger 1 / 1 / 1 Регистрация: 17.03.2014 Сообщений: 80
	20.01.2016, 18:40 [ТС]
	Hikari, Тест я взял на этом форуме в одной из теме и маленько изменил. 0

@D@nger 1 / 1 / 1 Регистрация: 17.03.2014 Сообщений: 80
	20.01.2016, 19:25 [ТС]
	Hikari, Хорошо. Всё равно спасибо за вашу вариант 0

@D@nger 1 / 1 / 1 Регистрация: 17.03.2014 Сообщений: 80
	24.01.2016, 17:53 [ТС]
	newJS, Спасибо. 0