Вводный курс jQuery – Тест

Категория JavaScripts (jQuery, AJAX), Статьи

Вводный курс в jQuery


Что такое jQuery? Это новый вид библиотеки JavaScript.

jQuery – это быстрая, маленькая библиотека JavaScript, которая позволяет Вам менять HTML, перехватывать события, создавать анимации и добавлять интерактивность Ajax для быстрой веб разработки. jQuery создана, чтобы изменить привычный путь написания JavaScript.

Итак, приступим к самому уроку “Тест на jQuery”.

Для начала, конечно же, нам понадобится сама библиотека jQuery. Скачать свежую версию можете скачать с сайта , справа есть кнопочка Download, также есть выбор Development (для разработчиков – не сжатый) и Production (сжатый – “всё в одну строчку”). Если хотите разобратся в самой библиотеке, скачайте Development.

В этом уроке мы будем делать тест. Схема такая: вопрос, выбор ответа, переход на следующий вопрос. После выбора ответа в последнем вопросе появляются результаты тестирование.  Посмотреть пример теста на jQuery. Если понравился, читаем дальше. В общем у нас будет 3 файла: библиотека test.html, result.php. В test.html у нас будет форма, которая будет отправлять ответы на result.php. result.php будет у нас обработчиком.

1. Создайте страницу и сохраните её под именем test.html, папке где хранится наша библиотека jQuery.

2. Подключите библиотеку к данной странице, добавьте этот код между тегами

…

3. Переходим к содержимому страницы. Между тегами

… ставим форму

4. В форме делаем div’ы следующего вида:


Вопрос 1










Т.к. у нас в тесте будет 3 вопроса делаем 3 div’а с таким же содержанием, только меняем – Вопрос 1 на Вопрос 2 и на Вопрос 3, otvet1 на otvet2 и на otvet3, class=”q1″ на q2 и q3 + для последних 2-ч дивов даем идентификатор box2 и box3.

5. Далее вставляем кнопку типа submit, чтобы при нажатии на нее, он отправлял данные в файл result.php

Он у нас тоже скрытый.

6. Стили. Нам надо чтобы некоторые объекты были в начале не видны. Для этого создаем стиль для них:
#button1,#box2,#box3{
display:none;
}

7. Давайте, приступим непосредственно к jQuery. Будем программировать. Вставлем код между тегами 

8. Там где … в верхнем коде будем писать функции. Функции в jQuery имеют вид:
$('.q1').click(function()
{
...
});
либо
jQuery('.q1').click(function()
{
...
});
разницы нет. Эти функции будут работать при нажатии (click) на объект с классом q1.

9. Раскрывать и закрывать дивы будем с помощью функций slideUp() и slideDown().
В итоге полный код jQuery будет иметь вид:
jQuery(function(){
$('.q1').click(function(){
$('#box1').slideUp(); //сворачиваем объект с идентификатором box1, все функции аналогичны
$('#box2').slideDown(); //раскрываем box2
});
$('.q2').click(function(){
$('#box2').slideUp();
$('#box3').slideDown();
});
$('.q3').click(function(){
$('#box3').slideUp();
$('#button1').slideDown();
});});

10. После выбора ответа на 3 вопрос появляется кнопка, при нажатии которой открывается страница result.php. Её код:
$i=0;
if ($_POST['otvet1']==1)++$i; //проверка на правильность ответа, если выбран 1 вариант - правильно
if ($_POST['otvet2']==2)++$i; //проверка на правильность ответа, если выбран 2 вариант - правильно
if ($_POST['otvet3']==1)++$i; //проверка на правильность ответа, если выбран 1 вариант - правильно
echo "Правильных ответов - ".$i."";
?>

Вот и все. Посмотрите исходники примера данного урока. Будут вопросы, оставляйте в комментах.

Другие посты, близкие по теме:

  1. Развертывание / сворачивание блока с текстом на jQuery
  2. jQuery WYSIWYG
  3. Загрузка файла одним кликом
  4. checkbox в стиле iPhone
  5. jQuery API: Effects – эффекты
]]>

Добавить в закладки

]]>

Теги:

августа 1, 2009

5 комментариев по “Вводный курс jQuery – Тест”

  1. ]]> Развертывание / сворачивание блока с текстом на jQuery ]]> сказал:
    августа 2, 2009 в 22:32

    [...] Если вам что-то не понятно, прочитайте вводный курс в jQuery [...]

  2. ]]> Движение картинки при наведении курсора на jQuery ]]> сказал:
    августа 3, 2009 в 14:27

    [...] не знаете что да как, вот урок – “Вводный курс в jQuery“ Другие посты, близкие по теме:Развертывание / [...]

  3. ]]> jQuery API: Effects – эффекты ]]> сказал:
    ноября 8, 2009 в 16:11

    [...] Сегодня мы посмотрим анимационные эффекты jQuery. Если вы понятия не имеете что такое jQuery, тогда советую для начала посмотреть урок по jQuery [...]

  4. ]]> jQuery WYSIWYG ]]> сказал:
    февраля 15, 2010 в 01:32

    [...] input) визуальный редактор jWYSIWYG. Это плагин к библиотеке jQuery. Он очень удобен, прост в установке и в [...]

  5. ]]> Загрузка файла одним кликом ]]> сказал:
    февраля 26, 2010 в 23:50

    [...] One-Click Upload (Загрузка одним кликом) – это плагин для jQuery. [...]

Оставьте комментарий: