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

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

В общем разобрался сам. С помощью 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';
});
});

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

Маэстро, без обид, но такой код хорошо подойдёт к этой теме:
http://javascript.ru/forum/offtopic/...bydlokoda.html
Для 300 вопросов будет 596 лишних кнопок!
Dimaz, а зачем кнопке далее исчезать на последнем вопросе? Пользователь ведь должен как-то сообщить, что выбрал последний ответ. Или у вас ещё одна кнопка есть? Про кнопку назад вы не писали:) Тогда нужно добавить обработчик и к ней:

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

1. Быдлокодом каждый может назвать всё, что угодно (в меру своей воспитанности или наоборот).
2. Почему Вы решили, что вопросов будет 300, а не 3000? а я думаю, что их будет 5! Кстати, как я писал, если не нравятся кнопки - используйте <A></A>
3. Я показал альтернативное решение, которое для людей хорошо знающих PHP, но слабо знающих javascript зачастую быстрее реализуемо.
4. На очень многих сайтах (обычно в социальных сетях) рядом с КАЖДЫМ сообщением есть кнопка "Удалить", "Ответить" и т.п. Вот это плохо! Вот это бы я назвал быдлодизайном! То есть, например, сайт vkонтакте.com - это сплошное быдло-лалала?? Лично я всегда осуждал такой дизайн, однако его делают. Не знаете почему? Одна из причин - рассчитано на быдлоюзера, который не найдет кнопку "Отправить" в меню где-то вверху панели. Ему надо пририсовать эту кнопочку ряяяяядом с текстом. Да простят меня грамотные пользователи!
5. В моем варианте используемые кнопки не видны все одновременно на экране, т.к. виден только 1 параграф (с двумя кнопками). И если их и 596, то Вы считайте не их абсолютное количество, а процент их текста по отношению к тексту вопросов. Если в каждом параграфе с десяток строк HTML-кода, то добавка ещё одной (одиннадцатой) строчки солнце не остановит.

Достаточно точная характеристика быдлокода - не зная основ языка, пытаться быстро наваять непонятно что. А потом, скажем, захочется добавить прогрессбар - ещё кучу лапши добавлять в атрибут? Хотя подозреваю, вы ответите, что нужно всего-то немного дописать цикл пэхэпэ...
Даже если 5, этот способ совсем не элегантен.
Не путайте тёплое с мягким. В случае vk это повышает юзабилити. В случае же этого теста это никак на юзабилити не влияет.
Это не просто строчка, этой новый элемент DOM. И если он не виден, это не означает, что он не влияет на производительность.

a_l,
;)))) Вы меня посмешили. Ну да ладно. Разговор пошел на уровне субъективных ощущений... Поэтому нет смысла его продолжать.
Но вот это мне понравилось больше всего:
"В случае vk это повышает юзабилити" - даа?? и ... в случае vk это конечно же совсем "не влияет на производительность"