Простейший контрольный тест на JavaScript

В последнее время стало популярным заставлять преподавателей естественных наук делать всевозможные компьютерные тесты. Этот пример поможет вам за 15 минут сделать подобное задание.

Идея в следующем: создается нескольно однотипных страниц с расширением '.html', в которых меняется только содержимое вопросов.

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

Исходный код этого примера:

<style>
    span.quest {font-weight: bold;}
    label {margin-left: 15px;}
    .nav {font-size: 17px;}
</style>
<div style="border: 2px solid blue; padding: 10px; overflow:auto;">
    <div style="display:flex; justify-content: space-between;">
        <a href="#Общий файл с содержанием#" class="nav">Оглавление</a>
        <a href="#Имя предыдущего файла#" class="nav">На предыдущую</a>
    </div>
<script>
// Заголовок страницы (h2)
var title = 'Срез по первому блоку';
// Подзаголовок (h3)
var subtitle = "Этот тест позволяет оценить Ваши знания";
// Это ваши вопросы
var questions=[
{
	text: "Эстетический идеал выступает как:",
	answers: ["тенденция  развития искусства",
		  "тенденция общественного развития",
		  "тенденция правящих групп"],
	correctAnswer: 0 // нумерация ответов с нуля!
},
{
	text: "Эстетические чувства:",
	answers: ["даются человеку от  рождения",
		  "формируются в первые 3-4 года жизни",
		  "наличествуют не  у всех людей, а развиваются индивидуально"],
	correctAnswer: 1
},
{
	text: "Символ есть:",
	answers: ["образ, видоизмененный переживанием",
		  "отражение личных представлений художника",
		  "образ - точная копия окружающей действительности"],
	correctAnswer: 0
}
];

var yourAns = new Array;
var score = 0;

function Engine(question, answer) {yourAns[question]=answer;}

function Score(){
   var answerText = "Результаты:\n";
   for(var i = 0; i < yourAns.length; ++i){
	var num = i+1;
	answerText=answerText+"\n    Вопрос №"+ num +"";
	if(yourAns[i]!=questions[i].correctAnswer){
	    answerText=answerText+"\n    Правильный ответ: " +
		questions[i].answers[questions[i].correctAnswer] + "\n";
	  }
        else{
	    answerText=answerText+": Верно! \n";
	    ++score;
	    }
       }

   answerText=answerText+"\nВсего правильных ответов: "+score+"\n";

   alert(answerText);
   yourAns = [];
   score = 0;
   clearForm("quiz");
}
function clearForm(name) {
   var f = document.forms[name];
   for(var i = 0; i < f.elements.length; ++i) {
	if(f.elements[i].checked)
		f.elements[i].checked = false;
}
}
</script>
<h2><script>document.write(title)</script></h2>
<h3><script>document.write(subtitle)</script></h3>

    <form name="quiz">
    <ol>
        <script>
        for(var q=0; q<questions.length; ++q) {
           var question = questions[q];
           var idx = 1 + q;

           document.writeln('<li><span class="quest">' + question.text + '</span><br>');
           for(var i in question.answers) {
            document.writeln('<label><input type=radio name="q' + idx + '" value="' + i +
            '" onClick="Engine(' + q + ', this.value)"> ' + question.answers[i] + '</label><br>');
        }
            document.writeln('</li>');
        }
        </script>
    </ol>
        <br>
        <input type="button" onClick="Score()" value="Проверить результаты">
    </form>
    <p><a href="#Имя предыдущего файла#" class="nav">На следующую</a></p>
</div>

Вопроc:

Замечательный тест, большое спасибо! Но возник вопрос, как скрыть вопросы и ответы, чтобы после нажатия на кнопку «Проверить» изменить их было нельзя?

Ответ:

Проставить disable всем input-ам ! Но пользователь всегда сможет обновить страницу и опять ответить. Для защиты от этого можно поставить куку, но опять-таки пользователь может очистить куки в браузере. Чтобы полностью защититься от всех возможных вариантов?,нужно делать серверный скрипт на PHP и регистрацию пользователя.