Динамическая загрузка вопросов для теста
 

Всем привет! Хочу написать тест. Как сделать так, чтобы после нажатия кнопки "Далее", динамически подгружался следующий вопрос теста с новыми вариантами ответов. Хотелось бы, чтобы это происходило на стороне клиента, а не сервера. То есть, чтобы весь тест грузился целиком, но показывалось по одному вопросу, а остальные были пока не видны. Думал подгружать с сервера, но думаю будет очень большая и бессмысленная нагрузка, так как придется каждый раз грузить новый вопрос, следовательно обращаться к базе данных(Ради одного вопроса!). Подскажите кто знает как это можно реализовать.:)

В общем разобрался сам. С помощью CSS свойства display: none скрываю параграф со вторым вопросом теста. Затем средствами библиотеки JQuery при нажатии кнопки "Далее" скрываю первый параграф

$('p#1').hide();

с определенным идентификатором(id="1") и показываю второй

$('p#2').show();

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

Почему не помогут?
Самое простое - при нажатии на кнопку далее увеличивать переменную. Что-то вроде:

var i = 1;
document.getElementById('next').onclick = function() {
  document.getElementById(i).style.display='none';  
  i++;
  document.getElementById(i).style.display='block';
}​

Где элемент с id='next' - это кнопка. Плюс в конце добавить проверку на то, чтоб i не превышало количество вопросов теста.
А вообще, id нет надобности использовать. Достаточно получить список вопросов (NodeList) и по нему ходить:

var i = 0,
    questions = document.getElementsByTagName('p');
document.getElementById('next').onclick = function() {
  if(i === questions.length - 1) {
    return false;
  }
  questions[i].style.display='none';  
  i++;
  questions[i].style.display='block';
}​

Можете в КАЖДЫЙ параграф сразу добавить кнопки, или URL-ссылки Вперед/Назад (Следующий/Предыдущий), в которые прямо прописать указатели на параграфы.
Получится приблизительно так:

$('p#1').hide(); $('p#2').show(); // в первом параграфе
$('p#2').hide(); $('p#3').show(); // во втором параграфе
//... и т.д.

При этом в первом параграфе не ставьте кнопки "Назад", а в последнем не ставьте "Вперед"

a_l, а можешь поподробнее прокомментировать свой код, а то ни как не могу врубиться. 2 года назад последний раз занимался программированием. Уже многое забылось.

var i = 0, //номер элемента
    questions = document.getElementsByTagName('p'); //список элементов с тэгом <p> 
document.getElementById('next').onclick = function() { //при клике по кнопке с id="next"
  if(i === questions.length - 1) { //если достигли конца списка,
    return false;                   //ничего не делаем (для вашей задачи вместо ничегонеделания можно, например, подсчитать результаты теста)
  }
  questions[i].style.display='none';  //скрываем i-тый элемент (нумерация идёт с 0)
  i++;                                        //увеличиваем i на единицу
  questions[i].style.display='block'; //показываем элемент с индексом i (увеличенный прежде на 1)
}​

А если 100 вопросов?

Спасибо. Теперь все понятно. Все работает.:)

Иии.... и что? Хоть 10, хоть 100, хоть 300 вопросов. К каждому параграфу прибавлена в начало, или в конец html-строка типа

<input type="button" value="назад" onclick="javascript:......"> <input type="button" value="вперед" onclick="javascript:......">

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

Вот вроде такой код работает:

$(document).ready(function(){
var i = 0, questions = $('p');
$(':button').click(function(){
if(i === questions.length - 1) {
$('#right').hide();
return false;
}  
questions[i].style.display='none';    
i++;
$('#left').show();
questions[i].style.display='block';
});
});

После первого вопроса появляется кнопка "Назад", после последнего исчезает кнопка "Далее". Только вот на последнем она исчезает если еще раз нажать "Далее".