Изменение цвета правильного/неправильного ответа 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, Спасибо.

Новые блоги и статьи Все статьи Все блоги /
Новый ноутбук volvo 07.12.2025 Всем привет. По скидке в "черную пятницу" взял себе новый ноутбук Lenovo ThinkBook 16 G7 на Амазоне: Ryzen 5 7533HS 64 Gb DDR5 1Tb NVMe 16" Full HD Display Win11 Pro	Музыка, написанная Искусственным Интеллектом volvo 04.12.2025 Всем привет. Некоторое время назад меня заинтересовало, что уже умеет ИИ в плане написания музыки для песен, и, собственно, исполнения этих самых песен. Стихов у нас много, уже вышли 4 книги, еще 3. . .	От async/await к виртуальным потокам в Python IndentationError 23.11.2025 Армин Ронахер поставил под сомнение async/ await. Создатель Flask заявляет: цветные функции - провал, виртуальные потоки - решение. Не threading-динозавры, а новое поколение лёгких потоков. Откат?. . .	Поиск "дружественных имён" СОМ портов Argus19 22.11.2025 Поиск "дружественных имён" СОМ портов На странице: https:/ / norseev. ru/ 2018/ 01/ 04/ comportlist_windows/ нашёл схожую тему. Там приведён код на С++, который показывает только имена СОМ портов, типа,. . .	Сколько Государство потратило денег на меня, обеспечивая инсулином. Programma_Boinc 20.11.2025 Сколько Государство потратило денег на меня, обеспечивая инсулином. Вот решила сделать интересный приблизительный подсчет, сколько государство потратило на меня денег на покупку инсулинов. . . .
Ломающие изменения в C#.NStar Alpha Etyuhibosecyu 20.11.2025 Уже можно не только тестировать, но и пользоваться C#. NStar - писать оконные приложения, содержащие надписи, кнопки, текстовые поля и даже изображения, например, моя игра "Три в ряд" написана на этом. . .	Мысли в слух kumehtar 18.11.2025 Кстати, совсем недавно имел разговор на тему медитаций с людьми. И обнаружил, что они вообще не понимают что такое медитация и зачем она нужна. Самые базовые вещи. Для них это - когда просто люди. . .	Создание Single Page Application на фреймах krapotkin 16.11.2025 Статья исключительно для начинающих. Подходы оригинальностью не блещут. В век Веб все очень привыкли к дизайну Single-Page-Application . Быстренько разберем подход "на фреймах". Мы делаем одну. . .	Фото: Daniel Greenwood kumehtar 13.11.2025	Расскажи мне о Мире, бродяга kumehtar 12.11.2025 — Расскажи мне о Мире, бродяга, Ты же видел моря и метели. Как сменялись короны и стяги, Как эпохи стрелою летели. - Этот мир — это крылья и горы, Снег и пламя, любовь и тревоги, И бескрайние. . .

@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