Develop Reference

Interactive Quiz: How to keep input values when hidden?

I've created an interactive quiz and created functions that showed the next question and goes back to the previous questions. My problem is that when it changes questions, the information I input in is erased. For example Question 1 and 2, I would write in an animal and then I go onto Question 3, but when I go back to Question 1 and 2, the animals I wrote in are gone. Same with the radio choices. Sorry if code is tedious, I'm just starting. Any tips on how I can fix that?
Quiz link: https://repl.it/GSiI/latest
function initialize()
{
questionList = document.getElementsByClassName("questions");
quizOutput = document.getElementById("showQuiz");
beginBtn = document.getElementById("initiate");
button = document.getElementById("button");
next = document.getElementById("next");
previous = document.getElementById("previous");
questionIndex = 0;
totalQuestions = questionList.length - 1;
}
function beginQuiz()
{
currentQuestion = questionList.item(questionIndex).innerHTML;
button.style.visibility = "visible";
quizOutput.innerHTML = currentQuestion;
beginBtn.style.display = "none";
quizOutput.style.display = "block";
}
function changeQuestion(factor)
{
if(factor == -1 && questionIndex > 0)
{
questionIndex--;
currentQuestion = questionList.item(questionIndex).innerHTML;
quizOutput.innerHTML = currentQuestion;
}
if(factor == 1 && questionIndex < totalQuestions)
{
questionIndex++;
currentQuestion = questionList.item(questionIndex).innerHTML;
quizOutput.innerHTML = currentQuestion;
}
}
function writeNumber(el, num)
{
input = document.getElementById(el);
if(input.value.length < 2)
{
input.value += num;
}
}
function clearAnswer(el)
{
document.getElementById(el).value = "";
}
function takeValues()
{
var x = document.getElementById("frm1");
var text = "";
var i;
for (i = 0; i < x.length ;i++)
{
text += x.elements[i].value + "<br>";
}
document.getElementById("demo").innerHTML = text;
}

Its because every time you load a different question, you are actually removing the DOM elements without saving them. When you return to the previous questions, you aren't loading their values from anywhere. You need to build a state into your app for it to work.

I will suggest using javascript FormData object to get entries of input values .
First removing all the "form" elements from your html but keep their inner elements.
Then make "showQuiz" div into a form element.
Then create 1 single form ( I set this form to have id "form1") to contain all the questions and the submit button .
Then modify the javascript function changeQuestion as follow:
function changeQuestion(factor)
{
var myform = document.getElementById("showQuiz");
var fdata = new FormData(myform);
var storeForm = document.getElementById("form1");
var sdata = new FormData(storeForm);
for (var pair of fdata.entries()) {
var elem = document.getElementsByName(pair[0])[0];
storeForm.elements[pair[0]].value = pair[1];
}
if(factor == -1 && questionIndex > 0)
{
questionIndex--;
currentQuestion = questionList.item(questionIndex).innerHTML;
quizOutput.innerHTML = currentQuestion;
}
if(factor == 1 && questionIndex < totalQuestions)
{
questionIndex++;
currentQuestion = questionList.item(questionIndex).innerHTML;
quizOutput.innerHTML = currentQuestion;
}
myform = document.getElementById("showQuiz");
storeForm = document.getElementById("form1");
fdata = new FormData(myform);
sdata = new FormData(storeForm);
for (var pair of sdata.entries()) {
var fld = myform.elements[pair[0]];
if (fld)
fld.value = pair[1];
}
}

Why I split a specific array in a two-dimensional array but it also split another array as well

I have never faced this problem before and I really don't know how or why this can be occuring. Can anyone explain this for me?
There is also an image as well and it is on the top. As you can see in the picture, the last array didn't change while other arrays changed.
Here is the method (where I am facing my problem)
Object.prototype.createObject = function(name){
this[name] = [];
}
Array.prototype.matrixCreator = function(a3,b3){
var length = this.length;
if((this[1][0] && this[0][1]) === undefined){
var array1 = new Array(length-1);
for(var d3=0;d3<length-1;d3++){
array1[d3] = new Array(length-1);
}
}else{
var array = new Array(length);
for(var e3=0;e3<length;e3++){
array[e3] = new Array(length);
}
}
for(var c3=0;c3<length;c3++){
this[c3].splice(b3,1);
document.writeln(this[c3]);
if(c3 === a3){ // this prototype doesn't support the new design of matrix about spliting
if(c3===0){
this.splice(a3,1);
length--;
}else{
this.splice(a3,1);
c3--;
length--;
}
}
}
var f3;
var g3;
if((this[1][0] && this[0][1]) === undefined){
array1[0][0] = this[a][b];
for(var h3=1;h3<length;h3++){
for(var i3=1;i3<length;i3++){
array1[h3][i3] = this[h3][i3];
}
}
return array1;
}else{
array[0][0] = this[a3][b3];
for(var j3=1;j3<length+1;j3++){
for(var l3=1;l3<length+1;l3++){
f3 = j3-1;
g3 = l3-1;
array[j3][l3] = this[f3][g3];
}
}
return array;
}
}
// Here is the test code for my method:
var button = document.getElementById("button");
button.addEventListener("click",function(){
var array10 = new Array(4);
for(var b=0;b<4;b++){
array10[b] = [];
}
var array3 = [1,2,3,4];
var array4 = [5,6,7,8];
for(var c=0;c<4;c++){
array10[c]=array3;
array10[c+1]=array4;
}
var n = array10.length;
var controller = -1;
var key=0;var key1=0;
var obj ={};
var array=[]; var array1=[];
var flow=0;
while(key1 === 0){
for(var a=0;a<n;a++){
var string = "array" + a;
if(key==0){
obj.createObject(string);
array = array10.matrixCreator(0,a);
obj[string].push(array);
document.writeln(obj[string]);
}else{
for(var d=1;d<flow;d++){
array = obj[string][controller].matrixCreator(1,d);
obj[string].push(array);
document.writeln(obj[string]);
}
}
}
key=1;
controller++;
flow = obj[string][controller].length;
if(flow === 3){
break;
}
}
});
html code:
<input type="button" id="button" value="press here"/>

Populate form from JSON.parse

I am trying to re-populate a form from some values in localStorage. I can't quite manage the last part to get the loop to populate my name and values.
function loadFromLocalStorage() {
PROCESS_SAVE = true;
var store = localStorage.getItem(STORE_KEY);
var jsn = JSON.parse(store);
console.log(jsn);
if(store.length === 0) {
return false;
}
var s = jsn.length-1;
console.log(s);
for (var i = 0; i < s.length; i++) {
var formInput = s[i];
console.log(s[i]);
$("form input[name='" + formInput.name +"']").val(formInput.value);
}
}
Could I get some pointers please.

Your issue is in this section of code.
var s = jsn.length-1;
console.log(s);
for (var i = 0; i < s.length; i++) {
You are setting s to the length of the jsn array minus 1, then using it as if it were jsn. I think you intended something like this.
function loadFromLocalStorage() {
PROCESS_SAVE = true;
var store = localStorage.getItem(STORE_KEY);
var jsn = JSON.parse(store);
console.log(jsn);
if(store.length === 0) {
return false;
}
for (var i = 0; i < jsn.length; i++) {
var formInput = jsn[i];
console.log(jsn[i]);
$("form input[name='" + formInput.name +"']").val(formInput.value);
}
}

avoid sorting in the JSP pages

var sortitems = 1;
function move(fbox, tbox, all)
{
for ( var i = 0; i < fbox.options.length; i++)
{
if (!all && fbox.options[i].selected && fbox.options[i].value != "")
{
var no = new Option();
no.value = fbox.options[i].value;
no.text = fbox.options[i].text;
tbox.options[tbox.options.length] = no;
fbox.options[i].value = "";
fbox.options[i].text = "";
}
else
{
if (all && fbox.options[i].value != "")
{
var no = new Option();
no.value = fbox.options[i].value;
no.text = fbox.options[i].text;
tbox.options[tbox.options.length] = no;
fbox.options[i].value = "";
fbox.options[i].text = "";
}
}
}
BumpUp(fbox);
if (sortitems)
SortD(tbox);
checkSelectAll();
}
This move function is getting called after clicking on the button, then it will call the sort method where sorting is happening by alphabetically. So we dont need to sort we need to populate the data as it is from the left side box to right side box and vice versa, but sorting is happening. Please help out be here.
function SortD(box)
{
var temp_opts = new Array();
var temp = new Object();
for ( var i = 0; i < box.options.length; i++)
{
temp_opts[i] = box.options[i];
}
for ( var x = 0; x < temp_opts.length - 1; x++)
{
for ( var y = (x + 1); y < temp_opts.length; y++)
{
if (temp_opts[x].value > temp_opts[y].value)
{
temp = temp_opts[x].text;
temp_opts[x].text = temp_opts[y].text;
temp_opts[y].text = temp;
temp = temp_opts[x].value;
temp_opts[x].value = temp_opts[y].value;
temp_opts[y].value = temp;
}
}
}
for ( var i = 0; i < box.options.length; i++)
{
box.options[i].value = temp_opts[i].value;
box.options[i].text = temp_opts[i].text;
}
}
Depends on the bumpup box function. The elements are moving from one box to another. It will replace the element with empty space and move to top and do for all the elements. Please help out me here
Thanks in advance
function BumpUp(box)
{
for ( var i = 0; i < box.options.length; i++)
{
if (box.options[i].value == "")
{
for ( var j = i; j < box.options.length - 1; j++)
{
box.options[j].value = box.options[j + 1].value;
box.options[j].text = box.options[j + 1].text;
}
var ln = i;
break;
}
}
if (ln < box.options.length)
{
box.options.length -= 1;
BumpUp(box);
}
}

Maybe it's just me, but it's hard to see what the issue is here.
If it is simply that SortD(tbox) is being called within the move() function, that's because
sortitems is set to 1 right at the top of the code. The value of sortitems is never changed anywhere else, so this conditional is always true and SortD is always called.
if (sortitems)
SortD(tbox);

Why is my local storage not working?

Each user can dynamically create a table from a form. I am trying to save the table and its current state to local storage every time a change is made or the person exits the page. Name stores the name of the user and I am using it as a key. However, it is not working for me. I think I am saving the data when I need to using the saveData function and parsing it when I need to with the showData function. Can anyone tell me where I am going wrong please?
userDiv.onclick=(function() {
alert($(this).attr("id"));
name= $(this).attr("id");
window.location.href = "Createtask.html";
showData();//TRYING TO SHOW THE USER'S TABLE WHEN PAGE OPENS
}
function makeChart() {
table = document.createElement('table');
var taskName = document.getElementById('taskname').value,
header = document.createElement('th'),
numDays = document.getElementById('days').value, //columns
howOften = document.getElementById('times').value, //rows
row,
r,
col,
c;
var counter = 0;
var target = numDays * howOften;
var cel = null;
var myImages = new Array();
myImages[0] = "http://www.olsug.org/wiki/images/9/95/Tux-small.png";
myImages[1] = "http://a2.twimg.com/profile_images/1139237954/just-logo_normal.png";
var my_div = document.createElement("div");
my_div.id = "showPics";
document.body.appendChild(my_div);
var newList = document.createElement("ul");
my_div.appendChild(newList);
if (taskName == '' || numDays == '') {
alert('Please enter task name and number of days');
}
if (howOften == '') {
howOften = 1;
}
if (taskName != '' && numDays != '') {
for (var i = 0; i < myImages.length; i++) {
var allImages = new Image();
allImages.src = myImages[i];
allImages.onclick = function (e) {
if (sel !== null) {
sel.src = e.target.src;
my_div.style.display = 'none';
sel.onclick = null;
counter++;
sel = null;
if (counter == target) {
alert("Show some fireworks "+name+" gets a reward");
}
}
};
var li = document.createElement('ul');
li.appendChild(allImages);
newList.appendChild(li);
}
my_div.style.display = 'none';
header.innerHTML = taskName;
table.appendChild(header);
function addImage(col) {
var img = new Image();
img.src = "http://cdn.sstatic.net/stackoverflow/img/tag-adobe.png";
col.appendChild(img);
img.onclick = function () {
my_div.style.display = 'block';
sel = img;
saveData();
};
}
for (r = 0; r < howOften; r++) {
row = table.insertRow(-1);
for (c = 0; c < numDays; c++) {
col = row.insertCell(-1);
addImage(col);
}
}
document.getElementById('theRealHoldTable').appendChild(table);
document.getElementById('createChart').onclick = null;
saveData();/CALLING THE LOCAL STORAGE WHEN TABLE IS CREATED
}
}
function saveData(){
localStorage.setItem(name, JSON.stringify(table.innerHTML));
}
function showData(){
JSON.parse(localStorage.getItem( name ));
}

you are trying to stringify html-markup, which is not working! you are only able to JSON.stringify an js-object which means an instance of a class, an object literal or an array:
// this works because it is an instance
var objInstance = new SomeClass();
JSON.stringfy(objInstance);
// this works as it is an object-literal
var objLiteral = { mykey: 'myvalue' };
JSON.stringfy(objLiteral);
// this works as it is an array
var arr = [1, 2, 3]
JSON.stringfy(arr);
// THIS DOES NOT WORK!!!
JSON.stringify('<div>...</div>');
just strip the JSON.stringify part of your methods, that should work because element.innerHTML already returns a string:
function saveData(){
localStorage.setItem(name, table.innerHTML);
}
function showData(){
localStorage.getItem(name);
}