08.07.2015 13:25
1820
После того, как мы научились помещать в HTML-страницу изображения, пора изучить основу гипертекстового пространства - ссылки.
Тег AДля создания и использования гипертекстовых ссылок используется тег . Этот тег является самым необходимым элементом. Без него гиперткст (HTML ) и, собственно, Интернет просто немыслим.
Гипертекстовая ссылкаПример:
Результат в браузере:
Как видете, все, что расположено внутри тега , становится видно в окне браузера. Этот текст называется анкор (ancor) или, в переводе, якорь. А атрибут href задает адрес ресурса и\или имя файла, который браузер должен открыть.
Обратите внимание: закрывающий тег обязателен .
Ссылка на страницу в пределах одного сайтаЕсли Вы делали все так, как я вам советовал, то сейчас у Вас в папке www находятся папка images и файл index.html .
Давайте в папке www создадим еще один файл с именем page_1.html . Впишите в него минимальный набор тегов. Между тегами напишите к примеру "Тестовая страница", а между тегами -"Проверка ссылок". Это первая не сложная вещь.
Вторая - в папке www создадим еще одну папку с именем archives (архивы) и поместим в нее какой нибудь архив (с расширением rar или zip ).
Т.е. в значении атрибута href просто пишем имя файла.
Если мы создадим подпапку subfolder и в нее поместим нашу Тестовую страницу (файл page_1.html ), то в значении атрибута href нужно будет указать еще и имя папки. Т.е прописать путь к файлу:
Обратная ссылка на Первую страницу
Таким образом, две точки и слеш "../ " перед именем файла указывают на то, что файл находится в папке, расположенной на уровень выше от позиции файла, с которого делается ссылка.
Очень полезен атрибут target . По умолчанию страница, на которую ведет ссылка, открывается в том же самом окне браузера. Но очень часто нужно, чтобы страница открывалась в новом окне или новой вкладке (в зависимости от настроек Вашего браузера). Для этого ссылке нужно придать атрибут target со значением _blank .
И еще один не обязательный атрибут title . Он добавляет поясняющий текст к ссылке в виде всплывающей подсказки при наведении на нее курсора.
Пример кода:
Ссылка на сайт сайт , откроется в новом окне.
Ссылка на сайт сайт, при наведении курсора появится заголовок.
Результат:
Ссылка на закачку файлаПример:
Скачать файл
Если Вы в атрибуте href укажете имя файла, который Вы поместили в папку archives (как я Вам советовал), то после клика по этой ссылке у Вас начнется скачивание этого файла.
Ссылка на адрес электронной почтыЕсли Вы хотите чтобы у Вас на сайте была ссылка, нажимая на которую у пользователя сразу загружается почтовая программа и он сможет написать Вам письмо, то нужно сделать ссылку вот с таким, примерно, кодом:
Написать мне письмо
В браузере мы будем видеть:
Как видите, в значении атрибута href нужно написать mailto , двоеточие и адрес получателя. При нажатии на такую ссылку запустится почтовая программа, в поле "Кому" будет стоять указанный в ссылке адрес.
Цвета ссылокЕсли такие цвета не подходят под основной дизайн сайта или страницы, цвета ссылок можно изменить.
Для этого нужно придать специальные атрибуты тегу
.
link
- цвет не посещенной ссылки;
vlink
(visited link) - цвет посещенной ссылки;
alink
(active link) - цвет активной ссылки.
Цвета задаются либо RGB-значением в шестнадцатиричной системе, либо одним из 16 базовых цветов.
Таблица базовых цветов. В скобках - RGB-значение цвета.
| black (#000000) |
maroon (#800000) |
green (#008000) |
navy (#000080) |
| silver (#C0C0C0) |
red (#FF0000) |
lime (#00FF00) |
blue (#0000FF) |
| gray (#808080) |
purple (#800080) |
olive (#808000) |
teal (#008080) |
| white (#FFFFFF) |
fuchsia (#FF00FF) |
yellow (#FFFF00) |
aqua (#00FFFF) |
Если Вам этих цветов недостаточно, более точно подобрать RGB-значение можно.
Например, если тегу придать следующие атрибуты и их значения:
Про атрибут rel со значением nofollow , а также тег читайте в отдельной статье.
Проверяет html код, как заданный с помощью ссылки на страницу, так и просто в виде загруженного файла или скопированного текста. Дает список замечаний с рекомендациями по их исправлению.
http://validator.w3.org/
Проверяет стили документа или таблицу стилей, расположенную в отдельном файле.
http://jigsaw.w3.org/css-validator/
Проверяет правильность работы фидов RSS и Atom.
http://validator.w3.org/feed/
Подсвечивает ошибки на заданной URL странице.
http://webmaster.yandex.ru/spellcheck.xml
Показывает ошибки в тексте, скопированном в проверочное окно.
http://api.yandex.ru/speller/
Показывает структуру веб страницы. Актуален для проверки html5 документов.
Неправильно отображает кириллицу (:.
http://gsnedders.html5.org/outliner/
В бесплатной версии показывает до 10 страниц в инете с частичным совпадением текста с вашей страницей.
http://www.copyscape.com
Проверяет уникальность текста введенного в форму. В бесплатной версии возможно ожидание результатов.
http://www.miratools.ru/Promo.aspx
Проверяет уникальность как введенного текста, так и текста по заданному URL, показывает уровень уникальности в процентах.
Имеет собственный алгоритм проверки.
http://content-watch.ru
Десктопные программы для проверки уникальности контента от бирж копирайтеров. Работают долго, но качественно. Etxt имеет версии для трех операционных систем: Mac, Linux и Windows.
http://advego.ru/plagiatus/
http://www.etxt.ru/antiplagiat/
Показывает сайты с похожим содержанием и схожей внутренней структурой.
http://similarsites.com
Проверяет наличие признаков наиболее известных cms.
http://2ip.ru/cms/
Оценивает возможность просмотра страницы с мобильных устройств и выдает список замечаний и ошибок.
http://validator.w3.org/mobile/
Проверка удобства сайта для телефонов от Гугл.
https://www.google.com/webmasters/tools/mobile-friendly/
Показывает скорость загрузки сайта на мобильных устройствах.
https://testmysite.withgoogle.com/intl/ru-ru
Сайт эмулятор выхода с мобильного телефона. Показывает сайт глазами выбранной модели.
http://www.mobilephoneemulator.com/
Сервис проверки страницы для слабовидящих. Доступен on-linе и в виде плагина для Firefox.
http://wave.webaim.org/
Показывает текст сайта, приближенный к тому, что видит поисковый индексатор.
http://www.seo-browser.com/
Дистрибутив текстового браузер lynx для win32 систем. Перед использованием нужно отредактировать lynx.bat, указав в нем путь к директории с lynx.
http://www.fdisk.com/doslynx/lynxport.htm
Убирает все разметку и показывает текст страницы, мета теги и теги заголовков, число внешних и внутренних ссылок. Показывает превью страницы в google.
http://www.browseo.net
Показывает список исходящих ссылок для URL и проверяет их отклик. Может проверять рекурсирвно, то есть переходить от одного документа к другому самостоятельно.
http://validator.w3.org/checklink
Freeware инструмент для проверки битых ссылок. Для работы нужно установить его на свой компьютер. Рекурсивно сканирует сайт, делает отчеты, может быть полезен для составления карты сайта.
http://home.snafu.de/tilman/xenulink.html
Сканирует до 500 страниц сайта в бесплатной версии. Проверяет число внешних и внутренних ссылок. Выводит информацию о просканированных страницах: вложенность, коды ответа, названия, мета информацию и заголовки.
http://www.screamingfrog.co.uk/seo-spider/
Программа сканирует сайт, строит матрицу внутренних ссылок,
добавляет внешние (входящие) ссылки с заданных URL и, на основании этих данных, рассчитывает
внутренние веса страниц сайта. Программа может быть использована для нахождения внешних (исходящих) ссылок для списка URL страниц сайта.
Проверяет коды ответа сервера, прогнозирует скорость загрузки страницы в зависимости от объема в байтах ее данных,
показывает содержимое html тега head, внутренние и внешние ссылки для страницы, содержимое страницы глазами поискового робота.
http://urivalet.com/
Проверяет коды ответа сервера. Дает возможность проверить редиректы (коды ответа 301, 302), заголовок Last-Modified и др.
http://www.rexswain.com/httpview.html
Показывает объемы и содержимое данных, передаваемых при загрузки страницы.
http://www.websiteoptimization.com/services/analyze/
Проверяет редиректы, использование атрибута canonical, мета теги, некоторые аспекты безопасности сайта. Дает рекомендации по улучшению загрузки страниц.
http://www.seositecheckup.com
WHOIS-сервис центра регистрации доменов RU center. Дает информацию по IP адресам и доменам по всему миру. Иногда зависает.
https://www.nic.ru/whois/?wi=1
Служба Whois от РосНИИРОС (RIPN). Дает информацию для доменов в зоне RU и IP адресам из базы RIPE (Европа).
http://www.ripn.net:8080/nic/whois/
Определяет, где у домена хостинг и также показывает IP адрес сайта.
http://www.whoishostingthis.com
Проверка не включен ли IP адрес в черный список для рассылки email.
http://whatismyipaddress.com/blacklist-check
http://ru.smart-ip.net/spam-check/
Проверка MX записей для домена. Проверка SMTP сервера для домена. Проверка IP в черных списках для рассылки.
https://mxtoolbox.com/
Поиск по базе зарегистрированных торговых марок в США.
http://tmsearch.uspto.gov/
Проверяет доступность для индексации страниц сайта роботом Yandex.
http://webmaster.yandex.ru/robots.xml
Проверяет корректность файла robots.txt.
https://www.websiteplanet.com/webtools/robots-txt
Мониторинг доступности сайта. Дает возможость подключить один сайт бесплатно с минимальными опциями проверки.
http://www.siteuptime.com
Проверка скорости загрузки сайта. Посылает отчет на email. Имеет платные сервисы мониторинга доступности сайта.
http://webo.in
Проверка скорости загрузки страниц сайта.
http://www.iwebtool.com/speed_test
Сервис, показывающий ключевые слова для сайта, по которым он находится в ТОП 20 (первой двадцатке) выдачи Google во времени. Данные о поисковом и рекламном трафике.
http://www.semrush.com/
Положение в ТОП50 yandex и Google. Тиц сайта и PR главной страницы, наличие в важных каталогах, видимость в топе по ВЧ запросам.
http://pr-cy.ru/
Проверка трастовости сайта. Сервис, утверждающий, что он измеряет траст для Яндекса (проверить все равно никто не может:).
http://xtool.ru/
Проверка наложения фильтров Панда и Пингвин от Гугл. Сервис позволяет визуально определить падал ли сайт в даты апдейтов Панда и Пингвин.
http://feinternational.com/website-penalty-indicator/
Проверка Page Rank страниц сайта (при копировании URL в инструмент нужно стереть последнюю букву а потом написать заново).
http://www.prchecker.net/
Показывает историю развития сайта и дает возможность посмотреть скриншоты старых страниц.
http://www.archive.org/web/web.php
История позиций сайта в ТОП Google (ключевые фразы, страницы, заголовки), показателей PR, ТИЦ, Alexa Rank, числа обратных ссылок для популярных сайтов.
http://SavedHistory.com
SEO Doctor - дополнение к Firefox. Показывает ссылки на странице и дает удобный интерфейс к различным SEO сервисам.
http://www.prelovac.com/vladimir/browser-addons/seo-doctor/
SeoQuake - дополнение к Firefox. Показывает важнейшие характериситки сайта: ТИЦ, PR, обратные ссылки, Alexa Rank.
Работает как с выдачей Google, так и с выдачей Yandex. Дает возможность быстрого анализа конкурентов.
http://www.seoquake.com/
IEContextHTML - дополнение к Internet Explorer. Проверяет индексацию ссылок в Yandex и Google, показывает список внешних и внутренних ссылок, позволяет импортировать данные c веб страниц.
Обновляемый список бесплатных прокси серверов, в том числе и Российских.
http://www.checker.freeproxy.ru/checker/last_checked_proxies.php
http://spys.ru/proxys/ru/
Анонимный бесплатный прокси с возможностью представиться из трех стран. Работает с поиском Google.
https://hide.me/en/proxy
Эммуляторы поиска Google в разных странах, путем задания параметров поиска.
http://searchlatte.com/
http://isearchfrom.com/
Сервис дает возможность глубокой проверки (до 500) позиции сайта по регионам в Yandex.
Осуществляет анализ ссылочной массы сайта, формирует срезы по различным критериям: тип ссылки, анкоры, страницы. Показывает вес обратных ссылок.
Сервис доступен только для зарегистрированных пользователей.
http://ahrefs.com
Проверяет наличие бэклинков на сайт в предложенном списке URL (до 100 страниц).
http://webmasters.ru/tools/tracker
Показывает число лайков (plusone) в Google+. Можно вводить сразу список проверяемых URl.
http://www.plusonechecker.net/
Показывает популярность в Твиттере, Google+, Facebook, LinkedIn, Pinterest, Delicious, StumbleUpon, Diggs.
http://sharedcount.com
Показывает популярность первой страницы сайта в Твиттере, Google+, Facebook, Delicious, StumbleUpon.
Для российских сайтов данные иногда неверные.
http://www.coolsocial.net
Сканирует сайт и формирует отчеты "Shares" основных зарубежных социальных сетей для этих страниц. Регистрирует пользователей через акаунт в твиттере. Отчеты можно видеть уже на следующий день.
https://socialcrawlytics.com
Проверяет заданный URL на подозрительный код, показывает подгружаемые скрипты и результаты их проверки.
http://vms.drweb.com/online/
Проверяет URL на вирусы 30 сканерами.
https://www.virustotal.com/#url
Система защиты сайта от вирусов. Ежедневно сканирует файлы сайта и присылает отчет об их изменениях по email.
Если файл находится в другой папке, то нужно указывать путь к нему.
Например:
активный текст или изображение
Например:
активный текст или изображение
Можно организовать сообщение по электронной почте:
Например:
Атрибуты тэга < BODY > для задания цвета ссылок
LINK = цвет или код цвета
ALINK = цвет или код цвета
VLINK = цвет или код цвета
Ссылки на меткиактивный текст или изображение
начало текстового фрагмента
активный текст или изображение
Создание и использование графических объектов для гиперссылок в ЭУ.
Кнопка с помощью HTML тега form
Этот вариант также является одним из методов создания кнопки в виде ссылки. Элементарный пример кнопки созданной с помощью тега form и input :
Вот как это примерно будет выглядеть на странице:
Вместо URL1 и URL2 надо написать адреса страниц, куда необходимо осуществить переход.
Кнопка в виде изображения
Для этого Вам понадобится всего лишь найти подходящую картинку для кнопки. Например, картинка с Вашей кнопкой называется button.jpg. Тогда, для создания ссылки код должен быть следующим:
Сделать красивую кнопкусейчас можно различными способами и множеством сторонних программ. Распространённый и часто используемый способ - это создать кнопку в Photoshop или Gimp. Но самый простой способ создания кнопки для HTML бесплатный сервис-dabuttonfactory.com . Там можно выбрать разные дизайны кнопок и сделать на них нужные надписи. Удобно то, что в процессе создания кнопки Вы будете видеть результат вносимых изменений и корректировать так, как Вам нужно.
Формат готового варианта тоже выбирается. Вам нужна картинка Image(jpeg).
Создание теста на htmlШаблон интерактивного теста в виде Интернет страницы.
Шаблон содержит 6 вопросов к каждому из которых предлагается 4 варианта ответов.
Подготовительный этап
1. Создайте шаблон(написан ниже) в блокноте и сохраните. 2. Подготовьте тест который будете превращать в электронный, например в MS Word. 3. Создайте в папку и назовите ее итоговый тест. 4. Скопируйте в эту папку шаблон теста и при необходимости рисунки к тесту. (формулы в MS Word являются рисунками). 5. Имена рисунков лучше задавать латинскими буквами и короткими именами например ris2-1.gif 6. Проверьте работоспособность шаблона, запустив его в браузере. На все вопросы поставьте первый ответ. Вы получите оценку отлично.
Получаем тест из шести вопросов без рисунков.
1. Откройте текст кода в программе Блокнот. 3. Измените текст этого кода (непосредственно Блокноте) в соответствии с образцом приведенном ниже. В образце, выделенный зеленым цветом текст показывает где именно необходимо изменять, (смысл надписей говорит сам за себя) 4. Найдите выделенный зеленым цветом текст «111111» он идет после команды var res=, и поставьте последовательность правильных ответов. 5. Коричневым цветом выделены комментарии к коду, они не влияют на работу и не отображаются на экране. 6. Сохраните в блокноте файл под новым именем. 7. Проверьте на работоспособность ваш тест.
Текст в заголовке браузера
{alert("Вы выполнили не все задания. Проверьте себя.") } else answer() } } function control(k,f1,f2,f3,f4,f5,f6) showResult(); } } function showResult() { var nok=0; var i,s; for (i=0;i
Аналогично шифруем второй и третий вопросы. После шифрования содержимое файла 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)
Закодировать ответы для теста вы можете на нашем сайте.
