Html — HtmlCss. Вопрос


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

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

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

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

FAQ демо

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

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

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

Основная часть этого каркаса — это маркированный список (

    ), внутри которого пишутся
    .

Каждый

  • элемент — это новый вопрос в FAQ. Так же, каждый
  • должен включать в себя

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

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

    CSS (SCSS)

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

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

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

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

    jQuery

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

    Из jQuery скрипта выше, видно три основных переменные — это $speed , $class и $class_open .

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

    $class — это имя класса, которое добавляется на

  • элемент открытого вопроса. Например, если вы нажали на первый вопрос, то на
  • элемент текущего вопроса будет добавлен класс, который вы напишите для этой переменной.

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

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

    Создать тест на HTML

    15.05.2012, 20:03

    Как создать тест в HTML чтобы каждый раз выходил новый вопрос и в конце вывести правильные ответы
    Всем Доброго Времени Суток. Есть вопрос, подскажите как создать тест в HTML чтобы каждый раз.

    Цукерберг рекомендует:  Простой многуровневый слайдер на анимациях CSS и jQuery

    тест по html
    Всем привет! Пытаюсь пройти тестирование по html. надо набрать 25 правильных вопросов из 30. У.

    Тест на html
    Доброго времени суток! Можно ли тест сделать на html? И в конце результат?

    Тест по HTML
    в документе вопросы и ответы,Где у меня ошибки?(

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

    Коллекция статей, уроков и примеров по HTML и CSS

    Коллекция статей, уроков и примеров по HTML и CSS

    Основы HTML5

    Основы CSS

    Типовые блоки сайта и элементы интерфейса

    Полезные инструкции

    Bootstrap 4 — Сборка проекта с помощью Gulp

    Bootstrap — Carousel (карусель)

    Bootstrap 3 — Dropdown (выпадающий список)

    Bootstrap 4 — Сетка

    Слайдер для сайта на CSS и JavaScript

    Скрипт звёздного рейтинга для сайта

    Bootstrap 3 DateTimePicker — Календарь для input

    MODX — Форма обратной связи (FormIt)

    JavaScript — Создание объектов. Прототипы и наследование

    Изменить css класс блока и сохранить выбор в куки

    Как связать Html с Css?

    Я никак не могу связать страницу с таблицей, созданной в CSS.

    5 ответов 5

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

    Имеется 4 способа.

    1. Встроенные стили

    Подключение встроенных или inline стилей заключается в применении атрибута style к определённому тегу на странице. В этом случае значением атрибута является одно или несколько (через точку с запятой) свойств CSS с соответствующими значениями. Как правило, такой способ используется в тех случаях, когда надо изменить характеристики конкретного элемента на одной странице.

    2. Внутренние стили

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

    Проверьте себя как хорошо вы знаете CSS

    Я думаю вам понравился прошлый тест на Основы HTML. Вы проверили себя на основы HTML, следующим шагом является знание CSS — одной из важнейших составляющих при разработке дизайне сайта. Проходим тест и не стесняемся писать о своих результатах в комментариях. ��

    Ваш результат:

    Оценка:

    Еще материалы по этой теме

    Отправить статью

    Сохраните ссылку на статью, чтобы прочитать позже. Отправить ссылку на материал в:

    Введите Email ниже:

    Ссылка на статью отправлена вам на Email.

    21 комментарий к записи


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

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

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

    Прошла с другого браузера.. 9 баллов….надо изучать…. ❗

    Не расстраивайтесь �� . Уверен, в следующий раз у вас получится лучше!

    скриншот хороший тест, но толи я или все таки лыжи)

    Денис, спасибо, возможно это из-за уменьшения размера вам показалось �� .

    Вот без выделения:

    А вот с выделением:

    20 из 20)
    Не очень сложный.

    Добрый день ! Сделал ваш тест ( тест хороший спасибо ) Но вопросы были заданы не всегда корректно. Что я имею в виду
    Это обращение к CSS кодам правильно не правильно написан код. Так вот
    Все свойства CSS кода пишутся с пробелом в этом месте
    backgraund-color: #red;
    а не так
    backgraund-color:#red;
    В таком случае код будет написан не верно, а значит и работать так же не будет и учитывая формулировку вопроса и верного ответа на него правильного ответа дать невозможно.
    А так все супер молодцы весьма интересно вышло))) Спасибо большое! ��

    Цукерберг рекомендует:  PHP библиотека для работы с данными о стране

    Вы что-то путаете. Я пересмотрел все вопросы и там нет таких вариантов. Да и к тому же верным будет background-color: red, а с решеткой ни один неправильный! ��

    )))) Ну да, тоже верно, думал об одном, а написал совершенно другое ( #ff0000) ну да ладно

    Там после последнего свойства ; (точка с запятой) не проставлена.

    Интересует какие 2 ошибки в 4 вопросе.
    Там только 1 ошибка.

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

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

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

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

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

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

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

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

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

    Напротив каждой задачи учебного теста мы подставили поле для ввода текста. Подробнее о различных полях в 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.

    Далее нужно сравнить ответы ученика с правильными ответами. Если ответы будут совпадать, то за каждую задачу теста нужно добавить 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;

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

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

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

    Цукерберг рекомендует:  Help - Как исправить ошибку

    Тест по основам HTML

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

    Подробные сведения о тесте по HTML

    Данный язык гипертекстовой разметки (HyperText Markup Language) считается общепринятым. Он оптимально подходит для незатруднительного создания интернет-страниц с различной структурой. Фактически, свободное владение данным языком позволяет разработчику:

    • создавать интернет-порталы;
    • прописывать структуру веб-сайтов;
    • разрабатывать всевозможные элементы и так далее.

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

    Крайне важно регулярно проверять промежуточный итог, определяя собственный уровень знаний. Это же позволяет своевременно исправлять всевозможные ошибки в написании кода. Именно поэтому новичкам рекомендуется проходить тест по основам HTML не реже 1 раза в 2-3 недели.

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

    Данные тесты очень удобные и позволяют досконально овладеть синтаксисом языка HTML. Это поможет программисту изучить основы грамотного построения кода с учетом всех переменных. Если у вас возникли какие-либо трудности, мы с радостью готовы проконсультировать и ответить на все интересующие вопросы. Все это поможет быстро разучить язык HTML.

    HTML Стили — CSS

    Стилизация HTML с CSS

    CSS означает каскадные таблицы стилей.

    CSS описывает, как HTML-элементы должны отображаться на экране, бумаге или на других носителях.

    CSS экономит много работы. Он может контролировать расположение нескольких веб-страниц все сразу.

    CSS можно добавлять к элементам HTML тремя способами:

    • Встроенный — с помощью атрибута Style в элементах HTML
    • Internal -с помощью

    HTML Стили — CSS

    Стилизация HTML с CSS

    CSS означает каскадные таблицы стилей.

    CSS описывает, как HTML-элементы должны отображаться на экране, бумаге или на других носителях.

    CSS экономит много работы. Он может контролировать расположение нескольких веб-страниц все сразу.

    CSS можно добавлять к элементам HTML тремя способами:

    • Встроенный — с помощью атрибута Style в элементах HTML
    • Internal -с помощью

    Html — Html/Css. Вопрос

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

    1. В вопросе 5 «Заголовок документа заключается в тэге…» поехал вариант ответа с тегом «br», там появился «span», как я понимаю, из кода страницы с тестом, и теперь этот ответ и следующий — одно целое. Засчитывается, естественно, неправильный. Я заменил вариант ответа на тег «pre», хотя «br» в остальных вопросах не ломает тест…
    2. Вопрос 12 «Выберите тэг, в котором установлен цвет фона» неверный вариант ответа отмечен как верный. Должен быть с «body bgcolor», а не просто «bgcolor».
    3. При сохранении теста у меня в Вопросе 3 «Тэги разметки заключаются между знаками…» в ответе с обратным слешем «\» страничка его съела. Поэтому в программе в поле для ответа нужно ввести её 2 раза. Страничка съест только первый бэкслэш.

    Вы должны авторизоваться, чтобы оставлять комментарии.

  • Понравилась статья? Поделиться с друзьями:
    Все языки программирования для начинающих