вопрос ответ код html

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

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

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

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

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

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

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

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

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

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

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

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

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

Первые три строки будут содержать правильные ответы. Четвертая и последующие задачи в тест добавляются путем копирования последней строки с ответом, подстановки числа 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 страницу.

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

Источник

Стильная страница FAQ с использованием только CSS3

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

Help Center Facebook использует отличный эффект для предварительного показа ответа на вопрос. Там выводится отрывок маленьким шрифтом и с затемнением. А когда посетитель нажимает на вопрос, текст ответа увеличивается и выводится полностью.

В нашем уроке мы создадим подобный эффект, используя только CSS3.

Начнем с разметки структуры документа:

Принцип действия

Ниже приводится код с комментариями:

Поддержка браузерами

Как насчет вывода нашей страницы в старых браузерах? Отличный вопрос. И ответом является приемлемая деградация внешнего вида:

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

Данный урок подготовлен для вас командой сайта ruseller.com
Источник урока: www.red-team-design.com/fancy-faq-page-using-css3-only
Перевел: Сергей Фастунов
Урок создан: 24 Февраля 2012
Просмотров: 33456
Правила перепечатки

5 последних уроков рубрики «CSS»

Забавные эффекты для букв

Небольшой эффект с интерактивной анимацией букв.

Реализация забавных подсказок

Небольшой концепт забавных подсказок, которые реализованы на SVG и anime.js. Помимо особого стиля в примере реализована анимация и трансформация графических объектов.

Анимированные буквы

Эксперимент: анимированные SVG буквы на базе библиотеки anime.js.

Солнцезащитные очки от первого лица

Прикольный эксперимент веб страницы отображение которой осуществляется “от первого лица” через солнцезащитные очки.

Раскрывающаяся навигация

Экспериментальный скрипт раскрывающейся навигации.

Источник

Простая FAQ страница на сайте с jQuery, HTML и CSS

На всех успешных или популярных сайтах есть страница FAQ (Frequently Asked Questions).

Переводя на русский, FAQ — это «Часто Задаваемые Вопросы». Такая страница помогает ответить на часто задаваемые вопросы от пользователей.

В этой записи я хочу поделиться вариантом того, как такую страницу можно сделать с использованием HTML, CSS (SASS — необязательно) и jQuery.

FAQ демо

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

Ниже представлен каркас для FAQ, который я в дальнейшем использовал для jQuery, чтобы открыть/закрыть вопрос.

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

— это ответ на вопрос из

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

CSS (SCSS)

С помощью CSS нужно придать каркасу выше более-менее приятный вид. Я использовать SCSS препроцессор, так как это быстрее и понятнее для меня.

Если вы не понимаете как пользоваться препроцессором SCSS, то во вкладке CSS есть кнопка «View Compiled» как показано на скриншоте ниже:

Нажав на нее, вы сможете посмотреть уже скопилированный CSS, то есть его нормальный (традиционный) вид. Как например код ниже.

После этого нужно добавить немного магии с помощью jQuery.

jQuery

С помощью jQuery я смогу контролировать события связанные с FAQ страницей. Например, чтобы при нажатии на заголовок вопроса — открывался ответ на него. Или чтобы при нажатии на другой вопрос (при условии того, что какой-либо вопрос уже был открыт), предыдущий скрывался и открывался только текущий.

$speed отвечает за скорость скрытия или показа ответа на вопрос при нажатии на заголовок.

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

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

Источник

Website-create.ru

Зачастую на сайте требуется организовать раздел «Часто задаваемые вопросы» (FAQ). Как правило таких вопросов может быть какое-то число (иногда немалое), и, в итоге, страница либо становится очень длинной (ведь нужно еще и вместить ответы), либо ссылается на другие страницы. Оба варианта не очень-то удобны для пользователя. В этом уроке я покажу Вам как сделать удобный FAQ-раздел!

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

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

И реализуем мы это при помощи библиотеки jQuery легко и просто. Давайте начнем!

Создаем удобный FAQ-раздел на сайте

1. Начнём мы как обычно с html-файла.

Я создам файл html и назову его «faq.html». Код в этом файле будет достаточно простой.

Между тегами «body» я создам тег «div» с классом «wrapper». Он в свою очередь будет содержать два других тега «div»: один с классом «header» (в нем просто будет располагаться логотип), а другой – с классом «content», в нем будет расположен еще один тег «div» с классом «main», в котором будут содержаться: заголовок; вопросы, также заключенные в теги заголовков; ответы, заключенные в теги «div» с классом «answer» и тег для футера.

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

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

Итак, создайте css-файл и дайте ему имя «faq_style.css».

Пока что наш css-файл пуст, поэтому если мы посмотрим html-страницу в браузере, то увидим следующее.

2. Сейчас мы сделаем так, чтобы наша страница имела более симпатичный вид и пропишем некоторые стили в css-файл.

Я создам основные стили, которые зададут фоновый цвет, выровняют страницу по центру, а также зададут стили для заголовков и абзацев.

Вот код, который я пропишу в файл таблицы стилей.

После этих преобразований наша страница будет иметь вот такой вид:

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

Вернитесь в html-файл и после подключения файла таблицы стилей подключите файл библиотеки jQuery.

4. Теперь создадим файл JavaScript, в котором будем писать наш код. Кода будет немного, однако, я предпочитаю создавать для кода JavaScript отдельный файл.

Итак, создаем файл. Я назову его «faq.js», помещу его в ту же папку, что и html-файл и подключу его к html-файлу сразу после подключения файла библиотеки jQuery.

Теперь можно открыть файл «faq.js» и приступить к написанию кода.

5. Код будет достаточно несложным.

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

Во второй строчке кода мы скрываем все элементы, содержащие ответы на часто задаваемые вопросы (эти элементы имеют класс «answer»).

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

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

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

Посмотреть пример работы этого примера Вы можете щелкнув по иконке «Демо» в начале урока.

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

Жду Ваших комментариев! Делитесь уроком с друзьями при помощи кнопок социальных сетей ниже.

И также подписывайтесь на обновления блога.

Источник

MnogoBlog

как создать сайт на wordpress, настроить и оптимизировать wordpress

Как создать тест или опрос на JavaScript

Здравствуйте, давайте создадим тест и опрос на html, который будет состоять из 3 вопросов и 6 ответов в каждом из них и обработаем их результаты с помощью javascript.

Для того чтобы узнать какой товар (услуга) пользуется наибольшим спросом на данный момент времени применяют различные опросы и тесты.
Как только вы сможете проанализировать результаты тестов и опросов – начинайте рекламировать ваш товар (услугу) – лучше всего для этого подойдет Яндекс.Директ – идеальная площадка для размещения рекламы на просторах Рунета. Ежедневно эту сеть посещает свыше 5 миллионов пользователей в России и других странах СНГ, поэтому частотность показов релевантных объявлений достаточно высокая. А для того чтобы ваша реклама была максимальна эффективна, то лучше всего обратиться по настройке Яндекс.Директа к профессионалам от Direct-UP – dircet-up.ru. Удачного вам бизнеса!

1. Создаем тест на JavaScript:

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

Рассмотрим код первого вопроса:

Здесь правильный ответ помечен значением value2, все остальные имеют значение value1.

Теперь давайте посмотрим на простой оператор if, который мы используем в JavaScript, чтобы найти сколько же набрано правильных ответов в тесте:

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

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

Например, перенаправить посетителя на страничку /ocenka2.html.

Вот готовый код файл index.html:

2. Создаем простой опрос на javaScript:

Рассмотрим код первого вопроса:

Затем мы повторяем этот шаблон для каждого вопроса.

Теперь давайте посмотрим на простой оператор if, который мы используем в JavaScript, чтобы найти ответ с наибольшим значением:

В принципе, мы проверяем, что сумма всех ответов со значением value1 выше суммы других возможных вариантов, а также что она выше 0.

Мы выполняем одинаковую проверку для каждого значения.

После того, как мы знаем, самое высокое значение, мы можем использовать этот результат, например, чтобы перенаправить посетителя на разные url:

Так если в большинстве вопросов был выбран ответ под цифрой 1, то result = value1 и соответственно посетитель попадет на страничку value1.html.

Источник