I have 3 html pages where 2 pages each have question 1 and question 2. The 3rd page shows the score of the test. I have designed the pages and now i want to keep track of the user scores. I'm not allowed to use local storage, cookies, database or sessions. I am suppose to pass the variable(to track each users answers) from one html page to another without using local storage or sessions, or cookies, and a DB.
Now in my external js file, have functions getAnswer1(form) which stores the user answer and passes the array to quiz_2.html file. I found an example online to pass a variable but having trouble retrieving the array in second function called getAnswer2(form) and storing the users second input. How do I go about that?
HTML Page 1:
First page user selects 2 answers. A simple fill in the blank question and retrieve the answer. As you can see I assigned the right answers with correct.
<div>
<form>
<input type="radio" name="one" value="correct" class="firstRow"> Option 1 Mark 1: $650
<input type="radio" name="two" value="correct" class="secondRow"> Option 1 Mark 2: Twitter<br>
<input type="radio" name="one" value="incorrect" class="firstRow"> Option 2 Mark 1:$550
<input type="radio" name="two" value="incorrect" class="secondRow"> Option 2 Mark 2:Google<br>
<input type="radio" name="one" value="incorrect" class="firstRow"> Option 3 Mark 1:$650
<input type="radio" name="two" value="incorrect" class="secondRow"> Option 3 Mark 2:$650<br>
<input type="button" value="Submit & Next Question" onclick="getAnswer1(this.form)" class="firstRow">
<input type="button" value="Cancel & Clear Selection" onclick="clearOptions(this.form)">
</form>
</div>
I have a external js file that holds the function to store the answers and performs necessary computation. I store the users answers in an array. I called the first function:
function getAnswer1(form) {
var results = [];
var a = [];
var value;
var checked = form.querySelectorAll("input[type=radio]:checked");
if(checked.length<2) {
alert('Please select an option');
return;
}
else {
var n = checked.length;
for(var i=0;i<n;i++) {
a.push(checked[i].value);
}
}
results.push(encodeURIComponent('key')+'='+encodeURIComponent(a))
location.href = 'quiz_2.html?'+results.join('&');
}
The second question:
<div>
<form>
<input type="radio" name="radio" value="correct" class="firstRow"> NASA.Gov
<input type="radio" name="radio" value="incorrect" class="secondRow"> Data.Gov <br>
<input type="radio" name="radio" value="incorrect" class="firstRow"> Facebook
<input type="radio" name="radio" value="incorrect" class="secondRow"> XYZ.net <br>
<input type="button" value="Submit & Next Question" onclick="getAnswer2(this.form)" class="firstRow">
<input type="button" value="Cancel & Clear Selection" onclick="clearOptions(this.form)" class="secondRow">
</form>
</div>
Javascript:
As you can see below here I should be accepting a users 2nd test input and report the final scores to the survey but having difficulty retrieving the array variable and storing the answer.
function getAnswer2(form) {
var value;
var retrieveArray = {};
var fs = location.search.replace('?', '').split('&');
for(var i=0,l=fs.length; i<l; i++){
var z = fs[i].split('=');
retrieveArray[decodeURIComponent(z[0])] = decodeURIComponent(z[1]);
}
var checked = form.querySelector("input[type=radio]:checked");
if(!checked){
alert('Please select an option');
}
else{
value = checked.value;
}
location.href = "survey.html";
}
