Артемон,
тут у 5 и 8 вопросов надо поменять цветовую гамму, а то не видно цифры у номеров вопросов... Также я убрал бы нумерацию у ответов, т.е. вместо
1.
2.
3.
1. alert('Привет')
2. document.write('Привет')
3. document.print('Привет')
сделать просто
1.
2.
3.
alert('Привет')
document.write('Привет')
document.print('Привет')
АртемонНе получается сделать вопросы с вводом текста и множеством вариантов ответов Варианты ответов лучше хранить в массиве, там и для единичных и для множества - один алгоритм будет.
Правильные варианты ответов в массиве answ. Например, для первого вопроса - надо одновременно поставить галочки у 1 и 4 варианта
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.
98.
99.
100.
101.
<!DOCTYPE HTML>
<html> <head> <title>Вопросы</title>
<style>
* {margin:0; padding:0; font:15px Arial;}
.question {
padding:10px;
background:#4682B4;
color:#fff;
}
.answer {margin-bottom:24px;}
.answer label{
display:block;
padding:5px 5px 2px 10px;
}
.cmd {
border:1px solid #d1d1d1;
border-radius:4px;
font:11px Tahoma,Arial,'MS Sans Serif','sans-serif';
cursor:pointer;
width:70px;
margin-left:3px;
padding:4px 5px;
text-align:center;
background:url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZmZmZmZiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjUwJSIgc3RvcC1jb2xvcj0iI2Y5ZjlmOSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjUxJSIgc3RvcC1jb2xvcj0iI2VjZWNlYyIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNlNmU2ZTYiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
}
.cmd:active {padding:5px 4px 3px 6px;}
#res {
margin:20px 1px;
padding:10px 5px;
background:#FFD700;
}
</style>
<body>
<div class="question">1. Кто убил Сару Лэнс?</div>
<div class="answer">
<label><input type="checkbox"> Тея Куин</label>
<label><input type="checkbox"> Малькольм Мерлин</label>
<label><input type="checkbox"> Слейд Уилсон</label>
<label><input type="checkbox"> Чего-то темнят сценаристы</label>
</div>
<div class="question">2. Что случилось с Фелисити?</div>
<div class="answer">
<label><input type="checkbox"> Обнаглела</label>
<label><input type="checkbox"> Запуталась</label>
<label><input type="checkbox"> А кто ж её знает?</label>
</div>
<div class="question">3. Почему не очень довольны фанаты сериала?</div>
<div class="answer">
<label><input type="checkbox"> Много логических промахов</label>
<label><input type="checkbox"> Перебор соплей</label>
<label><input type="checkbox"> Уменьшается % экшена</label>
</div>
<div class="question">4. Здесь надо выбрать один пункт</div>
<div class="answer">
<label><input type="radio" name="quest4"> Нет</label>
<label><input type="radio" name="quest4"> Да</label>
</div>
<table> <tr>
<td> </td> <td><div class="cmd" onclick="ShowResult();">Закончить</div></td> <td><div class="cmd" onclick="ResetChk();">Сброс</div></td>
</tr> </table>
<div id="res"></div>
<script>
ResetChk();
function gid (idx) {return document.getElementById(idx);}
function ResetChk() {
gid('res').style.display = 'none';
var chk = document.getElementsByTagName('input');
for (i=0; i < chk.length; i++) {
if (chk[i].type == 'checkbox' || chk[i].type == 'radio') {chk[i].checked = false;}
}
}
function ShowResult() {
var answ = [
'1,4',
'2,3',
'1,2,3',
'2'
];
var cnt = 0, k = [];
var a = document.getElementsByClassName('answer');
for (i=0; i<a.length; i++) {
for (j=0; j<a[i].children.length; j++) {
if (a[i].children[j].children[0].checked) {k.push(j+1)}
}
if(k.join() == answ[i]) {cnt++};
k = [];
}
gid('res').innerHTML = 'Количество правильных ответов: ' + cnt;
gid('res').style.display = 'block';
}
</script>
</body>
</html>
