Сохранить состояние переключателей javascript

Question

Я создаю викторину с несколькими вариантами с помощью javascript и задаюсь вопросом, как я могу сохранить состояние переключателей. Поэтому, когда пользователь вернется в браузер, их выбранные переключатели останутся на месте. Вот ссылка на то, что я пытаюсь сделать. http://jsbin.com/soyivu/1/edit?html,js,output

Вот две наиболее важные функции из сценария:

function checkAnswer(){ 
    choices = document.getElementsByName("choices"); 
    if ($('input[name=choices]:checked').length > 0) { 
    for(var i=0; i<choices.length; i++){ 
     if(choices[i].checked){ 
     choice = choices[i].value; 
     } 
    } 

    if(choice == allQuestions[pos]["correctAnswer"]){ 
     correct++; 
    } 
    pos++; 
    renderQuestion(); 
    } else { 
    alert("Select Something"); 
    } 
} 

function renderQuestion(){ 
    test = _("test"); 
    if(pos >= allQuestions.length){ 
    test.innerHTML = "<h2>You got "+correct+" of "+allQuestions.length+" questions correct</h2>"; 
    _("test_status").innerHTML = "Test Completed"; 
    pos = 0; 
    correct = 0; 
    return false; 
    } 

    _("test_status").innerHTML = "Question "+(pos+1)+" of "+allQuestions.length; 
    question = allQuestions[pos]["question"]; 
    chA = allQuestions[pos]["choices"][0]; 
    chB = allQuestions[pos]["choices"][1]; 
    chC = allQuestions[pos]["choices"][2]; 
    test.innerHTML = "<h2>"+question+"</h2>"; 
    test.innerHTML += "<input type='radio' name='choices' value='0'> "+chA+"<br>"; 
    test.innerHTML += "<input type='radio' name='choices' value='1'> "+chB+"<br>"; 
    test.innerHTML += "<input type='radio' name='choices' value='2'> "+chC+"<br><br>"; 
    test.innerHTML += "<button onclick='goBack()'>Prev</button>"; 
    test.innerHTML += "<button onclick='checkAnswer()'>Next</button>"; 
} 

Answer 1

Использование localStorage будет хорошей отправной точкой для вас, как уже было предложено в комментариях.

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

var UserAnswers = []; 
//In your code where you get a handle on the checked radio button, simply do 
choice = choices[i].value; //I'm assuming here is where you get the value 
UserAnswers.push(choice); 

//Once you do this for all the questions, just do 
localStorage["answers"] = JSON.stringify(UserAnswers); 

localStorage поддерживает только строки, и поэтому мы используем JSON.stringify() и JSON.parse(). Для того, чтобы получить ответы и обновлять флажки соответствующим образом, вы могли бы сделать что-то вроде:

var StoredAnswers = JSON.parse(localStorage["answers"]); 
//StoredAnswers[0] and so on will have the answers stored for the questions 

Надеется, что это поможет вам решить вашу проблему.

Answer 2

Это шаги, которые я сделал, чтобы сохранить состояние выбора переключателей в массиве и вызвать их, когда пользователь обновил/вернул страницу.

Я создал две глобальные переменные.

var UserChoices = []; 
var storedAnswers = JSON.parse(localStorage["answers"]); 

One для сохранения выбора кнопки радио в массиве, а другие, чтобы разобрать сохраненные ответы, которые строковые в функции checkAnswer()

В checkAnswer() проверяемых радио выбор выталкивается в переменную UserChoices. После того, как они сохранены в

Позже, когда renderQuestion() называется проверенным выбором радио, берутся из var storedAnswers и создаются.

Вот код ответа через ссылку JSbin. http://jsbin.com/soyivu/4/edit В Js bin вы увидите, что я сделал. Одна проблема с JS bin заключается в том, что он не будет отображать результат из-за JSON.parse - я не уверен, почему. Что вы можете сделать, это вставить javascript и html-код в свой редактор и посмотреть, что я сделал, чтобы заставить его работать. Вы также должны иметь jQuery и позвонить $(document).ready(function(){ renderQuestion(); }); внизу сценария.