|
|
|
|
Итак,
вы решили создать собственный интерактивный тест в виде Интернет
страницы на основе шаблона. Шаблон содержит 6 вопросов к каждому
из которых предлагается 4 варианта ответов. Как изменять количество
вопросов в статье описано, изменение количества ответов не затрагивается.
Вы должны уметь копировать, сохранять, переименовывать файлы.
Копировать рисунки из документов, изменять их реальный размер
и сохранять в виде файла (при условии, что вы будете использовать
рисунки)
Необходимо понимать, что для изменения инетернет страницы необходимо
открыть ее код (называют HTML код). В этот код внедрена программа,
ее необходимо немного изменить только при условии, что вы изменяете
количество вопросов. Эта задача доступна любому пользователю,
но необходима аккуратность, пунктуальность, эта инструкция и конечно,
ваша природная сообразительность. Приступим:
I – Подготовительный этап
1. Cохраните шаблон (Сохранить)
и эту страницу на своем компьютере. ( Теперь можно выйти из сети,
и запустить эту инструкцию в режиме автономного просмотра).
2. Подготовьте тест который будете превращать в электронный. Наверняка
у вас уже имеется такой напечатанный в любом редакторе например
в MS Word.
3. Создайте в удобном для вас месте папку и назовите ее как вам
удобно (ФизТест10вар1 и т.п.)
4. Скопируйте в эту папку распакованный шаблон (zagotovka.html)
и при необходимости рисунки к тесту. (Напоминаю, что формулы в
MS Word являются рисунками.
5. Имена рисунков лучше задавать латинскими буквами и короткими
именами например ris2-1.gif
6. Проверьте работоспособность шаблона, запустив его и разрешив
заблокированное содержимое. На все вопросы поставьте первый ответ.
Вы получите оценку отлично.
II
Получаем тест из шести вопросов без рисунков.
1.
Не закрывая этой страницы запустите (если закрыли) шаблон. В меню
Internet Explorer в окне с шаблоном дайте команду Вид-Просмотр
HTML-кода.
2. Откроется текст кода в программе Блокнот.
3. Измените текст этого кода (непосредственно Блокноте) в соответствии
с образцом приведенном ниже. В образце, выделенный зеленым цветом
текст показывает где именно необходимо изменять, (смысл надписей
говорит сам за себя)
4. Найдите выделенный зеленым цветом текст «111111» он идет после
команды var res=, и поставьте последовательность правильных ответов.
5. Коричневым цветом выделены комментарии к коду, они не влияют
на работу и не отображаются на экране.
6. Сохраните в блокноте файл в подготовленную папку с рисунками
выбрав при сохранении Тип файлов «Все Файлы» имя задайте любое
(лучше латинскими буквами) и задайте расширение файла html (после
имени файла поставьте точку и наберите html Например test1.html)
Это необходимо чтобы шаблон zagotowka.html не изменился.
7. Проверьте на работоспособность ваш тест.
Образец:
<!DOCTYPE
HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<!-- saved from url=(0038)http://www.junior.ru/wwwexam/t_gig.htm
--><HTML><HEAD><TITLE>Текст
в заголовке браузера</TITLE>
<META http-equiv=Content-Type content="text/html; charset=windows-1251">
<META content="Автор"
name=Author>
<SCRIPT language=JavaScript>
<!-- hide
var
scrtxt = "Бегущая строка"
; var length = scrtxt.length;
var width = 100;
var pos = -(width + 2);
function
scroll() {
pos++;
var scroller = "";
if (pos == length)
{
pos = -(width + 2);
}
if (pos < 0) {
for (var i = 1; i <= Math.abs(pos); i++)
{
scroller = scroller+" ";}
scroller = scroller + scrtxt.substring(0, width - i + 1);
}
else {
scroller = scroller + scrtxt.substring(pos, width + pos);
}
window.status = scroller;
setTimeout("scroll()", 100);
}
// -->
</SCRIPT>
<META
content="MSHTML 6.00.2800.1106" name=GENERATOR></HEAD>
<BODY bgColor=white onload=scroll()>
<SCRIPT language=JavaScript><!--Начало
сценария
var res="111111"
function check_me()
<!--вместо "111111" нужно вставить
последовательность правильных ответов
{
var count=0
with(document.test)
{if (!Q1[0].checked&&!Q1[1].checked&&!Q1[2].checked&&!Q1[3].checked)
{count+=1};
if (!Q2[0].checked&&!Q2[1].checked&&!Q2[2].checked&&!Q2[3].checked)
{count+=1};
if (!Q3[0].checked&&!Q3[1].checked&&!Q3[2].checked&&!Q3[3].checked)
{count+=1};
if (!Q4[0].checked&&!Q4[1].checked&&!Q4[2].checked&&!Q4[3].checked)
{count+=1};
if (!Q5[0].checked&&!Q5[1].checked&&!Q5[2].checked&&!Q5[3].checked)
{count+=1};
if (!Q6[0].checked&&!Q6[1].checked&&!Q6[2].checked&&!Q6[3].checked){count+=1};
<!--скопируйте эту строку и вставьте
ниже необходимое количество раз в
зависимости от количества вопросов, изменив Q6 на Q7, Q8 и т.д.,
если добавляете количество вопросов
{count+=1};
if (count>0) <!-- Вычисление и проверка
все ли задания выполнены -->
{alert("Вы выполнили не все задания. Проверьте себя.")
}
else answer()
}
}
function control(k,f1,f2,f3,f4,f5,f6)
<!-- добавьте переменные f7, f8,... в
зависимости от количества вопросов
{
if (k==1&&f1.checked) return true;
if (k==2&&f2.checked) return true;
if (k==3&&f3.checked) return true;
if (k==4&&f4.checked) return true;
if (k==5&&f5.checked) return true;
if (k==6&&f6.checked) return true;
<!--скопируйте эту строку и вставьте
ниже необходимое количество раз( в зависимости от количества вопросов),
изменив 6 на 7, 8 и т.д если добавляете количество вопросов
return
false;
}
function answer()
{
answ="";
with(document)
{
answ+=control(res.charAt(0),test.Q1[0],test.Q1[1],test.Q1[2],test.Q1[3])?"1":"0"
answ+=control(res.charAt(1),test.Q2[0],test.Q2[1],test.Q2[2],test.Q2[3])?"1":"0"
answ+=control(res.charAt(2),test.Q3[0],test.Q3[1],test.Q3[2],test.Q3[3])?"1":"0"
answ+=control(res.charAt(3),test.Q4[0],test.Q4[1],test.Q4[2],test.Q4[3])?"1":"0"
answ+=control(res.charAt(4),test.Q5[0],test.Q5[1],test.Q5[2],test.Q5[3])?"1":"0"
answ+=control(res.charAt(5),test.Q6[0],test.Q6[1],test.Q6[2],test.Q6[3])?"1":"0"
<!--скопируйте эту строку и вставьте
ниже необходимое количество раз( в зависимости от количества вопросов),
изменив 5 на 6, 7 и т.д если добавляете количество вопросов.
<!--Анализ результатов -->
showResult();
}
}
function showResult()
{
var nok=0;
var i,s;
for (i=0;i<answ.length;i++) {nok+=answ.charAt(i)=="1"?1:0;}
if(nok<3) s='"НЕУДОВЛЕТВОРИТЕЛЬНО"';
if(nok==3) s='"УДОВЛЕТВОРИТЕЛЬНО"';
if(nok>3 && nok<4) s='"УДОВЛЕТВОРИТЕЛЬНО"';
if(nok==4) s='"ХОРОШО"';
if(nok>4 && nok<6) s='"ХОРОШО"';
if(nok==6) s='"ОТЛИЧНО"';
document.test.s1.
value="Количество правильных ответов "+nok+". Ваша
оценка "+s+". Загляните в окно рядом с номером задания.
Если ответ правильный, то там (+). Если Вы ошиблись, там (-).";
with(document.test)
{
if (answ.charAt(0)=="1") {T1.value=" +"} else
{T1.value=" -"};
if (answ.charAt(1)=="1") {T2.value=" +"} else
{T2.value=" -"};
if (answ.charAt(2)=="1") {T3.value=" +"} else
{T3.value=" -"};
if (answ.charAt(3)=="1") {T4.value=" +"} else
{T4.value=" -"};
if (answ.charAt(4)=="1") {T5.value=" +"} else
{T5.value=" -"};
if (answ.charAt(5)=="1") {T6.value="
+"} else {T6.value=" -"};!--скопируйте
эту строку и вставьте ниже необходимое количество раз( в зависимости
от количества вопросов), изменив 5 на 6, 7 и т.д если добавляете
количество вопросов.
}
}
</SCRIPT>
<FORM
name=test>
<CENTER><FONT face=Arial,Helvetica,sans-serif color=#000099>
<H3>Название теста </H3></CENTER>
<OL>
<LI>
<H4><INPUT size=1 name=T1> Вопрос
1 </H4>
<INPUT type=radio name=Q1> ответ 1.1
<BR>
<INPUT type=radio name=Q1> ответ 2.1
<BR>
<INPUT type=radio name=Q1> ответ 3.1
<BR>
<INPUT type=radio name=Q1> ответ 4.1
<BR><BR>
<LI>
<H4><INPUT size=1 name=T2> Вопрос
2 </H4>
<INPUT type=radio name=Q2> ответ 1.2
<BR>
<INPUT type=radio name=Q2> ответ 2.2
<BR>
<INPUT type=radio name=Q2> ответ 3.3
<BR>
<INPUT type=radio name=Q2> ответ 4.4
<BR><BR>
<LI>
<H4><INPUT size=1 name=T3> Вопрос
3 </H4>
<INPUT type=radio name=Q3> ответ 1.3
<BR>
<INPUT type=radio name=Q3> ответ 2.3
<BR>
<INPUT type=radio name=Q3> ответ 3.3
<BR>
<INPUT type=radio name=Q3> ответ 4.3
<BR><BR>
<LI>
<H4><INPUT size=1 name=T4> Вопрос
4 </H4>
<INPUT type=radio name=Q4> ответ 1.4
<BR>
<INPUT type=radio name=Q4> ответ 2.4
<BR>
<INPUT type=radio name=Q4> ответ 3.4
<BR>
<INPUT type=radio name=Q4> ответ 4.4
<BR><BR>
<LI>
<H4><INPUT size=1 name=T5> Вопрос
5 </H4>
<INPUT type=radio name=Q5> ответ 1.5
<BR>
<INPUT type=radio name=Q5> ответ 2.5
<BR>
<INPUT type=radio name=Q5> ответ 3.5
<BR>
<INPUT type=radio name=Q5> ответ 4.5
<BR><BR>
<LI>
<H4><INPUT size=1 name=T6> Вопрос
6 </H4>
<INPUT type=radio name=Q6> ответ 1.6
<BR>
<INPUT type=radio name=Q6> ответ 2.6
<BR>
<INPUT type=radio name=Q6> ответ 3.6
<BR>
<INPUT type=radio name=Q6> ответ 4.6
<BR>
</LI></OL><BR>
<CENTER>
<P><TEXTAREA name=s1 rows=4 cols=70> </TEXTAREA>
</P><INPUT onclick=check_me()
type=button value="Показать результат">
<INPUT type=reset value="Сбросить ответы"> </CENTER><BR><BR></FORM>
<P>
<H5> ©
автор., год</H5>
<P></P></FONT></BODY></HTML>
Окончание
образца.
III
Изменение количества вопросов
1. После того, что вы добились работоспособности вашего теста,
снова откройте код страницы с тестом.
2. Скопируйте весь блок от вопроса 6:
<LI>
<H4><INPUT size=1 name=T6> Вопрос 6 </H4>
<INPUT type=radio name=Q6> ответ 1.6 <BR>
<INPUT type=radio name=Q6> ответ 2.6 <BR>
<INPUT type=radio name=Q6> ответ 3.6 <BR>
<INPUT type=radio name=Q6> ответ 4.6 <BR>
И вставьте его ниже, изменив соответственно T6 на T7, Q6 на Q7
подставив соответствующие вопросы и варианты ответов. Добавьте
в конце исходного блока 6, еще один тег <BR> так чтобы у
вас получилось: ….INPUT
type=radio name=Q6> ответ 4.6 <BR><BR>
3. Проделайте пункт 2 необходимое количество раз.
4. Теперь мы будем изменять саму программу, для того чтобы обработка
результатов велась и для добавленных вопросов. Для этого необходимо
добавить строки программы и дописать некоторые величины. Строки
для изменения выделены в образце красным цветом, комментарии,
что нужно делать коричневым.
5. В новых строках необходимо изменить индексы переменных на 1
больше, например к answ+=control(res.charAt(5),test.Q6[0],test.Q6[1],test.Q6[2],test.Q6[3])?"1":"0"
добавилась строка answ+=control(res.charAt(6),test.Q7[0],test.Q7[1],test.Q7[2],test.Q7[3])?"1":"0"
в остальных местах аналогично.
6. В команде function
control(k,f1,f2,f3,f4,f5,f6) необходимо добавить переменные
f7, f8…в зависимости от количества вопросов. Например: function
control(k,f1,f2,f3,f4,f5,f6,f8,f9,f10)
7. Теперь изменим анализ результатов. Под переменной nok понимается
количество правильных ответов (баллов). Перевод баллов в оценки
осуществляется в этом фрагменте программы:
if(nok<3) s='"НЕУДОВЛЕТВОРИТЕЛЬНО"';
if(nok==3) s='"УДОВЛЕТВОРИТЕЛЬНО"';
if(nok>3 && nok<4) s='"УДОВЛЕТВОРИТЕЛЬНО"';
if(nok==4) s='"ХОРОШО"';
if(nok>4 && nok<6) s='"ХОРОШО"';
if(nok==6) s='"ОТЛИЧНО"';
Для изменения необходимо проставить соответствующие границы для
оценки.
Например для 10 вопросов с границами: 4 и меньше «2» ; 5-7 «3»;
8-9 «4»; 10 «5» фрагмент примет вид
if(nok<4) s='"НЕУДОВЛЕТВОРИТЕЛЬНО"';
if(nok==4) s='"УДОВЛЕТВОРИТЕЛЬНО"';
if(nok>4 && nok<8) s='"УДОВЛЕТВОРИТЕЛЬНО"';
if(nok==8) s='"ХОРОШО"';
if(nok>8 && nok<10) s='"ХОРОШО"';
if(nok==10) s='"ОТЛИЧНО"';
IV
Вставка рисунков.
Для вставки рисунков на Интернет страницы служит команда (Тег)
<IMG src="имя
файла.расширение"/>.
Для вставки рисунка вам достаточно вставить этот тег в код страницы
и указать имя файла с расширением. Необходимо знать, что рисунок
должен быть в той же папке, что и сама страница. Например рисунок
к заданию 6 находится в той же папке, что и сама страница, и имеет
имя ris1.gif Вставить его нужно после вопроса, но до вариантов
ответа. Тогда соответствующий фрагмент будет выглядеть:
<LI>
<H4><INPUT size=1 name=T6> Вопрос 6 </H4>
<IMG src=" ris1.gif "/><BR>
<INPUT type=radio name=Q6> ответ 1.6 <BR>
<INPUT type=radio name=Q6> ответ 2.6 <BR>…..
Тег <BR> необходим чтобы ответы начинались с другой строки.
Желаю успехов.
|
|
