Создание викторины с одной страницей, которая определяет результат (без доступа к базе данных или php, должен быть в javascript/html/и т. д.)

Примечание. У меня нет доступа к базе данных и я не могу использовать PHP, поэтому я прошу помощи. У меня связаны руки и я могу делать только через html/javascript/etc.

Я создаю онлайн-викторину с 10 вопросами (по 1 вопросу на странице), но только один вопрос определяет результат в 4 разных конечных местах. Вопрос 3 (страница 3) является определяющим вопросом, но мне нужно «записать» выбор переключателя, поэтому последний вопрос (страница 10) определяет URL-адрес кнопки отправки, которая перенаправляет пользователя.

Все остальные вопросы — вопросы тщеславия, поскольку вопрос 3 является определяющим фактором.

Я думал, что ответ на вопрос 3 (страница 3) создает файл cookie с 1 из 4 значений (на основе выбора переключателя), затем на последнем вопросе (страница 10) читается файл cookie, и значение определяет URL-адрес , который затем записывает код перенаправления URL для кнопки отправки. Пока это только теория, так как я не уверен, что это выполнимо.

Мы будем очень признательны за любые советы.


person jgrannis    schedule 28.03.2012    source источник


Ответы (4)


Почему бы вам не передать соответствующий ответ как GET? Вы можете легко прочитать строку запроса в Javascript.

person mddw    schedule 28.03.2012
comment
Это кажется лучшей ставкой. Как бы вы внедрили java в кнопку отправки на странице 10 (чтобы извлечь из соответствующего ответа, переданного через GET). Допустим, это была кнопка отправки: ‹input type=button value=Submit name=buton onclick=location.href='(НЕОБХОДИМО ЗАПОЛНИТЬ ЭТУ ОБЛАСТЬ ИЗ ИНФОРМАЦИИ, ПЕРЕДАННОЙ ЧЕРЕЗ GET)' /› - person jgrannis; 28.03.2012
comment
Ну, это зависит от того, хотите ли вы это в чистом javascript или с каким-то плагином. Для извлечения чистого javascript см.: stackoverflow.com/questions/647259/javascript-query -строка - person mddw; 28.03.2012
comment
@jgrannis - вы упоминаете java в своем вопросе и здесь, в своем комментарии, но, похоже, вы говорите о java-script ... задействована ли какая-либо Java? - person Stephen P; 28.03.2012

Я вижу как минимум еще 2 способа сделать это:

Используйте iFrame:

Сохраняйте скрытый ввод вне iFrame. Этот ввод записывает ответы. Сценарий iFrame должен добавлять ответ (разделенный запятыми или что-то еще) к скрытому вводу в родительском элементе при отправке вопроса. После этого в iFrame загружается новая страница. Когда встречается последний вопрос, сценарий iFrame может обновить и прочитать родительский ввод, затем определить, какой URL-адрес загрузить, а затем загрузить URL-адрес в расположение родительского документа.

Используйте jQuery Ajax: EDITED, чтобы удалить скрытый ввод, который здесь не нужен:

Используя jQuery Ajax, вы можете загрузить следующий вопрос в главный блок, а также сохранить значения ответов, которые вы хотите, в сценарии jQuery.

РЕДАКТИРОВАТЬ: Вот еще один способ, используя CSS и javascript/jQuery:

Загрузите все вопросы на ОДНУ страницу. Но только текущий вопрос имеет style='display:block;', остальные должны иметь style='display:none'. Когда на вопрос получен ответ, используйте javascript или jQuery, чтобы записать ответы в переменную. В вашем случае кажется, что вас интересует только один ответ, так что это еще проще. Затем используйте свой сценарий, чтобы изменить атрибуты отображения в зависимости от того, какой вопрос должен отображаться. Наконец, если это последний вопрос, который отправлен, вы можете определить URL-адрес и загрузить следующую страницу.

КАК ПОЛУЧИТЬ ПАРАМЕТР ИЗ СТРОКИ ЗАПРОСА:

function getQuery(key_str) {
// return value of key_str variables query string of url
// Example: url = "index.html?answer=5"; if key_str = "answer" then it returns "5"
  if(window.location.search) {
    var query = window.location.search.substr(1);
    var pairs = query.split("&");
    for(var i = 0; i < pairs.length; i++) {
      var pair = pairs[i].split("=");
      if(unescape(pair[0]) == key_str) return unescape(pair[1]);
    }
    return null;
  }
}

function go() {
  var answer = getQuery(answer);
  var durl = "http://www.defaulturl.com";
  switch (answer) {
    case '1' : url = "http://www.url1.com"; break;
    case '2' : url = "http://www.url2.com"; break; 
    case '3' : url = "http://www.url3.com"; break;
    default  : url = durl;
  }
  window.location.href = url;
  return false;
}

<input type="button" value="Submit" name="butt" onclick="return go();">
person Stefan    schedule 28.03.2012

Ваш метод cookie будет работать нормально. Также выполнимо с HTML5 local storage. Но я должен спросить... если вы нигде не записываете результаты других 9 вопросов, какой смысл их задавать? :)

person Alex Howansky    schedule 28.03.2012
comment
В таком случае, почему бы просто не сделать третий вопрос последним? - person Alex Howansky; 28.03.2012

Я бы сделал все возможное, чтобы избежать использования файлов cookie и просто сохранить тест на одной странице... Я знаю, вы говорите, что у вас нет доступа к бэкэнду, но я просто хотел высказать это.

Вы можете заставить пользователя почувствовать, что это действительно 10 «страниц», но ваш JS будет менять местами «страницы» и сохранять значения формы при загрузке одной страницы. Подумайте об элементе с вкладками DOM с 10 вкладками.

Полностью согласен с Алексом, что локальное хранилище HTML5 тоже сработает.

person Matthew Blancarte    schedule 28.03.2012
comment
Я не могу иметь на одной странице из-за проблем с отслеживанием. Мне нужны отдельные страницы для отслеживания выпадающих вопросов... - person jgrannis; 28.03.2012
comment
Хм... Разве вы не можете отслеживать события в полях формы, выбирать и т. д., а затем запускать их через какие-то логические элементы? Например, if(fieldVal === 'your_drop_out_q'){ // делаем что-нибудь }. - person Matthew Blancarte; 28.03.2012
comment
Это должно быть через код Google Analytics... другой член команды будет отслеживать... - person jgrannis; 28.03.2012
comment
Аааа, хорошо. Да, вы захотите использовать $_GET или локальное хранилище. Удачи! - person Matthew Blancarte; 28.03.2012
comment
@jgrannis: Разве вы не можете передать данные, которые вам нужно отслеживать, в Google Analytics с помощью _gaq.push() в вашем javascript? Просто предположил здесь, я никогда не пробовал. - person Stefan; 28.03.2012