Урок 4. Пагинация для вопросов

Дата публикации: 12-09-2014

Чтобы иметь доступ к просмотру всех уроков этого курса, оформите подписку в премиум раздел
создание системы тестирования

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

Задачей текущего урока будет вывод данных из массива на экран в приемлемом для теста виде.

lesson

Все уроки курса:

Метки: ,

Комментарии (22)

  1. Dea

    Спасибо за уроки.. А когда 5 урок?

    • Андрей Кудлай

      Пожалуйста)
      Относительно даты выхода следующего урока пока не могу сказать ничего конкретного, возможно, на следующей неделе.

  2. Евгений

    Уважаемый Андрей!
    У Вас, случайно, нет мысли в ближайшем будущем начать выпускать СБОРНИКИ бесплатных уроков (iso)?
    Замечательные уроки, но не очень удобно каждый урок искать отдельно. Рассылки — это, конечно, очень хорошо, но, в конце концов, хочется иметь где-нибудь в коробочке сборничек от автора с симпатичной менюшкой.

    • Андрей Кудлай

      Здравствуйте, Евгений.
      Пока что таких планов нет… возможно в будущем)

  3. [email protected]

    Здравствуйте, в уроке «Пагинация для вопросов» столкнулся с проблемкой $(‘.test-data’).find(‘div:first’).show(); , данная строка почему-то не отрабатывает. Хотя всё подключено и проверено alert’ом. Помогите плизз!

    • Андрей Кудлай

      Здравствуйте. Скорее всего, есть какие-то ошибки на стороне JS. Попробуйте посмотреть так ли это в консоли браузера. Это все, что можно подсказать без кода. Также можете взять код из исходников, код в исходниках рабочий.

  4. Радий

    Здравствуйте! У меня в тестах 50 вопросов, в пагинации выводится все 50 номеров в одной строке, не красиво получается, прокрутка появляется. Пожалуйста, Андрей, подскажите, как оформить пагинацию покрасивее, или хотя бы перенос номеров на следующую строку был. Заранее благодарю!

    • Андрей Кудлай

      Здравствуйте. Просто задайте для блока с классом pagination нужную ширину и номера страниц не будут выходить за нее. В файле стилей есть правило для .pagination, добавьте в него: width: 300px; или нужную Вам ширину.

      • Радий

        Да, этот вариант был испробован, просто не изменилось ничего, все равно за рамку страницы выходят номера вопросов. Может есть еще варианты? Пожалуйста, подскажите!

        • Андрей Кудлай

          Странно, этот вариант должен работать. Выложите архив с Вашим проектом (+ дамп БД) на файлообменник и дайте ссылку, я скачаю и попробую подсказать.

          • Радий

            Огромное спасибо за такую поддержку!!!
            Вот ссылка yadi.sk/d/6-0bJsjQ3AGAeH
            Я новичок, поэтому не судите строго)))

          • Андрей Кудлай

            Смотрите, в чем суть проблемы. Дело в том, что номера пагинации идут сплошной строкой. Ну а когда текст идет сплошной строкой без пробелов, то он будет выходить за границы блока. Решить проблему можно:
            1) добавлением свойства word-wrap: break-word; для блока .pagination, тогда длинные строки будут переноситься;
            2) просто поставить пробел после ссылки в функции pagination().
            Я бы выбрал второй вариант. Ну и немного оформить ссылки, чтобы они не наезжали друг на друга. Ссылка на исправленную версию — yadi.sk/d/OpCrVkx33AGiuz

  5. natasha.aleksanina@yandex.ru

    подскажите пожалуйста, как вывести пагинацию слева? то есть разделить страницу на 2 части

    • Андрей Кудлай

      Через стили, задав float: left для пагинации.

      • natasha.aleksanina@yandex.ru

        спасибо большое, разобралась!
        не подскажете ли, как сделать еще переход на следующий вопрос по кнопке?

        • Андрей Кудлай

          Не совсем понял, переход к следующему вопросу итак ведь происходит по кнопке.

          • natasha.aleksanina@yandex.ru

            Добавить кнопки под вопросами и вариантами ответов «Назад», «Вперед».
            «Назад» — предыдущий вопрос (если таковой имеется)
            «Вперед» — следующий вопрос (если таковой имеется)

          • Андрей Кудлай

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

  6. natasha.aleksanina@yandex.ru

    Могу я понаглеть и попросить код? Совсем не могу разобраться.

    • Андрей Кудлай

      К сожалению, здесь я не помогу. Если бы это был код на пару строк, тогда бы написал. Здесь же код — это фактически отдельный урок.

  7. natasha.aleksanina@yandex.ru

    На Вас у меня единственная надежда, к сожалению

    • Андрей Кудлай

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

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">

Я не робот.

Spam Protection by WP-SpamFree