Тесты по гиперссылкам в html. Тесты на знание Web-технологий. Визуальное оформление программы тестирования

Сами по себе таблицы выглядят довольно «бедно», к тому же браузеры по-своему отображают некоторые характеристики таблиц, в частности, рамки. Вместе с тем эти недостатки легко исправить воспользовавшись мощью стилей. При этом весьма расширяются средства по оформлению таблиц, что позволяет удачно вписать таблицы в дизайн сайта и нагляднее представить табличные данные.

Цвет фона ячеек

Цвет фона одновременно всех ячеек таблицы устанавливается через свойство background , которое применяется к селектору TABLE . При этом следует помнить о правилах использования стилей, в частности, наследовании свойств элементов. Хотя свойство background не наследуется, для ячеек значением фона по умолчанию выступает transparent , т.е. прозрачность, поэтому эффект заливки фона получается и у ячеек. Если одновременно с TABLE задать цвет у селектора TD или TH , то этот цвет будет установлен в качестве фона ячейки (пример 2.3).

Пример 2.3. Цвет фона

Таблицы table { background: maroon; /* Цвет фона таблицы */ color: white; /* Цвет текста */ } td { background: navy; /* Цвет фона ячеек */ }

Заголовок 1Заголовок 2

Ячейка 3	Ячейка 4

В данном примере получим синий цвет фона у ячеек (тег ) и красный у заголовка (тег ). Это связано с тем, что стиль для селектора TH не определен, поэтому «просвечивается» фон родителя, в данном случае, селектора TABLE . А цвет для селектора TD указан явно, вот ячейки и «заливаются» синим цветом.

Результат данного примера показан на рис. 2.4.

Рис. 2.4. Изменение цвета фона

Поля внутри ячеек

Полем называется расстояние между краем содержимого ячейки и её границей. Обычно для этой цели применяется атрибут cellpadding тега

. Он определяет значение поля в пикселах со всех сторон ячейки. Допускается использовать стилевое свойство padding , добавляя его к селектору TD , как показано в примере 2.4.

Пример 2.4. Поля в таблицах

XHTML 1.0 CSS 2.1 IE Cr Op Sa Fx

Таблицы TABLE { background: white; /* Цвет фона таблицы */ color: white; /* Цвет текста */ } TD, TH { background: maroon; /* Цвет фона ячеек */ padding: 5px; /* Поля вокруг текста */ }

Заголовок 1Заголовок 2

Ячейка 3	Ячейка 4

В данном примере с помощью группирования селекторов поля установлены одновременно для селектора TD и TH . Результат примера показан на рис. 2.5.

Рис. 2.5. Поля в ячейках

Если применяется стилевое свойство padding для ячеек таблицы, то действие атрибута cellpadding тега

игнорируется.

Расстояние между ячейками

Для изменения расстояния между ячейками применяется атрибут cellspacing тега

. Влияние этого атрибута хорошо заметно при использовании границ вокруг ячеек или при заливке ячеек цветом, который выделяется на фоне страницы. В качестве замены cellspacing выступает стилевое свойство border-spacing , оно устанавливает расстояние между границами ячеек. Одно значение устанавливает одновременно расстояние по вертикали и горизонтали между границами ячеек. Если значений у этого свойства два, то первое определяет горизонтальное расстояние (т.е. слева и справа от ячейки), а второе - вертикальное (сверху и снизу).

Свойство border-spacing действует только в том случае, если для селектора TABLE не задано свойство border-collapse со значением collapse (пример 2.5).

Пример 2.5. Расстояние между границами ячеек

XHTML 1.0 CSS 2.1 IE 7 IE 8+ Cr Op Sa Fx

Замена cellspacing TABLE { width: 100%; /* Ширина таблицы */ border: 1px solid #399; /* Граница вокруг таблицы */ border-spacing: 7px 5px; /* Расстояние между границ */ } TD { background: #fc0; /* Цвет фона */ border: 1px solid #333; /* Граница вокруг ячеек */ padding: 5px; /* Поля в ячейках */ }

Леонардо	5	8
Рафаэль	4	11
Микеланджело	24	9
Донателло	2	13

Результат данного примера показан на рис. 2.6.

Рис. 2.6. Вид таблицы при использовании border-spacing

Браузер Internet Explorer до седьмой версии включительно не поддерживает свойство border-spacing , поэтому в этом браузере для таблиц будет применяться значение cellspacing заданное по умолчанию (обычно оно равно 2px).

При добавлении к селектору TABLE свойства border-collapse со значением collapse , атрибут cellspacing игнорируется, а значение border-spacing обнуляется.

Границы и рамки

По умолчанию границы в таблице изначально нет, а её добавление происходит с помощью атрибута border тега

. Браузеры по-разному отображают такую границу, поэтому лучше не указывать этот атрибут вообще, а рисование границ возложить на стили. Рассмотрим два метода, непосредственно связанных со стилями.

Использование атрибута cellspacing

Известно, что атрибут cellspacing тега

задаёт расстояние между ячейками таблицы. Если используется разный цвет фона таблицы и ячеек, то между ячейками возникнет сетка линий, цвет которых совпадает с цветом таблицы, а толщина равна значению атрибута cellspacing в пикселах. В вышеприведенном выше примере 2.3 этот эффект показан, поэтому повторять его не буду.

Заметим, что это не совсем удобный способ создания границ, поскольку он имеет ограниченную область применения. Так можно получить только одноцветную сетку, а не вертикальные или горизонтальные линии в нужных местах.

Применение свойства border

Стилевое свойство border одновременно устанавливает цвет границы, её стиль и толщину вокруг элемента. Когда требуется создать отдельные линии на разных сторонах, лучше использовать производные — border-left , border-right , border-top и border-bottom , эти свойства соответственно определяют границу слева, справа, сверху и снизу.

Применяя свойство border к селектору TABLE , мы добавляем рамку вокруг таблицы в целом, а к селектору TD или TH — рамку вокруг ячеек (пример 2.6).

Пример 2.6. Добавление двойной рамки

XHTML 1.0 CSS 2.1 IE Cr Op Sa Fx

Таблицы TABLE { background: #dc0; /* Цвет фона таблицы */ border: 5px double #000; /* Рамка вокруг таблицы */ } TD, TH { padding: 5px; /* Поля вокруг текста */ border: 1px solid #fff; /* Рамка вокруг ячеек */ }

Заголовок 1Заголовок 2

Ячейка 3	Ячейка 4

В данном примере используется двойная рамка черного цвета вокруг самой таблицы и сплошная рамка белого цвета вокруг каждой ячейки. Результат примера показан на рис. 2.7.

Рис. 2.7. Граница вокруг таблицы и ячеек

Обратите внимание, что в месте состыковки ячеек образуются двойные линии. Они получаются опять же за счет действия атрибута cellspacing тега

. Хотя в коде примера этот атрибут нигде не фигурирует, браузер использует его по умолчанию. Если задать , то получим не двойные, а одинарные линии, но удвоенной толщины. Для изменения указанной особенности применяется стилевое свойство border-collapse со значением collapse , которое добавляется к селектору TABLE (пример 2.7).

Пример 2.7. Создание одинарной рамки

XHTML 1.0 CSS 2.1 IE Cr Op Sa Fx

Таблицы TABLE { border-collapse: collapse; /* Убираем двойные границы между ячейками */ background: #dc0; /* Цвет фона таблицы */ border: 4px solid #000; /* Рамка вокруг таблицы */ } TD, TH { padding: 5px; /* Поля вокруг текста */ border: 2px solid green; /* Рамка вокруг ячеек */ }

Заголовок 1Заголовок 2

Ячейка 3	Ячейка 4

В данном примере создается сплошная линия зеленого цвета между ячейками и черная вокруг таблицы. Все границы внутри таблицы имеют одинаковую толщину. Результат примера показан на рис. 2.8.

Рис. 2.8. Граница вокруг таблицы

Выравнивание содержимого ячеек

По умолчанию текст в ячейке таблицы выравнивается по левому краю. Исключением из этого правила служит тег , он определяет заголовок, в котором выравнивание происходит по центру. Чтобы изменить способ выравнивания применяется стилевое свойство text-align (пример 2.8).

Пример 2.8. Выравнивание содержимого ячеек по горизонтали

XHTML 1.0 CSS 2.1 IE Cr Op Sa Fx

Таблицы TABLE { border-collapse: collapse; /* Убираем двойные линии между ячейками */ width: 300px; /* Ширина таблицы */ } TH { background: #fc0; /* Цвет фона ячейки */ text-align: left; /* Выравнивание по левому краю */ } TD { background: #fff; /* Цвет фона ячеек */ text-align: center; /* Выравнивание по центру */ } TH, TD { border: 1px solid black; /* Параметры рамки */ padding: 4px; /* Поля вокруг текста */ }

Заголовок 1Заголовок 2

Ячейка 1	Ячейка 2
Ячейка 3	Ячейка 4

В данном примере содержимое тега выравнивается по левому краю, а содержимое тега — по центру. Результат примера показан ниже (рис. 2.9).

Рис. 2.9. Выравнивание текста в ячейках

Выравнивание по вертикали в ячейке всегда происходит по её центру, если это не оговорено особо. Это не всегда удобно, особенно для таблиц, у которых содержимое ячеек различается по высоте. В таком случае выравнивание устанавливают по верхнему краю ячейки с помощью свойства vertical-align , как показано в примере 2.9.

Пример 2.9. Выравнивание содержимого ячеек по вертикали

XHTML 1.0 CSS 2.1 IE Cr Op Sa Fx

Таблицы TABLE { border-collapse: collapse; /* Убираем двойные линии между ячейками */ width: 300px; /* Ширина таблицы */ } TH, TD { border: 1px solid black; /* Параметры рамки */ text-align: center; /* Выравнивание по центру */ padding: 4px; /* Поля вокруг текста */ } TH { background: #fc0; /* Цвет фона ячейки */ height: 40px; /* Высота ячеек */ vertical-align: bottom; /* Выравнивание по нижнему краю */ padding: 0; /* Убираем поля вокруг текста */ }

Заголовок 1Заголовок 2

Ячейка 1	Ячейка 2

В данном примере устанавливается высота заголовка как 40 пикселов и выравнивание текста происходит по нижнему краю. Результат примера показан на рис. 2.10.

Рис. 2.10. Выравнивание текста в ячейках

Пустые ячейки

Браузеры иначе отображают ячейку, внутри которой ничего нет. «Ничего» в данном случае означает, что внутрь ячейки не добавили ни рисунок, ни текст, причём пробел в расчёт не принимается. Естественно, вид ячеек различается только в том случае, если вокруг них установлена граница. При использовании невидимой рамки, вид ячеек, независимо от того, есть в них что-нибудь или нет, совпадает.

Старые браузеры не отображали цвет фона пустых ячеек вида , поэтому в том случае, когда требовалось оставить ячейку без содержимого, но отобразить цвет фона, внутрь ячейки добавляли неразделяемый пробел (). Пробел не всегда подходит, особенно когда нужно установить высоту ячейки 1–2 пиксела, из-за чего широкое распространение получил однопиксельный прозрачный рисунок. Действительно, такой рисунок можно масштабировать на свое усмотрение, но он на веб-странице никак не отображается.

К счастью эпоха однопиксельных рисунков и всяческих распорок на их основе прошла. Браузеры достаточно корректно работают с таблицами и без присутствия содержимого ячеек.

Для управления видом пустых ячеек используется свойство empty-cells , при значении hide граница и фон в пустых ячейках не отображается. Если все ячейки в строке пустые, то строка прячется целиком. Ячейка считается пустой в следующих случаях:

• нет вообще никаких символов;
• в ячейке содержится только перевод строки, символ табуляции или пробел;
• значение visibility установлено как hidden .

Добавление неразрывного пробела воспринимается как видимое содержание, т.е. ячейка уже будет не пустой (пример 2.10).

Пример 2.10. Пустые ячейки

XHTML 1.0 CSS 2.1 IE Cr Op Sa Fx

Использование empty-cells TABLE { border: 4px double #399; /* Граница вокруг таблицы */ } TD { background: #fc0; /* Цвет фона */ border: 1px solid #333; /* Граница вокруг ячеек */ empty-cells: hide; /* Прячем пустые ячейки */ padding: 5px; /* Поля в ячейках */ }

Леонардо	5	8
Рафаэль		11
Микеланджело	24
Донателло		13

Вид таблицы в браузере Safari показан на рис. 2.11а. Та же таблица в браузере IE7 продемонстрирована на рис. 2.11б.

а. В браузере Safari, Firefox, Opera, IE8, IE9

б. В браузере IE7

Рис. 2.11. Вид таблицы с пустыми ячейками

В статье описывается последовательное создание учебного теста. Если вы не хотите читать о программировании, то сразу переходите в раздел с инструкциями по изменению теста и его загрузки.

Создание простого теста

Развитие информационных технологий и дистанционного образования приводит к необходимости создания электронных учебных тестов. Многие учителя и преподаватели сталкиваются с проблемой создания учебных тестов. Главная сложность решения данной задачи в том, что при создании таких электронным материалов требуется знание HTML и jаvascript.

Как решить эту проблему. Учитель может воспользоваться онлайн конструктором тестов или же попытаться создать тест самостоятельно на основе использования шаблона. Именно второй вариант мы рассмотрим в данной статье.

Мы сформируем простой шаблон, который можно будет потом размножить на несколько файлов и каждый превратить в отдельный тест.

Допустим имеется несложный математический тест, состоящий из нескольких задач по математике:

4*12 +7 =

7-8*2 =

34*2 + 17 =

Примеры нужно вывести на экран и дать ученику возможность ввести ответ, дальше сравнить ответ с правильным и показать ученику процент правильно выполненного задания.

Сначала создадим HTML код задач:

4*12 + 7 =

7-8*2 =

34*2 + 17 =

Проверить

Напротив каждой задачи учебного теста мы подставили поле для ввода текста. Подробнее о различных полях в HTML читайте в статье по ссылке. В конце мы добавили кнопку, при нажатии на которую должна произойти проверка того, что набрал ученик в ответах текста.

Обратите внимание на идентификаторы “z_1”,”z_2” и “z_3”. Если вам нужно добавить задачу 4, то нужно просто скопировать последнюю строку с задачей, заменить условие и в поле идентификатора написать “z_4”.

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

На следующем этапе нужно создать jаvascript код, который сравнит то, что набрал ученик с правильными ответами и подсчитает процент выполнения задач.

pr_otv_zadachi_1 = 55;
pr_otv_zadachi_2 = -9;
pr_otv_zadachi_3 = 85;

Первые три строки будут содержать правильные ответы. Четвертая и последующие задачи в тест добавляются путем копирования последней строки с ответом, подстановки числа 4 вместо 3 и указанием правильного ответа.

Теперь нужно узнать то, что ввел ученик в ответах. Для этого используем следующий код.

otv_uch_1 = document.getElementById(‘z_1’).value;
otv_uch_2 = document.getElementById(‘z_2’).value;
otv_uch_3 = document.getElementById(‘z_3’).value;

Четвертая задача будет означать новую строку с заменой цифр 3 на 4.

ball = 0;
ball +=1;
}
ball +=1;
}
ball +=1;
}

Для добавления задачи 4 вам потребуется скопировать последние три строки и заменить цифры в них на 4.

vsego_zadach = 3

В этой строке мы указываем сколько всего задач в учебном тесте. Если вы добавили еще, то нужно исправить эту цифру.

Затем нужно вывести ответ на экран.

document.getElementById(‘rezultat’).innerHTML = “Задания выполнены верно на ”+procent_vip+”%.”;

Вот и все. Теперь объединим весь код в одну HTML страницу.

Тест из нескольких задач по математике

p {
font-size:24px;
}
input {
font-size:24px;
}

Выполните задания теста:

4*12 + 7 =

7-8*2 =

34*2 + 17 =

Проверить


function proverit(){
pr_otv_zadachi_1 = 55;
pr_otv_zadachi_2 = -9;
pr_otv_zadachi_3 = 85;
otv_uch_1 = document.getElementById("z_1").value;
otv_uch_2 = document.getElementById("z_2").value;
otv_uch_3 = document.getElementById("z_3").value;
ball = 0;
if(otv_uch_1 == pr_otv_zadachi_1){
ball +=1;
}
if(otv_uch_2 == pr_otv_zadachi_2){
ball +=1;
}
if(otv_uch_3 == pr_otv_zadachi_3){
ball +=1;
}
vsego_zadach = 3;
procent_vip = ball/vsego_zadach * 100;
document.getElementById("rezultat").innerHTML = "Задания выполнены верно на "+procent_vip+"%.";
}

Вот и весь код учебного теста с ответами на HTML. Ниже вы можете скачать этот файл. Используйте данную инструкцию для того, чтобы увеличить или уменьшить количество задач.

Скачать шаблон теста. Простой вариант

Скачать файл: (cкачиваний: 593)

Ниже вы можете скачать расширенную версию теста. Разделение вопросов теста. Добавление кнопки "Следующий вопрос"

Нам нужно сделать так, чтобы единовременно отображался только один вопрос. А для переключения к следующему вопросу нужно было нажать кнопку "Следующий вопрос".

Для этого добавим каждый вопрос и поле для ответа в отдельные блоки div. Причем для второго и третьего вопросов добавим параметр "display:none" для того, чтобы их скрыть. Для первого указываем параметр "display:block". И для каждого блока подпишем номера вопросов.

Вопрос 1

4*12 + 7 =

Вопрос 2

7-8*2 =

Вопрос 3

34*2 + 17 =

Также добавим код кнопки "Следующий вопрос".

Следующий вопрос

Function sled_vopr(){ if(document.getElementById("vopros2").style.display == "block"){ document.getElementById("vopros2").style.display = "none"; document.getElementById("vopros3").style.display = "block"; document.getElementById("kn_sl").style.display = "none"; document.getElementById("kn_pr").style.display = "block"; } if(document.getElementById("vopros1").style.display == "block"){ document.getElementById("vopros1").style.display = "none"; document.getElementById("vopros2").style.display = "block"; } }

В первом условии мы проверяем отображается ли второй вопрос, если да, то его нужно скрыть и отобразить третий вопрос и также нужно скрыть саму кнопку переключения между вопросами теста и показать кнопку "Проверить" так как этот вопрос последний. Во втором условии мы проверяем отображается ли первый вопрос теста. Если это так, то нужно его скрыть и показать второй вопрос.

В итоге наш тест выглядит так:

Но в этом варианте добавить новые вопросы в тест будет уже сложнее.

Перенос вопросов и ответов теста в отдельный файл JаvaScript

Для того, чтобы заменить вопросы было проще нужно перенести их и ответы в отдельный файл. Тогда не придется искать эти данные в основном файле. Если вы не программист, то такой поиск будет непростым. Итак мы создаем новый файл data.js и подключаем его к основному html файлу нашего теста. Далее добавляем в него несколько переменных с вопросами и несколько с ответами (с ответами мы переносим из основного файла).

Vopros_1 = "4*12 + 7 = "; vopros_2 = "7-8*2 = "; vopros_3 = "34*2 + 17 = "; pr_otv_zadachi_1 = 55; pr_otv_zadachi_2 = -9; pr_otv_zadachi_3 = 85;

Вопрос 1

Вопрос 2

Вопрос 3

И прописываем jаvascript код постановки текста вопросов из переменных после загрузки страницы.

Document.addEventListener("DOMContentLoaded", function(){ document.getElementById("v_1").innerHTML = vopros_1; document.getElementById("v_2").innerHTML = vopros_2; document.getElementById("v_3").innerHTML = vopros_3; });

Вот и все. Теперь, для того, чтобы заменить текст вопросов теста и ответы к нему вам потребуется лишь отредактировать файл data.js. Аналогично добавим название теста:

Var test = "Умножение";

Шифрование ответов теста

В программе учебного теста, которая у нас получилась есть один недочет. Если учащийся откроет файл "data.js", то он увидит не только тексты вопросов, но и ответы. Поэтому нам нужно зашифровать ответы, чтобы учащийся не смог узнать их.

Для этого используем функцию kodirov. Она выглядит следующим образом:

Function kodirov(stroka) { var b64ch = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefg"+ "hijklmnopqrstuvwxyz0123456789+/="; var b64enc = ""; var ch1, ch2, ch3; var en1, en2, en3, en4; for (var i=0; i> 2; en2 = ((ch1 & 3) > >

Аналогично шифруем второй и третий вопросы. После шифрования содержимое файла data.js выглядит следующим образом:

Var vopros_1 = "4*12 + 7 = "; var vopros_2 = "7-8*2 = "; var vopros_3 = "34*2 + 17 = "; var pr_otv_zadachi_1 = "NTU="; var pr_otv_zadachi_2 = "LTk="; var pr_otv_zadachi_3 = "ODU=";

Как видите, ответы зашифрованы и представляют собой набор символов.

В основном файле нужно перед проверкой зашифровывать то, что написал учащийся.

Otv_uch_1 = document.getElementById("z_1").value; otv_uch_1 = kodirov(otv_uch_1); otv_uch_2 = document.getElementById("z_2").value; otv_uch_2 = kodirov(otv_uch_2); otv_uch_3 = document.getElementById("z_3").value; otv_uch_3 = kodirov(otv_uch_3);

В результате программа проверяет зашифрованные ответы и учащийся не может узнать ответы к вопросам учебного теста.

Вывод результата ответа на каждый вопрос

Наш учебный тест выводит общий результат в процентах. Сделаем так, чтобы еще выводились результаты по каждому вопросу в отдельности. Таким образом можно будет проводить более подробный анализ выполнения теста учащимся.

Для этого нужно модифицировать функцию проверки ответов учащегося.

Function proverit(){ otv_uch_1 = document.getElementById("z_1").value; otv_ucgenika_1 = otv_uch_1; otv_uch_1 = kodirov(otv_uch_1); otv_uch_2 = document.getElementById("z_2").value; otv_ucgenika_2 = otv_uch_2; otv_uch_2 = kodirov(otv_uch_2); otv_uch_3 = document.getElementById("z_3").value; otv_ucgenika_3 = otv_uch_3; otv_uch_3 = kodirov(otv_uch_3); ball = 0; if(otv_uch_1 == pr_otv_zadachi_1){ ball +=1; otveti = "Вопрос 1. Вы ответили верно. Ваш ответ:"+otv_ucgenika_1; } else { otveti = "Вопрос 1. Вы ответили не верно. Ваш ответ:"+otv_ucgenika_1; } if(otv_uch_2 == pr_otv_zadachi_2){ ball +=1; otveti += "
Вопрос 2. Вы ответили верно. Ваш ответ:"+otv_ucgenika_2; } else { otveti += "
Вопрос 2. Вы ответили не верно. Ваш ответ:"+otv_ucgenika_2; } if(otv_uch_3 == pr_otv_zadachi_3){ ball +=1; otveti += "
Вопрос 3. Вы ответили верно. Ваш ответ:"+otv_ucgenika_3; } else { otveti += "
Вопрос 3. Вы ответили не верно. Ваш ответ:"+otv_ucgenika_3; } vsego_zadach = 3; procent_vip = ball/vsego_zadach * 100; document.getElementById("rezultat").innerHTML = "Задания выполнены верно на "+procent_vip+"%.

"+otveti; }

В результате модификации данной функции выводится верно ли ответил учащийся, а также выводится на экран его ответ. Учитель может сравнить ответ ученика с правильным, а также проанализировать учебную работу.

Таким образом, мы получили полноценный учебный тест, который можно использовать в своей учебной деятельности. Для большего удобства я переместил файл data.js в отдельную папку. Отредактировать файл data.js можно в любом текстовом редакторе, например, "Блокнот".

После последних модификаций, увеличения шрифтов, добавления цвета к ответам получаем следующий полный исходный код html файла:

Тест p, span, input { font-size:24px; } button{ font-size:18px; } #vo { color:green; } #nvo { color:red; } #ot { color:blue; }

Тест. Тема. .

Вопрос 1

Вопрос 2

Вопрос 3

Следующий вопрос Проверить document.addEventListener("DOMContentLoaded", function(){ document.getElementById("v_1").innerHTML = vopros_1; document.getElementById("v_2").innerHTML = vopros_2; document.getElementById("v_3").innerHTML = vopros_3; document.getElementById("tema").innerHTML = test; }); function sled_vopr(){ if(document.getElementById("vopros2").style.display == "block"){ document.getElementById("vopros2").style.display = "none"; document.getElementById("vopros3").style.display = "block"; document.getElementById("kn_sl").style.display = "none"; document.getElementById("kn_pr").style.display = "block"; } if(document.getElementById("vopros1").style.display == "block"){ document.getElementById("vopros1").style.display = "none"; document.getElementById("vopros2").style.display = "block"; } } function proverit(){ otv_uch_1 = document.getElementById("z_1").value; otv_ucgenika_1 = otv_uch_1; otv_uch_1 = kodirov(otv_uch_1); otv_uch_2 = document.getElementById("z_2").value; otv_ucgenika_2 = otv_uch_2; otv_uch_2 = kodirov(otv_uch_2); otv_uch_3 = document.getElementById("z_3").value; otv_ucgenika_3 = otv_uch_3; otv_uch_3 = kodirov(otv_uch_3); ball = 0; document.getElementById("vopros3").style.display = "none"; document.getElementById("kn_pr").style.display = "none"; if(otv_uch_1 == pr_otv_zadachi_1){ ball +=1; otveti = "Вопрос 1. Вы ответили верно. Ваш ответ: "+otv_ucgenika_1+""; } else { otveti = "Вопрос 1. Вы ответили не верно. Ваш ответ: "+otv_ucgenika_1+""; } if(otv_uch_2 == pr_otv_zadachi_2){ ball +=1; otveti += "
Вопрос 2. Вы ответили верно. Ваш ответ: "+otv_ucgenika_2+""; } else { otveti += "
Вопрос 2. Вы ответили не верно. Ваш ответ: "+otv_ucgenika_2+""; } if(otv_uch_3 == pr_otv_zadachi_3){ ball +=1; otveti += "
Вопрос 3. Вы ответили верно. Ваш ответ: "+otv_ucgenika_3+""; } else { otveti += "
Вопрос 3. Вы ответили не верно. Ваш ответ: "+otv_ucgenika_3+""; } vsego_zadach = 3; procent_vip = ball/vsego_zadach * 100; procent_vip = procent_vip.toFixed(); document.getElementById("rezultat").innerHTML = "Задания выполнены верно на "+procent_vip+"%.

"+otveti; } function kodirov(stroka) { var b64ch = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefg"+ "hijklmnopqrstuvwxyz0123456789+/="; var b64enc = ""; var ch1, ch2, ch3; var en1, en2, en3, en4; for (var i=0; i> 2; en2 = ((ch1 & 3) > 4); en3 = isNaN(ch2) ? 64:(((ch2 & 15) > 6)); en4 = isNaN(ch3) ? 64:(ch3 & 63); b64enc += b64ch.charAt(en1) + b64ch.charAt(en2) + b64ch.charAt(en3) + b64ch.charAt(en4); } return b64enc; }

Результат выполнения теста с ошибкой в третьей задаче показан на рисунке ниже. Также я добавил функцию округления процента выполнения задач "toFixed()".

Ниже вы можете скачать данную программу.

Скачать шаблон теста

Скачать файл: (cкачиваний: 93)
Скачать файл: (cкачиваний: 102)
Скачать файл: (cкачиваний: 120)

Закодировать ответы для теста вы можете на нашем сайте.

Добавление изображений к вопросам теста

Естественно, что кл многим вопросам при создании теста необходимо добавление изображений. Часто нужно добавить изображение вместо текста вопроса. Реализуем данную возможность также через файл data.js. Я буду редактировать самый большой тест из 15 вопросов. Итак, я для каждого вопроса добавлю отдельную переменную и указываю в ней: если изображение есть, то - "да", иначе - "нет".

Var vopros_ris_1 = "да"; var vopros_ris_2 = "нет"; var vopros_ris_3 = "нет"; var vopros_ris_4 = "да"; var vopros_ris_5 = "нет"; var vopros_ris_6 = "нет"; var vopros_ris_7 = "да"; var vopros_ris_8 = "нет"; var vopros_ris_9 = "нет"; var vopros_ris_10 = "нет"; var vopros_ris_11 = "нет"; var vopros_ris_12 = "нет"; var vopros_ris_13 = "нет"; var vopros_ris_14 = "нет"; var vopros_ris_15 = "да";

Обращаю ваше внимание на то, что текст вопроса в случае наличия изображения, я полностью убрал.

Var vopros_1 = ""; var vopros_2 = "7-8*2 = "; var vopros_3 = "34*2 + 17 = "; var vopros_4 = ""; var vopros_5 = "36*2 + 4 = "; var vopros_6 = "37*8 + 7 = "; var vopros_7 = ""; var vopros_8 = "39*12 + 19 = "; var vopros_9 = "40*2 + 16 = "; var vopros_10 = "41*4 + 3 = "; var vopros_11 = "42*8 - 7 = "; var vopros_12 = "43*6 - 5 = "; var vopros_13 = "4*62 - 6 = "; var vopros_14 = "45*9 - 9 = "; var vopros_15 = "";

Но вы также можете добавить и изображение и текст вопроса.

В данном случае я указал, что в вопросах под номерами 1,4,7 и 15 будут изображения. Поэтому я должен добавить в папку "data" эти изображение. Их названия должны соответствовать (в т.ч. и содержательно) номерам вопросов: "01.jpg", "04.jpg", "07.jpg" и "15.jpg".

В программный код основного файла я добавил условия, которые проверяют переменные. Если есть ли изображение, то одно подгружается к вопросу теста. Пример такого кода для первого вопроса: if(vopros_ris_1 == "да"){ vopros_1 = "

"+vopros_1; document.getElementById("v_1").innerHTML = vopros_1; } else { document.getElementById("v_1").innerHTML = vopros_1; }

Скачать файл: (cкачиваний: 57)

Перемешиваем вопросы теста в случайном порядке

В случае, когда тест выполняются сразу несколькими учениками в классе, которые сидят рядом я сталкивался с проблемой, когда одни смотрят, что же отвечают другие, сидящие рядом. Это первая причина перемешивания вопросов. Второй является просто создание большого количества вариантов одного и того же теста.

Данные манипуляции несколько усложняют программу. Для этого потребуется создать массив, поместить в него все вопросы, изображения и ответы, а затем перемешать все в случайном порядке.

При этом файл "data.js" я не редактировал.
Так выглядит переменная,в которую помещен массив: voprosi = [,,,,,,,,,,,,,,];

Peremeshat_vse_voprosi(voprosi);

В файл data.js я добавляю новую переменную, в которой можно указать - перемешивать вопросы или нет ("да" или "нет").

Var peremeshat_voprosi = "да";

Пример вывода вопроса в файле html:

Document.getElementById("v_1").innerHTML = voprosi;

Загрузить тест с возможностью перемешивания вопросов вы можете по ссылке ниже.

Так как вопросы перемешиваются, то в результат работы программы я добавил вывод не только ответов учащегося, но и текста вопросов. Все это я объединил в одну таблицу.

Скачать шаблон теста с изображениями

Скачать файл: (cкачиваний: 59)

Визуальное оформление программы тестирования

Все основные функции в тест добавлены. Теперь перейдем к оформлению программы учебного теста. Для сокращения времени работ по оформлению я использую бесплатную библиотеку bootstrap.

Добавлены классы библиотеки и заменены практические все свойства по оформлению как вопросов теста, так и таблицы вывода результата.
Итак, сам тест выглядит следующим образом:

А таблица ответов выглядит следующим образом:

Обратите внимание, что при помощи библиотеки bootstrap я также добавил шкалу, отображающую процентное соотношение верно выполненных задач теста.

Итак, последнюю версию (на данный момент) уже визуально оформленного теста вы можете скачать по ссылке ниже.

Скачать полную версию шаблона теста

Скачать файл: (cкачиваний: 246)

Закодировать ответы для теста вы можете на нашем сайте.