БлогNot. Как сделать простой тест на JavaScript, с ответами "да" или "нет" и подсчетом ба...

Как сделать простой тест на JavaScript, с ответами "да" или "нет" и подсчетом баллов

Ответ на заданный вопрос...

На самом деле все ответы есть на моем сайте по следующим ссылкам:

 Архив с обучающей статьей и примерами по JavaScript

 Раздел по JavaScript с множеством доступных для скачивания архивов

Приведу здесь пример с комментариями именно для теста на JavaScript.

Нужно отдавать себе отчет, что грамотный пользователь легко может узнать правильные ответы из текста скрипта. Чуть усложнить эту задачу, но отнюдь не сделать ее невозможной, может размещение кода JavaScript в отдельном файле (например, script.js) с последующим вызовом его таким тегом:

<script type="text/javascript" src="script.js"></script>

Этим тегом в файле *.html заменяется все содержимое имеющегося тега <script> вместе с самим тегом, а в файл script.js переносится только программа на JavaScript без тега и комментариев <!-- ... // -->

Ниже приводится листинг-шаблон теста в одном файле с коментариями. Все данные теста (баллы, границы баллов, выводы), на самом деле было бы удобней тоже хранить в скрипте в виде массивов.

 Более простое и современное решение - по ссылке

<html>
<head>
<title>Сюда ввести название теста</title>
<style type="text/css"><!--
 P {  text-align: justify; }
 A {  text-decoration: none; }
--> </style>
<meta http-equiv="content-type" content="text/html; charset=windows-1251">
</head>
<body BGCOLOR="#000000" TEXT="#CCCCFF" LINK="#00CCFF" ALINK="#FFCC00"  VLINK="#FF00FF">

<center>
<h2><font color="#A0A0A0">Сюда ввести название теста</font></h2>
</center>

<table width=100% border=0 cellpadding=5 cellspacing=0>
<tr><td align=left>
 <p> Сюда ввести Введение к тесту
</td></tr></table>

<hr width=100% size=1>

<form name=Q action="" method=post>
<table width=100% border=0 cellpadding=0 cellspacing=0>
 <!-- Число вопросов в тесте определено в переменной qCnt ниже! -->
 <tr> <!-- Строка для вопроса 1 -->
  <td width=5% align=center valign=center>
   <input type=checkbox name=q1>
  </td>
  <td align=left valign=top>
    Текст вопроса 1
  </td>
 </tr>

 <tr> <!-- Строка для вопроса 2 -->
  <td width=5% align=center valign=center>
   <input type=checkbox name=q2>
  </td>
  <td align=left valign=top>
   Текст вопроса 2
  </td>
 </tr>

 <tr> <!-- Строка для вопроса 3 -->
  <td width=5% align=center valign=center>
   <input type=checkbox name=q3>
  </td>
  <td align=left valign=top>
   Текст вопроса 3
  </td>
 </tr>

 <!-- и так далее -->

</table>
</form>

<form name=Y action="" method=post>
 <!-- Число полей, описанных ниже, тоже должно быть равно числу вопросов --> 
 <!-- Баллы за ответы Да на каждый вопрос -->
 <input type=hidden name=y1 value="3">
 <input type=hidden name=y2 value="4">
 <input type=hidden name=y3 value="3">
</form>

<form name=N action="" method=post>
  <!-- Число полей, описанных ниже, тоже должно быть равно числу вопросов --> 
  <!-- Баллы за ответы Нет на каждый вопрос -->
  <input type=hidden name=n1 value="0">
  <input type=hidden name=n2 value="1">
  <input type=hidden name=n3 value="1">
</form>

<!-- Число вариантов вывода определено в переменной dCnt ниже! --> 
<!-- Число форм, описанных ниже, должно быть равно числу вариантов вывода --> 

<!-- Нижние границы баллов для каждого вывода -->  
<form name=L action="" method=post>
 <input type=hidden name=l1 value="0">
 <input type=hidden name=l2 value="6">
</form>

<!-- Верхние границы баллов для каждого вывода -->  
<form name=H action="" method=post>
 <input type=hidden name=h1 value="5">
 <input type=hidden name=h2 value="10">
</form>

<!-- и так далее -->  

<form name=D action="" method=post>
 <!-- Число вариантов вывода определено в переменной dCnt ниже! -->
 <input type=hidden name=d1 value="Сюда ввести первый вариант вывода">
 <input type=hidden name=d2 value="Сюда ввести второй вариант вывода">
 <!-- и так далее -->
</form>

<script type="text/javascript">
<!--
qCnt = 3; // Здесь должно быть число вопросов!
dCnt = 2; // Здесь должно быть число вариантов вывода!

function clearForm() { //Очистка формы
 if(window.confirm("Очисить форму?")) {
  for(i=0; i<qCnt; i++) {
   document.Q.elements[i].checked = false;
  }
  document.C.tDiagnosis.value = "";
 }
}

function makeDiagnosis() { //Сгенерировать вывод по тесту
 summa = 0;
 for(i=0; i<qCnt; i++) {
  if(document.Q.elements[i].checked) {
   summa += eval(document.Y.elements[i].value);
  } else {
   summa += eval(document.N.elements[i].value);
  }
 }
 document.C.tDiagnosis.value = "";
 for(i=0; i<dCnt; i++) {
  if( summa>=eval(document.L.elements[i].value) && summa<=eval(document.H.elements[i].value) ) {
   document.C.tDiagnosis.value = document.D.elements[i].value;
   return 0;
  }
 }
 document.C.tDiagnosis.value = "Ошибка автора теста:\nнет диагностики для суммы баллов "+summa+"!";
 return 0;
}
// -->
</script>

<!-- Форма для вывода результатов: -->
<form name=C action="" method=post>
 <center>
 <input type=button name=pbSubmit value="Ответить" onClick="makeDiagnosis()">
 <input type=button name=pbReset value="Очистить" onClick="clearForm()">
 <br><br>
 <textarea name=tDiagnosis rows=8 cols=72 wrap></textarea>
</form>

<hr width=100% size=1>

<table width=100% border=0>
 <tr>
  <td align=left>
   Автор теста: Имя <A HREF="maito:EMAIL_ADDRESS">EMAIL_ADDRESS</A>
  </td>
  <td align=right>
   Техническая поддержка: Имя <A HREF="maito:EMAIL_ADDRESS">EMAIL_ADDRESS</A>
  </td>
 </tr>
</table>

</body>
</html>

05.02.2009, 10:29 [31194 просмотра]


теги: javascript программирование тест

показать комментарии (1)