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

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

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

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

lesson

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

Метки: ,

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

  1. Dea

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

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

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

  2. Евгений

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

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

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

  3. [email protected]

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

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

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

  4. Радий

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

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

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

      • Радий

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

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

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

          • Радий

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

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

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

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

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

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

Я не робот.

Spam Protection by WP-SpamFree