Newcomposers.ru

IT Мир
0 просмотров
Рейтинг статьи
1 звезда2 звезды3 звезды4 звезды5 звезд
Загрузка...

Создание теста на html

Создание теста на html

Ссылки
На странице содержатся ссылки на ресурсы, где можно найти разнообразные тесты программы для их обработки.

Пример1
Пример интерактивного теста по теме Электромагнитная индукция.

Итак, вы решили создать собственный интерактивный тест в виде Интернет страницы на основе шаблона. Шаблон содержит 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. Проверьте на работоспособность ваш тест.

Текст в заголовке браузера

Создание учебного теста с ответами при помощи HTML и JavaScript

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

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

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

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

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

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

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

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

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

Читать еще:  Код ошибки 0x80070005 0xa001a

Обратите внимание на идентификаторы “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.

Далее нужно сравнить ответы ученика с правильными ответами. Если ответы будут совпадать, то за каждую задачу теста нужно добавить 1 балл.

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;
>

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

Теперь нужно посчитать процент правильных ответов.

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

procent_vip = ball/vsego_zadach * 100;

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

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

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

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

Тест на javascript для сайта

Приветствую вас дорогие друзья! В сегодняшнем выпуске мы рассмотрим тест, написанный на javascript! Совсем недавно я рассказывал как проверить билетик — счастливый или нет, сегодня мы создадим простецкий тест и как всегда в конце статьи будет Demo пример. Итак, давайте сначала разберем структуру нашего теста..

Из чего состоит тест?

Наш тест будет посвящен знанию английских слов, а именно — он будет содержать один вопрос (слово, требующее перевода) и четыре (4) варианта ответа. Для того, чтобы ответить, достаточно будет нажать на желаемый вариант ответа.

Для примера, я составил тест из четырех вопросов, а значит, что должно быть и 4 варианта ответов.. Итого — потребуется: 4 вопроса 4 * 4 = 16 вариантов возможных ответов 4 варианта правильных ответов

Где хранить вышеперечисленные данные?

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

Массив questions В данном массиве содержатся вопросы (в нашем примере — это слова на русском либо на английском языке). Массивы number1 (2,3,4) Четыре данных массива предназначены для хранения вариантов ответа.

Массив answer В этом массиве мы будем хранить правильные варианты ответа, а точнее, индексы массивов с правильным вариантом ответа.

Особенности теста

Первая особенность: тест начинается по нажатию на кнопку — «Приступить к тесту» — после нажатия, данная кнопка исчезает и появляется тест и также кнопка завершения.

Вторая: Имеется кнопка («Начать сначала»), соответственно, позволяющая начать тест с самого начала.

Третья: По завершению работы теста, появляется всплывающее окно, в котором выводится информация о количестве правильных ответов. Код программы Давайте рассмотрим полный (со стилями и html разметкой) код нашего теста и разберемся подробнее.. Итак, разберем первые четыре переменные: var countQuest — переменная, которая ведет подсчет вопросов — если она меньше количества вопросов в массиве, то увеличиваем её на единицу и продолжаем тест, иначе выводим количество правильных ответов. var plus — данная переменная содержит количество правильных ответов, и увеличивается, когда число, переданное пользователем при клике на вариант ответа, совпадает с числом из массива правильных ответов (answer). var test_start — эта переменная нужна для запуска теста, 0 — не запущен, 1 — запущен.

Читать еще:  Ошибка использования менеджера блокировок автоматический режим

Функция check — эта единственная функция, которая и отвечает за сам процесс тестирования. Она имеет один (1) параметр — их примеры: check(4) — это означает, что нужно запустить тест check(5) — это означает, что нужно запустить тест заново. Такие значения параметров, как: 0,1,2,3 — означают соответствующие варианты ответа. Думаю, все остальное понятно из кода.

Как его использовать на своем сайте?

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

Демо пример

Вот так вот он выглядит в работе..

На этом пример на javascript подошел к концу, желаю вам удачи и до скорых встреч! Добавлен улучшенный тест 05.01.2017: Как сделать тест на javascript с ответами?

Тесты на знание Web-технологий

Теперь на сайте доступно тестирование на знание следующих тем: HTML, CSS, JavaScript, PHP, SQL.

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

Безусловно, все тесты бесплатные и пройти их может любой желающий.

Порядок прохождения теста:

  1. Переходите по ссылке «Начать тестирование» у соответствующего теста.
  2. Отвечаете на поставленные вопросы, выбрав единственный правильный вариант.
  3. По завершению тестирования Вы увидите свой балл, количество ошибок, а также разбор каждого вопроса из теста.

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

Доступные на данный момент тесты

  • Всего тест прошло: 77134 человека
  • Средний балл: 2.83 из 5 баллов.

Тест на знание основ HTML. От Вас потребуется знание основных HTML-тегов, а также грамотное их использование. Так же необходимо понимание особенностей стандарта XHTML 1.1.

  • Всего тест прошло: 33619 человек
  • Средний балл: 3.36 из 5 баллов.

Тест проверяет знания по основам CSS. Для успешного прохождения теста Вы должны знать основные виды селекторов (их синтаксис), знать основные свойства и их возможные значения, а также знать назначение самых популярных псевдоэлементов.

JavaScript

  • Всего тест прошло: 25187 человек
  • Средний балл: 3.3 из 5 баллов.

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

  • Всего тест прошло: 33484 человека
  • Средний балл: 3.03 из 5 баллов.

Данный тест проверяет Ваши знания по языку PHP. От Вас требуется знание основных конструкций PHP, работы с переменными, сессий, реализации редиректа и прочих стандартных вещей.
Убедительная просьба: В тесте содержится много вопросов по типу: «Что выведет скрипт?». Большая просьба, не надо копировать его и проверять. Будьте честны перед самими собой.

  • Всего тест прошло: 18132 человека
  • Средний балл: 3.28 из 5 баллов.

Данный тест проверяет Ваши знания по языку запросов SQL. Вопросы затрагивают только самые базовые знания этого языка, без какого-либо углубления. От Вас потребуется знание самых основных SQL-запросов, а также грамотное их использование.

Copyright © 2010-2020 Русаков Михаил Юрьевич. Все права защищены.

Создание Web-сайта на языке HTML. Учебное пособие

В примерной программе по информатике и ИКТ на тему “Коммуникационные технологии” отводится всего 12 часов и предлагается создать Web-страничку с использованием шаблонов. На тему “Мультимедийные технологии” выделяется 8 часов, но если в образовательном учреждении информатика изучается на пропедевтическом уровне уже в 5, 6 и 7 классах, то целесообразно перенести изучение мультимедийных технологий в пропедевтический курс и тогда можно увеличить время на изучение коммуникационных технологий, а точнее, можно добавить тему “Создание Web-сайтов на языке HTML” в 8 классе.

Освоение технологии создания сайтов рекомендуется начать с языка разметки гипертекста HTML в программе Блокнот, что является первоосновой в данном направлении. Конечно, за 8 часов невозможно изучить весь язык HTML, но можно показать назначение и применение основных тегов языка. Если ученик заинтересуется технологией создания сайтов, то сможет продолжить изучение материала самостоятельно или на соответствующих курсах, кружках или факультативах.

Читать еще:  Код ошибки d000f001

Представленное методическое пособие прошло неоднократную опрабацию в 8-х классах гимназии №441 Фрунзенского р-на Санкт-Петербурга и включает материал для проведения теоретических и практических занятий, выполнение которых сначала демонстрируется через проектор, а затем учащиеся выполняют самостоятельно на компьютере, используя раздаточный материал к уроку.

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

Эффективно осваивается материал, когда учащиеся вместе с учителем выполняют общий проект, например, по теме из истории Санк-Петербурга “Драматические театры Санкт-Петербурга”, а затем в качестве итоговой работы создают собственный небольшой проект, используя в качестве шаблона сайт, созданный совместно с учителем.

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

Основные цели обучения: формирование познавательного интереса, развитие интеллектуальных и творческих способностей в области Web-технологий.

Обучающие: сформировать систему знаний по технологии создания Web-сайтов;

  • обучить языку разметки гипертекста HTML для создания сайтов;
  • познакомить с этапами проектной деятельности.
  • Развивающие: развить творческие способности к самовыражению, посредством создания сайтов;

  • сформировать умение сопоставлять, искать аналог и осуществлять перенос знаний в новую предметную область Web-технологий;
  • развить навыки работы на компьютере

    Воспитательные: воспитать добросовестное отношение к работе;

  • воспитать чувства товарищества и личной ответственности за созданный сайт;
  • воспитать художественный и эстетический вкус;
  • воспитать грамотного и корректного пользователя сети Интернет.

    Урок 1

    1. Общие сведения о Web-сайтах и языке HTML

    Публикации во Всемирной паутине (World Wide Web) реализуются в форме Web-сайтов. Web-сайт по своей структуре напоминает журнал, который содержит информацию, посвящённую какой-либо теме или проблеме. Как журнал состоит из печатных страниц, так и Web-сайт состоит из компьютерных Web-страниц, объединённых гиперссылками. Web-страницы могут содержать текст, рисунки, таблицы, мультимедийные и динамические объекты. Создание Web-сайтов можно осуществлять с помощью языка HTML.

    HTML – Hyper Text Markup Language язык разметки гипертекста. HTML ни в коей мере не является языком программирования, он отвечает только за расположение элементов (текста, рисунков) в окне браузера. HTML является языком для создания Web-сайтов во Всемирной паутине. Язык HTML состоит из простых команд – тегов. Теги управляют представлением информации на экране при отображении HTML-документа. Теги заключаются в угловые скобки <>… и бывают парные и непарные (одиночные <>).

    Документ HTML – это текстовый файл с расширением .html или .htm, содержащий набор тегов.

    Браузер – (browser) – программа для просмотра Web-страниц. Широко используют бразеры Microsoft Internet Explorer, Opera и др. Браузер при получении документа HTML выполняет его анализ, строит объектную модель документа, затем результат отображает на мониторе.

    2. Структура HTML-документа

    Записываются meta-теги, содержащие информацию о названии страницы, об авторе и др.

    Содержит непосредственно информацию страницы: тексты, рисунки, таблицы

    3. Форматирование символов

    Символы, заключенные между следующими тегами отображают:

    Текст, заключенный между тегами …….. имеет заданный размер, цвет и гарнитуру. Для этого используются атрибуты: SIZE = значение от 1 до 7 и COLOR = цвет (aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, yellow, white), каждому цвету соответствует свой шестнадцатеричный код от 000000 до FFFFFF.

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

    Одиночный тег
    разрывает текстовый поток и вставляет пустую строку. Несколько таких тегов добавляют несколько пустых строк. Межстрочный интервал – одинарный.

    4. Практическое задание №1.

    Создание первого HTML-документа “Драматические театры Санкт-Петербурга”, работа со шрифтами, задание цвета и размера шрифта. Освоение технологии работы.

    Урок №2

    1. Форматирование текста по абзацам

    — начинает абзац с новой строки. Новый абзац отделяется от предыдущего двойным межстрочным интервалом.

  • Ссылка на основную публикацию
    Adblock
    detector