подсчет ответов в тесте - HTML и CSS

ArinaP · 25.05.2015, 17:46

Как сделать подсчет ответов в тесте на html, не на скрипте javascript, а просто на html.
<p>1.Вопрос<br>

<input type=radio name=q1 onClick="b1=1">
а) ответ<br>

<input type=radio name=q1 onClick="b1=0">
б) ответ2<br>

<input type=radio name=q1 onClick="b1=0">
в) ответ3<br>
<input type=radio name=q1 onClick="b1=0">
г) ответ4<br>
<br>
далее такой подсчет не идет, как будет правильно?
<input type=button value="Ответить"
Onclick="alert('Количество правильных ответов: '+(b1+b2+b3))";

SQLPowerUser · 25.05.2015, 18:04

Без JavaScript не получится... ИМХО, правильные ответы лучше хранить в массиве (в этом примере он называется answ), там и для единичных и для множества - один алгоритм будет.
Например, для первого вопроса - надо одновременно поставить галочки у 1 и 4 варианта.

Код HTML:

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

Naive · 25.05.2015, 20:05

Цитата:

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

Без JavaScript не получится...

отобразить можно через CSS, а запомнить — обычным постом

25.05.2015, 17:46	#1
ArinaP Регистрация: 18.05.2015 Сообщений: 8	подсчет ответов в тесте Как сделать подсчет ответов в тесте на html, не на скрипте javascript, а просто на html. <p>1.Вопрос<br> <input type=radio name=q1 onClick="b1=1"> а) ответ<br> <input type=radio name=q1 onClick="b1=0"> б) ответ2<br> <input type=radio name=q1 onClick="b1=0"> в) ответ3<br> <input type=radio name=q1 onClick="b1=0"> г) ответ4<br> <br> далее такой подсчет не идет, как будет правильно? <input type=button value="Ответить" Onclick="alert('Количество правильных ответов: '+(b1+b2+b3))";

Похожие темы
Тема	Автор	Раздел	Ответов	Последнее сообщение
GroupBox подсчет ответов	manchester_alan	Общие вопросы Delphi	3	14.05.2015 19:47
доработать программу. подсчет всех слов, длиннее заданного в произвольном тесте на языке СИ.	andreiboly4ev	Помощь студентам	1	13.04.2015 18:16
PHP БД подсчет правильных и не правильных ответов в тесте	beginner@	PHP	6	14.05.2014 11:18
Валюсь на 3-м тесте	nowhow	Общие вопросы C/C++	0	08.06.2013 23:40